/* ==========================================================================
   Koekoek Kinderboek — designsysteem "Papieren Warmte"
   Volledige herziening 2026-09-06. Zie 09-brand/VISUELE-RICHTING.md.

   Drie regels die alles hieronder verklaren:
   1. Het scherm is een boekenplank, geen productraster. Elke categorie is een
      omslagje; panelen zijn katernen die op warm papier liggen.
   2. Er is één handelingskleur. Koekoek-oranje betekent altijd: hier gebeurt
      iets. Nergens anders komt die kleur voor. Sorteren doen de zes tinten.
   3. De site praat in een grotesk, het boek praat in Young Serif. Waar Young
      Serif staat, spreekt het boek — een titel, een citaat, een opdracht.
   ========================================================================== */

@font-face{font-family:'Bricolage';src:url('/gepersonaliseerd-kinderboek/static/fonts/BricolageGrotesque-Bold.ttf') format('truetype');font-weight:700;font-display:swap}
@font-face{font-family:'Bricolage';src:url('/gepersonaliseerd-kinderboek/static/fonts/BricolageGrotesque-Regular.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:'Outfit';src:url('/gepersonaliseerd-kinderboek/static/fonts/Outfit-Regular.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:'Outfit';src:url('/gepersonaliseerd-kinderboek/static/fonts/Outfit-Bold.ttf') format('truetype');font-weight:700;font-display:swap}
/* Lora is de letter van het gedrukte boek (zie pipeline/layout.py). Hij staat
   hier zodat de bladzijde in de preview dezelfde letter heeft als op papier.
   Buiten de boekpreview gebruikt geen enkele regel hem. */
@font-face{font-family:'Lora';src:url('/gepersonaliseerd-kinderboek/static/fonts/Lora-Regular.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:'Lora';src:url('/gepersonaliseerd-kinderboek/static/fonts/Lora-Italic.ttf') format('truetype');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Young Serif';src:url('/gepersonaliseerd-kinderboek/static/fonts/YoungSerif-Regular.ttf') format('truetype');font-weight:400;font-display:swap}

:root{
  --papier:#FBF6EE; --katern:#FFFFFF; --inkt:#2A2320; --zacht:#6C5D51;
  --lijn:#EADFCD; --oranje:#E4622E; --oranje-diep:#C9491A; --goud:#E9A13B;
  --nacht:#27455E;
  --perzik:#F7E3D0; --mos:#E0E8D9; --roos:#F8DFDE;
  --lucht:#DBE6EE; --lavendel:#E9E1EF; --zand:#F2E8D4;
  --r-s:10px; --r-m:18px; --r-l:28px;
  --schaduw:0 14px 30px -18px rgba(84,58,38,.35);
  --schaduw-diep:0 22px 44px -22px rgba(84,58,38,.42);
  --max:min(100% - 2rem, 74rem);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
/* Wie beweging heeft uitgezet, wil geen pagina van elf meter zien langsglijden. */
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}
img,svg{max-width:100%;height:auto}
body{margin:0;background:var(--papier);color:var(--inkt);
  font:400 clamp(1rem,.96rem + .22vw,1.06rem)/1.62 'Outfit',system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased}
.rand{width:var(--max);margin-inline:auto}
[hidden]{display:none!important}

h1,h2,h3,h4{font-family:'Bricolage','Outfit',system-ui,sans-serif;font-weight:700;
  letter-spacing:-.018em;color:var(--inkt);margin:0 0 .5em;line-height:1.12}
h1{font-size:clamp(2rem,1.45rem + 2.6vw,3.4rem)}
h2{font-size:clamp(1.5rem,1.2rem + 1.5vw,2.3rem)}
h3{font-size:clamp(1.08rem,1rem + .4vw,1.28rem);line-height:1.24}
h4{font-size:1rem}
p{margin:0 0 1em}
.lood{font-size:clamp(1.04rem,1rem + .4vw,1.2rem);color:var(--zacht);max-width:46ch}
.lood.breed{max-width:62ch}
.klein{font-size:.88rem;line-height:1.55;color:var(--zacht)}
.mini{font-size:.79rem;line-height:1.5;color:#9A8B7D}
a{color:var(--oranje-diep);text-underline-offset:3px;text-decoration-thickness:1px}
b,strong{font-weight:700}
.boekstem{font-family:'Young Serif',Georgia,serif;font-weight:400;letter-spacing:-.005em}

/* --- kop -------------------------------------------------------------- */
.balk{background:var(--oranje);color:#FFF3EA;font-size:.83rem;text-align:center;
  padding:.5rem 1rem;letter-spacing:.005em}
.balk b{color:#fff}
header.top{position:sticky;top:0;z-index:40;background:rgba(251,246,238,.94);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--lijn)}
.top .rand{display:flex;align-items:center;gap:1rem;min-height:64px}
.merk{display:flex;align-items:center;gap:.55rem;text-decoration:none;color:var(--inkt);flex:none}
.merk img{width:34px;height:34px}
.merk .woordmerk{display:flex;flex-direction:column;line-height:1.03}
.merk .woordmerk b{font-size:1.04rem;font-weight:700;letter-spacing:-.02em}
.merk .woordmerk i{font-size:.72rem;font-style:normal;color:var(--zacht)}
nav.hoofd{display:none;margin-left:auto;gap:1.35rem;align-items:center}
@media(min-width:900px){nav.hoofd{display:flex}}
nav.hoofd a{color:var(--inkt);text-decoration:none;font-size:.95rem;padding:.4rem 0;
  border-bottom:2px solid transparent}
nav.hoofd a:hover{border-bottom-color:var(--oranje)}
.top .knop{margin-left:auto;padding:.6rem 1.15rem;font-size:.92rem}
@media(min-width:900px){.top .knop{margin-left:.4rem}}
nav.mobiel{display:flex;gap:.5rem;overflow-x:auto;padding:.55rem 0;
  border-bottom:1px solid var(--lijn);scrollbar-width:none}
nav.mobiel::-webkit-scrollbar{display:none}
@media(min-width:900px){nav.mobiel{display:none}}
/* De rij scrolt zijwaarts. Zonder aanwijzing daarvoor lijkt het laatste item
   half afgesneden door een fout in plaats van door een rij die doorloopt. */
nav.mobiel{-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;
  mask-image:linear-gradient(to right,#000 0,#000 calc(100% - 2.2rem),transparent 100%)}
nav.mobiel a{scroll-snap-align:start}
nav.mobiel a{flex:none;font-size:.86rem;text-decoration:none;color:var(--inkt);
  background:var(--katern);border:1px solid var(--lijn);border-radius:999px;padding:.36rem .82rem}

/* --- knoppen ---------------------------------------------------------- */
.knop{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  background:var(--oranje);color:#fff;padding:.85rem 1.5rem;border:0;border-radius:999px;
  font:inherit;font-weight:700;font-size:1rem;text-decoration:none;cursor:pointer;
  box-shadow:0 8px 18px -10px rgba(228,98,46,.8);
  transition:transform .13s ease,background .13s,box-shadow .13s}
.knop:hover{background:var(--oranje-diep);transform:translateY(-1px);
  box-shadow:0 12px 22px -10px rgba(228,98,46,.9)}
.knop:active{transform:none}
.knop:disabled{opacity:.45;cursor:default;box-shadow:none}
.knop--groot{padding:1.05rem 2rem;font-size:1.08rem}
.knop--rand{background:transparent;color:var(--oranje-diep);box-shadow:inset 0 0 0 2px var(--oranje)}
.knop--rand:hover{background:rgba(228,98,46,.07);color:var(--oranje-diep)}
.knop--stil{background:var(--katern);color:var(--inkt);box-shadow:inset 0 0 0 1px var(--lijn)}
.knop--stil:hover{background:#fff;color:var(--inkt);box-shadow:inset 0 0 0 1px #d9c9ae}
.knoprij{display:flex;flex-wrap:wrap;gap:.8rem;align-items:center;margin:1.5rem 0 0}

/* --- panelen en secties ----------------------------------------------- */
main{padding-bottom:3rem}
/* Ruimte tussen de navigatie en de eerste paginatitel.
   Alleen op de generator en de resultaatpagina: die beginnen met een kop
   direct onder de balk, terwijl de andere pagina's met een hero of een
   paneel beginnen dat zijn eigen ruimte al meebrengt. Het sjabloon zet de
   klasse via `{% block hoofdklasse %}`; wie hem niet zet, verandert niet. */
main.kopruimte{padding-top:2.75rem}
@media(max-width:760px){main.kopruimte{padding-top:1.75rem}}
.paneel{background:var(--katern);border-radius:var(--r-l);padding:2rem 1.3rem;margin:1.1rem 0}
@media(min-width:760px){.paneel{padding:3rem 2.6rem;margin:1.6rem 0}}
.paneel--mos{background:var(--mos)}
.paneel--roos{background:var(--roos)}
.paneel--zand{background:var(--zand)}
.paneel--lucht{background:var(--lucht)}
.paneel--leeg{background:transparent;padding-inline:0}
.sectiekop{max-width:52ch;margin-bottom:1.6rem}
.sectiekop.midden{margin-inline:auto;text-align:center}

/* --- hero -------------------------------------------------------------- */
.hero{display:grid;gap:1.8rem;align-items:center;padding:2rem 0 1rem}
@media(min-width:920px){.hero{grid-template-columns:1.02fr .98fr;gap:3rem;padding:3.4rem 0 2rem}}
.hero h1{margin-bottom:.35em}
.bewijsregel{display:flex;align-items:center;gap:.55rem;margin-top:1.1rem;font-size:.9rem;color:var(--zacht)}
.bewijsregel svg{flex:none}

/* De boekenwaaier: echte omslagen, licht gedraaid, met warme schaduw. */
.waaier{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:.7rem;
  align-items:center}
.waaier img{width:100%;border-radius:4px;box-shadow:var(--schaduw-diep);display:block}
.waaier img:nth-child(1){transform:rotate(-5deg) scale(.92)}
.waaier img:nth-child(2){transform:rotate(1.5deg) scale(1.1);z-index:2;position:relative}
.waaier img:nth-child(3){transform:rotate(5deg) scale(.92)}
@media(min-width:920px){.waaier{gap:1.3rem}}

/* --- de prentkaart: de dragende component ------------------------------ */
.kaartraster{display:grid;gap:.8rem;grid-template-columns:repeat(2,1fr)}
@media(min-width:640px){.kaartraster{grid-template-columns:repeat(3,1fr);gap:1rem}}
@media(min-width:940px){.kaartraster{grid-template-columns:repeat(4,1fr);gap:1.1rem}}
/* Het stijlrooster telt niet vijf maar 'zoveel als er zijn'. Een stijl kan
   uitstaan (zie catalogus-v2.json, veld waarom_verborgen) en dan hoort er geen
   gat te vallen. */
.kaartraster.vijf,.kaartraster.stijlraster{grid-template-columns:repeat(2,1fr)}
@media(min-width:760px){.kaartraster.vijf,.kaartraster.stijlraster{
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}}
.kaartraster.zes{grid-template-columns:repeat(2,1fr)}
@media(min-width:640px){.kaartraster.zes{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1040px){.kaartraster.zes{grid-template-columns:repeat(6,1fr)}}

.prentkaart{display:block;text-decoration:none;color:inherit;position:relative;
  border-radius:var(--r-m);overflow:hidden;background:var(--katern);
  box-shadow:var(--schaduw);transition:transform .16s ease,box-shadow .16s ease}
.prentkaart:hover{transform:translateY(-3px);box-shadow:var(--schaduw-diep)}
.prentkaart img{display:block;width:100%;aspect-ratio:300/380;object-fit:cover}

/* Binnenmarge en ritme van het tekstblok onder de tekening.
   De vorige maat (.6/.7/.75rem) plakte de titel tegen de rand en liet een lange
   titel als 'Afscheid van een huisdier' op twee dicht op elkaar gedrukte regels
   tegen de zijkant aanlopen. Nu: ruimere marge, een vaste regelafstand, en een
   minimumhoogte zodat kaarten in een rij dezelfde onderkant houden ook als de
   ene titel één en de andere twee regels beslaat. */
.prentkaart .onder{display:block;padding:.9rem .95rem 1.05rem}
.prentkaart .onder b{display:block;font-family:'Bricolage','Outfit',sans-serif;font-weight:700;
  font-size:.95rem;line-height:1.28;letter-spacing:-.012em;
  overflow-wrap:break-word;hyphens:auto;text-wrap:pretty}
.prentkaart .onder span{display:block;font-size:.8rem;color:var(--zacht);margin-top:.3rem;
  line-height:1.45;overflow-wrap:break-word;text-wrap:pretty}
@media(min-width:640px){
  .prentkaart .onder{padding:1rem 1.05rem 1.15rem;min-height:6.2rem}
  .prentkaart .onder b{font-size:1rem}
}
.prentkaart.kaal .onder{display:none}
.prentkaart:focus-visible{outline:3px solid var(--nacht);outline-offset:3px}

/* De vier planken. Groter dan een onderwerpkaart, want ze dragen drie regels:
   het label, waar het voor is, en de voorbeelden die het label overbodig maken. */
.kaartraster.vier{grid-template-columns:repeat(2,1fr)}
@media(min-width:900px){.kaartraster.vier{grid-template-columns:repeat(4,1fr)}}
.familiekaart .onder{padding:1rem 1.05rem 1.15rem}
@media(min-width:640px){.familiekaart .onder{min-height:9.6rem}}
.familiekaart .onder b{font-size:1.06rem;line-height:1.24}
.familiekaart .kort{margin-top:.32rem;font-size:.84rem}
.familiekaart .voorbeelden{margin-top:.5rem;font-size:.78rem;color:var(--oranje-diep);
  line-height:1.5}
.familiekaart .telling{margin-top:.45rem;font-size:.73rem;color:#9A8B7D}

/* Drie kaarten schuin naast elkaar als sfeerbeeld boven een overzicht. */
.kaartwaaier{display:grid;grid-template-columns:repeat(3,1fr);gap:.7rem}
.kaartwaaier img{width:100%;border-radius:var(--r-m);box-shadow:var(--schaduw-diep);
  display:block}
.kaartwaaier img:nth-child(1){transform:rotate(-4deg) scale(.94)}
.kaartwaaier img:nth-child(2){transform:rotate(1deg) scale(1.04);z-index:2;position:relative}
.kaartwaaier img:nth-child(3){transform:rotate(4deg) scale(.94)}

/* --- de onderwerppagina -------------------------------------------------- */
.onderwerpkop .heldbeeld{margin:0}
/* Het beeld boven en het voorbeeldomslag verderop zijn dezelfde illustratie —
   uit één generatie komen beide, en dat is precies de bedoeling. Maar twee keer
   exact hetzelfde kader binnen één scherm leest als een fout. Daarom staat de
   illustratie hier liggend bijgesneden en het omslag vierkant: je ziet dat het
   hetzelfde beeld is, en tegelijk dat het twee dingen zijn. De bijschrift zegt
   het er ook bij. */
.onderwerpkop .heldbeeld img{display:block;width:100%;height:auto;border-radius:var(--r-l);
  box-shadow:var(--schaduw-diep);background:var(--katern);
  aspect-ratio:16/10;object-fit:cover;object-position:center 38%}
.onderwerpkop .heldbeeld figcaption{margin-top:.6rem;max-width:44ch}
.uitgeschreven{max-width:64ch;line-height:1.72}
.voorbeeldregel{margin-top:.9rem;font-size:.9rem;color:var(--oranje-diep)}

/* De waarschuwingsregel bij gevoelige onderwerpen. Rustig, niet alarmerend:
   het is een mededeling over wat wij wel en niet zijn, geen bordje. */
.zorgregel{max-width:64ch;margin:1.2rem 0 0;padding:.95rem 1.1rem;font-size:.88rem;
  line-height:1.6;color:var(--zacht);background:var(--katern);border-radius:var(--r-m);
  border-left:3px solid var(--lavendel,#E9E1EF)}

.voorbeeldboek{display:grid;gap:1.6rem;align-items:center}
@media(min-width:820px){.voorbeeldboek{grid-template-columns:.9fr 1.1fr;gap:2.6rem}}
.etiket{display:inline-block;margin:0 0 .5rem;padding:.22rem .6rem;font-size:.72rem;
  letter-spacing:.06em;text-transform:uppercase;color:var(--zacht);
  background:var(--katern);border-radius:999px}
.citaat{font-size:1.12rem;line-height:1.62;color:var(--inkt);max-width:38ch;
  margin:.5rem 0 1.1rem}

/* --- de prijsladder ------------------------------------------------------ */
/* Drie treden onder elkaar in plaats van twee kaartjes naast elkaar. Naast
   elkaar lezen ze als twee smaken van hetzelfde; onder elkaar, met "Eerst",
   "Daarna" en "Wil je het op papier" ervoor, lezen ze als wat het is: een
   volgorde waarin je twee keer betaalt. */
.ladder{list-style:none;margin:0;padding:0;display:grid;gap:.8rem;counter-reset:trede}
@media(min-width:900px){.ladder{grid-template-columns:repeat(3,1fr);gap:1rem;
  align-items:stretch}}
.trede{position:relative;background:var(--katern);border-radius:var(--r-l);
  padding:1.5rem 1.4rem;display:flex;flex-direction:column;gap:.1rem}
.trede .trap{display:block;font-size:.76rem;letter-spacing:.07em;text-transform:uppercase;
  color:var(--zacht);margin-bottom:.5rem}
.trede .bedrag{margin:0 0 .35rem;font-size:2.1rem}
.trede b{font-family:'Bricolage',sans-serif;font-size:1.02rem;line-height:1.3;
  margin-bottom:.35rem}
.trede .klein{margin:0}
.trede--hard{box-shadow:0 0 0 2px var(--oranje),var(--schaduw-diep)}
.trede .som{margin:.9rem 0 0;padding-top:.8rem;border-top:1px solid var(--lijn);
  font-size:.86rem;line-height:1.55;color:var(--zacht)}
.trede .som b{display:inline;font-size:.95rem;color:var(--inkt)}
/* De pijl tussen de treden, alleen waar ze naast elkaar staan. */
@media(min-width:900px){
  .trede + .trede::before{content:"";position:absolute;left:-.72rem;top:50%;
    width:.55rem;height:.55rem;border-top:2px solid var(--lijn);
    border-right:2px solid var(--lijn);transform:translateY(-50%) rotate(45deg)}
}

/* --- stappen ------------------------------------------------------------ */
.stappen{display:grid;gap:2rem}
@media(min-width:820px){.stappen{gap:2.6rem}}
.stapblok{display:grid;gap:1.1rem;align-items:center}
@media(min-width:760px){.stapblok{grid-template-columns:1fr 1fr;gap:2.6rem}
  .stapblok:nth-child(even) .stapbeeld{order:-1}}
.stapnr{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;
  border-radius:999px;background:var(--oranje);color:#fff;font-weight:700;font-size:1.05rem;
  margin-bottom:.7rem;font-family:'Bricolage',sans-serif}
.stapbeeld{display:flex;justify-content:center}
.stapbeeld svg{width:min(100%,300px);height:auto}

/* --- boekpresentatie ---------------------------------------------------- */
.boek{position:relative;display:block;width:min(100%,300px);margin-inline:auto;
  border-radius:3px 8px 8px 3px;overflow:hidden;
  box-shadow:var(--schaduw-diep),inset 9px 0 14px -10px rgba(0,0,0,.42)}
.boek img{display:block;width:100%}
.boek::after{content:"";position:absolute;inset:0 0 0 0;pointer-events:none;
  background:linear-gradient(90deg,rgba(0,0,0,.16) 0,rgba(0,0,0,0) 6%,rgba(255,255,255,.1) 46%,rgba(0,0,0,.05) 100%)}
.boek--groot{width:min(100%,380px)}

.toon-en-boek{display:grid;gap:1.4rem;align-items:center}
@media(min-width:820px){.toon-en-boek{grid-template-columns:.8fr 1fr 1fr;gap:1.8rem}}
.fotostrip{display:flex;gap:.6rem;justify-content:center}
.fotostrip img{width:84px;height:84px;object-fit:cover;border-radius:8px;
  border:3px solid #fff;box-shadow:var(--schaduw)}
.pijl{display:block;margin:.4rem auto;color:var(--oranje)}
.specs{background:rgba(255,255,255,.72);border-radius:var(--r-m);padding:1.1rem 1.2rem;font-size:.92rem}
.specs dl{margin:0;display:grid;gap:.34rem}
/* Label naast waarde zolang er ruimte is; daaronder eronder. Naast elkaar in
   een smalle kolom brak "Waar het over gaat" midden in een woord af. */
.specs div{display:grid;gap:.05rem}
@media(min-width:520px){.specs div{display:flex;justify-content:space-between;gap:1rem}}
.specs dt{color:var(--zacht)}
.specs dd{margin:0;font-weight:700}
@media(min-width:520px){.specs dd{text-align:right}}

/* --- pillen ------------------------------------------------------------- */
.pillen{display:flex;flex-wrap:wrap;gap:.45rem}
.pil{display:inline-flex;align-items:center;gap:.4rem;background:var(--katern);
  border:1px solid var(--lijn);border-radius:999px;padding:.42rem .85rem;font-size:.88rem;
  text-decoration:none;color:inherit;transition:border-color .12s,transform .12s}
.pil:hover{border-color:var(--oranje);transform:translateY(-1px)}
.pil img{width:22px;height:22px;border-radius:4px;object-fit:cover}

/* --- prijs -------------------------------------------------------------- */
.prijsraster{display:grid;gap:1rem}
@media(min-width:760px){.prijsraster{grid-template-columns:1fr 1fr;gap:1.4rem}}
.prijskaart{background:var(--katern);border-radius:var(--r-l);padding:1.6rem 1.5rem;
  box-shadow:var(--schaduw);position:relative}
.prijskaart.uitgelicht{box-shadow:0 0 0 2px var(--oranje),var(--schaduw-diep)}
.prijskaart .vlag{position:absolute;top:-.7rem;right:1.2rem;background:var(--oranje);color:#fff;
  font-size:.76rem;font-weight:700;border-radius:999px;padding:.24rem .8rem}
.bedrag{font-family:'Bricolage',sans-serif;font-weight:700;font-size:2.5rem;line-height:1;
  letter-spacing:-.03em}
.vinklijst{list-style:none;margin:1rem 0 0;padding:0;display:grid;gap:.5rem;font-size:.94rem}
.vinklijst li{display:flex;gap:.6rem;align-items:flex-start}
.vinklijst svg{flex:none;margin-top:.22rem;color:var(--oranje)}

/* --- vragen ------------------------------------------------------------- */
details.vraag{border-bottom:1px solid var(--lijn);padding:.95rem 0}
details.vraag summary{cursor:pointer;font-weight:700;list-style:none;display:flex;
  justify-content:space-between;gap:1rem;align-items:center;
  font-family:'Bricolage',sans-serif}
details.vraag summary::-webkit-details-marker{display:none}
details.vraag summary::after{content:"+";color:var(--oranje);font-size:1.3rem;font-weight:400;
  transition:transform .18s}
details.vraag[open] summary::after{transform:rotate(45deg)}
details.vraag p{margin:.7rem 0 0;color:var(--zacht)}

/* --- voet --------------------------------------------------------------- */
footer{background:var(--katern);border-top:1px solid var(--lijn);padding:2.4rem 0 2rem;margin-top:2rem}
.voetraster{display:grid;gap:1.6rem}
@media(min-width:700px){.voetraster{grid-template-columns:1.4fr 1fr 1fr 1fr}}
footer h4{font-size:.86rem;text-transform:uppercase;letter-spacing:.08em;color:var(--zacht);
  font-family:'Outfit',sans-serif;font-weight:700}
footer ul{list-style:none;margin:0;padding:0;display:grid;gap:.42rem;font-size:.92rem}
footer a{color:var(--inkt);text-decoration:none}
footer a:hover{text-decoration:underline;text-decoration-color:var(--oranje)}

/* ==========================================================================
   CONFIGURATOR
   ========================================================================== */
.stapbalk{position:sticky;top:64px;z-index:20;background:var(--papier);
  padding:.75rem 0 .65rem;border-bottom:1px solid var(--lijn)}
.spoor{height:5px;background:var(--lijn);border-radius:999px;overflow:hidden}
.spoor i{display:block;height:100%;background:var(--oranje);width:0;
  transition:width .5s cubic-bezier(.4,0,.2,1)}
.stapteller{display:flex;justify-content:space-between;gap:1rem;margin:.5rem 0 0;
  font-size:.85rem;color:var(--zacht)}
.stapteller b{color:var(--inkt);font-family:'Bricolage',sans-serif}
.gekozen{display:flex;flex-wrap:wrap;gap:.35rem;margin:.55rem 0 0;list-style:none;padding:0}
.gekozen li{font-size:.76rem;color:var(--zacht);background:var(--katern);border:1px solid var(--lijn);
  border-radius:999px;padding:.2rem .65rem}

.keuzekaart{position:relative;display:block;cursor:pointer;border-radius:var(--r-m);
  overflow:hidden;background:var(--katern);box-shadow:var(--schaduw);
  transition:transform .14s,box-shadow .14s}
.keuzekaart:hover{transform:translateY(-3px);box-shadow:var(--schaduw-diep)}
.keuzekaart input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.keuzekaart img{display:block;width:100%;aspect-ratio:300/380;object-fit:cover}
.keuzekaart .onder{display:block;padding:.85rem .9rem 1rem}
.keuzekaart .onder b{display:block;font-family:'Bricolage',sans-serif;font-size:.94rem;
  line-height:1.28;overflow-wrap:break-word;hyphens:auto;text-wrap:pretty}
.keuzekaart .onder span{display:block;font-size:.79rem;color:var(--zacht);line-height:1.45;
  margin-top:.28rem;overflow-wrap:break-word;text-wrap:pretty}
@media(min-width:640px){.keuzekaart .onder{min-height:6rem}}
.keuzekaart:has(input:checked){box-shadow:0 0 0 3px var(--oranje),var(--schaduw-diep)}
.keuzekaart:has(input:checked)::after{content:"";position:absolute;top:.55rem;right:.55rem;
  width:22px;height:22px;border-radius:999px;background:var(--oranje);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5 6.5 12 13 4.5'/%3E%3C/svg%3E");
  background-size:14px;background-position:center;background-repeat:no-repeat;
  box-shadow:0 2px 8px rgba(0,0,0,.25)}
.keuzekaart:has(input:focus-visible){outline:3px solid var(--nacht);outline-offset:2px}

/* Tekstkeuzes: alles wat geen eigen prent heeft, maar wel groot en aanraakbaar. */
.tegelraster{display:grid;gap:.65rem;grid-template-columns:repeat(2,1fr)}
@media(min-width:640px){.tegelraster{grid-template-columns:repeat(3,1fr);gap:.8rem}}
.tegelraster.vier{grid-template-columns:repeat(2,1fr)}
@media(min-width:640px){.tegelraster.vier{grid-template-columns:repeat(4,1fr)}}
.tegel{position:relative;display:block;cursor:pointer;background:var(--katern);
  border:1.5px solid var(--lijn);border-radius:var(--r-m);padding:.9rem 1rem;
  transition:border-color .12s,transform .12s,box-shadow .12s}
.tegel:hover{border-color:#d8c6a8;transform:translateY(-2px);box-shadow:var(--schaduw)}
.tegel input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.tegel b{display:block;font-family:'Bricolage',sans-serif;font-size:1rem;line-height:1.24}
.tegel span{display:block;font-size:.83rem;color:var(--zacht);line-height:1.45;margin-top:.2rem}
.tegel:has(input:checked){border-color:var(--oranje);background:#FFF6F0;
  box-shadow:inset 0 0 0 1.5px var(--oranje)}
.tegel:has(input:focus-visible){outline:3px solid var(--nacht);outline-offset:2px}
.tegel.mid{text-align:center}
.tegel.mid span{margin-top:.1rem}

.stijlkaart{padding:0;overflow:hidden;border-width:1.5px}
.stijlkaart img{display:block;width:100%;aspect-ratio:16/11;object-fit:cover}
.stijlkaart .tekst{padding:.8rem .9rem 1rem;text-align:left}
.stijlkaart:has(input:checked) img{border-bottom:2px solid var(--oranje)}

.chips{display:flex;flex-wrap:wrap;gap:.5rem;margin:.9rem 0 0}
.chip{position:relative;display:inline-flex;align-items:center;gap:.45rem;cursor:pointer;
  border:1.5px solid var(--lijn);background:var(--katern);border-radius:999px;
  padding:.5rem 1rem;font-size:.93rem;transition:border-color .12s,background .12s}
.chip input{position:absolute;opacity:0;width:1px;height:1px}
.chip:hover{border-color:#d8c6a8}
.chip:has(input:checked){background:#FFF6F0;border-color:var(--oranje);
  box-shadow:inset 0 0 0 1.5px var(--oranje)}
.chip:has(input:disabled){opacity:.4;cursor:not-allowed}
.chip:has(input:focus-visible){outline:3px solid var(--nacht);outline-offset:2px}

label.veld{display:block;margin:1.2rem 0 .35rem;font-size:.9rem;font-weight:700;color:var(--inkt)}
input[type=text],input[type=number],input[type=email]{width:100%;padding:.85rem 1rem;
  border:1.5px solid var(--lijn);border-radius:var(--r-s);background:#fff;font:inherit;
  font-size:1rem;color:var(--inkt)}
input:focus{outline:3px solid rgba(228,98,46,.35);outline-offset:0;border-color:var(--oranje)}
.rij{display:grid;gap:.9rem}
@media(min-width:560px){.rij{grid-template-columns:2fr 1fr}}
.upload{border:2px dashed var(--lijn);border-radius:var(--r-m);padding:1.1rem;background:#FFFDF9}
.upload.gevuld{border-style:solid;border-color:var(--oranje)}
.fotohulp{display:flex;gap:1rem;align-items:center}
.fotovoorbeeld{width:84px;height:84px;border-radius:var(--r-s);object-fit:cover;flex:none;
  background:var(--perzik);border:1px solid var(--lijn)}

.vertelkader{background:var(--zand);border-radius:var(--r-l);padding:1.3rem 1.4rem;margin-top:2rem}
.vertelzin{font-family:'Young Serif',Georgia,serif;font-size:clamp(1.06rem,1rem + .5vw,1.3rem);
  line-height:1.5;margin:0}
.vertelzin em{font-style:normal;background:linear-gradient(transparent 60%,rgba(233,161,59,.45) 0);
  padding:0 .06em}
.vertelzin .leeg{color:#B3A696;background:none}

.stapvoet{display:flex;gap:.8rem;align-items:center;margin:1.8rem 0 0;flex-wrap:wrap}
.js .stapvoet{position:sticky;bottom:0;z-index:15;background:var(--papier);
  border-top:1px solid var(--lijn);padding:.85rem 0;margin-top:2rem}
.js #mk{padding-bottom:6.5rem}
.terugknop{background:none;border:0;color:var(--zacht);font:inherit;font-size:.95rem;
  cursor:pointer;padding:.6rem .2rem;text-decoration:underline;text-underline-offset:3px}
.fout{background:#FDEEE7;border-left:3px solid var(--oranje);padding:.85rem 1.05rem;
  border-radius:0 var(--r-s) var(--r-s) 0;margin:1rem 0;font-size:.95rem}
.stap-blok{scroll-margin-top:5rem}

/* --- kruimelpad en overzicht -------------------------------------------- */
.kruimel{font-size:.85rem;color:var(--zacht);margin:1rem 0 .8rem}
.kruimel a{color:var(--zacht)}
.familiekop{display:flex;align-items:baseline;gap:.7rem;margin:2.4rem 0 1rem;flex-wrap:wrap}
.familiekop h2{margin:0}
.familiekop span{font-size:.88rem;color:var(--zacht)}
.wereldraster{display:grid;gap:1rem;grid-template-columns:1fr}
@media(min-width:620px){.wereldraster{grid-template-columns:1fr 1fr}}
@media(min-width:980px){.wereldraster{grid-template-columns:repeat(3,1fr)}}
.wereld{background:var(--katern);border-radius:var(--r-m);padding:1.1rem 1.2rem;
  border-top:3px solid var(--goud)}
.wereld h3{margin-bottom:.25rem}
.wereld p{font-size:.92rem;color:var(--zacht);margin:0}
.wereld .sfeer{font-size:.82rem;color:#A2947F;margin-top:.4rem;font-style:italic}
.boogkaart{background:rgba(255,255,255,.7);border-radius:var(--r-m);padding:1rem 1.1rem}
.boogkaart b{display:block;font-family:'Bricolage',sans-serif;margin-bottom:.3rem}
.boogkaart span{font-size:.87rem;color:var(--zacht);line-height:1.55}

/* Vijf stijlkaarten in een raster van vier laten een wees achter. Op brede
   schermen staan ze daarom op één rij; daaronder gewoon twee kolommen. */
@media(min-width:1040px){.tegelraster.stijlen{grid-template-columns:repeat(5,1fr)}}

/* De voorbeeldwoorden onder een menu-item in de voettekst. Ze doen daar wat ze
   ook op de kaart doen: het label hoeft niet meer uitgelegd te worden. */
.voetraster li .mini{display:block;margin-top:.1rem}
.voetraster li{margin-bottom:.55rem}


/* ===========================================================================
   TELEFOON: tikvlakken en leesformaat
   ===========================================================================
   Gemeten door de site op 390 bij 844 werkelijk te bedienen, niet door ernaar
   te kijken. Twee dingen kwamen eruit.

   Tikvlakken. Menuchips van 36 pixels hoog, voettekstlinks van 20 en
   kruimelpaden van 18 zijn met een duim een gok. Alles wat je kunt aanraken is
   hieronder minstens 44 pixels hoog — dat is de maat waarop een volwassen duim
   raak tikt. Het gaat overal om extra padding, niet om grotere letters, zodat
   de bladspiegel hetzelfde blijft.

   Leesformaat. Lopende tekst stond op 12,6 tot 13,9 pixels. Op een telefoon in
   een schemerige kinderkamer is dat te klein; de ondergrens is hier 14. De
   uitzondering blijft de echte kleine lettertjes onderaan.
   ========================================================================= */
@media(max-width:899px){
  nav.mobiel{padding:.35rem 0}
  nav.mobiel a{padding:.62rem .95rem;min-height:44px;display:inline-flex;align-items:center}
  .voetraster ul li{margin-bottom:.15rem}
  .voetraster ul li>a{display:inline-flex;align-items:center;min-height:44px;padding:.2rem 0}
  .voetraster li .mini{margin:0 0 .5rem}
  .kruimel{font-size:.875rem;line-height:1.9}
  .kruimel a{display:inline-block;padding:.35rem 0;min-height:44px}
  details.vraag summary{padding-block:.95rem;min-height:44px}
  .merk{min-height:44px}
  .top .knop{min-height:44px;padding:.72rem 1.15rem}
  /* Een rij losse links in één zin: het tikvlak groeit met de regelafstand,
     niet met een blokje dat over de regel eronder heen valt. */
  .paneel p.klein{line-height:2.6}
  .paneel p.klein a,.klein a{display:inline-block;padding:.55rem 0}
  .stapvoet .terugknop{min-height:44px}

  .balk{font-size:.875rem}
  .klein{font-size:.92rem}
  .mini{font-size:.88rem}
  .prentkaart .onder span,.prentkaart .onder span.kort{font-size:.875rem}
  .prentkaart .onder span.voorbeelden{font-size:.88rem}
  .keuzekaart .onder span{font-size:.875rem}
  .tegel span,.tegel span.tekst,.tegel span.mini{font-size:.9rem}
  .wereldraster .boogkaart span,.kaartraster .boogkaart span{font-size:.9rem}
  .wereld .sfeer{font-size:.9rem}
  .trede .som{font-size:.9rem}
  .trede .som b{font-size:.97rem}
}

/* De voorbeeldkaart is een omslag en geen onderwerpkaart: vierkanter, en met
   drie regels eronder (titel, wie het is, hoe het kind eruitziet). */
.voorbeeldkaart img{aspect-ratio:900/918}
@media(min-width:640px){.voorbeeldkaart .onder{min-height:8.4rem}}
.voorbeeldkaart .onder b{font-family:'Young Serif',Georgia,serif;font-weight:400;
  font-size:1.02rem;line-height:1.3}

/* Het afgemaakte boek: omslag groot, tekst ernaast, gegevens eronder. In drie
   even brede kolommen werd de gegevenslijst te smal voor haar eigen labels. */
@media(min-width:820px){
  .toon-en-boek:has(.specs){grid-template-columns:.85fr 1.15fr}
  .toon-en-boek .specs{grid-column:1/-1}
  .toon-en-boek .specs dl{grid-template-columns:1fr 1fr;gap:.34rem 2.4rem}
}

/* De modusbalk van de testomgeving. Bewust niet in het merkoranje: dit is geen
   aanbieding maar een mededeling over wat je op het scherm ziet. */
.balk--demo{background:#2F4858;color:#EAF1F5}
.balk--demo b{color:#fff}
.balk--demo code{background:rgba(255,255,255,.16);padding:.08em .4em;border-radius:5px;
  font-size:.95em}
.balk--echt{background:#7A2E12;color:#FBE7DC}
.balk--echt b{color:#fff}

/* De regel bij een demobeeld. Staat bij het beeld zelf, want de balk bovenaan
   de pagina is uit beeld op het moment dat je naar de tekening kijkt. */
.demoregel{margin:.9rem 0;padding:.85rem 1rem;border-radius:var(--r-m);
  background:#EAF1F5;border-left:3px solid #2F4858;font-size:.9rem;line-height:1.55}
.demoregel b{color:#2F4858}
.demoregel code{background:rgba(47,72,88,.12);padding:.08em .4em;border-radius:5px}

/* ==========================================================================
   De generator: één vraag per scherm, elke keuze een kaart die je kunt zien.

   Uitgangspunt: kiezen is kijken. Een pictogram, een korte titel, en alleen
   een toelichting waar die iets toevoegt. Het hele vlak is aanklikbaar en
   minstens 44 px hoog, zodat een duim niet hoeft te mikken. Focus is zichtbaar
   met dezelfde ring als de rest van de site, en de selectiestaat verschilt in
   meer dan kleur alleen — er komt ook een rand en een schaduw bij, zodat het
   ook zonder kleurwaarneming te zien is.
   ========================================================================== */

/* het spoor van gemaakte keuzes, en tegelijk de manier om terug te gaan */
.keuzespoor{margin:0 0 1.6rem}
.keuzespoor ol{list-style:none;display:flex;flex-wrap:wrap;gap:.45rem;margin:0;padding:0}
.keuzespoor a{display:inline-flex;align-items:center;gap:.4rem;min-height:44px;
  padding:.35rem .8rem .35rem .5rem;border-radius:999px;background:var(--katern);
  box-shadow:inset 0 0 0 1px var(--lijn);text-decoration:none;color:var(--inkt);
  font-size:.9rem;line-height:1.2}
.keuzespoor a:hover{box-shadow:inset 0 0 0 2px var(--oranje);background:#fff}
.keuzespoor a[aria-current="step"]{box-shadow:inset 0 0 0 2px var(--oranje);
  background:#FFF3EA}
.keuzespoor .chippic{width:26px;height:26px;flex:none}
.keuzespoor .wijzig{font-size:.72rem;color:var(--zacht);text-transform:lowercase}
.keuzespoor .spoorlabel{font-weight:600}
.spoormelding{margin:.7rem 0 0;font-size:.86rem;color:var(--zacht)}
.alleenlezer{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
  white-space:nowrap}

/* de kaartrasters */
.keuzeraster{list-style:none;margin:1.2rem 0 2rem;padding:0;display:grid;gap:.7rem;
  grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.keuzeraster--breed{grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}
.keuzekaart{display:flex;flex-direction:column;align-items:center;gap:.45rem;
  min-height:112px;padding:1rem .7rem;border-radius:var(--r-m);background:var(--katern);
  box-shadow:inset 0 0 0 1px var(--lijn);text-decoration:none;color:var(--inkt);
  text-align:center;transition:box-shadow .12s,transform .12s,background .12s}
.keuzekaart:hover{box-shadow:inset 0 0 0 2px var(--oranje),var(--schaduw);
  transform:translateY(-2px);background:#fff}
.keuzekaart:focus-visible{outline:3px solid var(--oranje);outline-offset:3px}
.keuzekaart .kk-titel{font-weight:650;font-size:.98rem;line-height:1.25}
.keuzekaart .kk-uitleg{font-size:.82rem;color:var(--zacht);line-height:1.35}
.keuzekaart img{border-radius:var(--r-s)}
.keuzekaart--pic{min-height:132px}
.kaartpic{width:44px;height:44px}
.keuzekaart--stijl img{width:100%;height:auto;aspect-ratio:1;object-fit:cover}

/* een kaart die een selectievakje is; de invoer zelf is onzichtbaar maar
   bedienbaar met het toetsenbord, en de kaart toont de staat */
.keuzekaart--kies{cursor:pointer;position:relative}
.keuzekaart--kies input{position:absolute;opacity:0;width:1px;height:1px}
.keuzekaart--kies:has(input:checked){box-shadow:inset 0 0 0 3px var(--oranje),var(--schaduw);
  background:#FFF3EA}
.keuzekaart--kies:has(input:checked)::after{content:"gekozen";position:absolute;
  top:.5rem;right:.6rem;font-size:.68rem;color:var(--oranje-diep);font-weight:700;
  letter-spacing:.03em}
.keuzekaart--kies:has(input:focus-visible){outline:3px solid var(--oranje);outline-offset:3px}

.familiekop2{font-size:1.02rem;margin:1.8rem 0 .2rem;color:var(--zacht);
  font-weight:650;letter-spacing:.01em}
.kaartformulier{margin-top:1.2rem}
.tweekolom{display:grid;gap:.4rem 1.2rem;grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.tussenkop{font-size:1.05rem;margin:1.8rem 0 .3rem}
.knoprij{display:flex;flex-wrap:wrap;gap:.7rem;align-items:center;margin:1.6rem 0 .6rem}
.knop--rustig{background:var(--katern);color:var(--inkt);box-shadow:inset 0 0 0 1px var(--lijn)}
.knop--rustig:hover{background:#fff;color:var(--inkt);box-shadow:inset 0 0 0 1px #d9c9ae}
.knop--groot{font-size:1.05rem;padding:1rem 1.9rem}

/* de zin die bewijst dat de keuzes samen een boek vormen */
.samenvatting{font-family:var(--serif,inherit);font-size:1.22rem;line-height:1.5;
  background:var(--katern);border-radius:var(--r-m);padding:1.2rem 1.3rem;
  box-shadow:inset 0 0 0 1px var(--lijn);margin:.6rem 0 1rem}

@media (max-width:520px){
  .keuzeraster{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:.6rem}
  .keuzeraster--breed{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}
  .keuzekaart{min-height:104px;padding:.85rem .6rem}
  .keuzekaart .kk-titel{font-size:.94rem}
  .keuzespoor a{font-size:.85rem;padding:.3rem .7rem .3rem .45rem}
  .keuzespoor .wijzig{display:none}
  .samenvatting{font-size:1.08rem;padding:1rem}
}

/* de stapteller: waar ben ik, en hoeveel komt er nog */
.keuzespoor .stapteller{display:flex;align-items:center;justify-content:flex-start;
  gap:.7rem;margin:0 0 .6rem;font-size:.82rem;color:var(--zacht);font-weight:600;
  letter-spacing:.01em}
.keuzespoor .spoor{display:block;flex:1;max-width:220px;height:4px;border-radius:99px;
  background:var(--lijn);overflow:hidden}
.keuzespoor .spoor i{display:block;height:100%;background:var(--oranje);border-radius:99px}
.fotoveld input[type=file]{display:block;margin-top:.4rem;font:inherit;font-size:.95rem;
  padding:.7rem;background:var(--katern);border-radius:var(--r-s);
  box-shadow:inset 0 0 0 1px var(--lijn);width:100%;max-width:420px}
.fotoveld input[type=file]:focus-visible{outline:3px solid var(--oranje);outline-offset:2px}

/* de afgeleide plekken op een onderwerppagina: beschrijving, geen keuzelijst */
.plekregels{list-style:none;margin:.8rem 0 0;padding:0;display:grid;gap:.55rem}
.plekregels li{background:var(--katern);border-radius:var(--r-s);padding:.7rem .9rem;
  box-shadow:inset 0 0 0 1px var(--lijn);font-size:.95rem;line-height:1.45;
  color:var(--zacht)}
.plekregels b{color:var(--inkt)}

/* Invoervelden in de generator, allemaal hetzelfde.
   De vorige regel selecteerde op input[type=text]; een <input> zonder type is
   óók een tekstveld maar viel er buiten, en dat is precies wat er misging: het
   leeftijdsveld had de Koekoek-opmaak en het naamveld de kale browserversie. */
input[type=text],input[type=number],input[type=email],input[type=tel],
input[type=search],input:not([type]),select,textarea{
  width:100%;min-height:48px;padding:.8rem 1rem;border:1.5px solid var(--lijn);
  border-radius:var(--r-s);background:#fff;font:inherit;font-size:1rem;
  line-height:1.3;color:var(--inkt);appearance:none;-webkit-appearance:none}
input[type=number]{-moz-appearance:textfield}
input[type=text]:focus-visible,input[type=number]:focus-visible,
input:not([type]):focus-visible,select:focus-visible,textarea:focus-visible{
  outline:3px solid var(--oranje);outline-offset:0;border-color:var(--oranje)}
input[aria-invalid="true"]{border-color:var(--oranje-diep);
  box-shadow:0 0 0 3px rgba(201,73,26,.14)}
.veldhulp{margin:.3rem 0 0;font-size:.84rem;color:var(--zacht)}
.veldgroep{margin:0 0 1.1rem}
.veldgroep .veld{margin-top:0}
@media(max-width:520px){
  input[type=text],input[type=number],input:not([type]),select,textarea{
    min-height:48px;font-size:16px}   /* 16px: iOS zoomt anders in bij focus */
}
.optioneel{font-weight:500;color:var(--zacht);font-size:.8rem;margin-left:.35rem;
  letter-spacing:.01em}

/* ==========================================================================
   De verkooppagina: een boek dat opengaat, en twee producten ernaast.

   Uitgangspunt: laat zien wat je koopt. Geen aftelklok, geen doorgestreepte
   prijs, geen voorgevinkte duurdere keuze. Het boek doet het werk.

   Twee dingen die deze sectie sturen en die geen ontwerpkeuze zijn maar een
   meting:

   1. DE MATEN KOMEN UIT HET DRUKBESTAND. `kkp/app/boekmaat.py` rekent de
      corpsgrootte, de regelafstand, de marge en de regelbreedte van de
      gedrukte bladzijde om naar procenten van de paginabreedte, en het sjabloon
      zet die als variabelen op `.boekpodium`. Er staat hier dus geen enkel
      getal over boektypografie. De bladzijde is 210 mm breed en de tekst staat
      op 20,5 pt Lora; dat is 3,444 % van de paginabreedte, ofwel 13 px in een
      preview van 380 px. Klein, ja — zo klein is een boek van 21 cm nu eenmaal
      op een half zo groot scherm.

   2. HET OPENSLAAN IS EEN LAAG ERBOVEN. De spread hieronder staat altijd in de
      HTML en is de eindtoestand. `static/boekfilm.js` legt er één keer een
      StPageFlip-boek overheen en haalt dat daarna weg. Zonder JavaScript, bij
      minder beweging, op een smal scherm of als de bibliotheek niet laadt,
      gebeurt er niets en staat de spread er gewoon.
   ========================================================================== */

.verkoop{max-width:min(100%,1180px)}
.verkoopkop{margin-bottom:1.8rem}
.verkoopkop h1{margin-bottom:.35rem}
.kopactie{display:flex;flex-wrap:wrap;align-items:center;gap:.7rem 1rem;
  margin:1.4rem 0 0}
.kopactie .klein{max-width:32ch}

.boekpodium{margin:0 0 2.6rem;padding:2.4rem 1.2rem 1.6rem;border-radius:var(--r-l);
  background:linear-gradient(180deg,#F6EEE1 0%,var(--papier) 78%);text-align:center}

/* Het toneel. De maat staat vast (2:1, de verhouding van twee vierkante
   bladzijden), zodat er niets verspringt als de film start of stopt. */
.boekscene{position:relative;width:min(100%,760px);margin:0 auto;aspect-ratio:2/1}

/* --- de opengeslagen spread: dit is de waarheid --- */
/* `.boekspread` en niet `.boek`: die klasse bestaat al voor de omslagjes op de
   publieke pagina's en heeft daar een eigen breedte, schaduw en glansverloop.
   Twee betekenissen op één naam is precies hoe een pagina stilletjes stukgaat. */
.boekspread{position:absolute;inset:0}
.boek-blok{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1fr;
  border-radius:3px 9px 9px 3px;overflow:hidden;background:#fff;
  box-shadow:0 24px 50px -26px rgba(60,40,25,.55),0 2px 0 rgba(0,0,0,.05)}
.blad{position:relative;min-width:0;overflow:hidden}
/* Elke bladzijde is zijn eigen container: `cqw` binnen deze doos is één procent
   van de bladzijdebreedte, en dat is precies de eenheid waarin boekmaat.py
   rekent. */
.blad--tekst{background:#FBF6EE;container-type:inline-size;text-align:left;
  background-image:linear-gradient(90deg,rgba(0,0,0,0) 80%,rgba(90,60,35,.11) 100%)}
/* De bladspiegel, letterlijk die van het drukbestand: buitenmarge links,
   rugmarge rechts, regelbreedte ertussen, en sinds UAT 1 ook een kop- en een
   voetmarge. De waarden komen uit `app/boekmaat.py`, die ze uit dezelfde
   constanten haalt als de renderer; de getallen hieronder zijn alleen de
   terugval voor een pagina die de variabelen niet meekrijgt. Er wordt hier
   niets bijgeschaafd: wat je op het scherm ziet afbreken, breekt op papier op
   dezelfde plek af.

   De verticale marge was er niet. De tekst hing op `top:50%` en mocht zo hoog
   worden als hij was; bij 184 woorden liep hij van de kop tot de voet van de
   bladzijde. `max-height` plus de kop- en voetmarge maken daar een echte
   bladspiegel van, en `overflow:hidden` is er bewust NIET: tekst die niet past
   hoort zichtbaar niet te passen, niet stilletjes weggeknipt te worden. Dat de
   tekst past is het werk van `pipeline/leesniveau.py`. */
.bladbinnen{position:absolute;top:50%;transform:translateY(-50%);
  left:var(--blad-marge,8.571%);width:var(--blad-meet,80.476%);
  max-height:var(--blad-blokhoogte,46%)}
/* Twee keer `font-size`: de eerste is voor een browser die `cqw` niet kent
   (Chrome onder 105, Safari onder 16, Firefox onder 110). Die krijgt dan een
   vaste maat die dicht bij de echte ligt in plaats van de erfelijke 17 px. */
.bladtitel{font-family:'Lora',Georgia,serif;font-style:italic;
  font-size:.62rem;
  font-size:calc(var(--blad-corps,3.444cqw) * .72);color:var(--zacht);
  margin:0 0 1.4em;line-height:1.3}
.bladzin{font-family:'Lora',Georgia,serif;
  font-size:.82rem;
  font-size:max(11px,var(--blad-corps,3.444cqw));
  line-height:var(--blad-regel,1.68);margin:0;color:#3A2E28;
  hyphens:none;overflow-wrap:break-word}
.blad--beeld{background:#EFE6D8;
  background-image:linear-gradient(90deg,rgba(90,60,35,.12) 0%,rgba(0,0,0,0) 20%)}
.blad--beeld img{width:100%;height:100%;object-fit:cover;display:block}
.boekrug{position:absolute;left:50%;top:0;bottom:0;width:14px;transform:translateX(-50%);
  background:linear-gradient(90deg,rgba(90,60,35,0) 0%,rgba(90,60,35,.15) 45%,
    rgba(90,60,35,.15) 55%,rgba(90,60,35,0) 100%);pointer-events:none;z-index:2}
.boekschaduw{position:absolute;left:6%;right:6%;bottom:-18px;height:28px;
  border-radius:50%;background:radial-gradient(ellipse at center,
  rgba(70,48,30,.28),rgba(70,48,30,0) 70%);z-index:-1}

/* De snee van het boekblok: het papier dat je naast de bladzijde ziet. Bij een
   gesloten boek zie je er één, aan de voorsnede; bij een opengeslagen boek twee,
   aan weerskanten. Daarom fade de linker mee met het openslaan. */
.snee{position:absolute;top:2.5%;bottom:2.5%;width:6px;z-index:0;
  background:linear-gradient(90deg,#E8DDCA,#FBF6EE 45%,#DCCFB6)}
.snee--rechts{right:-5px;border-radius:0 2px 2px 0}
.snee--links{left:-5px;border-radius:2px 0 0 2px;opacity:1;
  transition:opacity 420ms ease 620ms}
.boekscene[data-film="dicht"] .snee--links{opacity:0;transition:opacity 120ms ease}

/* De opmaak die StPageFlip zelf nodig heeft (src/Style/stPageFlip.css uit
   page-flip 2.0.7, MIT — zie static/vendor/HERKOMST.md). Hij staat hier in
   plaats van als los bestand zodat de pagina één stijlblad laadt. Zonder deze
   regels staan de bladzijden gewoon in de tekststroom en verspringt de halve
   pagina zodra de film wordt opgebouwd. `sft__wrapper` is niet onze typefout
   maar die van de bibliotheek (issue #55). */
.stf__parent{display:block;box-sizing:border-box;transform:translateZ(0);
  -ms-touch-action:pan-y;touch-action:pan-y}
.sft__wrapper{position:relative;width:100%;box-sizing:border-box}
.stf__parent canvas{position:absolute;width:100%;height:100%;left:0;top:0}
.stf__block{position:absolute;width:100%;height:100%;box-sizing:border-box;
  perspective:2000px}
/* De bibliotheek zet 2000 px perspectief, ongeacht hoe groot het boek is. Voor
   een bladzijde van 380 px is dat te dichtbij: de kaft groeit dan halverwege
   tot boven de rand van het podium uit en dat oogt als een fout in plaats van
   als diepte. Verder weg kijken is rustiger. */
.boekfilm .stf__block{perspective:3400px}
.stf__item{display:none;position:absolute;transform-style:preserve-3d}
.stf__outerShadow,.stf__innerShadow,.stf__hardShadow,.stf__hardInnerShadow{
  position:absolute;left:0;top:0}

/* --- de film: alleen zichtbaar terwijl het boek opengaat --- */
.boekscene > .boekfilm{position:absolute;inset:0;z-index:3;visibility:hidden;
  transform:translateX(-25%);
  transition:transform 1150ms cubic-bezier(.19,.72,.24,1)}
/* Zichtbaarheid en beweging staan bewust in twee attributen. De bibliotheek
   houdt haar bladzijden op `display:none` tot ze aan de beurt zijn; de omslag
   krijgt zijn doos dus pas op het moment dat het omslaan begint. Zou de film op
   dat moment al zichtbaar zijn, dan telt dat verschijnen mee als layout shift.
   Daarom: eerst het omslaan starten (`data-film`), twee beeldjes later pas
   laten zien (`data-zicht`). Die 33 milliseconden ziet niemand. */
.boekscene[data-zicht="1"] .boekfilm{visibility:visible}
.boekscene[data-film="open"] .boekfilm{transform:none}
/* De bladzijden krijgen hun maat hier al, in dezelfde px als de bibliotheek ze
   straks zelf zet (`--pfmaat` komt uit boekfilm.js en is de halve spread).
   Zonder dat zetten van de maat verandert de doos van de omslag op het moment
   dat het omslaan begint, en dat telt als layout shift op een pagina die verder
   nergens verspringt. */
.boekfilm .pfblad{background:#FBF6EE;overflow:hidden;box-sizing:border-box;
  width:var(--pfmaat,50%);height:var(--pfmaat,100%);left:0;top:0}
.boekfilm .pftekst{container-type:inline-size;text-align:left;
  background-image:linear-gradient(90deg,rgba(0,0,0,0) 80%,rgba(90,60,35,.11) 100%)}
.boekfilm .pftekst .bladbinnen{position:absolute}
.boekfilm .pfbeeld img{width:100%;height:100%;object-fit:cover;display:block}

/* De kaft. De opbouw is die van het echte omslagbestand: de illustratie
   paginavullend, een verloop eronder zodat de letters rust hebben, de titel in
   Young Serif linksonder en het merk daaronder. Gemeten aan omslag.pdf van een
   afgemaakt boek: titel 36,5 pt, linkermarge 22,4 mm, onderkant op 13 %. */
.pfkaft{position:relative;overflow:hidden;background:#2A2320;
  container-type:inline-size;
  box-shadow:0 24px 46px -22px rgba(50,32,18,.6)}
.pfkaft img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pfscrim{position:absolute;left:0;right:0;bottom:0;height:48%;
  background:linear-gradient(180deg,rgba(28,18,10,0),rgba(28,18,10,.52) 60%,
    rgba(28,18,10,.72))}
.pfkafttitel{position:absolute;left:var(--kaft-marge,10.6%);right:9%;
  bottom:var(--kaft-onder,13%);color:#FFF6EC;max-height:34%;overflow:hidden;
  font-family:'Young Serif',Georgia,serif;
  font-size:1.45rem;
  font-size:var(--kaft-titel,6.1cqw);
  line-height:1.12;text-align:left}
.pfkaftmerk{position:absolute;left:var(--kaft-marge,10.6%);bottom:5.4%;
  color:#FFF6EC;opacity:.86;font-size:var(--kaft-merk,2cqw);letter-spacing:.16em;
  text-transform:uppercase}
.pfkaft--achter{background:#EFE3CE}

.boekonder{display:grid;justify-items:center;gap:.5rem;margin:1.5rem 0 0}
.boekonder p{margin:0}
.boekonder-knop{min-height:48px;display:flex;align-items:center}
.knop--klein{padding:.55rem 1.1rem;font-size:.9rem;min-height:44px}
.omslagnoot{max-width:52ch;margin:.7rem auto 0}

/* --- betaalvertrouwen onder de knoppen --------------------------------- */
/* De knop stuurt iemand rechtstreeks naar Stripe. Dat hoort te staan waar
   geklikt wordt, niet in een voettekst. Geen betaallogo's: die mogen alleen
   als officieel merkmateriaal, en dat hebben we niet. Wat er wél kan, staat in
   woorden onder de kaarten — opgehaald uit het gekoppelde Stripe-account. */
.veiligregel{display:flex;align-items:center;gap:.45rem;margin:.7rem 0 .15rem;
  font-size:.86rem;color:var(--zacht)}
.veiligregel svg{flex:none;color:#4C7A5A}
.product .mini{margin:0}
.betaalmethoden{margin:1.2rem 0 0;max-width:62ch}

/* --- de koopbalk op een smal scherm ------------------------------------ */
/* Verschijnt pas als de preview voorbij is en verdwijnt zodra de keuze in
   beeld staat. Geen aftelklok, geen schaarste: alleen de weg terug. */
.stickykoop{position:fixed;left:0;right:0;bottom:0;z-index:30;
  padding:.6rem .9rem calc(.6rem + env(safe-area-inset-bottom));
  background:rgba(251,246,238,.96);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border-top:1px solid var(--lijn);display:flex;justify-content:center}
.stickykoop .knop{width:100%;max-width:26rem;justify-content:center}
@media(min-width:761px){.stickykoop{display:none}}


/* wat er in het boek zit */
.watjekrijgt .feiten{list-style:none;margin:0;padding:0;display:grid;gap:.5rem;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.watjekrijgt .feiten li{position:relative;padding-left:1.5rem;font-size:.96rem;
  line-height:1.45}
.watjekrijgt .feiten li::before{content:"";position:absolute;left:0;top:.45em;
  width:9px;height:9px;border-radius:50%;background:var(--oranje)}

/* de twee producten */
.keuze{margin:2.4rem 0 0}
.productraster{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));
  align-items:start}
.product{position:relative;background:var(--katern);border-radius:var(--r-m);
  padding:1.5rem 1.4rem 1.4rem;box-shadow:inset 0 0 0 1px var(--lijn);
  display:flex;flex-direction:column;gap:.2rem}
.product--papier{box-shadow:inset 0 0 0 2px var(--oranje),var(--schaduw)}
.product h3{font-size:1.15rem;margin:0 0 .2rem}
.vlag{position:absolute;top:-.7rem;left:1.3rem;margin:0;background:var(--oranje);
  color:#fff;font-size:.74rem;font-weight:700;letter-spacing:.03em;
  padding:.25rem .7rem;border-radius:999px}
.product .totaal{margin:.1rem 0 .8rem;font-size:1.9rem;line-height:1.1}
.product .totaal b{font-family:var(--serif,Georgia,serif)}
.product .totaal span{font-size:.85rem;color:var(--zacht);font-weight:500;
  letter-spacing:.01em}
.opbouw{list-style:none;margin:0 0 .9rem;padding:.7rem .8rem;border-radius:var(--r-s);
  background:var(--papier);font-size:.9rem}
.opbouw li{display:flex;justify-content:space-between;gap:1rem;padding:.15rem 0}
.opbouw-som{border-top:1px solid var(--lijn);margin-top:.35rem;padding-top:.4rem;
  font-weight:700}
.bevat{list-style:none;margin:0 0 .9rem;padding:0;display:grid;gap:.4rem;
  font-size:.93rem;line-height:1.4}
.bevat li{position:relative;padding-left:1.35rem}
.bevat li::before{content:"";position:absolute;left:.15rem;top:.42em;width:8px;
  height:8px;border-radius:50%;background:var(--goud)}
.adresregel{margin:0 0 1rem}
.product .knop{align-self:flex-start;min-height:48px}
.na-betaling{margin:1.2rem 0 0;max-width:62ch}
.vragenblok{margin-top:2.4rem}
.bestelnr{margin-top:2.6rem;color:var(--zacht)}

/* --- de pagina met het afgeronde boek ---------------------------------- */
/* Deze klassen stonden wel in klaar.html maar nergens in de stijl. Daardoor
   greep de knopstrook per ongeluk de sitebrede `.balk` (de oranje meldingsbalk
   bovenaan) en stond de geruststelling als opsommingstekens midden in het
   oranje. Nu heeft dit blok zijn eigen namen. */
.werk{display:grid;gap:1.8rem;align-items:start;margin-top:1.8rem}
@media(min-width:960px){.werk{grid-template-columns:1.15fr .85fr;gap:2.4rem}}
.boekvlak{margin:0}
.boekvlak img{width:100%;border-radius:var(--r-m);display:block;
  box-shadow:var(--schaduw-diep)}
.boekvlak figcaption{display:flex;flex-wrap:wrap;gap:.2rem .8rem;
  margin-top:.6rem;font-size:.88rem;color:var(--zacht)}
.spec{margin:1rem 0 0;font-size:.92rem}
.spec>div{display:flex;justify-content:space-between;gap:1rem;
  border-top:1px solid var(--lijn);padding:.45rem 0}
.spec dt{color:var(--zacht)}
.spec dd{margin:0;text-align:right}
.koopprijs{display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem;margin:0 0 .8rem}
.koopprijs b{font-family:'Bricolage',sans-serif;font-size:1.6rem;line-height:1}
.koopblok{margin:1.1rem 0 0}
.koopblok .knop{width:100%;text-align:center;min-height:48px}
.gerust{list-style:none;margin:.7rem 0 0;padding:0;display:grid;gap:.3rem;
  font-size:.86rem;color:var(--zacht)}
.gerust li{position:relative;padding-left:1.15rem}
.gerust li::before{content:"";position:absolute;left:.1rem;top:.48em;width:7px;
  height:7px;border-radius:50%;background:var(--goud)}
.streep{border:0;border-top:1px solid var(--lijn);margin:1.2rem 0}

/* --- de bestelpagina ---------------------------------------------------- */
/* Eén pagina die met de bestelling meebeweegt. Wat hier staat is bewust saai:
   een bon, een voortgangsbalk en twee knoppen. Niemand komt hier om iets moois
   te zien; ze komen kijken of hun boek er al is. */
.bestelling{max-width:min(100%,1180px)}
.bon{margin:0;display:grid;gap:.15rem}
.bon>div{display:flex;justify-content:space-between;gap:1rem;
  border-top:1px solid var(--lijn);padding:.5rem 0}
.bon>div:first-child{border-top:0}
.bon dt{color:var(--zacht)}
.bon dd{margin:0;text-align:right;font-weight:700}
.bon .goed{color:#2C6E49}
.voortgangbalk{display:block;height:10px;border-radius:999px;background:var(--lijn);
  overflow:hidden;margin:.2rem 0 .6rem}
.voortgangbalk span{display:block;height:100%;background:var(--oranje);
  border-radius:999px;transition:width .6s ease}
.voortgangblok .feiten{margin-top:1rem}
.downloadkop{margin:1.8rem 0 .8rem}
.downloads{list-style:none;margin:0;padding:0;display:grid;gap:.9rem}
.downloads li{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1rem}
.downloads .knop{min-width:14rem;justify-content:center}
.downloads .klein{flex:1 1 14rem}
.kindlevraag{margin:1.2rem 0}
.tweeluik{display:grid;gap:1rem;grid-template-columns:1fr}
@media(min-width:600px){.tweeluik{grid-template-columns:1fr 1fr}}
.tweeluik figcaption{justify-content:flex-start;color:var(--zacht);font-size:.86rem}


@media (max-width:760px){
  .boekpodium{padding:1.5rem .7rem 1.2rem;border-radius:var(--r-m)}
  /* Op een smal scherm wordt een 2:1-boek te laag om indruk te maken, en een
     bladzijde van 21 cm die tot 175 px wordt teruggebracht is niet meer te
     lezen. Daarom staan de bladzijden hier onder elkaar, allebei vierkant —
     zoals je een opengeslagen boek op tafel van bovenaf ziet — en speelt de
     film hier niet (dat regelt boekfilm.js met dezelfde grens). */
  .boekscene{aspect-ratio:auto;max-width:360px}
  .boekspread{position:relative;inset:auto}
  .boek-blok{position:relative;inset:auto;grid-template-columns:1fr;
    grid-template-rows:auto auto;border-radius:10px}
  .blad--beeld{aspect-ratio:1}
  .blad--tekst{background-image:none;order:2;
    padding:calc(var(--blad-kop,12.381%) * .5) 0 calc(var(--blad-voet,12.381%) * .5)}
  /* Op een smal scherm staan de bladzijden onder elkaar en is er geen rug.
     De horizontale marges blijven die van het drukbestand; de verticale worden
     padding op de bladzijde zelf, want de hoogte is hier niet vast. */
  .bladbinnen{position:relative;top:auto;transform:none;left:auto;width:auto;
    max-height:none;
    margin-left:var(--blad-marge,8.571%);margin-right:var(--blad-rugmarge,10.952%)}
  .boekrug,.snee,.boekschaduw{display:none}
  .boekfilm{display:none}
  .product .knop{align-self:stretch;text-align:center}
  .kopactie .knop{width:100%;justify-content:center}
  /* Ruimte voor de koopbalk. Vast gereserveerd en niet pas op het moment dat de
     balk verschijnt: dan zou de pagina onder de lezer verspringen. */
  .verkoop{padding-bottom:4.5rem}
}

/* De melding die verschijnt als een taak stilligt. Zichtbaar genoeg om gelezen
   te worden, rustig genoeg om geen alarm te zijn: er is niets stuk, er wordt
   even niet gewerkt. */
.hervatmelding{
  margin-top:.5rem; padding:.55rem .75rem; border-radius:.5rem;
  background:var(--zacht,#f6efe6); border-left:3px solid var(--accent,#e0602c);
}

/* ==========================================================================
   DE WACHTPAGINA
   --------------------------------------------------------------------------
   De balk staat op de fase die werkelijk bereikt is (zie fases.py) en gaat
   uitsluitend vooruit. De lijst eronder laat zien waar we zijn in de hele
   keten, zodat het schrijfwerk zichtbaar meetelt voordat er een tekening is.
   ========================================================================== */
.wachten{max-width:44rem;margin:0 auto}
.wachten .spoor{height:8px;margin:1.4rem 0 .9rem}
.wachten .spoor i{position:relative;overflow:hidden}
/* Een zacht schuivend licht: bewijs dat er iets gebeurt, zonder de balk zelf
   iets te laten beloven wat nog niet gehaald is. */
.wachten .spoor i::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);
  transform:translateX(-100%);animation:kkp-glans 1.9s ease-in-out infinite}
@keyframes kkp-glans{to{transform:translateX(100%)}}
.wachten .fasekop{margin:.2rem 0 .15rem;font-weight:600;
  font-family:'Bricolage',sans-serif;font-size:1.06rem}
.wachten .fasezin{margin:0;color:var(--zacht);min-height:1.5em}
.fasenlijst{list-style:none;margin:1.6rem 0 0;padding:0;display:grid;gap:.35rem}
.fasenlijst li{display:flex;align-items:center;gap:.6rem;font-size:.92rem;
  color:var(--zacht);padding:.3rem 0}
.fasenlijst .vink{flex:none;width:16px;height:16px;border-radius:50%;
  box-shadow:inset 0 0 0 2px var(--lijn);background:transparent;
  transition:background .3s,box-shadow .3s}
.fasenlijst li.gedaan{color:var(--inkt)}
.fasenlijst li.gedaan .vink{background:var(--oranje);box-shadow:inset 0 0 0 2px var(--oranje)}
.fasenlijst li.nu{color:var(--inkt);font-weight:600}
.fasenlijst li.nu .vink{box-shadow:inset 0 0 0 2px var(--oranje);
  animation:kkp-klop 1.6s ease-in-out infinite}
@keyframes kkp-klop{50%{background:var(--oranje)}}
/* Ligt het werk stil, dan stopt de beweging. Een balk die blijft glanzen
   terwijl er niemand aan werkt, is een leugen met een animatie eromheen. */
.wachten.stil .spoor i::after,
.wachten.stil .fasenlijst li.nu .vink{animation:none}
.wachten.stil .fasenlijst li.nu .vink{box-shadow:inset 0 0 0 2px var(--lijn)}
.wachten .melding{margin-top:1.2rem;padding:.7rem .9rem;border-radius:.5rem;
  background:var(--katern);border-left:3px solid var(--oranje);color:var(--inkt)}
.wachten .herstelknop{margin:1rem 0 0}
@media(prefers-reduced-motion:reduce){
  .wachten .spoor i::after,.fasenlijst li.nu .vink{animation:none!important}
  .wachten .spoor i::after{display:none}}

/* Het herstelformulier op de foutpagina: één veld, één vinkje, één knop. */
.fotoherstel{margin:1.4rem 0 0;display:grid;gap:.9rem;max-width:34rem}
.fotoherstel .veld{display:grid;gap:.35rem;font-size:.95rem}
.fotoherstel .veld input[type=file]{padding:.6rem;border:1px dashed var(--lijn);
  border-radius:var(--r-m);background:var(--katern);min-height:44px}
.fotoherstel .vinkje{display:flex;gap:.6rem;align-items:flex-start;
  font-size:.86rem;color:var(--zacht)}
.fotoherstel .vinkje input{margin-top:.25rem;width:20px;height:20px;flex:none}

/* --- de persoonlijke boodschap in de generator ------------------------- */
/*  De boodschap wordt teruggelezen zoals hij straks in het boek staat: in de
    boekletter, met de regelafbrekingen die de koper zelf typte. Een typefout in
    een zin die voor altijd in het boek komt, hoort hier op te vallen. */
.boodschapkijk {
  margin: 1.6rem 0 0;
  padding: 1.1rem 1.2rem;
  border-radius: var(--radius, 14px);
  background: var(--kaartvlak, #fbf7f0);
  border: 1px solid rgba(51, 41, 31, .10);
}
.boodschapkijk .tussenkop { margin-top: 0; }
.opdrachtvoorbeeld {
  white-space: pre-wrap;
  font-family: var(--boekletter, Georgia, serif);
  font-size: 1.02rem;
  line-height: 1.6;
  margin: 0 0 .4rem;
}
.opdrachtvan {
  font-style: italic;
  opacity: .78;
  margin: 0 0 .6rem;
}
.veldgroep textarea {
  width: 100%;
  min-height: 5.4rem;
  padding: .6rem .7rem;
  font: inherit;
  line-height: 1.5;
  border-radius: 10px;
  border: 1px solid rgba(51, 41, 31, .28);
  background: #fff;
  resize: vertical;
}
.veldgroep textarea:focus-visible { outline: 2px solid var(--accent, #E0A63F); outline-offset: 2px; }

/* --- de boekbeleving: één component voor download- en hardcoverpagina ---- */
/*  Het echte voorplat groot in beeld, daarna de spreads zoals ze gedrukt
    worden. Zonder JavaScript staan de spreads onder elkaar; het script maakt er
    één zichtbare spread met pijlen van. Er beweegt niets uit zichzelf. */
.boekbeleving { margin: 0 0 2rem; }
.boekstandaard { margin: 0 0 1rem; text-align: center; }
.boek3d {
  position: relative;
  display: inline-block;
  max-width: min(420px, 82vw);
  border-radius: 3px 10px 10px 3px;
  box-shadow: 0 18px 38px rgba(51, 41, 31, .22), 0 2px 6px rgba(51, 41, 31, .14);
  transform: perspective(1400px) rotateY(-7deg);
  transform-origin: left center;
}
.boek3d img { display: block; width: 100%; height: auto; border-radius: 3px 10px 10px 3px; }
/* De rug: een smalle donkere strook links, zoals bij een dicht boek. */
.boek3d .boekrug {
  position: absolute; left: 0; top: 0; bottom: 0; width: 12px;
  background: linear-gradient(90deg, rgba(51,41,31,.42), rgba(51,41,31,.06));
  border-radius: 3px 0 0 3px;
}
/* En de bladsnede rechts: een paar lichte lijntjes die het blok papier zijn. */
.boek3d .boeksnede {
  position: absolute; right: -7px; top: 5px; bottom: 5px; width: 7px;
  border-radius: 0 4px 4px 0;
  background: repeating-linear-gradient(90deg, #fdfaf4 0 1px, #e6ded1 1px 2px);
  box-shadow: 1px 0 2px rgba(51, 41, 31, .18);
}
.boekstandaard figcaption { margin-top: 1rem; }
.boektitel { display: block; font-size: 1.15rem; }
.uniekregel {
  text-align: center; font-style: italic; margin: .2rem 0 1.6rem; opacity: .85;
}

.spreadvenster { overflow: hidden; }
.spreadlijst { list-style: none; margin: 0; padding: 0; }
.spread {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0;
  margin: 0 auto 1.1rem; max-width: 900px;
  border-radius: 8px; overflow: hidden;
  box-shadow: 0 10px 26px rgba(51, 41, 31, .16);
  background: #fff;
}
.spread--enkel { grid-template-columns: minmax(0, 460px); justify-content: center; }
.spread img { display: block; width: 100%; height: auto; }
.doorblader--actief .spread { display: none; margin-bottom: 0; }
.doorblader--actief .spread[data-open] { display: grid; }
.bladerknoppen {
  display: flex; align-items: center; justify-content: center;
  gap: 1rem; margin: .9rem 0 .2rem;
}
.bladerknop {
  width: 2.6rem; height: 2.6rem; border-radius: 50%;
  border: 1px solid rgba(51, 41, 31, .22); background: #fff;
  font-size: 1.5rem; line-height: 1; cursor: pointer; color: inherit;
}
.bladerknop:disabled { opacity: .35; cursor: default; }
.bladerknop:focus-visible { outline: 2px solid var(--accent, #E0A63F); outline-offset: 2px; }
.bladerstand { margin: 0; min-width: 9rem; text-align: center; font-size: .92rem; }
.bladerhulp { text-align: center; }

@media (max-width: 620px) {
  .spread { grid-template-columns: 1fr; }
  .spread--enkel { grid-template-columns: 1fr; }
  .boek3d { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .boek3d { transform: none; transition: none; }
  .spread, .boek3d { box-shadow: 0 2px 8px rgba(51, 41, 31, .18); }
  * { scroll-behavior: auto !important; }
}

/* --- het boek terwijl het gemaakt wordt -------------------------------- */
/*  Dezelfde 3D-weergave als op de downloadpagina, klein en naast de balk.
    Het beeld is de gratis bladzijde die de klant al heeft — een echte tekening
    uit zijn eigen boek, en geen sjabloonplaatje. Er beweegt niets. */
.maakblok { display: flex; gap: 1.2rem; align-items: flex-start; }
.boek3d--klein { max-width: 148px; flex: 0 0 auto; margin: .2rem 0 0; }
.maaktekst { flex: 1 1 auto; min-width: 0; }
.maaktekst h2 { margin-top: 0; }
@media (max-width: 560px) {
  .maakblok { flex-direction: column; align-items: center; text-align: center; }
  .boek3d--klein { max-width: 120px; }
}

/* --- twee bladzijden die op elkaar lijken ------------------------------- */
/*  Geen foutmelding en geen alarm: het boek is af en de download werkt. Dit is
    één keuze over één tekening, en de bladzijden staan erbij zodat er iets te
    kiezen valt. */
.paneel--let { border: 1px solid rgba(224, 166, 63, .55); }
.risicoparen {
  display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; margin: .9rem 0;
}
.risicoparen figure { margin: 0; }
.risicoparen img {
  width: 100%; height: auto; border-radius: 6px; display: block;
  box-shadow: 0 4px 12px rgba(51, 41, 31, .14);
}
.risicoparen figcaption { font-size: .82rem; opacity: .75; margin-top: .3rem; }

/* --- de voortgangscomponent (wachtpagina én bestelpagina, 13-09-2026) ------ */
.voortgang{margin:1.2rem 0 0}
.voortgangkop{display:flex;gap:1.1rem;align-items:center;margin-bottom:.4rem}
.voortgangtekst{min-width:0;flex:1}
.voortgang .fasekop{margin:.1rem 0 .15rem;font-weight:600;
  font-family:'Bricolage',sans-serif;font-size:1.06rem}
.voortgang .fasezin{margin:0;color:var(--zacht);min-height:1.5em}
.voortgang .verstreken{margin:.3rem 0 0;color:var(--zacht)}
.voortgang .spoor{height:8px;margin:.9rem 0 .9rem}
.voortgang .spoor i{position:relative;overflow:hidden;
  transition:width .6s ease}
.voortgang.actief .spoor i::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);
  transform:translateX(-100%);animation:kkp-glans 1.9s ease-in-out infinite}
.voortgang .fasenlijst{margin-top:1rem}
.voortgang .fasenlijst li.nu .fasenaam{position:relative}
.voortgang.actief .fasenlijst li.nu .fasenaam::after{content:"";position:absolute;
  left:0;right:0;bottom:-2px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,transparent,var(--oranje),transparent);
  background-size:200% 100%;animation:kkp-schuif 1.8s linear infinite}
@keyframes kkp-schuif{from{background-position:200% 0}to{background-position:-200% 0}}
.voortgang.inderij .fasenlijst li.nu .vink{animation:none}
.voortgang.stil .spoor i::after,.voortgang.stil .fasenlijst li.nu .vink,
.voortgang.stil .fasenlijst li.nu .fasenaam::after{animation:none}
.voortgang .melding{margin-top:1.2rem;padding:.7rem .9rem;border-radius:.5rem;
  background:var(--katern);border-left:3px solid var(--oranje);color:var(--inkt)}
.voortgang .herstelknop{margin:1rem 0 0}
/* Het boekje: een lichte SVG-animatie in de merkkleuren, één bladzijde die
   rustig omslaat. Geen GIF, niets van buiten. */
.boekje{margin:0;flex:none;width:96px;height:68px}
.boekje svg{width:100%;height:100%;overflow:visible}
.boekje-kaft{fill:var(--oranje)}
.boekje-blad{fill:#fff;stroke:var(--lijn);stroke-width:1}
.boekje-regels path{stroke:var(--lijn);stroke-width:2;stroke-linecap:round;fill:none}
.boekje-rug{fill:var(--inkt);opacity:.25}
.boekje-omslaand{fill:#fff8ec;stroke:var(--lijn);stroke-width:1;
  transform-origin:60px 42px;transform-box:view-box;animation:kkp-omslaan 3.2s ease-in-out infinite}
@keyframes kkp-omslaan{0%,15%{transform:scaleX(1)}50%{transform:scaleX(.06)}
  85%,100%{transform:scaleX(-1)}}
.voortgang.stil .boekje-omslaand,.voortgang.inderij .boekje-omslaand{animation:none}
@media(prefers-reduced-motion:reduce){
  .boekje-omslaand,.voortgang .fasenlijst li.nu .fasenaam::after,
  .voortgang .spoor i::after,.voortgang .fasenlijst li.nu .vink{animation:none!important}
  .voortgang .spoor i::after{display:none}
  .voortgang .spoor i{transition:none}}
@media(max-width:520px){.voortgangkop{gap:.8rem}.boekje{width:72px;height:51px}}

/* --- de verkooppagina: kop, feiten en productkaart (13-09-2026) ------------ */
.verkoopkop .boektitel{font-family:var(--serif,Georgia,serif);font-size:clamp(1.7rem,4vw,2.4rem);
  margin:0 0 .3rem;line-height:1.15}
.verkoopkop .flaptekst{font-size:1.06rem;max-width:44rem}
.verkoopkop .uniek{color:var(--zacht);margin:.5rem 0 0}
.kopactie .ondersteun{display:block;margin-top:.45rem;color:var(--zacht);font-size:.9rem}
.watjekrijgt .feiten--twee{display:grid;gap:.5rem 1.8rem;grid-template-columns:1fr}
@media(min-width:700px){.watjekrijgt .feiten--twee{grid-template-columns:1fr 1fr}}

/* --- de gereedpagina: 2/3–1/3, en links niets dan het boek (UI-ronde 2) ---
   In ronde 1 stond de omslag klein naast titel, metadata en knoppen. Nu vult
   de echte omslag de linkerkolom en staan de twee downloadknoppen er direct
   onder, naast elkaar en even breed. De bovenkanten van beide kolommen liggen
   op dezelfde hoogte doordat het eerste kind van elke kolom geen bovenmarge
   heeft. */
.gereed{display:grid;gap:1.8rem;align-items:start;margin-top:1.4rem}
@media(min-width:960px){
  .gereed{grid-template-columns:2fr 1fr;gap:2.4rem}}
.gereed>*{margin-top:0}
.gereed>*>:first-child{margin-top:0}
.gereed aside .paneel:first-child{margin-top:0}
.covergroot{margin:0;border-radius:10px;overflow:hidden;background:var(--katern);
  box-shadow:0 18px 44px rgba(51,41,31,.22)}
.covergroot img{display:block;width:100%;height:auto;aspect-ratio:1/1;
  object-fit:contain;background:var(--katern)}
.downloadrij{list-style:none;display:grid;grid-template-columns:1fr;gap:1rem;
  margin:1.2rem 0 .8rem;padding:0}
@media(min-width:560px){.downloadrij{grid-template-columns:1fr 1fr}}
.downloadrij li{display:grid;gap:.4rem;align-content:start}
.downloadrij .knop{width:100%;justify-content:center;text-align:center;min-height:52px;
  display:inline-flex;align-items:center}
.gereed .klein{margin:0}
.bladerboek{margin:2.6rem 0 0;padding-top:1.8rem;border-top:1px solid var(--lijn)}
.bladerboek .boekbeleving{margin:0}
.bladerboek .boekstandaard{display:none}
.bladerboek .spread{max-width:none}
.bladerboek .spread--enkel{grid-template-columns:minmax(0,560px)}
.bladerboek .bladerknoppen{margin-top:.9rem}
.bladerboek .bladerknop{width:52px;height:52px;font-size:1.6rem}
.vragenblok{margin-top:2.2rem}

/* --- de hardcover-naverkooppagina (UI-ronde 2) -------------------------
   Wie het digitale boek al heeft, komt hier voor één ding: de hardcover. Geen
   downloadknoppen dus, wel het echte omslag groot in beeld — hetzelfde
   bestand als op de gereedpagina. */
.naverkoop{max-width:var(--breed,72rem);margin:0 auto}
.naverkoop .verkoopkop h1{max-width:24ch}
.naverkoophero{display:grid;gap:1.8rem;align-items:start;margin-top:1.4rem}
@media(min-width:960px){.naverkoophero{grid-template-columns:1.15fr .85fr;gap:2.4rem}}
.naverkoophero>*{margin-top:0}
.naverkoophero>*>:first-child{margin-top:0}
.naverkoophero .paneel{margin-top:0}
.naverkoopvlakken{display:grid;gap:1.4rem;margin:2.4rem 0 0}
@media(min-width:820px){.naverkoopvlakken{grid-template-columns:1fr 1fr;gap:1.8rem}}
.naverkoopvlak{background:var(--katern);border-radius:var(--r-m);padding:1.6rem 1.5rem}
.naverkoopvlak h2{font-size:1.25rem;margin:0 0 .6rem}
.naverkoopvlak ul{margin:.6rem 0 0;padding-left:1.1rem}
.naverkoopvlak li{margin-bottom:.35rem}
.naverkoopslot{margin:2rem 0 0;text-align:center}
.naverkoopslot .knop{min-height:52px}
.naverkoopslot .klein{margin:.6rem auto 0;max-width:34rem}
.alreedsdigitaal{margin:.8rem 0 0;padding:.7rem .9rem;border-radius:.5rem;
  background:var(--katern);border-left:3px solid var(--oranje)}

.emailcorrectie{margin:.9rem 0 0}
.emailform{display:grid;gap:.5rem;max-width:26rem;margin-top:.5rem}
.emailform input[type=email]{min-height:44px;padding:.5rem .7rem;border:1px solid var(--lijn);
  border-radius:var(--r-m);font:inherit}
.emailform .fout{color:#a13c1e;margin:0}
.emailform .knop{justify-self:start}

/* --- de acht stappen van een hardcover, in gewone taal ------------------- */
.drukstappen{list-style:none;margin:1.1rem 0 0;padding:0;display:grid;gap:.45rem}
.drukstappen li{display:grid;grid-template-columns:1.1rem 1fr auto;gap:.55rem;
  align-items:baseline;font-size:.92rem;color:#8A7C70}
.drukstap-merk{width:.6rem;height:.6rem;border-radius:50%;border:2px solid #D8CEC3;
  align-self:center;background:transparent}
.drukstappen li.af{color:#2A2320}
.drukstappen li.af .drukstap-merk{background:#3F7D55;border-color:#3F7D55}
.drukstappen li.bezig{color:#2A2320;font-weight:600}
.drukstappen li.bezig .drukstap-merk{border-color:#E4622E;
  box-shadow:0 0 0 3px rgba(228,98,46,.18)}
.drukstap-dag{font-size:.8rem;color:#8A7C70;font-weight:400;white-space:nowrap}
@media (max-width:420px){.drukstap-dag{display:none}}

/* --- "Hoe komt [naam] in het boek?" ------------------------------------- */
/* Eén blok met wat lucht eromheen; de chips erin zijn de gewone chips. Het
   blok hoort bij het naamveld erboven, dus geen kader en geen eigen kleur —
   alleen ruimte, zodat zichtbaar is dat het een vervolgvraag is. */
.vormvraag{margin:.2rem 0 1.2rem}
/* "Niet aangeven" kan alleen met een naam erbij; zolang die er niet is staat de
   chip uit. De keuze verdwijnt niet — dan zou hij onvindbaar zijn — hij is
   alleen zichtbaar niet beschikbaar. */
.chip.chip-uit{opacity:.45;cursor:not-allowed}

/* HET HERROEPINGSBLOK. Prominent en niet weggemoffeld: dit is de mededeling
   waarvan een koper achteraf kan zeggen dat hij hem niet gezien heeft. Daarom
   een eigen kader met een gekleurde rand, boven de knoppen en niet eronder. */
.herroeping{margin:0 0 1.4rem;border-left:4px solid var(--oranje)}
.herroeping h3{margin:0 0 .5rem;font-size:1.1rem}
.herroeping p{margin:0 0 .6rem;max-width:68ch}
.herroeping .toestemming{display:flex;gap:.6rem;align-items:flex-start;
  margin:.9rem 0 .3rem;padding:.7rem .8rem;background:var(--katern);
  border-radius:var(--r-s,8px)}
.herroeping .toestemming input{margin-top:.25rem;flex:0 0 auto;
  width:20px;height:20px}
.herroeping .toestemming label{max-width:64ch}
.herroeping .veldfout{color:var(--fout,#a6321e);font-weight:600;margin:.4rem 0 0}
.vormvraag .tussenkop{margin-top:.6rem}

/* --- een betaling die nog onderweg is (Klarna) --------------------------- */
.betaalwacht{border:1px solid #E6D8C6;background:#FFF8EE;margin-bottom:1.4rem}
.betaalwacht h2{margin-top:0}

/* ---- de laatste stap: bijsnijden en de mensproef -------------------------
 *
 * Toegevoegd 19-09-2026. Twee vakken die dicht blijven zonder JavaScript
 * (`hidden`), en een venster dat alleen opengaat op het moment van klikken.
 * Alles is zo opgezet dat het op een telefoon net zo goed werkt als op een
 * scherm: het doek is vierkant en zo breed als de kolom, de knoppen breken
 * netjes af, en er is geen hover nodig om iets te kunnen.
 */
.bijsnijden{margin:.9rem 0 .4rem}
.bijsnijden__doek{display:block;max-width:100%;border-radius:12px;
  background:#EFE7DB;border:1px solid rgba(42,35,32,.14);
  /* De browser mag hier niet zelf gaan scrollen of zoomen: slepen en knijpen
     zijn hier de bediening. */
  touch-action:none;cursor:grab}
.bijsnijden__doek:active{cursor:grabbing}
.bijsnijden input[type=range]{width:100%;max-width:420px}
.uitsnede{margin:.9rem 0 .4rem}
.uitsnede__beeld{display:block;width:min(100%,260px);aspect-ratio:1;
  object-fit:cover;border-radius:12px;border:1px solid rgba(42,35,32,.14)}
.knoprij--klein{gap:.5rem;flex-wrap:wrap;margin:.6rem 0 0}
.knoprij--klein .knop{font-size:.92rem;padding:.5rem .9rem}

.formuliermelding{margin:.7rem 0 0;padding:.6rem .8rem;border-radius:10px;
  font-size:.95rem;line-height:1.45;background:rgba(42,35,32,.05)}
.formuliermelding--fout{background:#FBE7E3;color:#7A2418}
.formuliermelding--waarschuwing{background:#FDF1D8;color:#6B4A0B}
.formuliermelding--goed{background:#E6F2E4;color:#245127}
.formuliermelding--hint{background:rgba(42,35,32,.05);color:var(--zacht)}

.venster{position:fixed;inset:0;z-index:60;display:flex;align-items:center;
  justify-content:center;padding:1rem;background:rgba(42,35,32,.55)}
.venster[hidden]{display:none}
.venster__doos{background:var(--katern);border-radius:16px;padding:1.4rem;
  width:min(100%,26rem);box-shadow:0 18px 50px rgba(42,35,32,.28)}
.venster__doos h2{margin-top:0}
.venster__widget{min-height:70px;display:flex;justify-content:center;
  align-items:center;margin:.9rem 0}
html.venster-open{overflow:hidden}

/* HET VERHAAL IS AL GESCHREVEN — de voorproef op de wachtpagina (22-09-2026).
   Een rustige kaart met titel en flaptekst, die in beeld komt zodra het
   boekplan er ligt. Zonder beweging bij prefers-reduced-motion. */
.voorproef{margin:1.2rem 0 1.4rem;padding:1.3rem 1.4rem;background:var(--katern);
  border:1px solid var(--lijn);border-radius:var(--r-m);box-shadow:var(--schaduw);
  opacity:0;transform:translateY(6px);transition:opacity .6s ease,transform .6s ease}
.voorproef.zichtbaar{opacity:1;transform:none}
.voorproef-label{margin:0 0 .35rem;color:var(--oranje-diep);font-weight:700;
  letter-spacing:.02em}
.voorproef-titel{margin:0 0 .25rem;font-size:clamp(1.35rem,1.1rem + 1vw,1.8rem)}
.voorproef-ondertitel{margin:0 0 .6rem;color:var(--zacht);font-style:italic}
.voorproef-flap{margin:0 0 .8rem;max-width:52ch;line-height:1.6}
.mailmij{margin:1.4rem 0;padding:1.2rem 1.3rem;border-radius:var(--r-m);
  background:var(--zand)}
.mailmij form .veldrij{display:flex;gap:.6rem;align-items:flex-start;flex-wrap:wrap}
.mailmij input[type=email]{flex:1 1 16rem;min-width:0;padding:.7rem .8rem;
  border:1px solid var(--lijn);border-radius:var(--r-s);font:inherit}
.mailmij .klein-kop{font-size:1.05rem;margin:0 0 .6rem}
@media (prefers-reduced-motion: reduce){.voorproef{transition:none;transform:none}}
.mailmij form .vinkrij{flex-wrap:nowrap;font-size:.9rem;color:var(--zacht)}
.mailmij .vinkrij input{margin-top:.3rem;flex:0 0 auto}
.mailmij form .veldrij label[for=mailmij-adres]{flex-basis:100%;font-weight:600}
.mailmij .mailadres{overflow-wrap:anywhere}
.mailmij p:last-child{margin-bottom:0}
.mailwijzig{margin-top:.8rem}
.mailwijzig summary{cursor:pointer;font-size:.95rem;color:var(--zacht);
  text-decoration:underline;text-underline-offset:.2em}
.mailwijzig[open] summary{margin-bottom:.6rem}
.mailwijzig .veldrij{display:flex;gap:.6rem;flex-wrap:wrap}
.mailwijzig .veldrij label{flex-basis:100%;font-weight:600}
.mailwijzig input[type=email]{flex:1 1 16rem;min-width:0;padding:.7rem .8rem;
  border:1px solid var(--lijn);border-radius:var(--r-s);font:inherit;background:#fff}
.mailmij .goed{color:#2C6E49;font-weight:600;margin:.6rem 0 0}
.mailwijzig .fout{margin:.2rem 0 .6rem;padding:.5rem .8rem}
.paneel.mailmij p.klein{line-height:1.5}