/* Levensalbum. Gedeelde stijl voor alle pagina's (ook /bestellen/ via traject.css).
   Kleuren en letters van het boek: proefboek/sjabloon/stijl.css */
:root {
  /* kleuren uit het zegel (merk/logo) */
  --papier: #f7f1e6;
  --blad: #fffcf5;
  --vlak: #efe5d4;
  --blos: #f3dedb;
  --salie: #e3e8d8;
  --boter: #f2e6cb;
  --roos: #a3485b;
  --roos-donker: #86384a;
  --wijn: #5a2131;
  --olijf: #3d4729;
  --rug: #2f3b33;
  --voet: #2a1f17;
  --inkt: #2a1e16;
  --zacht: #66574c;
  --goud: #8a6528;
  --goud-tekst: #7a5822;
  --goud-licht: #d9b56d;
  --op-donker: #f3ead9;
  --lijn: #e3d6c3;
  /* ornament uit het zegel: goudlijn met tulpknop */
  --sier: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 52 14'%3E%3Cpath d='M0 7.5h34' stroke='%238a6528' stroke-width='1.4'/%3E%3Cg fill='%239c4854'%3E%3Cpath d='M44 1c1.7 2.5 1.7 6 0 9.2-1.7-3.2-1.7-6.7 0-9.2z'/%3E%3Cpath d='M44 10.2c-3-.4-5.5-3-5.7-6.2 2.7.6 4.9 2.9 5.7 6.2z'/%3E%3Cpath d='M44 10.2c3-.4 5.5-3 5.7-6.2-2.7.6-4.9 2.9-5.7 6.2z'/%3E%3C/g%3E%3C/svg%3E");
  --sier-licht: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 52 14'%3E%3Cpath d='M0 7.5h34' stroke='%23d9b56d' stroke-width='1.4'/%3E%3Cg fill='%23ebb2bd'%3E%3Cpath d='M44 1c1.7 2.5 1.7 6 0 9.2-1.7-3.2-1.7-6.7 0-9.2z'/%3E%3Cpath d='M44 10.2c-3-.4-5.5-3-5.7-6.2 2.7.6 4.9 2.9 5.7 6.2z'/%3E%3Cpath d='M44 10.2c3-.4 5.5-3 5.7-6.2-2.7.6-4.9 2.9-5.7 6.2z'/%3E%3C/g%3E%3C/svg%3E");
  /* oude namen, gebruikt door traject.css */
  --groen: var(--roos);
  --groen-donker: var(--roos-donker);

  --s1: 4px; --s2: 8px; --s3: 16px; --s4: 24px; --s5: 40px; --s6: 64px; --s7: 112px;
  --breed: 1320px; /* gelijk aan de homepage (v5.css: --rand) */
  --display: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --boek: "EB Garamond", "Cormorant Garamond", Georgia, serif;
  --tekst: "Atkinson Hyperlegible Next", "Segoe UI", system-ui, sans-serif;
  --zacht-uit: cubic-bezier(.22, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--papier);
  color: var(--inkt);
  font-family: var(--tekst);
  font-size: 1.1875rem;
  line-height: 1.6;
  overflow-x: hidden;
  overflow-wrap: break-word;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--roos); text-decoration-thickness: 1px; text-underline-offset: 4px; }
:focus-visible { outline: 3px solid var(--roos); outline-offset: 3px; }
h1, h2, h3 { text-wrap: balance; }
h1, h2 { font-family: var(--display); font-weight: 600; line-height: 1.04; letter-spacing: -.01em; margin: 0; }
h1 em, h2 em { font-style: italic; font-weight: 500; color: var(--roos); }
h2 { font-size: clamp(2.3rem, 1.5rem + 2.8vw, 3.8rem); }
h3 { margin: 0 0 var(--s2); line-height: 1.25; }
p { margin: 0 0 var(--s3); }
.overslaan { position: absolute; left: -9999px; }
.overslaan:focus { left: var(--s3); top: var(--s3); z-index: 40; background: var(--blad); padding: var(--s2) var(--s3); }
.ph { background: #f3e2a4; padding: 0 5px; color: var(--inkt); }

.bovenregel {
  display: flex; align-items: center; gap: 12px; margin: 0 0 var(--s4);
  color: var(--goud-tekst); font-weight: 600; font-size: .9375rem; letter-spacing: .14em; text-transform: uppercase;
}
.bovenregel::before { content: ""; width: 52px; height: 14px; flex: none; background: var(--sier) no-repeat center / contain; }
.intro { font-size: 1.3125rem; color: var(--zacht); }

/* ---------- knoppen ---------- */
.knoppen { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s5); }
.knop {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 58px; padding: 8px 28px; border: 1.5px solid var(--roos); border-radius: 3px;
  background: var(--roos); color: #fff;
  font: 600 1.1875rem/1.2 var(--tekst); text-decoration: none; cursor: pointer;
  transition: background-color .3s var(--zacht-uit), border-color .3s var(--zacht-uit);
}
.knop:hover { background: var(--roos-donker); border-color: var(--roos-donker); }
.knop .pijl { transition: transform .3s var(--zacht-uit); }
.knop:hover .pijl { transform: translateX(4px); }
.knop-klein { min-height: 46px; padding: 6px 20px; font-size: 1.0625rem; }
.knop-licht { background: transparent; color: var(--inkt); border-color: var(--inkt); }
.knop-licht:hover { background: var(--inkt); border-color: var(--inkt); color: #fff; }
.tekstlink { color: var(--inkt); font-weight: 600; text-decoration: underline; text-decoration-color: var(--roos); text-decoration-thickness: 2px; text-underline-offset: 7px; padding: 10px 0; }
.tekstlink:hover { color: var(--roos); }

/* ---------- bovenbalk en kop ---------- */
.balk { margin: 0; padding: 10px var(--s3); background: var(--wijn); color: var(--op-donker); text-align: center; font-size: 1.0625rem; }
.balk a { color: var(--goud-licht); font-weight: 600; margin-left: var(--s2); }

.kop { position: relative; z-index: 20; border-bottom: 4px double var(--goud); background: var(--papier); }
.kop-binnen {
  max-width: var(--breed); margin: 0 auto; padding: 14px var(--s4);
  display: flex; align-items: center; justify-content: space-between; gap: var(--s4);
}
.merk { text-decoration: none; color: var(--inkt); display: flex; flex-direction: column; line-height: 1; }
.merk-naam { font-family: var(--display); font-weight: 700; font-size: 1.9rem; letter-spacing: -.01em; }
.merk-met-icoon { flex-direction: row; align-items: center; gap: 12px; }
.merk-icoon { width: 48px; height: 48px; flex: none; }
.merk-tekst { display: flex; flex-direction: column; }
.colofon-zegel { width: 120px; height: 120px; margin: var(--s2) 0 var(--s4); }
.merk-sub { font-family: var(--display); font-style: italic; color: var(--roos); font-size: 1.05rem; margin-top: 3px; }
.menu { display: flex; align-items: center; gap: var(--s4); }
.menu-groot { display: flex; gap: 26px; list-style: none; margin: 0; padding: 0; }
.menu-groot a { color: var(--inkt); text-decoration: none; font-size: 1.0625rem; padding: var(--s2) 0; }
.menu-groot a:hover { color: var(--roos); text-decoration: underline; }
.menu-mobiel, .menu-bestel { display: none; }

/* ---------- held ---------- */
.held-tekst {
  max-width: var(--breed); margin: 0 auto; padding: var(--s6) var(--s4) var(--s5);
  display: grid; grid-template-columns: 1.15fr .85fr; gap: var(--s3) var(--s6); align-items: end;
}
.held h1 { font-size: clamp(3rem, 1.7rem + 4.2vw, 5.8rem); }
.held h1 em { display: block; }
.held .intro { margin-bottom: var(--s4); }
.held-prijs { margin: var(--s3) 0 0; color: var(--zacht); }
.held-prijs strong { color: var(--inkt); }

/* ---------- het voorbeeldboek op tafel ---------- */
.tafel {
  padding: var(--s6) var(--s4) var(--s5); overflow: hidden; color: var(--op-donker);
  background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .025) 0 1px, transparent 1px 3px), repeating-linear-gradient(90deg, rgba(0, 0, 0, .06) 0 1px, transparent 1px 3px), var(--wijn);
}
.boek { position: relative; max-width: 1160px; margin: 0 auto; transition: transform 1.1s var(--zacht-uit); --schaal: .5; }
.boek[data-stand="0"] { transform: translateX(-25%); }
.boek::after {
  content: ""; position: absolute; left: 3%; right: 3%; bottom: -5%; height: 10%; z-index: -1;
  background: radial-gradient(closest-side, rgba(47, 38, 38, .28), transparent);
}
.boek-binnen { position: relative; aspect-ratio: 2.812; perspective: 3000px; }
.vel { position: absolute; top: 0; left: 50%; width: 50%; height: 100%; transform-origin: left center; transform-style: preserve-3d; transition: transform 1.25s cubic-bezier(.5, .05, .2, 1); cursor: pointer; }
.vel.om { transform: rotateY(-180deg); }
.zijde, .onderblad { position: absolute; inset: 0; overflow: hidden; background: #fffdf9; }
.zijde { backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.zijde.achter { transform: rotateY(180deg); }
.onderblad { left: 50%; width: 50%; z-index: 1; }
/* binnenkant van de rug en bladranden */
.zijde.voor::after, .onderblad::after, .zijde.achter::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.zijde.voor::after, .onderblad::after { background: linear-gradient(to right, rgba(47, 38, 38, .18), rgba(47, 38, 38, .04) 4%, transparent 9%); }
.zijde.achter::after { background: linear-gradient(to left, rgba(47, 38, 38, .18), rgba(47, 38, 38, .04) 4%, transparent 9%); }
.zijde.voor, .onderblad { box-shadow: 1px 1px 0 #ede4d7, 3px 2px 0 #fffdf9, 4px 3px 0 #e4d9ca, 18px 22px 30px -18px rgba(47, 38, 38, .35); }
.zijde.achter { box-shadow: -1px 1px 0 #ede4d7, -3px 2px 0 #fffdf9, -4px 3px 0 #e4d9ca, -18px 22px 30px -18px rgba(47, 38, 38, .35); }
.vel:first-child .zijde.voor::after { background: linear-gradient(to right, rgba(0, 0, 0, .2), transparent 5%); }

/* bladzijden op echte maat (303 x 215,5 mm incl. afloop), verkleind met --schaal */
.bp {
  position: absolute; top: 0; left: 0; width: 303mm; height: 215.5mm;
  transform: scale(var(--schaal)); transform-origin: 0 0;
  font-family: var(--boek); font-size: 12.5pt; line-height: 1.58; color: #2a2521;
  font-variant-numeric: oldstyle-nums; overflow: hidden; background: #fffdf9;
}
.bp img { max-width: none; }
.b-label { font-variant-caps: all-small-caps; letter-spacing: .2em; color: #8c6a3c; font-size: 12pt; }
.b-folio { position: absolute; bottom: 10mm; left: 0; right: 0; text-align: center; font-size: 9.5pt; color: #6b6158; }

.bp.omslag { background: #f6f1e8; }
.om-foto { position: absolute; left: 28mm; top: 30mm; width: 120mm; height: 156mm; overflow: hidden; }
.om-foto img, .op-foto img, .fotopagina img { width: 100%; height: 100%; object-fit: cover; }
.om-tekst { position: absolute; left: 170mm; right: 22mm; top: 0; bottom: 0; display: flex; flex-direction: column; justify-content: center; }
.om-boven { font-variant-caps: all-small-caps; letter-spacing: .2em; color: #8c6a3c; font-size: 13pt; }
.om-naam { font-family: var(--display); font-weight: 500; font-size: 54pt; line-height: 1; margin: 6mm 0 4mm; }
.om-ond { font-style: italic; font-size: 17pt; color: #6b6158; }
.om-jaren { margin-top: 9mm; font-size: 13pt; letter-spacing: .12em; }

.bp.titel { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; }
.t-boven { font-variant-caps: all-small-caps; letter-spacing: .18em; color: #8c6a3c; font-size: 12pt; }
.t-naam { font-family: var(--display); font-weight: 500; font-size: 46pt; line-height: 1.05; margin: 8mm 0 4mm; }
.t-ond { font-style: italic; font-size: 16pt; color: #6b6158; }
.t-jaren { margin-top: 10mm; font-size: 12pt; letter-spacing: .12em; }
.t-orn { width: 34mm; height: 1px; background: #8c6a3c; margin-top: 9mm; }

.bp.opener { display: grid; grid-template-columns: 52% 48%; background: #f6f1e8; }
.op-foto { position: relative; overflow: hidden; }
.op-foto img { position: absolute; inset: 0; }
.op-kop { padding: 0 24mm 0 18mm; display: flex; flex-direction: column; justify-content: center; }
.op-titel { font-family: var(--display); font-weight: 500; font-size: 36pt; line-height: 1.08; margin: 5mm 0 4mm; }
.op-periode { font-size: 13pt; color: #6b6158; letter-spacing: .08em; }
.op-kop blockquote { margin: 12mm 0 0; padding-top: 7mm; border-top: .5pt solid #8c6a3c; font-style: italic; font-size: 14.5pt; line-height: 1.45; }

.bp.tekst { padding: 24mm 27mm 26mm; }
.kolommen { columns: 2; column-gap: 11mm; column-fill: balance; }
.kolommen p { margin: 0; }
.kolommen p + p { text-indent: 1.4em; }
.kolommen .eerste::first-letter { font-family: var(--display); font-weight: 600; float: left; font-size: 46pt; line-height: .82; padding: 1.2mm 2mm 0 0; color: #8c6a3c; }
.kolommen blockquote { break-inside: avoid; margin: 5mm 0; padding: 4mm 0; border-top: .5pt solid #8c6a3c; border-bottom: .5pt solid #8c6a3c; font-family: var(--display); font-style: italic; font-weight: 500; font-size: 17pt; line-height: 1.3; text-align: center; }
.b-luister { break-inside: avoid; margin-top: 7mm; padding: 4mm; display: flex; gap: 5mm; align-items: center; background: #f6f1e8; border-radius: 1.5mm; font-family: var(--boek); font-size: 10pt; line-height: 1.4; color: #2a2521; }
.b-luister img { width: 24mm; height: 24mm; flex: none; }
.b-luister strong { font-weight: 600; display: block; font-size: 11pt; }

.bp.vraag { background: #f6f1e8; padding: 32mm 46mm; display: flex; flex-direction: column; justify-content: center; }
.vr-vraag { font-family: var(--display); font-weight: 500; font-size: 30pt; line-height: 1.12; margin: 4mm 0 9mm; max-width: 190mm; }
.vr-antw { font-style: italic; font-size: 15pt; line-height: 1.55; margin: 0; max-width: 190mm; }
.vr-antw::before { content: "\201C"; } .vr-antw::after { content: "\201D"; }

.fp-onder { position: absolute; left: 27mm; bottom: 20mm; max-width: 140mm; background: rgba(246, 241, 232, .94); padding: 3.5mm 5mm; font-style: italic; font-size: 10.5pt; line-height: 1.35; }

/* sierlijke details, drukbaar in de kleur van het boek */
.b-sier { display: block; width: 52mm; height: 5.2mm; }
.om-kader { position: absolute; inset: 9mm 9mm 9mm 12mm; border: 2.4pt double rgba(140, 106, 60, .7); pointer-events: none; }
.om-foto { outline: .5pt solid #8c6a3c; outline-offset: 2.5mm; }
.om-sier { margin: 1mm 0 5mm; }
.t-sier { width: 64mm; height: 6.4mm; margin: 7mm 0 4mm; }
.t-opdracht { margin: 14mm 0 0; max-width: 150mm; font-style: italic; font-size: 13pt; line-height: 1.6; color: #6b6158; }
.op-sier { width: 46mm; height: 4.6mm; margin: 6mm 0 0; }
.op-sier + blockquote { border-top: 0; padding-top: 0; margin-top: 7mm; }
.b-kopregel { position: absolute; top: 12mm; left: 27mm; right: 27mm; text-align: center; font-variant-caps: all-small-caps; letter-spacing: .22em; font-size: 10pt; color: #8c6a3c; }
.b-folio::before { content: "4€9"; color: #8c6a3c; }
.b-folio::after { content: "€94"; color: #8c6a3c; }
.bp.collage { padding: 22mm 27mm 26mm; display: grid; grid-template-columns: 1fr 1fr; gap: 8mm; }
.collage figure { margin: 0; display: flex; flex-direction: column; min-height: 0; }
.collage .kader { flex: 1; min-height: 0; overflow: hidden; }
.collage .kader img { width: 100%; height: 100%; object-fit: cover; }
.collage figcaption { font-style: italic; font-size: 10pt; color: #6b6158; margin-top: 2.2mm; line-height: 1.35; }

/* leesvenster: de opengeslagen bladzijden groot */
.lees { border: 0; padding: 0; width: min(96vw, 1560px); max-width: none; max-height: 94vh; background: var(--vlak); color: var(--inkt); }
.lees::backdrop { background: rgba(47, 38, 38, .65); }
.lees-kop { position: sticky; top: 0; z-index: 2; display: flex; justify-content: flex-end; gap: 10px; padding: 12px 16px; background: var(--vlak); }
.lees-sluit { min-height: 58px; }
.lees-spread { display: grid; grid-template-columns: minmax(0, 1180px); justify-content: center; gap: 16px; padding: 0 16px 16px; }
.lees-pagina { position: relative; aspect-ratio: 303 / 215.5; overflow: hidden; background: #fffdf9; box-shadow: 0 10px 30px -18px rgba(47, 38, 38, .5); }

.blader { max-width: 1160px; margin: var(--s5) auto 0; display: flex; align-items: center; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; }
.lees-knop { background: none; border: 0; cursor: pointer; font: 600 1.125rem var(--tekst); }
.tafel .lees-knop { color: var(--op-donker); text-decoration-color: var(--goud-licht); }
.tafel .blader-knop { border-color: var(--op-donker); color: var(--op-donker); }
.tafel .blader-knop:not(:disabled):hover { background: var(--op-donker); color: var(--wijn); }
.tafel .knop-licht { color: var(--op-donker); border-color: var(--op-donker); }
.tafel .knop-licht:hover { background: var(--op-donker); color: var(--wijn); }
.blader-knoppen { display: flex; gap: 12px; }
.blader-knop { width: 58px; height: 58px; border: 1.5px solid var(--inkt); border-radius: 3px; background: transparent; color: var(--inkt); font-size: 1.4rem; cursor: pointer; }
.blader-knop:disabled { opacity: .3; cursor: default; }
.blader-knop:not(:disabled):hover { background: var(--inkt); color: #fff; }
#verder { min-width: 230px; }

/* ---------- secties ---------- */
.sectie-kop { max-width: var(--breed); margin: 0 auto var(--s6); }
.sectie-kop h2 { max-width: 16em; }

.werkwijze { padding: var(--s7) var(--s4); }
.tafereel { list-style: none; margin: 0 auto; padding: 0; max-width: var(--breed); display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s6) var(--s5); align-items: start; }
.tf:nth-child(2) { margin-top: 88px; }
.tf:nth-child(3) { margin-top: 28px; }
.tf-beeld { background: #fff; padding: 10px; margin-bottom: var(--s4); box-shadow: 0 1px 2px rgba(47, 38, 38, .12), 0 24px 40px -28px rgba(47, 38, 38, .45); }
.tf:nth-child(1) .tf-beeld { transform: rotate(-2deg); }
.tf:nth-child(2) .tf-beeld { transform: rotate(1.5deg); }
.tf:nth-child(3) .tf-beeld { transform: rotate(-1deg); }
.tf-beeld > img { aspect-ratio: 4 / 3.4; width: 100%; object-fit: cover; }
.tf-telefoon, .tf-stapel { aspect-ratio: 4 / 3.5; display: flex; align-items: center; justify-content: center; }
.tf h3 { font-family: var(--display); font-weight: 600; font-size: 1.9rem; display: flex; align-items: baseline; gap: 12px; }
.tf h3 { align-items: center; }
.tf h3 span { flex: none; width: 46px; height: 46px; border: 4px double var(--goud); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-family: var(--display); font-weight: 600; font-size: 1.5rem; color: var(--roos); line-height: 1; }
.tf p { color: var(--zacht); margin: 0; max-width: 22em; }

.tf-telefoon { background: var(--blos) content-box; }
.tf-telefoon .scherm {
  width: 62%; background: var(--blad); border-radius: 20px; padding: 16px 12px; display: flex; flex-direction: column; gap: 10px;
  box-shadow: 0 0 0 6px var(--inkt), 0 26px 34px -18px rgba(47, 38, 38, .55);
}
.bericht { border-radius: 10px; padding: 8px 10px; font-size: .95rem; line-height: 1.3; display: flex; align-items: center; gap: 8px; max-width: 92%; }
.bericht-in { background: #fff; box-shadow: 0 1px 2px rgba(47, 38, 38, .14); }
.mini-foto { width: 34px; height: 34px; border-radius: 4px; flex: none; background: url("/img/foto/verjaardag-klein.webp") center / cover; }
.bericht-uit { align-self: flex-end; background: #e2ecd6; }
.speel { flex: none; width: 26px; height: 26px; border-radius: 50%; background: #5d7454; position: relative; }
.speel::after { content: ""; position: absolute; left: 10px; top: 7px; border-left: 9px solid #fff; border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
.golf { display: inline-flex; align-items: center; gap: 3px; height: 20px; }
.golf i { display: block; width: 3px; height: 100%; border-radius: 2px; background: #5d7454; }
.golf i:nth-child(odd) { height: 55%; } .golf i:nth-child(3n) { height: 85%; } .golf i:nth-child(5n) { height: 35%; } .golf i:nth-child(7n) { height: 70%; }

.tf-stapel { background: var(--salie) content-box; }
.mini-boek {
  position: relative; display: flex; align-items: center; justify-content: flex-end; padding-right: 9%;
  width: 62%; aspect-ratio: 1.4; background: #f6f1e8; border-left: 9px solid var(--rug); border-radius: 1px 3px 3px 1px;
  box-shadow: 0 20px 28px -16px rgba(47, 38, 38, .55), inset 0 0 0 1px rgba(47, 38, 38, .08);
  font-family: var(--display); font-weight: 500; font-size: clamp(1.4rem, 2.2vw, 2rem); color: var(--inkt); transform: rotate(-4deg);
}
.mini-boek::before { content: ""; position: absolute; left: 9%; top: 16%; bottom: 16%; width: 36%; background: url("/img/foto/joke-mini.webp") center / cover; }

.stem { padding: var(--s7) var(--s4); background: var(--olijf); color: var(--op-donker); overflow: hidden; }
.stem h2 { color: var(--op-donker); }
.stem h2 em { color: #ebb2bd; }
.stem .bovenregel { color: var(--goud-licht); }
.stem .bovenregel::before { background-image: var(--sier-licht); }
.stem-binnen { max-width: var(--breed); margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: var(--s6); align-items: center; }
.stem-tekst h2 { margin-bottom: var(--s5); }
.stem-tekst p { font-size: 1.25rem; color: #e2dbc8; max-width: 28em; }
.stem-beeld { position: relative; min-height: 460px; }
.stem-blad { position: absolute; left: 0; top: 40px; width: 78%; aspect-ratio: 1.406; background: #fffdf9; padding: 0 8%; display: flex; align-items: flex-end; padding-bottom: 12%; transform: rotate(-4deg); box-shadow: 0 30px 50px -30px rgba(47, 38, 38, .5); }
.stem-blad .b-luister { margin: 0; padding: 14px; gap: 16px; font-size: .95rem; border-radius: 3px; width: 100%; max-width: 74%; }
.stem-blad .b-luister img { width: 92px; height: 92px; }
.stem-blad .b-luister strong { font-size: 1.05rem; }
.stem-telefoon { position: absolute; right: 4%; bottom: 0; width: 36%; aspect-ratio: 9 / 17; transform: rotate(6deg); border-radius: 30px; background: var(--inkt); padding: 9px; box-shadow: 0 40px 60px -30px rgba(47, 38, 38, .6); }
.stem-telefoon .scherm { height: 100%; border-radius: 22px; background: var(--blad); color: var(--inkt); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 16px; text-align: center; }
.tel-kop { margin: 0; font-size: .85rem; letter-spacing: .14em; text-transform: uppercase; color: var(--goud-tekst); font-weight: 600; }
.tel-titel { margin: 0 0 14px; font-family: var(--display); font-weight: 600; font-size: 1.35rem; line-height: 1.1; }
.speel-groot { width: 64px; height: 64px; background: var(--roos); }
.speel-groot::after { left: 25px; top: 20px; border-left-width: 20px; border-top-width: 12px; border-bottom-width: 12px; }
.golf-groot { height: 30px; margin-top: 12px; max-width: 80%; overflow: hidden; }
.golf-groot i { width: 4px; background: var(--roos); }

.afspraak { padding: var(--s7) var(--s4); background: var(--blos); }
.afspraak-binnen { max-width: var(--breed); margin: 0 auto; display: grid; grid-template-columns: .8fr 1.2fr; gap: var(--s6); }
.afspraak-lijst { list-style: none; counter-reset: a; margin: 0; padding: 0; border-top: 1px solid rgba(47, 38, 38, .2); }
.afspraak-lijst li { counter-increment: a; position: relative; padding: var(--s4) 0 var(--s4) 56px; border-bottom: 1px solid rgba(47, 38, 38, .2); font-size: 1.25rem; color: var(--zacht); }
.afspraak-lijst li::before { content: counter(a); position: absolute; left: 0; top: var(--s4); font-family: var(--display); font-style: italic; font-size: 2rem; line-height: 1; color: var(--roos); }
.afspraak-lijst strong { color: var(--inkt); }

.prijzen { padding: var(--s7) var(--s4); }
.pakketten { max-width: var(--breed); margin: 0 auto; display: grid; grid-template-columns: 1fr 1.15fr 1fr; border-top: 1px solid var(--inkt); border-bottom: 1px solid var(--lijn); }
.pakket { padding: var(--s5) var(--s5) var(--s5) 0; display: flex; flex-direction: column; align-items: flex-start; }
.pakket + .pakket { border-left: 1px solid var(--lijn); padding-left: var(--s5); }
.pakket-hoofd { background: var(--wijn); color: var(--op-donker); padding-left: var(--s5); }
.pakket-hoofd .prijs { color: var(--goud-licht); }
.pakket-hoofd li { border-bottom-color: rgba(243, 234, 217, .18); }
.pakket-hoofd li::before { color: var(--goud-licht); }
.pakket-hoofd p.upgrade { margin: 0 0 var(--s4); padding: var(--s3); border: 1px solid var(--goud-licht); color: var(--op-donker); font-size: 1rem; line-height: 1.5; }
.pakket-hoofd p.upgrade strong { display: block; font-family: var(--display); font-size: 1.35rem; font-weight: 600; color: var(--goud-licht); margin-bottom: 2px; }
.pakket-hoofd .knop { background: var(--goud-licht); border-color: var(--goud-licht); color: var(--inkt); }
.pakket-hoofd .knop:hover { background: #e8c983; border-color: #e8c983; }
.pakket h3 { font-family: var(--display); font-weight: 600; font-size: 2rem; margin: 0; }
.prijs { font-family: var(--display); font-weight: 600; font-size: 3.4rem; line-height: 1; color: var(--roos); font-variant-numeric: lining-nums; margin: var(--s2) 0 var(--s4); }
.pakket p:not(.prijs):not(.upgrade) { color: var(--zacht); }
.pakket .tekstlink { margin-top: auto; }
.pakket ul { list-style: none; margin: 0 0 var(--s4); padding: 0; width: 100%; }
.pakket li { padding: 10px 0; border-bottom: 1px solid var(--lijn); }
.pakket li::before { content: "\2014"; color: var(--roos); margin-right: 10px; }
.pakket-hoofd .knop { margin-top: auto; }
.prijs-extra { max-width: var(--breed); margin: var(--s4) auto 0; color: var(--zacht); }
.gemaakt { max-width: var(--breed); margin: var(--s6) auto 0; }
.gemaakt h3 { font-family: var(--display); font-weight: 600; font-size: 1.9rem; margin-bottom: var(--s4); }
.gemaakt dl { margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--inkt); }
.gemaakt dl > div { padding: var(--s4) var(--s4) var(--s4) 0; }
.gemaakt dl > div + div { border-left: 1px solid var(--lijn); padding-left: var(--s4); }
.gemaakt dt { font-weight: 600; font-size: .9375rem; letter-spacing: .14em; text-transform: uppercase; color: var(--goud-tekst); margin-bottom: var(--s2); }
.gemaakt dd { margin: 0; color: var(--zacht); }

.feest { padding: var(--s7) var(--s4); background: var(--blos); overflow: hidden; }
.feest-binnen { max-width: var(--breed); margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: var(--s6); align-items: center; }
.feest-tekst h2 { margin-bottom: var(--s4); }
.feest-tekst p { font-size: 1.25rem; color: var(--zacht); max-width: 26em; margin-bottom: var(--s5); }
.blaadjes { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); }
.kalender { position: relative; background: #fff; padding: 52px var(--s4) var(--s4); text-align: center; box-shadow: 0 1px 2px rgba(47, 38, 38, .12), 0 30px 46px -32px rgba(47, 38, 38, .5); }
.kalender:nth-child(1) { transform: rotate(-2deg); }
.kalender:nth-child(2) { transform: rotate(1.5deg) translateY(24px); }
.kalender::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 32px; background: var(--wijn); }
.kalender::after { content: ""; position: absolute; left: 22%; right: 22%; top: -7px; height: 16px; background: radial-gradient(circle, transparent 0 4px, var(--inkt) 4.5px 6px, transparent 6.5px) 0 0 / 25% 100% repeat-x; }
.kal-maand { font-variant-caps: all-small-caps; letter-spacing: .18em; color: var(--goud-tekst); margin: 0; font-size: 1.125rem; }
.kal-dag { font-family: var(--display); font-weight: 600; font-size: 5.6rem; line-height: .9; margin: 0 0 var(--s2); font-variant-numeric: lining-nums; }
.kalender h3 { font-family: var(--display); font-weight: 600; font-size: 1.9rem; margin: 0; }
.kal-regel { color: var(--zacht); margin: 0 0 var(--s3); }
.deadline-plekken { margin: 0 0 var(--s2); }
.deadline-plekken strong { font-family: var(--display); font-size: 1.8rem; color: var(--roos); font-variant-numeric: lining-nums; }
.stippen { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; }
.stippen i { width: 11px; height: 11px; border-radius: 50%; background: var(--roos); }
.stippen i.weg { background: var(--lijn); }
.kalender.dicht { opacity: .6; }
.kalender.dicht .kal-dag { text-decoration: line-through; text-decoration-thickness: 3px; }

.vragen { padding: var(--s7) var(--s4); background: var(--boter); }
.vragen-binnen { max-width: var(--breed); margin: 0 auto; display: grid; grid-template-columns: .8fr 1.2fr; gap: var(--s6); }
.vragenlijst { list-style: none; counter-reset: v; margin: 0; padding: 0; border-top: 1px solid rgba(140, 106, 60, .5); }
.vragenlijst li { counter-increment: v; display: grid; grid-template-columns: 56px 1fr; align-items: baseline; padding: 18px 0; border-bottom: 1px solid rgba(140, 106, 60, .3); font-family: var(--display); font-style: italic; font-weight: 500; font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); line-height: 1.2; }
.vragenlijst li::before { content: counter(v); font-family: var(--tekst); font-style: normal; font-size: .95rem; font-weight: 600; color: var(--goud-tekst); }

.faq-sectie { max-width: var(--breed); margin: 0 auto; padding: var(--s7) var(--s4); display: grid; grid-template-columns: .8fr 1.2fr; gap: var(--s6); }
.faq-kop h2 { margin-bottom: var(--s4); }
.faq { border-top: 1px solid var(--inkt); }
.faq details { border-bottom: 1px solid var(--lijn); }
.faq summary { cursor: pointer; list-style: none; min-height: 72px; padding: var(--s3) 56px var(--s3) 0; display: flex; align-items: center; font-weight: 600; font-size: 1.25rem; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 8px; font: 500 2rem/1 var(--display); color: var(--goud); }
.faq details[open] summary::after { content: "\2212"; }
.faq details p { padding: 0 0 var(--s4); margin: 0; color: var(--zacht); max-width: 40em; }

.slot { padding: var(--s7) var(--s4); text-align: center; background: var(--wijn); color: var(--op-donker); }
.slot-zegel { width: 150px; height: 150px; margin: 0 auto var(--s4); }
.slot h2 { font-size: clamp(2.6rem, 1.6rem + 3.5vw, 4.6rem); max-width: 12em; margin: 0 auto var(--s5); color: var(--op-donker); }
.slot h2 em { display: block; color: #ebb2bd; }
.slot .knop { background: var(--goud-licht); color: var(--inkt); border-color: var(--goud-licht); }
.slot .knop:hover { background: #e8c983; border-color: #e8c983; }
.slot p { margin: var(--s4) 0 0; color: #e6d9cf; }
.slot p a { color: #fff; }

.colofon { padding: var(--s6) var(--s4) var(--s4); font-size: 1.0625rem; background: var(--voet); color: #ece6d9; border-top: 4px double var(--goud-licht); }
.colofon-binnen { max-width: var(--breed); margin: 0 auto; display: grid; grid-template-columns: 1.3fr 1fr 1fr 1.1fr; gap: var(--s5); }
.colofon-kop { font-variant-caps: all-small-caps; letter-spacing: .16em; color: var(--goud-licht); margin-bottom: var(--s2); }
.colofon .merk-naam { font-size: 1.7rem; color: #fff; }
.colofon ul { list-style: none; margin: 0; padding: 0; }
.colofon li a, .colofon a { display: inline-block; padding: 6px 0; color: #ece6d9; }
.colofon li a:hover { color: #fff; }
.colofon-voet { max-width: var(--breed); margin: var(--s5) auto 0; padding-top: var(--s3); border-top: 1px solid rgba(236, 230, 217, .2); color: #c9c2b4; display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s2) var(--s4); }
.colofon-maker a { padding: 0; color: #c9c2b4; text-decoration: underline; text-underline-offset: 3px; }
.colofon-maker a:hover { color: #fff; }
.prijs-meer, .vragen-meer { margin: var(--s3) 0 0; }
.prijs-meer { max-width: var(--breed); margin-left: auto; margin-right: auto; }

/* ---------- inhoudspagina's: paginakop en blokken over de volle breedte ---------- */
.paginakop { background: var(--vlak); padding: var(--s6) var(--s4) var(--s7); }
.paginakop-binnen { max-width: var(--breed); margin: 0 auto; display: grid; grid-template-columns: 1.15fr .85fr; gap: var(--s6); align-items: center; }
.paginakop .kruimel { margin: 0 0 var(--s4); font-size: 1rem; color: var(--zacht); }
.paginakop .kruimel a { color: var(--zacht); }
.paginakop h1 { font-size: clamp(2.6rem, 1.6rem + 3.2vw, 4.4rem); margin: 0 0 var(--s4); }
.paginakop-tekst p { font-size: 1.3125rem; line-height: 1.55; color: var(--zacht); max-width: 34em; }
.held-foto { justify-self: center; width: 100%; max-width: 420px; background: #fff; padding: 12px; transform: rotate(2deg); box-shadow: 0 1px 2px rgba(47, 38, 38, .12), 0 30px 50px -30px rgba(47, 38, 38, .5); }
.held-foto img { width: 100%; height: auto; }
.held-zegel { justify-self: center; }
.held-zegel img { width: min(280px, 60vw); height: auto; }

.ib { padding: var(--s7) var(--s4); }
.ib-binnen { max-width: var(--breed); margin: 0 auto; }
.band-papier { background: var(--papier); }
.band-boter { background: var(--boter); }
.band-blos { background: var(--blos); }
.band-salie { background: var(--salie); }
.ib h2 { margin: 0 0 var(--s4); }
.ib-kop h2 { max-width: 16em; margin-bottom: var(--s5); }
.ib-links p { color: var(--zacht); }
.ib-faq .ib-binnen, .ib-tabel .ib-binnen, .ib-lijst .ib-binnen, .ib-vragen .ib-binnen, .ib-tekst .ib-binnen, .ib-formulier .ib-binnen {
  display: grid; grid-template-columns: .8fr 1.2fr; gap: var(--s4) var(--s6); align-items: start;
}
.ib-rechts > :first-child { margin-top: 0; }
.ib .knop-regel { margin: var(--s5) 0 0; }
.ib-tekst .ib-rechts p { font-size: 1.1875rem; }

/* stappen naast elkaar, cijfer in een gouden ring zoals het zegel */
.ib-stappen .stappen-lijst { grid-template-columns: repeat(3, 1fr); gap: var(--s4); margin: 0; }
.ib-stappen .stappen-lijst li { display: block; background: var(--blad); padding: var(--s5) var(--s4) var(--s4); box-shadow: 0 1px 2px rgba(47, 38, 38, .1), 0 24px 40px -32px rgba(47, 38, 38, .45); }
.ib-stappen .stappen-lijst li::before {
  width: 46px; height: 46px; margin-bottom: var(--s3); border: 4px double var(--goud); border-radius: 50%;
  background: none; color: var(--roos); font-family: var(--display); font-size: 1.5rem; font-weight: 600;
}
.ib-stappen .stappen-lijst h3 { font-family: var(--display); font-weight: 600; font-size: 1.6rem; margin: 0 0 var(--s2); }

/* lijsten als kaartjes met de tulpknop uit het zegel */
.ib-lijst ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
.ib-lijst li { position: relative; background: var(--blad); padding: var(--s3) var(--s4) var(--s3) 52px; margin: 0; box-shadow: 0 1px 2px rgba(47, 38, 38, .08); }
.ib-lijst li::before { content: ""; position: absolute; left: 20px; top: 1.15em; width: 18px; height: 14px; background: var(--sier) no-repeat right center / 52px 14px; }
.ib-lijst .ib-rechts > p { margin: var(--s4) 0 0; color: var(--zacht); }

/* vragenlijst: doorlopend genummerd over alle blokken */
.pagina { counter-reset: vraag; }
.ib-vragen ol { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--lijn); }
.ib-vragen li { counter-increment: vraag; position: relative; margin: 0; padding: var(--s2) 0 var(--s2) 3.4rem; border-bottom: 1px solid var(--lijn); font-size: 1.1875rem; }
.ib-vragen li::before { content: counter(vraag); position: absolute; left: 0; top: var(--s2); width: 2.6rem; text-align: right; font-family: var(--display); font-weight: 600; font-size: 1.35rem; line-height: 1.4; color: var(--roos); }

/* specificaties */
.tabel { overflow-x: auto; }
.ib-tabel .tabel { margin: 0; }
.ib-tabel table:not(:has(thead th:not(:empty))) thead { display: none; }
.ib-tabel th { padding: var(--s2) var(--s3) var(--s2) 0; font-weight: 600; font-size: .9375rem; letter-spacing: .1em; text-transform: uppercase; color: var(--goud-tekst); border-bottom: 1px solid var(--lijn); }
.ib-tabel table { font-size: 1.125rem; border-top: 1px solid var(--inkt); }
.ib-tabel td { padding: var(--s3) var(--s3) var(--s3) 0; }
.ib-rechts { min-width: 0; }
.ib-tabel table:not(:has(thead th:not(:empty))) td:first-child { width: 30%; font-weight: 600; font-size: .9375rem; letter-spacing: .12em; text-transform: uppercase; color: var(--goud-tekst); }

.ib-faq .faq { margin: 0; }
.ib-formulier .contactformulier { margin: 0; background: var(--blad); padding: var(--s5); box-shadow: 0 1px 2px rgba(47, 38, 38, .1), 0 30px 50px -36px rgba(47, 38, 38, .45); }
.ib-pakketten .pakketten { margin: 0 auto; }
.pagina > .bijgewerkt { max-width: var(--breed); margin: 0 auto; padding: var(--s4); border: 0; font-size: 1rem; color: var(--zacht); }

@media (max-width: 1100px) {
  .paginakop-binnen, .ib-faq .ib-binnen, .ib-tabel .ib-binnen, .ib-lijst .ib-binnen, .ib-vragen .ib-binnen, .ib-tekst .ib-binnen, .ib-formulier .ib-binnen { grid-template-columns: 1fr; }
  .held-foto { max-width: 360px; }
  .ib-stappen .stappen-lijst { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .paginakop { padding: var(--s5) var(--s3) var(--s6); }
  .ib { padding: var(--s6) var(--s3); }
  .held-foto { max-width: 280px; transform: none; }
  .held-zegel img { width: 200px; }
  .ib-stappen .stappen-lijst, .ib-lijst ul { grid-template-columns: 1fr; }
  .ib-formulier .contactformulier { padding: var(--s4); }
  .ib-tabel td:first-child { width: 40%; }
  /* tabellen met kolomkoppen: per rij een kaartje */
  .ib-tabel table.gestapeld, .ib-tabel .gestapeld tbody, .ib-tabel .gestapeld tr { display: block; }
  .ib-tabel .gestapeld thead { display: none; }
  .ib-tabel .gestapeld tr { padding: var(--s3) 0; border-bottom: 1px solid var(--lijn); }
  .ib-tabel .gestapeld td { display: grid; grid-template-columns: 42% 1fr; gap: var(--s3); width: auto; padding: 4px 0; border: 0; }
  .ib-tabel .gestapeld td::before { content: attr(data-label); font-weight: 600; color: var(--zacht); }
  .ib-tabel .gestapeld td:first-child { display: block; width: auto; margin-bottom: var(--s2); font-family: var(--display); font-size: 1.5rem; font-weight: 600; color: var(--inkt); }
  .ib-tabel .gestapeld td:first-child::before, .ib-tabel .gestapeld td[data-label=""]::before { content: none; }
}

/* ---------- binnenkomen ---------- */
.js .onthul { opacity: 0; transform: translateY(24px); transition: opacity .8s var(--zacht-uit), transform .8s var(--zacht-uit); transition-delay: calc(var(--d, 0) * 110ms); }
.js .onthul.zichtbaar { opacity: 1; transform: none; }

/* ---------- smaller ---------- */
@media (max-width: 1100px) {
  .menu-groot { display: none; }
  .menu-mobiel { display: block; }
  .menu-mobiel summary { list-style: none; cursor: pointer; min-height: 46px; padding: 0 18px; display: flex; align-items: center; border: 1.5px solid var(--inkt); border-radius: 3px; font-weight: 600; font-size: 1.0625rem; }
  .menu-mobiel summary::-webkit-details-marker { display: none; }
  .menu-mobiel[open] summary { background: var(--inkt); color: #fff; }
  .menu-mobiel ul { position: absolute; left: 0; right: 0; top: 100%; list-style: none; margin: 0; padding: var(--s2) var(--s4) var(--s3); background: var(--papier); border-bottom: 1px solid var(--lijn); box-shadow: 0 24px 40px -30px rgba(47, 38, 38, .5); }
  .menu-mobiel li + li { border-top: 1px solid var(--lijn); }
  .menu-mobiel a { display: flex; align-items: center; min-height: 58px; font-size: 1.25rem; color: var(--inkt); text-decoration: none; }
  .held-tekst, .stem-binnen, .feest-binnen, .faq-sectie, .afspraak-binnen, .vragen-binnen { grid-template-columns: 1fr; }
  .gemaakt dl { grid-template-columns: 1fr 1fr; }
  .gemaakt dl > div:nth-child(3) { border-left: 0; padding-left: 0; }
  .gemaakt dl > div:nth-child(n+3) { border-top: 1px solid var(--lijn); }
  .afspraak-binnen, .vragen-binnen, .faq-sectie { gap: var(--s4); }
}

@media (max-width: 760px) {
  body { font-size: 1.125rem; }
  .kop-binnen { padding: 10px var(--s3); }
  .merk-naam { font-size: 1.55rem; }
  .merk-sub { font-size: .95rem; }
  .merk-icoon { width: 40px; height: 40px; }
  .merk-met-icoon { gap: 10px; }
  .menu { gap: var(--s2); }
  .held-tekst { padding: var(--s5) var(--s3) var(--s4); }
  .held h1 { font-size: clamp(2.6rem, 11vw, 3.4rem); }
  .intro { font-size: 1.1875rem; }
  .held .knop { width: 100%; }
  .tafel { padding: var(--s5) var(--s2) var(--s4); }
  .blader { margin-top: var(--s4); padding: 0 var(--s2); }
  .blader-knoppen { width: 100%; }
  .lees { width: 100vw; max-height: 100dvh; height: 100dvh; margin: 0; }
  .lees-spread, .lees-spread.enkel { grid-template-columns: 820px; gap: 12px; overflow-x: auto; justify-content: start; }
  .lees-pagina { width: 820px; }
  #verder { min-width: 0; flex: 1; }

  .werkwijze, .stem, .afspraak, .prijzen, .feest, .vragen, .faq-sectie, .slot { padding: var(--s6) var(--s3); }
  .sectie-kop { margin-bottom: var(--s5); }
  .tafereel, .pakketten { grid-template-columns: 1fr; }
  .colofon-binnen { grid-template-columns: 1fr 1fr; }
  .gemaakt dl { grid-template-columns: 1fr 1fr; }
  .gemaakt dl > div, .gemaakt dl > div + div { padding: var(--s3) var(--s3) var(--s3) 0; border-left: 0; border-bottom: 1px solid var(--lijn); }
  .tf:nth-child(n) { margin-top: 0; }
  .tf:nth-child(n) .tf-beeld, .kalender:nth-child(n) { transform: none; }
  .pakket, .pakket + .pakket, .pakket-hoofd { padding: var(--s4) var(--s3); border-left: 0; }
  .pakket + .pakket { border-top: 1px solid var(--lijn); }
  .stem-beeld { min-height: 340px; }
  .stem-blad { width: 88%; }
  .stem-blad .b-luister { padding: 10px; gap: 10px; max-width: 58%; }
  .stem-blad .b-luister div { font-size: 0; }
  .stem-blad .b-luister strong { font-size: .9rem; }
  .stem-blad .b-luister img { width: 60px; height: 60px; }
  .stem-telefoon { width: 44%; }
  .afspraak-lijst li { padding-left: 40px; font-size: 1.125rem; }
  .vragenlijst li { grid-template-columns: 36px 1fr; }
  .blaadjes { gap: var(--s3); }
  .kalender { padding: 46px 12px 18px; }
  .kal-dag { font-size: 4rem; }
  .kalender h3 { font-size: 1.5rem; }
  .kal-regel, .deadline-plekken { font-size: 1rem; }
}

@media (max-width: 480px) {
  .kop-binnen > .menu > .knop-klein { display: none; }
  .menu-bestel { display: block; }
  .menu-bestel a { color: var(--roos); font-weight: 600; }
}

@media (prefers-reduced-motion: reduce) {
  .boek, .vel, .knop .pijl { transition: none; }
  .js .onthul { opacity: 1; transform: none; transition: none; }
}


/* ---------- Gelijk met de homepage (v5.css), 20 okt ----------
   De homepage heeft een eigen stylesheet; deze regels trekken de andere pagina's daarmee gelijk. */
.balk { font-size: 1rem; padding-top: 9px; padding-bottom: 9px; }
.kop { border-bottom: 1px solid var(--lijn); }
.merk-naam { font-weight: 600; }
h1, h2, h3 { font-weight: 500; }
.knop { border-radius: 2px; }
.knop .pijl { transition: transform .3s var(--zacht-uit); }
.knop:hover .pijl { transform: translateX(4px); }
/* op donkere vlakken een crème knop, zoals op de homepage */
.pakket-hoofd .knop, .slot .knop { background: var(--papier); border-color: var(--papier); color: var(--inkt); }
.pakket-hoofd .knop:hover, .slot .knop:hover { background: #fff; border-color: #fff; color: var(--roos-donker); }
a, button, summary { touch-action: manipulation; }
.held-render { max-width: 520px; padding: 0; background: none; transform: none; box-shadow: 0 30px 50px -30px rgba(47, 38, 38, .55); }
.upgrade .actie { display: block; font-weight: 600; margin: 2px 0 4px; }
[data-tot][hidden] { display: none !important; }