.lp-page { min-height:100vh; display:flex; flex-direction:column; }
.lp-nav { background:rgba(255,248,239,.96); border-bottom:1px solid var(--line); }
.lp-nav-inner { min-height:76px; display:flex; align-items:center; justify-content:space-between; gap:16px; }
.lp-brand { display:inline-flex; align-items:center; gap:11px; text-decoration:none; color:var(--ink); font:700 1.33rem var(--font-display); }
.lp-brand img { flex:none; }
.lp-test-label { padding:5px 11px; border-radius:10px; background:var(--actie-soft); color:var(--actie-dark); font-size:.78rem; font-weight:800; letter-spacing:.04em; text-transform:uppercase; }
.lp-main { width:100%; flex:1; padding:42px 20px 62px; }
.lp-app { max-width:900px; margin:0 auto; }
.lp-panel { background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow-md); padding:clamp(25px,5vw,50px); }
.lp-eyebrow { color:var(--actie); font-size:.82rem; letter-spacing:.1em; text-transform:uppercase; font-weight:800; margin:0 0 8px; }
.lp-muted { color:var(--ink-soft); }
.lp-lead { font-size:1.14rem; line-height:1.55; max-width:570px; }
.lp-intro { display:grid; grid-template-columns:minmax(0,1fr) 245px; align-items:center; gap:25px; }
.lp-intro h1 { max-width:560px; margin-bottom:16px; }
.lp-intro-art { position:relative; height:310px; display:grid; place-items:center; }
.lp-book { position:absolute; width:155px; height:215px; border-radius:8px 15px 15px 8px; box-shadow:9px 12px 20px rgba(47,44,85,.17), inset 7px 0 rgba(255,255,255,.23); display:grid; place-items:center; border:4px solid rgba(255,255,255,.4); font-size:4.2rem; }
.lp-book:nth-child(1) { background:var(--t-cre); transform:rotate(-17deg) translate(-35px,9px); }
.lp-book:nth-child(2) { background:var(--accent); transform:rotate(8deg) translate(32px,-11px); }
.lp-book:nth-child(3) { background:var(--t-sam); transform:rotate(23deg) translate(63px,11px); }
.lp-intro-form { display:flex; gap:12px; flex-wrap:wrap; align-items:end; margin-top:25px; }
.lp-field { display:grid; gap:6px; font-size:.9rem; font-weight:800; }
.lp-field input,.lp-field select { border:2px solid var(--line); border-radius:var(--r-sm); min-height:52px; padding:10px 14px; background:var(--bg); color:var(--ink); font:700 1rem var(--font-body); }
.lp-field input { width:min(210px,100%); }
.lp-field select { width:145px; }
.lp-wide-field { max-width:570px; }
.lp-wide-field input,.lp-wide-field select { width:100%; }
.lp-next { margin-top:26px; }
.lp-reason-title { margin:25px 0 12px; font-weight:800; }
.lp-reason-title span { color:var(--ink-soft); font-weight:600; }
.lp-reasons { grid-template-columns:repeat(2,minmax(0,1fr)); }
.lp-book-results { display:grid; gap:8px; max-height:320px; overflow:auto; margin-top:12px; }
.lp-book-results:empty { display:none; }
.lp-book-option { display:grid; gap:3px; width:100%; padding:11px 14px; border:1px solid var(--line); border-radius:12px; background:var(--bg); color:var(--ink); text-align:left; cursor:pointer; font:600 .87rem var(--font-body); }
.lp-book-option:hover,.lp-book-option:focus-visible { border-color:var(--actie); background:var(--actie-soft); outline:none; }
.lp-book-option strong { font-size:.97rem; }
.lp-book-option span { color:var(--ink-soft); line-height:1.35; }
.lp-custom-option { border-style:dashed; border-color:var(--actie); background:var(--actie-soft); color:var(--actie-dark); font-weight:800; }
.lp-more-option { border-color:var(--actie); color:var(--actie-dark); background:#fff; font-weight:800; text-align:center; }
.lp-search-status { margin:2px 0; color:var(--ink-soft); font-size:.84rem; }
.lp-selected-book { margin:12px 0 0; color:var(--actie-dark); font-size:.9rem; font-weight:800; }
.lp-selected-book:empty { display:none; }
.lp-field input:focus-visible,.lp-field select:focus-visible,.lp-choice:focus-visible,.lp-link:focus-visible,.lp-back:focus-visible { outline:3px solid #8bd1cd; outline-offset:3px; }
.lp-privacy { margin:20px 0 0; color:var(--ink-soft); font-size:.84rem; }
.lp-step-top { display:flex; align-items:center; gap:12px; margin-bottom:27px; }
.lp-back { flex:none; width:48px; height:48px; border:2px solid var(--line); border-radius:14px; background:#fff; color:var(--ink); cursor:pointer; font-size:1.2rem; }
.lp-progress { flex:1; height:12px; background:var(--bg-soft); border-radius:99px; overflow:hidden; }
.lp-progress-fill { height:100%; background:var(--actie); border-radius:99px; transition:width .2s ease; }
.lp-step-num { color:var(--ink-soft); font-size:.85rem; font-weight:800; white-space:nowrap; }
.lp-question h1 { font-size:clamp(1.7rem,4vw,2.35rem); max-width:700px; }
.lp-question .lp-muted { margin-bottom:24px; }
.lp-choices { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.lp-choice { display:flex; align-items:center; gap:14px; min-height:75px; padding:13px 17px; border:2px solid var(--line); border-radius:18px; background:#fff; color:var(--ink); text-align:left; font:800 1rem var(--font-body); cursor:pointer; transition:border-color .15s,transform .15s,background .15s; }
.lp-choice:hover,.lp-choice[aria-pressed="true"] { border-color:var(--actie); background:var(--actie-soft); transform:translateY(-1px); }
.lp-choice-icon { flex:none; width:41px; height:41px; display:grid; place-items:center; border-radius:12px; background:var(--bg-soft); font-size:1.4rem; }
.lp-hint { font-size:.86rem; color:var(--ink-soft); margin:20px 0 0; }
.lp-genre-choice { grid-template-columns:repeat(3,minmax(0,1fr)); }
.lp-genre-choice .lp-choice { display:grid; gap:8px; justify-items:center; text-align:center; padding:22px 12px; min-height:142px; }
.lp-genre-choice .lp-choice-icon { width:54px; height:54px; font-size:1.9rem; }
.lp-genre-choice .lp-choice small { color:var(--ink-soft); font-weight:700; }
.lp-results-head { display:flex; align-items:start; justify-content:space-between; gap:18px; margin-bottom:22px; }
.lp-results-head h1 { margin-bottom:8px; }
.lp-reading-profile { background:var(--actie-soft); border-radius:15px; padding:12px 18px; margin-bottom:22px; font-size:.9rem; }
.lp-reading-profile p { margin:4px 0; }
.lp-choice-tag { display:inline-block; padding:7px 13px; border-radius:10px; background:var(--actie-soft); color:var(--actie-dark); font-weight:800; font-size:.9rem; }
.lp-book-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:15px; }
.lp-book-card { border:1px solid var(--line); border-radius:20px; background:#fff; overflow:hidden; display:flex; flex-direction:column; }
.lp-book-art { min-height:210px; display:grid; place-items:center; position:relative; overflow:hidden; background:var(--art-bg); color:var(--art-ink); }
.lp-book-art::before { content:""; width:195px; height:195px; border:2px solid currentColor; opacity:.23; border-radius:50%; position:absolute; top:-48px; right:-53px; }
.lp-book-art::after { content:""; width:155px; height:155px; border:2px solid currentColor; opacity:.18; border-radius:50%; position:absolute; bottom:-84px; left:-38px; }
.lp-book-art span { font-size:5.4rem; line-height:1; position:relative; z-index:1; filter:drop-shadow(4px 8px 3px rgba(0,0,0,.12)); }
.lp-book-art em { position:absolute; right:10px; bottom:10px; z-index:1; background:rgba(255,255,255,.85); color:#443D62; border-radius:6px; padding:2px 7px; font:800 .64rem var(--font-body); font-style:normal; }
.lp-book-body { padding:18px; flex:1; display:flex; flex-direction:column; }
.lp-book-body h3 { margin:0 0 5px; font-size:1.2rem; }
.lp-book-meta { margin:0 0 9px; color:var(--ink-soft); font-size:.79rem; font-weight:800; }
.lp-book-why { margin:0 0 15px; line-height:1.45; font-size:.93rem; }
.lp-book-match { margin:0 0 15px; padding:9px 11px; border-radius:10px; background:var(--actie-soft); color:var(--actie-dark); font-size:.84rem; line-height:1.4; font-weight:700; }
.lp-book-body .lp-link { margin-top:auto; }
/* Subgrid: titel, gegevens, beschrijving, reden en wisselknop staan in alle drie de kaarten op dezelfde hoogte. */
@supports (grid-template-rows:subgrid) {
  @media(min-width:691px) {
    .lp-book-card { display:grid; grid-row:span 6; grid-template-rows:subgrid; row-gap:0; }
    .lp-book-body { grid-row:2 / span 5; display:grid; grid-template-rows:subgrid; row-gap:0; padding-bottom:14px; }
    .lp-book-body > * { align-self:start; }
    .lp-book-body > .lp-book-match { align-self:stretch; }
    .lp-book-body > .lp-swap { align-self:end; }
  }
}
.lp-swap { margin-top:10px; padding:8px 0; border:0; background:none; color:var(--ink-soft); font:700 .81rem var(--font-body); text-decoration:underline; text-align:left; cursor:pointer; }
.lp-swap:hover { color:var(--actie-dark); }
.lp-link { display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:8px 13px; border:2px solid var(--actie); border-radius:12px; text-decoration:none; color:var(--actie-dark); background:#fff; font-weight:800; font-size:.9rem; }
.lp-result-actions { display:flex; flex-wrap:wrap; gap:12px; }
.lp-done { display:flex; align-items:center; gap:16px; margin:0 0 20px; padding:16px 20px; border-radius:18px; background:#FFF1E6; border:2px solid var(--accent); }
.lp-done-icon { flex:none; width:52px; height:52px; display:grid; place-items:center; border-radius:50%; background:#fff; font-size:1.7rem; }
.lp-done strong { font:700 1.3rem var(--font-display); }
.lp-done p { margin:2px 0 0; color:var(--ink-soft); }
.lp-klas-banner { margin:0 0 18px; padding:11px 15px; border-radius:14px; background:var(--actie-soft); color:var(--actie-dark); font-weight:700; font-size:.95rem; }
.lp-klas-banner.is-error { background:#fff0f0; color:#a43b3b; }
.lp-name-error { margin:12px 0 0; color:#a43b3b; font-weight:800; font-size:.9rem; }
#lp-send-status { font-weight:800; }
#lp-send-status[data-kind="ok"] { color:var(--actie-dark); }
#lp-send-status[data-kind="error"] { color:#a43b3b; }
.lp-send-retry { margin:6px 0 4px; padding:8px 14px; border:2px solid var(--actie); border-radius:12px; background:#fff; color:var(--actie-dark); font:800 .88rem var(--font-body); cursor:pointer; }
.lp-klas-actions { margin-top:25px; }
.lp-teacher-bar { margin-top:25px; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:14px 20px; padding:16px 18px; border-radius:16px; border:1px dashed var(--ink-soft); background:var(--bg); }
.lp-teacher-bar strong { font-size:.8rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft); }
.lp-teacher-bar p { margin:2px 0 0; font-size:.88rem; color:var(--ink-soft); }
.lp-result-note { margin:19px 0 0; font-size:.86rem; color:var(--ink-soft); }
.lp-footer { text-align:center; padding:18px; color:var(--ink-soft); font-size:.83rem; border-top:1px solid var(--line); }
.lp-print { display:none; }
.lp-footer a { color:var(--actie-dark); font-weight:800; }
.lp-teacher { margin-top:22px; display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:24px; background:var(--actie-soft); border-radius:var(--r-lg); padding:clamp(22px,4vw,34px); }
.lp-teacher h2 { font-size:1.35rem; margin:0 0 12px; }
.lp-teacher ol { margin:0; padding-left:20px; display:grid; gap:8px; font-size:.95rem; line-height:1.5; }
.lp-teacher-note { margin:14px 0 0; color:var(--ink-soft); font-size:.86rem; }
.lp-teacher-cta { align-self:center; background:#fff; border-radius:18px; padding:20px; box-shadow:var(--shadow-md); }
.lp-teacher-cta p { margin:0 0 14px; font-size:.95rem; line-height:1.5; }
.lp-teacher-cta .btn { width:100%; justify-content:center; text-align:center; }
@media(max-width:690px) { .lp-teacher { grid-template-columns:1fr; } .lp-intro { grid-template-columns:1fr; } .lp-intro-art { display:none; } .lp-book-grid { grid-template-columns:1fr; } .lp-book-card { display:grid; grid-template-columns:130px 1fr; } .lp-book-art { min-height:100%; } .lp-book-art span { font-size:3rem; } .lp-book-art em { font-size:.5rem; } }
@media(max-width:510px) { .lp-main { padding:20px 12px 40px; } .lp-panel { padding:23px 16px; border-radius:23px; } .lp-nav-inner { min-height:67px; } .lp-brand { font-size:1.12rem; } .lp-brand img { width:38px; } .lp-choices { grid-template-columns:1fr; } .lp-genre-choice { grid-template-columns:repeat(2,1fr); } .lp-reasons { grid-template-columns:1fr; } .lp-book-card { grid-template-columns:105px 1fr; } .lp-book-body { padding:14px; } .lp-book-art span { font-size:2.4rem; } .lp-results-head { display:block; } }
@media print {
  @page { size:A4; margin:0; }
  html,body { margin:0 !important; padding:0 !important; background:#FFF8EF !important; }
  body > *:not(.lp-print) { display:none !important; }
  .lp-print { display:block !important; }
  .lp-print * { print-color-adjust:exact; -webkit-print-color-adjust:exact; box-sizing:border-box; }

  /* Eén vel: crème ondergrond, alles in mm zodat het in elke browser even groot print. */
  .lp-sheet + .lp-sheet { break-before:page; page-break-before:always; }
  .lp-sheet { width:210mm; height:296mm; overflow:hidden; padding:9mm 12mm 7mm; background:#FFF8EF; color:var(--ink); font:10pt/1.4 var(--font-body); display:flex; flex-direction:column; gap:3.4mm; }
  .lp-sh-head { display:flex; justify-content:space-between; align-items:center; }
  .lp-sh-brand { display:flex; align-items:center; gap:2mm; font:700 13pt var(--font-display); }
  .lp-sh-brand img { width:7mm; height:7mm; }
  .lp-sh-date { color:var(--ink-soft); font-size:8.5pt; font-weight:700; }

  .lp-sh-hero { position:relative; display:flex; align-items:center; justify-content:space-between; min-height:38mm; padding:5mm 8mm; border-radius:6mm; background:var(--actie); color:#fff; overflow:hidden; }
  .lp-sh-hero::after { content:""; position:absolute; width:70mm; height:70mm; right:-14mm; top:-26mm; border-radius:50%; background:rgba(255,255,255,.08); }
  .lp-sh-hero-text { position:relative; z-index:1; max-width:118mm; }
  .lp-sh-kicker { margin:0 0 1mm; font-size:8.5pt; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:#BFE6E3; }
  .lp-sh-hero h1 { margin:0; font:700 25pt/1.05 var(--font-display); color:#fff; }
  .lp-sh-sub { margin:2mm 0 0; font-size:11pt; color:#E3F2F1; }
  .lp-sh-illu { position:relative; z-index:1; height:33mm; width:auto; margin-right:-2mm; }

  .lp-sh-chips { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:2.5mm; }
  .lp-sh-chips li { background:#fff; border:0.3mm solid var(--line); border-radius:3.5mm; padding:2.2mm 3mm; }
  .lp-sh-chips span { display:block; font-size:7.5pt; color:var(--ink-soft); font-weight:700; }
  .lp-sh-chips strong { display:block; font-size:9.5pt; line-height:1.25; }

  .lp-sh-books { display:grid; gap:2.6mm; }
  .lp-sh-book { display:grid; grid-template-columns:31mm minmax(0,1fr) 25mm; gap:5mm; align-items:center; background:#fff; border:0.3mm solid var(--line); border-radius:5mm; padding:3mm 4.5mm 3mm 4mm; box-shadow:0 1mm 3mm rgba(47,44,85,.06); break-inside:avoid; }

  /* Voorbeeldkaft in boekvorm: rug links, titel en schrijver op de voorkant. */
  .lp-sh-cover { position:relative; height:38mm; border-radius:1.2mm 3mm 3mm 1.2mm; background:var(--c); color:var(--k); padding:3mm 2.5mm 3mm 5mm; display:flex; flex-direction:column; align-items:center; text-align:center; box-shadow:inset 2.2mm 0 0 rgba(0,0,0,.13), inset 2.8mm 0 0 rgba(255,255,255,.25), 0.8mm 1.2mm 0 rgba(47,44,85,.16); overflow:hidden; }
  .lp-sh-cover::after { content:""; position:absolute; inset:1.6mm 1.6mm 1.6mm 4mm; border:0.3mm solid currentColor; border-radius:1.5mm; opacity:.28; }
  .lp-sh-cover-art { font-size:22pt; line-height:1; margin:0.5mm 0 1.5mm; }
  .lp-sh-cover-title { max-width:100%; font:700 7.4pt/1.12 var(--font-display); hyphens:auto; -webkit-hyphens:auto; overflow-wrap:anywhere; display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden; }
  .lp-sh-cover-author { margin-top:auto; font-size:6pt; font-weight:800; opacity:.85; }

  .lp-sh-book-body { min-width:0; }
  .lp-sh-tip { margin:0; display:inline-block; padding:0.4mm 2.2mm; border-radius:2mm; background:var(--actie-soft); color:var(--actie-dark); font-size:7.5pt; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }
  .lp-sh-book h2 { margin:1.2mm 0 0.4mm; font:700 13.5pt/1.15 var(--font-display); }
  .lp-sh-meta { margin:0 0 1.4mm; color:var(--ink-soft); font-size:8pt; font-weight:700; }
  .lp-sh-hook { margin:0 0 1.4mm; font-size:9.5pt; }
  .lp-sh-why { margin:0 0 1.6mm; font-size:8.8pt; color:var(--actie-dark); }
  .lp-sh-why b { font-weight:800; }
  .lp-sh-rate { display:flex; align-items:center; gap:1.8mm; font-size:8.5pt; font-weight:800; color:var(--ink-soft); }
  .lp-sh-check { width:4mm; height:4mm; border:0.45mm solid var(--ink-soft); border-radius:1mm; background:#fff; }
  .lp-sh-stars { display:flex; gap:0.8mm; margin-left:2.5mm; }
  .lp-sh-stars svg { width:4.4mm; height:4.4mm; fill:#fff; stroke:var(--t-sta); stroke-width:1.8; stroke-linejoin:round; }

  .lp-sh-qr { text-align:center; }
  .lp-sh-qr img { display:block; width:23mm; height:23mm; margin:0 auto; border-radius:2mm; image-rendering:pixelated; }
  .lp-sh-qr span { display:block; margin-top:1mm; font-size:7pt; font-weight:800; color:var(--ink-soft); }

  .lp-sh-bottom { display:grid; grid-template-columns:1fr 1.15fr; gap:3.5mm; margin-top:auto; }
  .lp-sh-bottom h3 { margin:0 0 1.5mm; font:700 11pt var(--font-display); }
  .lp-sh-steps { background:#fff; border:0.3mm solid var(--line); border-radius:4mm; padding:3mm 4.5mm; }
  .lp-sh-steps ol { margin:0; padding-left:4.5mm; font-size:8.8pt; }
  .lp-sh-steps li { margin:0 0 1mm; }
  .lp-sh-parents { background:#FFF1E6; border-left:1.4mm solid var(--accent); border-radius:1.5mm 4mm 4mm 1.5mm; padding:3mm 4.5mm; font-size:8.4pt; }
  .lp-sh-parents p { margin:0 0 1.4mm; }
  .lp-sh-isbn { color:var(--ink-soft); font-size:7pt; }
  .lp-sh-foot { display:flex; justify-content:space-between; color:var(--ink-soft); font-size:7.5pt; border-top:0.3mm solid var(--line); padding-top:2mm; }
  .lp-sh-foot b { color:var(--actie-dark); }
}
@media(prefers-reduced-motion:reduce) { .lp-choice,.lp-progress-fill { transition:none; } }