/* pas-los.css — de twee losse pagina's van de kaaspas: pas.php (404 en zonder JavaScript) en pas-maak.php (samenstellen + printkaartje).
   De pas zelf, in de tab op de proefboekpagina, staat in pas.css. Huisstijl: inkt, crème, goud. */
:root{--ink:#0d0c0a;--paper:#f7f3ea;--goud:#c9a227;--goudl:#e0b34e;--zacht:#d6d0bd;--gedempt:#8f8a74;--lijn:rgba(247,243,234,.12);--kaart:#15120f}
*{margin:0;padding:0;box-sizing:border-box}
html{color-scheme:dark}
body{font-family:'Open Sans',sans-serif;font-size:15.5px;line-height:1.6;color:var(--paper);min-height:100vh;
  background:linear-gradient(180deg,rgba(13,12,10,.6) 0%,rgba(13,12,10,.88) 40%,rgba(13,12,10,.97) 100%),url(../beeld/proefboek/plank-fond.jpg) center top/cover no-repeat var(--ink)}   /* het fond (Gemini, 14-09) */
a{color:var(--goudl)}
.pk-top{position:sticky;top:0;z-index:5;display:flex;align-items:center;justify-content:space-between;padding:10px 18px;background:rgba(13,12,10,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--lijn)}
.pk-logo img{height:34px;width:auto;display:block}
.pk-boek{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;border:1px solid rgba(201,162,39,.6);padding:8px 14px;color:var(--goudl)}
.pk-main{max-width:640px;margin:0 auto;padding:26px 18px 60px}
.pk-kicker{font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--goud);margin-bottom:6px}
h1{font-family:Oswald,sans-serif;font-weight:600;font-size:clamp(30px,6vw,42px);letter-spacing:.04em;text-transform:uppercase;line-height:1.05;margin-bottom:10px}
.pk-sub{color:var(--zacht);font-weight:300;max-width:56ch;margin-bottom:22px}
.pk-sub b{color:var(--goudl);font-weight:600}
.pk-code{display:flex;gap:8px;margin-bottom:16px}
.pk-code input,.pk-zoek{flex:1;font:inherit;font-size:17px;letter-spacing:.08em;padding:12px 14px;background:var(--kaart);color:var(--paper);border:1px solid rgba(247,243,234,.25);border-radius:0;width:100%}
.pk-code input:focus,.pk-zoek:focus{outline:2px solid var(--goud);outline-offset:1px}
.pk-code button,.pk-knop{font:inherit;font-weight:700;font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;padding:13px 20px;background:var(--goudl);color:var(--ink);border:0;border-radius:0;cursor:pointer;text-decoration:none;text-align:center}
.pk-knop-licht{background:transparent;color:var(--goudl);border:1px solid rgba(201,162,39,.6)}
.pk-knoppen{display:flex;flex-wrap:wrap;gap:10px;margin:22px 0}
.pk-lijst{list-style:none;counter-reset:kaas}
.pk-kaas{background:rgba(21,18,15,.92);border:1px solid var(--lijn);border-radius:0;margin-bottom:10px;overflow:hidden;transition:opacity .3s}
.pk-kaas.done{opacity:.55}
.pk-rij{display:flex;align-items:center;gap:12px;padding:10px 12px}
.pk-foto{width:56px;height:56px;border-radius:0;object-fit:contain;flex:none;display:flex;align-items:center;justify-content:center;font-size:26px;
  background:radial-gradient(circle at 40% 35%,rgba(224,179,78,.18),#241e18 75%);filter:drop-shadow(0 4px 8px rgba(0,0,0,.5))}
.pk-naam{flex:1;text-align:left;background:none;border:0;color:inherit;font:inherit;cursor:pointer;padding:0;min-width:0}
.pk-naam b{display:block;font-family:Oswald,sans-serif;font-weight:600;font-size:18px;letter-spacing:.03em;line-height:1.15}
.pk-naam small{display:block;color:var(--gedempt);font-size:12.5px;margin-top:2px}
.pk-standen{display:flex;gap:4px;flex:none}
.pk-standen button{width:38px;height:38px;border-radius:50%;border:1px solid rgba(247,243,234,.25);background:transparent;color:var(--zacht);font-size:16px;cursor:pointer;transition:background .15s,transform .15s}
.pk-standen button:active{transform:scale(.92)}
.pk-standen button.aan{background:var(--goudl);color:var(--ink);border-color:var(--goudl);font-weight:700}
.pk-standen button[data-stand=nee].aan{background:#6b2a22;color:#fff;border-color:#6b2a22}
.pk-uitleg{padding:0 12px 14px 80px;color:var(--zacht);font-size:14px;font-weight:300}
.pk-uitleg a{display:inline-block;margin-top:6px;font-size:12.5px;letter-spacing:.06em}
.pk-legende{display:flex;gap:14px;flex-wrap:wrap;font-size:12px;color:var(--gedempt);margin-top:14px}
.pk-voet{margin-top:40px;padding-top:16px;border-top:1px solid var(--lijn);font-size:12.5px;color:var(--gedempt);font-weight:300}
@media(max-width:480px){.pk-uitleg{padding-left:12px}.pk-rij{gap:8px}.pk-standen button{width:34px;height:34px}.pk-naam b{font-size:16px}}

/* ── de maakpagina ── */
.pk-chips{display:flex;flex-wrap:wrap;gap:6px;min-height:40px;margin-bottom:12px}
.pk-chip{display:inline-flex;align-items:center;gap:8px;background:rgba(201,162,39,.16);border:1px solid rgba(201,162,39,.5);border-radius:0;padding:6px 8px 6px 14px;font-size:14px}
.pk-chip b{cursor:pointer;font-weight:400;width:22px;height:22px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:rgba(0,0,0,.35)}
.pk-chip b:hover{background:#6b2a22}
.pk-resultaten button{display:block;width:100%;text-align:left;font:inherit;font-size:14.5px;padding:10px 12px;margin-top:6px;background:var(--kaart);color:var(--paper);border:1px solid var(--lijn);border-radius:0;cursor:pointer}
.pk-resultaten button:hover{border-color:var(--goud)}
.pk-klaar{margin-top:26px;padding:22px;border:2px dashed rgba(201,162,39,.7);border-radius:0;text-align:center}
.pk-klaar .code{font-family:Oswald,sans-serif;font-size:38px;font-weight:600;letter-spacing:.14em;color:var(--goudl);margin:4px 0 10px}
.pk-qr{display:table;margin:0 auto 10px;background:#fff;padding:8px;border-radius:0}
.pk-qr img,.pk-qr canvas{display:block;width:152px;height:152px}
.pk-url{font-size:12.5px;color:var(--gedempt);word-break:break-all}
.pk-fout{color:#ff8a7a;font-size:13.5px;min-height:1.4em;margin-bottom:8px}
.pk-honing{position:absolute;left:-9999px;opacity:0}
.pk-stempel{color:var(--goudl);font-size:13px;letter-spacing:.04em;margin:-10px 0 18px}
.pk-stil{font:inherit;font-size:12px;color:var(--gedempt);background:none;border:0;cursor:pointer;text-decoration:underline dotted}

/* ── het kaartje voor de printer (85 × 55 mm, zoals een visitekaartje) ── */
.pk-kaartje{display:none}
@media print{
  body{background:#fff;color:#000}
  .pk-top,.pk-main>*:not(.pk-kaartje){display:none!important}
  .pk-main{padding:0;max-width:none}
  .pk-kaartje{display:flex;width:85mm;height:55mm;border:.3mm solid #999;border-radius:0;padding:4mm;gap:4mm;align-items:center;page-break-inside:avoid;font-family:'Open Sans',sans-serif;color:#111}
  .pk-kaartje .qr{width:34mm;height:34mm;flex:none}
  .pk-kaartje .qr img,.pk-kaartje .qr canvas{width:34mm!important;height:34mm!important}
  .pk-kaartje .t{flex:1;min-width:0}
  .pk-kaartje .t small{display:block;font-size:7pt;letter-spacing:.2em;text-transform:uppercase;color:#8a6d1c}
  .pk-kaartje .t b{display:block;font-family:Oswald,sans-serif;font-weight:600;font-size:17pt;letter-spacing:.08em;margin:1mm 0}
  .pk-kaartje .t p{font-size:7pt;line-height:1.35;color:#333;margin:0}
  .pk-kaartje .t em{display:block;font-style:normal;font-size:6.5pt;color:#666;margin-top:1.5mm}
  @page{margin:10mm}
}

.pk-titel{display:block;width:100%;margin:10px 0 4px;font-size:15px;letter-spacing:.02em}

/* de drie stappen op het klaar-scherm: scannen, bewaren op de eigen gsm, of de code noteren */
.pk-stappen{max-width:440px;margin:4px auto 18px;padding:0;list-style:none;counter-reset:stap;text-align:left}
.pk-stappen li{position:relative;padding:8px 0 8px 40px;font-size:14.5px;line-height:1.5;color:var(--zacht);counter-increment:stap}
.pk-stappen li::before{content:counter(stap);position:absolute;left:0;top:7px;width:26px;height:26px;border-radius:50%;background:var(--goudl);color:var(--ink);font-family:Oswald,sans-serif;font-weight:700;font-size:14px;display:flex;align-items:center;justify-content:center}
.pk-stappen b{color:var(--paper);font-weight:600}
.pk-qr img,.pk-qr canvas{width:220px!important;height:220px!important}
@media print{.pk-stappen{display:none}}