:root{
  --ink:#26302a; --soft:#5d6b60; --paper:#eef7ee; --gold:#b98f4f; --green:#7fb08a; --line:#dbe7dd;
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:"Georgia","Times New Roman",serif;color:var(--ink);
  position:relative;line-height:1.65;-webkit-font-smoothing:antialiased;
  background:linear-gradient(165deg,#e9f5ec 0%,#ffffff 52%,#e3f1e9 100%);
  background-attachment:fixed;overflow-x:hidden}
/* frisse, rustig bewegende pastelgroene gloed die naar wit wegloopt */
body::before{content:"";position:fixed;inset:-20vmax;z-index:-1;pointer-events:none;
  background:
    radial-gradient(38vmax 38vmax at 20% 16%, rgba(140,200,162,.36), transparent 60%),
    radial-gradient(34vmax 34vmax at 84% 24%, rgba(186,224,201,.40), transparent 62%),
    radial-gradient(42vmax 42vmax at 62% 98%, rgba(214,238,222,.55), transparent 60%),
    radial-gradient(26vmax 26vmax at 90% 86%, rgba(206,186,146,.16), transparent 60%);
  filter:blur(4px);animation:drift 20s ease-in-out infinite alternate}
@keyframes drift{
  0%{transform:translate3d(-3%,-2%,0) scale(1)}
  50%{transform:translate3d(3%,2%,0) scale(1.07)}
  100%{transform:translate3d(-2%,3%,0) scale(1.03)}}

.wrap{max-width:1040px;margin:0 auto;padding:0 22px}
header.hero{text-align:center;padding:8vh 22px 3vh}
.kicker{letter-spacing:.32em;text-transform:uppercase;font-size:12px;color:var(--gold);margin:0 0 18px}
h1{font-weight:400;font-size:clamp(30px,5.4vw,52px);line-height:1.1;margin:0 0 14px}
.lead{max-width:34em;margin:0 auto;color:var(--soft);font-size:clamp(16px,2vw,19px)}

/* ── interactieve 3D-boekenrij ── */
.scene{display:flex;gap:clamp(16px,4vw,50px);justify-content:center;flex-wrap:wrap;
  padding:6vh 0 3vh;perspective:1500px;perspective-origin:50% 40%}
.book{width:min(210px,42vw);cursor:pointer;animation:floaty 6.5s ease-in-out infinite}
.book:nth-child(2){animation-delay:.9s}
.book:nth-child(3){animation-delay:1.8s}
.book:nth-child(4){animation-delay:2.7s}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-18px)}}
.cover{position:relative;transform-style:preserve-3d;
  transform:rotateX(var(--rx,7deg)) rotateY(var(--ry,-22deg)) scale(var(--sc,1));
  transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.pane{position:relative;transform-style:preserve-3d;border-radius:4px 9px 9px 4px;
  animation:turn 7s ease-in-out infinite}
.book:nth-child(2) .pane{animation-delay:.6s}
.book:nth-child(3) .pane{animation-delay:1.2s}
.book:nth-child(4) .pane{animation-delay:1.8s}
@keyframes turn{0%,100%{transform:rotateY(-7deg)}50%{transform:rotateY(7deg)}}
.book:hover{animation-play-state:paused}
.book:hover .pane{animation-play-state:paused}
.book:hover .cover{--sc:1.06}
.pane img{display:block;width:100%;border-radius:4px 9px 9px 4px;
  box-shadow:-20px 28px 44px rgba(40,60,45,.30);backface-visibility:hidden;transition:box-shadow .5s ease}
.book:hover .pane img{box-shadow:-22px 30px 54px rgba(40,60,45,.38), 0 0 0 1px rgba(185,143,79,.5)}
.pane::before{content:"";position:absolute;top:0;left:0;width:30px;height:100%;
  transform-origin:right center;transform:translateX(-30px) rotateY(90deg);
  background:linear-gradient(90deg,#6f5a34,#b9905a 55%,#846a40);border-radius:4px 0 0 4px}
.pane::after{content:"";position:absolute;top:3px;bottom:3px;right:0;width:28px;
  transform-origin:left center;transform:rotateY(-90deg);
  background:repeating-linear-gradient(to bottom,#fffdf8 0 2px,#e4d6bd 2px 3px);border-radius:0 3px 3px 0}
/* Duim-flip bij hover — Alex, 17-09-2026: "alsof je met je duim langs alle bladzijden gaat.
   Niet helemaal open, maar een klein beetje." Speelt alleen op de paginarand (::after), zodat
   de bestaande kantelanimatie op .pane (transform) niet botst met een tweede animatie op
   dezelfde eigenschap. Draait één keer per hover, steps() geeft het schokkerige "bladerende"
   ritme in plaats van een vloeiende beweging. */
.book:hover .pane::after{animation:duimflip .6s steps(5) 1}
@keyframes duimflip{
  0%,100%{width:28px;background-position-y:0}
  20%{width:34px;background-position-y:2px}
  40%{width:29px;background-position-y:6px}
  60%{width:35px;background-position-y:1px}
  80%{width:30px;background-position-y:5px}
}
@media (prefers-reduced-motion:reduce){ .book:hover .pane::after{animation:none} }
.sheen{position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(105deg,transparent 34%,rgba(255,255,255,.55) 49%,transparent 64%);
  background-size:250% 250%;background-position:var(--sx,15%) 0%;
  mix-blend-mode:screen;transition:background-position .25s ease}
.book .naam{text-align:center;margin-top:20px;font-size:15px;color:var(--soft)}
.kijkhint{display:block;text-align:center;margin-top:6px;font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold);opacity:0;transition:opacity .3s ease}
.book:hover .kijkhint{opacity:1}
@media (prefers-reduced-motion:reduce){ .book,.pane,body::before{animation:none} }

section{padding:5vh 0}
h2{font-weight:400;font-size:clamp(22px,3.2vw,32px);text-align:center;margin:0 0 10px}
.sub{text-align:center;color:var(--soft);max-width:38em;margin:0 auto 40px}

.kaarten{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:22px}
.kaart{background:rgba(255,255,255,.78);border:1px solid var(--line);border-radius:16px;
  padding:22px;text-align:center;backdrop-filter:blur(4px);transition:transform .3s ease, box-shadow .3s ease}
.kaart:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(60,90,65,.14)}
.kaart img{width:120px;border-radius:3px 6px 6px 3px;box-shadow:-8px 12px 22px rgba(40,60,45,.24);margin-bottom:14px}
.kaart h3{font-weight:500;font-size:18px;margin:0 0 4px}
.kaart .geloof{color:var(--gold);font-size:13px;letter-spacing:.12em;text-transform:uppercase;margin-bottom:12px}
.inkijk-knop{margin:0 auto 14px;display:inline-block;border:1px solid var(--line);background:#fff;
  color:var(--soft);border-radius:9px;padding:7px 15px;font-family:inherit;font-size:13px;letter-spacing:.05em;
  cursor:pointer;transition:border-color .2s,color .2s,background .2s}
.inkijk-knop:hover{border-color:var(--green);color:var(--ink);background:#f5fbf6}
.prijsrij{display:flex;flex-direction:column;gap:9px;margin-top:2px}
.koop{display:flex;align-items:center;justify-content:space-between;gap:10px;
  border:1px solid var(--line);border-radius:10px;padding:9px 12px;background:#fff;
  text-decoration:none;color:var(--ink);font-size:15px;transition:border-color .2s,background .2s,transform .2s}
.koop:hover{border-color:var(--green);background:#f7fcf8;transform:translateY(-1px)}
.koop .form{color:var(--soft);font-size:13px}
.koop .prijs{font-weight:600}
.koop.hc{background:linear-gradient(#fff,#f0f7f1)}

.concept{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:20px;margin-top:22px}
.stap{background:rgba(255,255,255,.6);border:1px solid var(--line);border-radius:14px;padding:20px;transition:transform .3s ease}
.stap:hover{transform:translateY(-3px)}
.stap b{display:block;font-weight:600;margin-bottom:6px}
.stap p{margin:0;color:var(--soft);font-size:15px}

.school{margin-top:40px;text-align:center;background:rgba(127,176,138,.12);
  border:1px solid rgba(127,176,138,.4);border-radius:16px;padding:26px}
.school b{font-size:19px}

footer{text-align:center;color:var(--soft);font-size:14px;padding:6vh 22px 8vh}
footer a{color:var(--soft)}
.talen{margin-top:10px;font-size:13px;display:block}
.talen a{margin:0 6px;color:var(--gold);text-decoration:none}

/* ── inkijk (flipbook) ── */
.lightbox{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;
  background:rgba(22,32,25,.74);backdrop-filter:blur(7px);padding:4vh 2vw}
.lightbox[hidden]{display:none}
.lb-frame{margin:0;max-width:min(560px,92vw);display:flex;flex-direction:column;align-items:center}
.lb-img{max-width:100%;max-height:82vh;border-radius:8px;background:#fff;
  box-shadow:0 24px 60px rgba(0,0,0,.5);animation:pop .35s cubic-bezier(.2,.8,.2,1)}
@keyframes pop{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}
.lb-cap{color:#eef7ee;font-size:14px;margin-top:12px;letter-spacing:.05em}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);border:none;cursor:pointer;
  width:54px;height:54px;border-radius:50%;font-size:30px;color:#3a4a3c;background:rgba(255,255,255,.92);
  box-shadow:0 6px 20px rgba(0,0,0,.3);transition:background .2s,transform .2s}
.lb-nav:hover{background:#fff;transform:translateY(-50%) scale(1.07)}
.lb-prev{left:max(12px,3vw)} .lb-next{right:max(12px,3vw)}
.lb-sluit{position:absolute;top:16px;right:22px;border:none;background:none;color:#eef7ee;font-size:34px;cursor:pointer;line-height:1}
.lb-teller{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);color:#dfeee2;font-size:13px;letter-spacing:.1em}

.legal{margin:14px auto 0;font-size:12px;color:var(--soft);max-width:46em;line-height:1.5}

/* Aanmeldblok — 12-09-2026. Zelfde ronding en kleuren als de koopknoppen, bewust rustiger:
   dit mag de kassa niet wegdrukken. */
#lijst{padding-bottom:8px}
.lijstform{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:6px}
.lijstform input{flex:1 1 260px;max-width:340px;padding:14px 16px;font:inherit;
  border:1px solid #d8cfc0;border-radius:8px;background:#fff}
.lijstform input:focus{outline:2px solid #8a6b4a;outline-offset:1px}
.lijstform button{padding:14px 26px;font:inherit;font-weight:700;cursor:pointer;
  border:0;border-radius:8px;background:#8a6b4a;color:#fff}
.lijstform button:hover{background:#6f5439}
.lijstform button:disabled{opacity:.6;cursor:default}
.lijstmelding{text-align:center;margin-top:12px;font-weight:600}
.vertrouwen{margin:9px 0 0;font-size:.78rem;opacity:.7;text-align:center}

/* ===== Bestelknoppen per winkel & formaat (toegevoegd okt. 2026) ===== */
.bestel{display:flex;flex-direction:column;gap:12px;margin:16px 0 10px}
.formaat{background:rgba(0,0,0,.015);border:1px solid #e7dfcf;border-radius:16px;padding:12px 12px 10px}
.formaat .finfo{display:flex;align-items:baseline;justify-content:space-between;margin:0 2px 9px}
.formaat .fnaam{font-weight:800;letter-spacing:.2px}
.formaat .fprijs{font-weight:900;color:#2f5a42}
.fknoppen{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.fknoppen:has(.solo){grid-template-columns:1fr}
.kb{position:relative;display:flex;flex-direction:column;align-items:center;gap:1px;
  padding:12px 10px;border-radius:13px;text-decoration:none;color:#fff;overflow:hidden;
  transition:transform .16s ease,box-shadow .22s ease,filter .22s ease}
.kb .kwin{font-size:.98rem;font-weight:800}
.kb .kpr{font-size:.86rem;font-weight:700;opacity:.92}
.kb::after{content:"";position:absolute;top:-60%;left:-30%;width:40%;height:220%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.38),transparent);
  transform:rotate(18deg) translateX(-130%);transition:transform .55s ease}
.kb:hover::after{transform:rotate(18deg) translateX(330%)}
.kb-shop{background:linear-gradient(165deg,#4a7c5d,#2f5a42);box-shadow:0 7px 16px rgba(47,90,66,.30)}
.kb-shop:hover{transform:translateY(-3px);box-shadow:0 15px 28px rgba(47,90,66,.46);filter:brightness(1.07)}
.kb-amz{background:linear-gradient(165deg,#232f3e,#161e28);box-shadow:0 7px 16px rgba(35,47,62,.32)}
.kb-amz .kwin{color:#fff}.kb-amz .kpr{color:#f2a93b}
.kb-amz:hover{transform:translateY(-3px);box-shadow:0 15px 28px rgba(35,47,62,.5),inset 0 0 0 2px #f2a93b;filter:brightness(1.12)}
.fnoot{display:block;margin:8px 2px 0;font-size:.78rem;color:#726c5f;font-style:italic}
@media (max-width:420px){.fknoppen{grid-template-columns:1fr}}