/* ============================================================
   Klasbib L6 — "De Betoverde Klasbib"
   Eén stylesheet, geen build-stap. Alles regelbaar via :root.
   ============================================================ */

:root {
  /* Basis — donker hout & inkt */
  --kb-inkt:        #100C07;
  --kb-nacht:       #1A130C;
  --kb-hout:        #2A1E12;
  --kb-hout-licht:  #3B2A18;

  /* Perkament & tekst */
  --kb-perkament:   #F2E4C7;
  --kb-perkament-2: #D9C6A0;
  --kb-perkament-3: #A08D6C;
  --kb-blad:        #EFE0BE;

  /* Accenten */
  --kb-goud:        #D4AF37;
  --kb-goud-diep:   #A8811F;
  --kb-kaars:       #FFB55C;
  --kb-bordeaux:    #7B1E22;
  --kb-smaragd:     #1F4436;
  --kb-inktblauw:   #22314C;
  --kb-brons:       #8C6239;

  /* Semantisch */
  --kb-ok:          #4CA97E;
  --kb-waarschuw:   #E0A63C;
  --kb-fout:        #C4595C;

  /* Vorm */
  --kb-radius:      14px;
  --kb-radius-btn:  10px;
  --kb-radius-chip: 999px;
  --kb-lijn:        1px solid rgba(212,175,55,.28);
  --kb-lijn-sterk:  1px solid rgba(212,175,55,.55);

  /* Schaduw — altijd warm */
  --kb-schaduw:     0 18px 40px rgba(0,0,0,.55), 0 0 0 1px rgba(212,175,55,.18);
  --kb-schaduw-l:   0 8px 20px rgba(0,0,0,.45), 0 0 0 1px rgba(212,175,55,.14);
  --kb-gloed:       0 0 28px rgba(212,175,55,.35);

  /* Ruimte */
  --kb-s1: 6px;  --kb-s2: 10px; --kb-s3: 16px;
  --kb-s4: 24px; --kb-s5: 36px; --kb-s6: 56px; --kb-s7: 80px;

  /* Typografie */
  --kb-font-logo: "Cinzel Decorative", "Cinzel", Georgia, system-ui, serif;
  --kb-font-kop:  "Cinzel", Georgia, system-ui, serif;
  --kb-font-body: "Lora", Georgia, "Times New Roman", system-ui, serif;
  --kb-font-sfeer:"IM Fell English", Georgia, serif;

  /* Materiaal */
  --kb-glans: linear-gradient(180deg, rgba(255,181,92,.10) 0%, rgba(255,181,92,.03) 28%, rgba(0,0,0,0) 62%);
  --kb-ruis: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
}

/* ---------- Reset & basis ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100%;
  font-family: var(--kb-font-body);
  font-size: 17px;
  line-height: 1.6;
  color: var(--kb-perkament);
  background: var(--kb-inkt);
  background-image:
    radial-gradient(900px 520px at 78% -8%, rgba(255,181,92,.10), transparent 70%),
    radial-gradient(1100px 700px at 12% 108%, rgba(123,30,34,.16), transparent 72%),
    linear-gradient(180deg, #150F09 0%, var(--kb-inkt) 55%, #0B0805 100%);
  background-attachment: scroll;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4 { font-family: var(--kb-font-kop); line-height: 1.2; margin: 0; letter-spacing: .08em; font-weight: 600; }
p { margin: 0; text-wrap: pretty; }
a { color: var(--kb-goud); text-decoration-color: rgba(212,175,55,.45); text-underline-offset: 3px; }
a:hover { color: var(--kb-kaars); }

/* ---------- Focus: nooit verwijderen ---------- */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, [tabindex]:focus-visible, .kb-card:focus-visible {
  outline: 3px solid var(--kb-goud);
  outline-offset: 3px;
  border-radius: 4px;
}
.kb-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.kb-skip {
  position: absolute; left: 50%; top: -60px; transform: translateX(-50%);
  z-index: 90; background: var(--kb-nacht); color: var(--kb-perkament);
  border: var(--kb-lijn-sterk); padding: 12px 18px; border-radius: var(--kb-radius-btn);
  font-family: var(--kb-font-kop); transition: top .18s ease;
}
.kb-skip:focus { top: 12px; }

/* ============================================================
   ATMOSFEER — kaarslicht, stof, plank, zwevend boek
   ============================================================ */
.kb-atmos { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }

/* 3 · Kaarslicht */
.kb-kaars {
  position: absolute; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,181,92,.55) 0%, rgba(255,181,92,.22) 38%, rgba(255,181,92,0) 72%);
  filter: blur(26px); will-change: opacity, filter, transform;
}
.kb-kaars--a { width: 460px; height: 460px; top: -120px; left: -90px;  animation: kb-flikker 7.3s infinite ease-in-out; }
.kb-kaars--b { width: 380px; height: 380px; top: 22%; right: -110px;   animation: kb-flikker 9.1s .8s infinite ease-in-out; }
.kb-kaars--c { width: 300px; height: 300px; bottom: 12%; left: 34%;    animation: kb-flikker 11.4s 1.9s infinite ease-in-out; opacity: .5; }

@keyframes kb-flikker {
  0%   { opacity: .55; transform: scale(1); }
  17%  { opacity: .82; transform: scale(1.04); }
  43%  { opacity: .38; transform: scale(.97); }
  61%  { opacity: .74; transform: scale(1.03); }
  88%  { opacity: .46; transform: scale(.99); }
  100% { opacity: .55; transform: scale(1); }
}

/* 4 · Stofdeeltjes (JS vult .kb-dust) */
.kb-dust { position: absolute; inset: 0; }
.kb-dust i {
  position: absolute; display: block; border-radius: 50%;
  background: var(--kb-goud); box-shadow: 0 0 6px rgba(212,175,55,.7);
  will-change: transform, opacity;
  animation-name: kb-zweef; animation-timing-function: linear; animation-iteration-count: infinite;
}
@keyframes kb-zweef {
  0%   { transform: translate3d(0, 0, 0); opacity: 0; }
  12%  { opacity: var(--o, .35); }
  50%  { transform: translate3d(var(--dx, 20px), -46vh, 0); }
  88%  { opacity: var(--o, .35); }
  100% { transform: translate3d(calc(var(--dx, 20px) * -.6), -94vh, 0); opacity: 0; }
}

/* 2 · Boekenplank-horizon */
.kb-shelf {
  position: fixed; left: 0; right: 0; bottom: -14px; z-index: 1;
  height: 230px; pointer-events: none;
  transform: translate3d(0, var(--kb-shelf-y, 0px), 0);
  will-change: transform;
}
.kb-shelf::after { /* boeken doemen op uit de schaduw \u2014 zonder harde bovenrand */
  content: ""; position: absolute; inset: -160px 0 0;
  background: linear-gradient(180deg,
    rgba(16,12,7,0) 0%, rgba(16,12,7,.22) 34%, rgba(16,12,7,.62) 56%,
    rgba(16,12,7,.30) 76%, rgba(16,12,7,.14) 88%, rgba(16,12,7,.44) 100%);
}
.kb-shelf__img {
  position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  width: min(1600px, 132%); max-width: none; height: 200px; object-fit: cover; object-position: bottom;
  filter: drop-shadow(0 24px 32px rgba(0,0,0,.7)) saturate(1.05) contrast(1.05);
}
/* CSS-fallback: plank getekend met verloop-kolommen (zichtbaar áchter de img) */
.kb-shelf__fallback {
  position: absolute; inset: auto 0 0 0; height: 150px;
  background:
    repeating-linear-gradient(90deg,
      var(--kb-bordeaux) 0 26px, #0000 26px 30px,
      var(--kb-brons) 30px 52px, #0000 52px 57px,
      var(--kb-inktblauw) 57px 86px, #0000 86px 90px,
      var(--kb-smaragd) 90px 112px, #0000 112px 118px,
      #4A2C1B 118px 152px, #0000 152px 158px),
    linear-gradient(180deg, #0000 0%, rgba(0,0,0,.5) 100%);
  border-top: 2px solid rgba(212,175,55,.30);
  box-shadow: inset 0 22px 34px rgba(0,0,0,.65);
  opacity: .95;
}
.kb-shelf__fallback::after { /* gouden kapitaalbandjes */
  content: ""; position: absolute; inset: 22px 0 auto 0; height: 8px;
  background: repeating-linear-gradient(90deg, rgba(212,175,55,.55) 0 26px, #0000 26px 57px, rgba(212,175,55,.35) 57px 86px, #0000 86px 158px);
  opacity: .6;
}
.kb-shelf__plank {
  position: absolute; left: 0; right: 0; bottom: 0; height: 14px;
  background: linear-gradient(180deg, var(--kb-hout-licht), var(--kb-hout) 40%, #150E08);
  border-top: 1px solid rgba(212,175,55,.35);
}

/* 1 · Het levende boek — eigen laag, vóór de boekenkast */
.kb-vluchtlaag { position: fixed; inset: 0; z-index: 3; pointer-events: none; overflow: hidden; }
.kb-vlucht {
  position: absolute; top: 12%; left: -14%; z-index: 0; pointer-events: none;
  animation: kb-passage 18s infinite ease-in-out;
  will-change: transform;
}
@keyframes kb-passage {
  0%   { transform: translate3d(0, 0, 0) rotate(-6deg); }
  50%  { transform: translate3d(78vw, 26vh, 0) rotate(7deg); }
  100% { transform: translate3d(0, 0, 0) rotate(-6deg); }
}
.kb-vlucht__dobber { animation: kb-dobber 6.5s infinite ease-in-out; }
@keyframes kb-dobber {
  0%, 100% { transform: translateY(-12px) rotate(-2deg); }
  50%      { transform: translateY(14px) rotate(3deg); }
}

.kb-vonk {
  position: absolute; width: 5px; height: 5px; border-radius: 50%;
  background: var(--kb-kaars); box-shadow: 0 0 10px var(--kb-goud);
  animation: kb-vonk-uit 2.2s forwards ease-out; pointer-events: none;
}
@keyframes kb-vonk-uit {
  0%   { opacity: .9; transform: scale(1) translateY(0); }
  100% { opacity: 0; transform: scale(.3) translateY(26px); }
}

/* 5 · Inktlijn-scheiders */
.kb-scheider {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  width: 100%; max-width: 640px; margin: var(--kb-s4) auto; border: 0; padding: 0;
}
.kb-scheider::before, .kb-scheider::after {
  content: ""; flex: 1; height: 1px;
}
.kb-scheider::before { background: linear-gradient(90deg, transparent, var(--kb-goud-diep) 60%, var(--kb-goud)); }
.kb-scheider::after  { background: linear-gradient(270deg, transparent, var(--kb-goud-diep) 60%, var(--kb-goud)); }
.kb-scheider__ruit {
  width: 10px; height: 10px; transform: rotate(45deg); flex: 0 0 auto;
  background: var(--kb-goud); box-shadow: 0 0 12px rgba(212,175,55,.6);
  outline: 1px solid rgba(212,175,55,.35); outline-offset: 4px;
}

/* ============================================================
   BOUWSTENEN
   ============================================================ */
.kb-wrap { position: relative; z-index: 2; width: min(1180px, 92vw); margin: 0 auto; }

.kb-card {
  position: relative; background: var(--kb-nacht); border: var(--kb-lijn);
  border-radius: var(--kb-radius); box-shadow: var(--kb-schaduw); overflow: hidden;
}
.kb-card::before { content: ""; position: absolute; inset: 0; background: var(--kb-glans); pointer-events: none; }

.kb-btn {
  --btn-bg: linear-gradient(180deg, var(--kb-hout-licht), var(--kb-hout));
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 12px 22px; border-radius: var(--kb-radius-btn);
  font-family: var(--kb-font-kop); font-size: 1rem; font-weight: 600; letter-spacing: .08em;
  color: var(--kb-perkament); background: var(--btn-bg);
  border: var(--kb-lijn-sterk); cursor: pointer; text-decoration: none;
  transition: transform .16s ease, box-shadow .2s ease, filter .2s ease;
}
.kb-btn:hover { transform: translateY(-2px); box-shadow: var(--kb-gloed); filter: brightness(1.08); }
.kb-btn:active { transform: translateY(0); }
.kb-btn--goud {
  --btn-bg: linear-gradient(180deg, #E8C558, var(--kb-goud) 45%, var(--kb-goud-diep));
  color: #221703; border-color: rgba(255,214,120,.7); text-shadow: 0 1px 0 rgba(255,255,255,.25);
}
.kb-btn--groot { min-height: 56px; font-size: 1.15rem; padding: 16px 30px; width: 100%; }

.kb-chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 13px; border-radius: var(--kb-radius-chip);
  font-family: var(--kb-font-kop); font-size: .82rem; letter-spacing: .06em;
  border: 1px solid currentColor; background: rgba(0,0,0,.35);
}
.kb-chip--ok    { color: var(--kb-ok); }
.kb-chip--laat  { color: var(--kb-fout); }
.kb-chip--uit   { color: var(--kb-waarschuw); }
.kb-chip b { font-family: var(--kb-font-body); font-weight: 600; }

.kb-label {
  font-family: var(--kb-font-sfeer); font-size: .95rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--kb-perkament-3);
}

/* ============================================================
   A · LANDINGSPAGINA
   ============================================================ */
.kb-hero {
  position: relative; z-index: 2; min-height: 100vh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--kb-s3); padding: var(--kb-s6) var(--kb-s4) 230px; text-align: center;
}
.kb-embleem { width: 84px; height: 84px; color: var(--kb-goud); filter: drop-shadow(0 0 18px rgba(212,175,55,.45)); }
.kb-logotype {
  font-family: var(--kb-font-logo); font-weight: 700;
  font-size: clamp(2.4rem, 6vw, 4.4rem); letter-spacing: .06em;
  color: var(--kb-perkament);
  text-shadow: 0 0 26px rgba(212,175,55,.45), 0 2px 0 rgba(0,0,0,.6);
}
.kb-onder { max-width: 44ch; color: var(--kb-perkament-2); font-size: 1.12rem; }

.kb-keuzes {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--kb-s4); width: min(880px, 100%); margin-top: var(--kb-s2);
  perspective: 1000px;
}
.kb-keuze {
  position: relative; display: flex; flex-direction: column; gap: var(--kb-s2);
  padding: var(--kb-s5) var(--kb-s4); text-align: left; text-decoration: none;
  color: var(--kb-perkament); background: var(--kb-nacht);
  border: var(--kb-lijn); border-left: 10px solid var(--kb-brons);
  border-radius: 6px var(--kb-radius) var(--kb-radius) 6px;
  box-shadow: var(--kb-schaduw); min-height: 168px;
  transition: transform .28s cubic-bezier(.2,.7,.3,1), box-shadow .28s ease, border-color .28s ease;
  transform-style: preserve-3d;
}
.kb-keuze::before { content: ""; position: absolute; inset: 0; background: var(--kb-glans); border-radius: inherit; pointer-events: none; }
.kb-keuze::after { /* gloed achter de kaart */
  content: ""; position: absolute; inset: 8px; z-index: -1; border-radius: inherit;
  box-shadow: 0 0 0 rgba(212,175,55,0); transition: box-shadow .3s ease;
}
.kb-keuze:hover, .kb-keuze:focus-visible {
  transform: rotateX(-4deg) translateY(-6px);
  border-color: rgba(212,175,55,.75);
  box-shadow: 0 26px 54px rgba(0,0,0,.6), var(--kb-gloed);
}
.kb-keuze__icoon { font-size: 2.3rem; line-height: 1; }
.kb-keuze__titel { font-family: var(--kb-font-kop); font-size: 1.5rem; }
.kb-keuze__sub { color: var(--kb-perkament-2); font-size: 1rem; }
.kb-keuze--primair {
  border-left-color: var(--kb-goud);
  background:
    linear-gradient(180deg, rgba(212,175,55,.16), rgba(212,175,55,.04) 55%, transparent),
    var(--kb-nacht);
}
.kb-keuze--primair .kb-keuze__titel { color: var(--kb-goud); }
.kb-keuze--subtiel { border-left-color: var(--kb-inktblauw); }

/* ============================================================
   B · SCANPAGINA
   ============================================================ */
.kb-top {
  position: relative; z-index: 3;
  display: flex; align-items: center; justify-content: space-between; gap: var(--kb-s3);
  padding: var(--kb-s3) clamp(16px, 4vw, 40px);
  border-bottom: var(--kb-lijn); background: rgba(26,19,12,.94);
}
.kb-top__merk { display: flex; align-items: baseline; gap: 12px; }
.kb-top__merk strong { font-family: var(--kb-font-logo); font-size: 1.4rem; letter-spacing: .06em; }
.kb-top__merk span { font-family: var(--kb-font-sfeer); color: var(--kb-perkament-3); letter-spacing: .12em; }
.kb-top a.kb-btn { min-height: 44px; }

.kb-scan { position: relative; z-index: 2; font-size: 20px; padding: var(--kb-s5) 0 240px; }
.kb-scan__grid {
  display: grid; grid-template-columns: 330px minmax(0, 1fr); gap: var(--kb-s5);
  align-items: start;
}

/* Toverspiegel-frame */
.kb-spiegel {
  position: relative; border-radius: 20px; overflow: hidden;
  padding: 12px; background: linear-gradient(160deg, var(--kb-goud-diep), #5C4310 45%, var(--kb-goud-diep));
  box-shadow: var(--kb-schaduw), inset 0 0 0 1px rgba(255,214,120,.55);
}
.kb-spiegel__beeld {
  position: relative; aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden;
  background: radial-gradient(circle at 50% 40%, #241A10, #0C0805);
  box-shadow: inset 0 0 60px rgba(0,0,0,.8);
}
.kb-spiegel video, .kb-spiegel__beeld > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kb-spiegel__lijn {
  position: absolute; left: 0; right: 0; top: 0; height: 22%;
  background: linear-gradient(180deg, rgba(212,175,55,0), rgba(212,175,55,.35), rgba(255,181,92,.85));
  box-shadow: 0 0 24px rgba(255,181,92,.6);
  animation: kb-scanlijn 4.6s infinite ease-in-out;
}
@keyframes kb-scanlijn {
  0%, 100% { transform: translateY(-30%); }
  50%      { transform: translateY(430%); }
}
.kb-hoek { position: absolute; width: 42px; height: 42px; color: var(--kb-goud); opacity: .95; }
.kb-hoek--tl { top: 4px; left: 4px; }
.kb-hoek--tr { top: 4px; right: 4px; transform: scaleX(-1); }
.kb-hoek--bl { bottom: 4px; left: 4px; transform: scaleY(-1); }
.kb-hoek--br { bottom: 4px; right: 4px; transform: scale(-1); }
.kb-scan__hint { text-align: center; margin-top: var(--kb-s3); color: var(--kb-perkament-2); font-size: 1.15rem; }

/* Perkamentrol-checklist */
.kb-rol {
  position: relative; padding: var(--kb-s4); border-radius: var(--kb-radius);
  background: var(--kb-nacht); border: var(--kb-lijn); box-shadow: var(--kb-schaduw-l);
  list-style: none; margin: 0;
}
.kb-rol::after { content: ""; position: absolute; inset: 0; background-image: var(--kb-ruis); opacity: .05; border-radius: inherit; pointer-events: none; }
.kb-rol__titel { font-family: var(--kb-font-kop); font-size: 1.05rem; color: var(--kb-perkament-3); letter-spacing: .12em; margin-bottom: var(--kb-s3); }
.kb-stap { display: flex; align-items: center; gap: 16px; padding: 14px 0; min-height: 56px; }
.kb-stap + .kb-stap { border-top: 1px dashed rgba(212,175,55,.22); }
.kb-stap__bol {
  flex: 0 0 auto; width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--kb-font-kop); font-size: 1.15rem;
  color: var(--kb-perkament-2); background: var(--kb-hout); border: var(--kb-lijn-sterk);
}
.kb-stap__tekst { font-size: 1.05rem; }
.kb-stap[data-actief="1"] .kb-stap__bol {
  color: var(--kb-goud); animation: kb-puls 1.9s infinite ease-out;
}
@keyframes kb-puls {
  0%   { box-shadow: 0 0 0 0 rgba(212,175,55,.55); }
  70%  { box-shadow: 0 0 0 14px rgba(212,175,55,0); }
  100% { box-shadow: 0 0 0 0 rgba(212,175,55,0); }
}
.kb-stap[data-klaar="1"] .kb-stap__bol {
  color: #241804; background: linear-gradient(180deg, #E8C558, var(--kb-goud-diep));
  border-color: rgba(255,214,120,.8); animation: kb-opvlam .55s ease-out;
}
.kb-stap[data-klaar="1"] .kb-stap__tekst { color: var(--kb-perkament-2); }
@keyframes kb-opvlam {
  0%   { transform: scale(.7); box-shadow: 0 0 0 0 rgba(255,181,92,.9); }
  55%  { transform: scale(1.14); box-shadow: 0 0 26px 10px rgba(255,181,92,.55); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255,181,92,0); }
}

/* Herkende leerling / boek */
.kb-treffers { display: grid; gap: var(--kb-s3); margin-top: var(--kb-s4); }
.kb-treffer {
  display: flex; align-items: center; gap: var(--kb-s3);
  padding: var(--kb-s3) var(--kb-s4);
  background: var(--kb-nacht); border: var(--kb-lijn); border-radius: var(--kb-radius);
  box-shadow: var(--kb-schaduw-l);
  animation: kb-invlieg .5s cubic-bezier(.2,.8,.3,1) both;
}
@keyframes kb-invlieg {
  from { opacity: 0; transform: translateY(28px) scale(.98); }
  to   { opacity: 1; transform: none; }
}
.kb-avatar {
  flex: 0 0 auto; width: 58px; height: 58px; border-radius: 50%;
  display: grid; place-items: center; font-family: var(--kb-font-kop); font-size: 1.5rem;
  color: var(--kb-goud); background: var(--kb-hout); border: var(--kb-lijn-sterk);
  box-shadow: inset 0 0 18px rgba(0,0,0,.6);
}
.kb-treffer__meta { min-width: 0; }
.kb-treffer__naam { font-family: var(--kb-font-kop); font-size: 1.2rem; }
.kb-treffer__sub { color: var(--kb-perkament-2); font-size: .95rem; }
.kb-boekrug {
  flex: 0 0 auto; width: 42px; height: 58px; border-radius: 3px 6px 6px 3px;
  background: linear-gradient(160deg, var(--kb-bordeaux), #4C1114);
  border: 1px solid rgba(212,175,55,.5);
  box-shadow: inset -6px 0 10px rgba(0,0,0,.5);
}
.kb-scan__actie { margin-top: var(--kb-s4); }

/* Toasts */
.kb-toasts {
  position: fixed; top: 18px; left: 50%; transform: translateX(-50%);
  z-index: 60; display: grid; gap: 10px; width: min(560px, 92vw); pointer-events: none;
}
.kb-toast {
  position: relative; display: flex; align-items: center; gap: 12px;
  padding: 14px 20px; border-radius: 8px;
  font-family: var(--kb-font-body); font-size: 1.05rem; font-weight: 600;
  color: #2A1B08; background: var(--kb-blad);
  border: 1px solid var(--kb-goud-diep);
  box-shadow: 0 18px 40px rgba(0,0,0,.55), 0 0 0 3px rgba(212,175,55,.18);
  animation: kb-toast-in .4s cubic-bezier(.2,.8,.3,1) both;
}
.kb-toast::after { content: ""; position: absolute; inset: 0; background-image: var(--kb-ruis); opacity: .10; border-radius: inherit; mix-blend-mode: multiply; pointer-events: none; }
.kb-toast--weg { animation: kb-toast-uit .4s ease-in forwards; }
.kb-toast--ok   { border-left: 8px solid var(--kb-smaragd); }
.kb-toast--info { border-left: 8px solid var(--kb-inktblauw); }
.kb-toast--fout { border-left: 8px solid var(--kb-bordeaux); }
@keyframes kb-toast-in  { from { opacity: 0; transform: translateY(-18px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes kb-toast-uit { to { opacity: 0; transform: translateY(-14px); } }

/* ============================================================
   C1 · LOGIN — het enige lichte vlak
   ============================================================ */
.kb-login {
  position: relative; z-index: 2; min-height: 100vh;
  display: grid; place-items: center; padding: var(--kb-s6) var(--kb-s4) 220px;
}
.kb-stapel {
  position: absolute; right: -40px; bottom: 120px; z-index: -1;
  width: 340px; opacity: .9;
  filter: drop-shadow(0 24px 32px rgba(0,0,0,.7)) saturate(1.05) contrast(1.05);
}
/* oude vangnet-stapel: niet meer gebruikt (zie .kb-boekstapel) */
.kb-stapel--fallback { display: none; }
.kb-perkament {
  position: relative; width: min(420px, 100%); padding: var(--kb-s5) var(--kb-s4) var(--kb-s4);
  color: #241A0C; background: linear-gradient(180deg, #F6EBD3, var(--kb-blad) 60%, #E2D0A8);
  border: 1px solid var(--kb-goud-diep);
  box-shadow: 0 26px 60px rgba(0,0,0,.65), 0 0 0 1px rgba(212,175,55,.25);
  clip-path: polygon(0.6% 1.2%, 30% 0, 62% 1%, 99% 0.4%, 100% 34%, 99.2% 68%, 100% 99%, 66% 99.4%, 32% 100%, 1% 99%, 0.2% 66%, 1% 32%);
}
.kb-perkament::after {
  content: ""; position: absolute; inset: 0; background-image: var(--kb-ruis);
  opacity: .13; mix-blend-mode: multiply; pointer-events: none;
}
.kb-perkament h1 { font-family: var(--kb-font-logo); font-size: 1.85rem; color: #2A1B08; letter-spacing: .04em; }
.kb-perkament p { color: #5A4526; margin-top: 8px; }
.kb-perkament .kb-scheider::before { background: linear-gradient(90deg, transparent, var(--kb-goud-diep)); }
.kb-perkament .kb-scheider::after  { background: linear-gradient(270deg, transparent, var(--kb-goud-diep)); }
.kb-perkament .kb-scheider__ruit { background: var(--kb-goud-diep); box-shadow: none; }

.kb-veld { display: grid; gap: 6px; margin-top: var(--kb-s3); }
.kb-veld label { font-family: var(--kb-font-kop); font-size: .95rem; letter-spacing: .08em; color: #4A3617; }
.kb-veld input {
  font-family: var(--kb-font-body); font-size: 17px; color: #241A0C;
  padding: 12px 4px; min-height: 48px; background: transparent;
  border: 0; border-bottom: 2px solid var(--kb-goud-diep);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.kb-veld input:focus { border-bottom-width: 3px; border-bottom-color: #C79B24; box-shadow: 0 8px 18px -12px rgba(168,129,31,.9); }
.kb-veld input:focus-visible { outline-offset: 4px; }

/* Wassegel-knop: bij klikken wordt de was echt gestempeld */
.kb-segelvak {
  position: relative; display: grid; place-items: center;
  margin: var(--kb-s4) auto 0; width: 150px; height: 150px;
}
/* de druppel gesmolten was die neerkomt */
.kb-was {
  position: absolute; left: 50%; top: 50%; width: 74px; height: 74px;
  transform: translate(-50%, -50%) scale(0); opacity: 0;
  border-radius: 48% 52% 44% 56% / 52% 46% 54% 48%;
  background: radial-gradient(circle at 38% 30%, #C4444A, #8A2126 55%, #5A1417);
  box-shadow: 0 6px 14px rgba(0,0,0,.45);
}
.kb-segelvak[data-stempelen="1"] .kb-was { animation: kb-was-val .95s forwards ease-in; }
@keyframes kb-was-val {
  0%   { transform: translate(-50%, -220%) scale(.5); opacity: 0; }
  34%  { transform: translate(-50%, -50%) scale(.9); opacity: 1; }
  52%  { transform: translate(-50%, -46%) scale(1.5, .82); opacity: 1; }  /* plets */
  75%  { transform: translate(-50%, -48%) scale(1.34, .96); opacity: 1; }
  100% { transform: translate(-50%, -48%) scale(1.4, .9); opacity: 1; }
}
.kb-segel {
  position: relative; display: grid; place-content: center; justify-items: center;
  gap: 4px; width: 116px; height: 116px; padding: 0;
  border: 0; cursor: pointer; color: #F6E3C4; text-align: center;
  font-family: var(--kb-font-kop); font-size: .95rem; letter-spacing: .12em;
  background: radial-gradient(circle at 34% 28%, #A83036, var(--kb-bordeaux) 52%, #4E1013);
  clip-path: polygon(50% 0, 85% 15%, 100% 50%, 85% 85%, 50% 100%, 15% 85%, 0 50%, 15% 15%);
  box-shadow: 0 12px 24px rgba(0,0,0,.5), inset 0 3px 8px rgba(255,255,255,.28), inset 0 -8px 14px rgba(0,0,0,.5);
  transition: transform .16s ease, filter .2s ease;
}
.kb-segel::before { /* geperste rand: het reliëf van de stempel */
  content: ""; position: absolute; inset: 13px;
  border: 1px solid rgba(255,224,190,.32);
  box-shadow: inset 0 0 0 2px rgba(0,0,0,.22);
  clip-path: polygon(50% 0, 85% 15%, 100% 50%, 85% 85%, 50% 100%, 15% 85%, 0 50%, 15% 15%);
}
.kb-segel::after { /* wasglans */
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(48% 40% at 32% 24%, rgba(255,255,255,.32), transparent 70%);
  clip-path: inherit; pointer-events: none;
}
.kb-segel:hover { transform: translateY(-2px) rotate(-2deg); filter: brightness(1.08); }
.kb-segel svg { width: 24px; height: 24px; opacity: .9; }
.kb-segel span { position: relative; z-index: 1; }

/* de stempel drukt in de was */
.kb-segelvak[data-stempelen="1"] .kb-segel { animation: kb-stempel 1.15s forwards cubic-bezier(.3,.1,.2,1); }
@keyframes kb-stempel {
  0%   { transform: translateY(-42px) scale(1.16) rotate(-5deg); opacity: 0; filter: brightness(1.3); }
  30%  { opacity: 1; }
  46%  { transform: translateY(0) scale(.94) rotate(0deg); filter: brightness(.86); }   /* indrukken */
  62%  { transform: translateY(-6px) scale(1.03) rotate(.5deg); }
  100% { transform: translateY(0) scale(1) rotate(0deg); filter: brightness(1); }
}
/* wasspatten die opzij spatten bij de indruk */
.kb-spat {
  position: absolute; left: 50%; top: 50%; width: 9px; height: 9px;
  border-radius: 50%; background: #8A2126; opacity: 0;
  box-shadow: 0 2px 4px rgba(0,0,0,.5);
}
.kb-segelvak[data-stempelen="1"] .kb-spat { animation: kb-spat .8s .42s forwards ease-out; }
@keyframes kb-spat {
  0%   { transform: translate(-50%, -50%) scale(.3); opacity: .95; }
  100% { transform: translate(calc(-50% + var(--sx, 40px)), calc(-50% + var(--sy, 20px))) scale(var(--ss, .8)); opacity: 0; }
}
.kb-fout-melding {
  display: flex; align-items: center; gap: 10px; margin-top: var(--kb-s3);
  padding: 12px 14px; border-radius: 8px; font-weight: 600;
  color: #5E1417; background: rgba(196,89,92,.16); border: 1px solid var(--kb-bordeaux);
}
.kb-login__terug { display: block; text-align: center; margin-top: var(--kb-s4); color: #6B4E1E; }
.kb-perkament a { color: #6B4E1E; }
.kb-perkament a:hover { color: #8A5B12; }

/* ============================================================
   C2 · DASHBOARD
   ============================================================ */
.kb-app { position: relative; z-index: 2; display: grid; grid-template-columns: 264px minmax(0,1fr); min-height: 100vh; }
.kb-zij {
  background: var(--kb-nacht); border-right: var(--kb-lijn);
  padding: var(--kb-s4) var(--kb-s3); display: flex; flex-direction: column; gap: var(--kb-s4);
}
.kb-zij__merk { display: flex; align-items: center; gap: 10px; padding: 0 8px; }
.kb-zij__merk strong { font-family: var(--kb-font-logo); font-size: 1.2rem; letter-spacing: .05em; }
.kb-nav { display: grid; gap: 4px; }
.kb-nav a {
  position: relative; display: flex; align-items: center; gap: 12px;
  min-height: 48px; padding: 10px 14px; border-radius: var(--kb-radius-btn);
  color: var(--kb-perkament-2); text-decoration: none;
  font-family: var(--kb-font-kop); font-size: .98rem; letter-spacing: .06em;
  transition: background .18s ease, color .18s ease;
}
.kb-nav a:hover { background: var(--kb-hout); color: var(--kb-perkament); }
.kb-nav a[aria-current="page"] {
  color: var(--kb-goud); background: linear-gradient(90deg, rgba(212,175,55,.16), transparent 70%);
}
.kb-nav a[aria-current="page"]::before {
  content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px;
  background: var(--kb-goud); border-radius: 2px; box-shadow: 0 0 12px rgba(212,175,55,.8);
}
.kb-nav__ico { width: 22px; text-align: center; opacity: .9; }
.kb-zij__voet { margin-top: auto; }

.kb-hoofd { padding: var(--kb-s4) clamp(16px, 3vw, 36px) 200px; min-width: 0; }
.kb-hoofd__kop { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--kb-s3); flex-wrap: wrap; }
.kb-hoofd__kop h1 { font-family: var(--kb-font-logo); font-size: 1.9rem; letter-spacing: .04em; }

.kb-cijfers { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: var(--kb-s3); margin-top: var(--kb-s4); }
.kb-cijfer { padding: var(--kb-s3) var(--kb-s4); border-radius: var(--kb-radius); background: var(--kb-nacht); border: var(--kb-lijn); box-shadow: var(--kb-schaduw-l); position: relative; overflow: hidden; }
.kb-cijfer::before { content: ""; position: absolute; inset: 0; background: var(--kb-glans); pointer-events: none; }
.kb-cijfer__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.kb-cijfer__ico { font-size: 1.2rem; opacity: .85; }
.kb-cijfer__getal { font-family: var(--kb-font-kop); font-size: 2.6rem; line-height: 1.1; color: var(--kb-perkament); }
.kb-cijfer--laat .kb-cijfer__getal { color: var(--kb-fout); }
.kb-cijfer--uit .kb-cijfer__getal { color: var(--kb-goud); }
.kb-cijfer__label { color: var(--kb-perkament-3); font-size: .95rem; }

.kb-balk { display: flex; align-items: center; gap: var(--kb-s2); flex-wrap: wrap; margin: var(--kb-s4) 0 var(--kb-s3); }
.kb-zoek {
  flex: 1 1 240px; min-height: 48px; padding: 10px 16px;
  font-family: var(--kb-font-body); font-size: 17px; color: var(--kb-perkament);
  background: var(--kb-hout); border: var(--kb-lijn); border-radius: var(--kb-radius-btn);
}
.kb-zoek::placeholder { color: var(--kb-perkament-3); }
.kb-filter {
  min-height: 44px; padding: 8px 16px; border-radius: var(--kb-radius-chip);
  font-family: var(--kb-font-kop); font-size: .9rem; letter-spacing: .06em;
  color: var(--kb-perkament-2); background: transparent; border: var(--kb-lijn); cursor: pointer;
}
.kb-filter:hover { background: var(--kb-hout); color: var(--kb-perkament); }
.kb-filter[aria-pressed="true"] { color: #241804; background: linear-gradient(180deg, #E8C558, var(--kb-goud-diep)); border-color: rgba(255,214,120,.7); }

.kb-tabel-wrap {
  background: var(--kb-hout); border: var(--kb-lijn); border-radius: var(--kb-radius);
  box-shadow: var(--kb-schaduw-l); overflow: hidden;
}
.kb-tabel { width: 100%; border-collapse: collapse; }
.kb-tabel caption { text-align: left; padding: var(--kb-s3) var(--kb-s4); font-family: var(--kb-font-kop); letter-spacing: .1em; color: var(--kb-perkament-3); border-bottom: var(--kb-lijn); }
.kb-tabel th {
  text-align: left; padding: 14px var(--kb-s3); font-family: var(--kb-font-kop);
  font-size: .9rem; letter-spacing: .08em; color: var(--kb-perkament-3);
  background: rgba(0,0,0,.28); border-bottom: var(--kb-lijn); white-space: nowrap;
}
.kb-tabel td { padding: 14px var(--kb-s3); min-height: 52px; border-bottom: 1px solid rgba(212,175,55,.14); font-size: .98rem; }
.kb-tabel tbody tr:hover td { background: var(--kb-hout-licht); }
.kb-tabel tbody tr:last-child td { border-bottom: 0; }
.kb-tabel__boek { font-weight: 600; }
.kb-tabel__auteur { display: block; color: var(--kb-perkament-3); font-size: .88rem; }

.kb-leeg { display: grid; justify-items: center; gap: var(--kb-s3); padding: var(--kb-s6) var(--kb-s4); text-align: center; }
.kb-leeg img { width: 220px; }
.kb-leeg__tekst { font-family: var(--kb-font-kop); font-size: 1.2rem; color: var(--kb-perkament-2); }

/* ============================================================
   RESPONSIEF — 1200 / 900 / 720 / 480
   ============================================================ */
@media (max-width: 1200px) {
  .kb-cijfers { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .kb-app { grid-template-columns: 220px minmax(0,1fr); }
}
@media (max-width: 900px) {
  .kb-scan__grid { grid-template-columns: 1fr; }
  .kb-app { grid-template-columns: 1fr; }
  .kb-zij { flex-direction: row; align-items: center; overflow-x: auto; border-right: 0; border-bottom: var(--kb-lijn); }
  .kb-nav { grid-auto-flow: column; grid-template-columns: none; }
  .kb-nav a[aria-current="page"]::before { top: auto; bottom: 0; left: 8px; right: 8px; width: auto; height: 3px; }
  .kb-zij__voet { margin: 0; }
  .kb-stapel, .kb-stapel--fallback { display: none; }
}
@media (max-width: 720px) {
  .kb-keuzes { grid-template-columns: 1fr; }
  .kb-hero { padding-bottom: 200px; }
  .kb-tabel-wrap { overflow-x: auto; }
  .kb-tabel { min-width: 680px; }
}
@media (max-width: 480px) {
  :root { --kb-s5: 24px; --kb-s6: 32px; }
  .kb-cijfers { grid-template-columns: 1fr; }
  .kb-shelf { height: 130px; }
  .kb-scan { font-size: 20px; }
}
/* Chromebook 1366×768: hero mag niet buiten beeld vallen */
@media (max-height: 800px) {
  .kb-hero { min-height: auto; padding-top: var(--kb-s5); padding-bottom: 210px; }
  .kb-login { min-height: auto; padding-top: var(--kb-s5); }
  .kb-shelf { height: 190px; }
}

/* ---------- Reduced motion: alles stil, nog steeds mooi ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .kb-spiegel__lijn { opacity: .35; transform: translateY(180%); }
  .kb-vlucht { transform: translate3d(38vw, 12vh, 0) rotate(-4deg); }
  .kb-dust i { opacity: .3; }
  .kb-kaars { opacity: .55; }
}

/* ---------- Meer contrast gevraagd ---------- */
@media (prefers-contrast: more) {
  :root {
    --kb-perkament-2: #F0E3C8;
    --kb-perkament-3: #CBB794;
    --kb-lijn: 1px solid rgba(212,175,55,.65);
  }
  body { background-image: none; background: #0B0805; }
  .kb-kaars, .kb-dust { display: none; }
  .kb-card, .kb-keuze, .kb-cijfer, .kb-rol, .kb-treffer { background: #0F0A06; }
}
/* ============================================================
   DE ECHTE BOEKENKAST — gedetailleerde leren boekruggen in pure CSS
   (JS genereert de ruggen in .kb-boekenrij; zonder JS blijft
    .kb-shelf__fallback als getekende plank staan)
   ============================================================ */
.kb-kast { position: absolute; left: 0; right: 0; bottom: 0; }

/* Verre kast: onscherp en donkerder → diepte in de ruimte */
.kb-kast--ver {
  bottom: 104px; transform: scale(.72); transform-origin: bottom center;
  filter: blur(2.4px) brightness(.42) saturate(.8); opacity: .85;
}
.kb-kast--ver .kb-plank__front { opacity: .9; }

.kb-boekenrij {
  display: flex; align-items: flex-end; justify-content: center;
  gap: 2px; padding: 0 6px; overflow: hidden;
}

/* --- Eén boekrug --- */
.kb-rug {
  position: relative; flex: 0 0 auto;
  width: var(--w, 34px); height: var(--h, 150px);
  border-radius: 3px 4px 1px 1px;
  background:
    /* lichtval van boven (kaarslicht) */
    linear-gradient(180deg, rgba(255,200,130,.20) 0%, rgba(255,200,130,.05) 14%, rgba(0,0,0,0) 40%),
    /* ronding van de rug: licht in het midden, donker aan de randen */
    linear-gradient(90deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,.18) 14%, rgba(255,255,255,.10) 42%,
                          rgba(255,255,255,.13) 56%, rgba(0,0,0,.22) 86%, rgba(0,0,0,.66) 100%),
    linear-gradient(180deg, var(--c1, #5A2A2C), var(--c2, #33161A));
  box-shadow:
    inset 0 1px 0 rgba(255,220,160,.22),
    3px 0 6px -2px rgba(0,0,0,.85);
  transform: rotate(var(--tilt, 0deg)) translateY(var(--dy, 0px));
  transform-origin: bottom center;
}
/* leernarf: fijne ruistextuur over het leer */
.kb-rug::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background-image: var(--kb-ruis); background-size: 90px 90px;
  opacity: .14; mix-blend-mode: overlay; pointer-events: none;
}
/* kapitaalband + gesleten kop en staart */
.kb-rug::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(240,225,190,.55), rgba(240,225,190,0));
  opacity: .5;
}

/* verhoogde ribben met gouden filets ertussen */
.kb-rug__ribben {
  position: absolute; left: 0; right: 0; top: 12%; bottom: 10%;
  background-image: repeating-linear-gradient(180deg,
    rgba(0,0,0,0) 0 var(--rib-gap, 26px),
    rgba(0,0,0,.55) var(--rib-gap, 26px) calc(var(--rib-gap, 26px) + 1px),
    rgba(255,235,190,.30) calc(var(--rib-gap, 26px) + 1px) calc(var(--rib-gap, 26px) + 4px),
    rgba(0,0,0,.5) calc(var(--rib-gap, 26px) + 4px) calc(var(--rib-gap, 26px) + 6px));
  border-radius: 2px;
}
/* geblindstempeld titelveld: een tweede leerkleur met gouden kader */
.kb-rug__label {
  position: absolute; left: 12%; right: 12%; top: 24%; height: 30%;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--lab, #6B2E22), rgba(0,0,0,.5));
  box-shadow:
    inset 0 0 0 1px rgba(212,175,55,.62),
    inset 0 0 0 3px rgba(0,0,0,.35),
    0 1px 2px rgba(0,0,0,.6);
}
/* goudopdruk: onleesbaar klein, precies zoals echt op afstand */
.kb-rug__titel {
  position: absolute; left: 26%; right: 26%; top: 30%; height: 18%;
  background-image: repeating-linear-gradient(180deg,
    rgba(226,196,116,.85) 0 2px, rgba(0,0,0,0) 2px 6px);
  opacity: .8;
}
/* gouden filet onderaan + klein ornament */
.kb-rug__voet {
  position: absolute; left: 18%; right: 18%; bottom: 12%; height: 12%;
  background-image:
    linear-gradient(180deg, rgba(226,196,116,.6) 0 1px, rgba(0,0,0,0) 1px),
    radial-gradient(circle at 50% 60%, rgba(226,196,116,.75) 0 1.6px, rgba(0,0,0,0) 2px);
  opacity: .75;
}
/* een enkel boek staat schuin: dan zie je de bladzijden */
.kb-rug--scheef { box-shadow: inset 0 1px 0 rgba(255,220,160,.22), 6px 0 12px -4px rgba(0,0,0,.9); }
.kb-rug__blok {
  position: absolute; top: 4px; bottom: 0; right: -7px; width: 8px;
  border-radius: 0 2px 1px 0;
  background: repeating-linear-gradient(180deg, #CBB68C 0 2px, #A98F63 2px 3px);
  box-shadow: inset -2px 0 4px rgba(0,0,0,.45);
}
/* een liggend boek bovenop de rij */
.kb-rug--plat { align-self: flex-end; }

/* de eikenhouten plank zelf */
.kb-plank {
  position: relative; height: 16px;
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,.14) 0 3px, rgba(0,0,0,0) 3px 26px),
    linear-gradient(180deg, #4A331D 0%, var(--kb-hout) 42%, #1C1309 100%);
  border-top: 1px solid rgba(212,175,55,.18);
  box-shadow: 0 -14px 26px rgba(0,0,0,.55), inset 0 2px 0 rgba(255,200,130,.08);
}
.kb-plank__front {
  position: absolute; left: 0; right: 0; bottom: 0; height: 7px;
  background: linear-gradient(180deg, rgba(0,0,0,.30), rgba(0,0,0,.72));
  border-top: 1px solid rgba(226,196,116,.10);
}
/* schaduw waar de boeken op het hout staan */
.kb-boekenrij + .kb-plank::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 10px;
  background: linear-gradient(180deg, rgba(0,0,0,.75), rgba(0,0,0,0));
}

@media (max-width: 480px) {
  .kb-kast--ver { display: none; }
}
@media (prefers-contrast: more) {
  .kb-kast--ver { display: none; }
}

/* ============================================================
   DE ZAAL — diepte: vier rekken achter elkaar, lichtbundel, vloer
   ============================================================ */
.kb-zaal { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }

/* Optioneel: echte foto als achtergrond (zelf aanleveren).
   Zet .kb-zaal--foto op .kb-zaal en de CSS-zaal blijft eronder als vangnet. */
/* Leeg: een klein, duidelijk sleepvak rechtsboven. Gevuld: schuift het als
   volwaardige achtergrond achter de hele zaal en verdwijnen de CSS-rekken. */
.kb-zaal__foto {
  position: absolute; right: 18px; top: 84px; width: 236px; height: 148px;
  z-index: 4; pointer-events: auto; opacity: .92;
}
.kb-zaal__foto:has(image-slot[data-filled]) {
  inset: -2%; right: auto; top: auto; width: auto; height: auto;
  z-index: 0; pointer-events: none; opacity: 1;
}
.kb-zaal:has(image-slot[data-filled]) .kb-rek,
.kb-zaal:has(image-slot[data-filled]) .kb-zaal__stijl { display: none; }
.kb-zaal__foto > * { width: 100%; height: 100%; }
.kb-zaal--foto .kb-zaal__foto image-slot[data-filled] { filter: brightness(.46) saturate(.85) contrast(1.05) blur(1.5px); }
.kb-zaal__foto:has(image-slot[data-filled])::after { /* warme kaarslicht-gradering over de foto */
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(60% 45% at 60% 18%, rgba(255,181,92,.30), transparent 70%),
    linear-gradient(180deg, rgba(16,12,7,.72), rgba(16,12,7,.28) 45%, rgba(16,12,7,.86));
}

/* Rekken op afstand: elk verder weg = kleiner, donkerder, onscherper */
.kb-rek {
  position: absolute; left: -6%; right: -6%;
  transform-origin: bottom center;
  contain: paint;
}
/* boeken in de diepte ademen niet: anders hertekent de blur-laag continu */
.kb-rek .kb-rug { animation: none; }
.kb-rek--4 { bottom: 70%; transform: scale(.40); filter: blur(3.6px) brightness(.28) saturate(.72); }
.kb-rek--3 { bottom: 56%; transform: scale(.54); filter: blur(2.6px) brightness(.34) saturate(.78); }
.kb-rek--2 { bottom: 41%; transform: scale(.70); filter: blur(1.7px) brightness(.42) saturate(.84); }
.kb-rek--1 { bottom: 25%; transform: scale(.86); filter: blur(.9px) brightness(.56); }
/* verticale stijlen van de kast: je kijkt tussen de rekken door */
.kb-zaal__stijl {
  position: absolute; top: 0; bottom: 0; width: 26px;
  background: linear-gradient(90deg, #0D0906, #33230F 40%, #1B1209);
  box-shadow: 0 0 30px rgba(0,0,0,.8);
  opacity: .85;
}
.kb-zaal__stijl--l { left: 4%; }
.kb-zaal__stijl--r { right: 4%; }

/* Lichtbundel uit een hoog raam, met dwarrelend stof erin */
.kb-bundel {
  position: absolute; top: -25%; left: 46%; width: 380px; height: 150%;
  transform: rotate(15deg);
  background: linear-gradient(180deg, rgba(255,206,140,.30) 0%, rgba(255,196,120,.12) 45%, rgba(255,190,110,0) 88%);
  filter: blur(22px); mix-blend-mode: screen; will-change: opacity;
  animation: kb-bundel 14s infinite ease-in-out;
}
.kb-bundel--2 { left: 18%; width: 240px; transform: rotate(-11deg); opacity: .55; animation-duration: 19s; animation-delay: -6s; }
@keyframes kb-bundel {
  0%   { opacity: .55; transform: rotate(15deg) translateX(0); }
  17%  { opacity: .78; }
  43%  { opacity: .40; transform: rotate(15deg) translateX(-14px); }
  61%  { opacity: .70; }
  88%  { opacity: .48; transform: rotate(15deg) translateX(8px); }
  100% { opacity: .55; transform: rotate(15deg) translateX(0); }
}

/* Vignet: de randen van de zaal vallen weg in het donker */
.kb-vignet {
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 90% at 50% 46%, transparent 38%, rgba(8,5,3,.55) 74%, rgba(8,5,3,.9) 100%);
}

/* Leesbaarheidsplaat achter de hero-tekst (contrast blijft ≥ 4.5:1) */
.kb-hero::before {
  content: ""; position: absolute; z-index: -1;
  left: 50%; top: 12%; width: min(1050px, 96vw); height: 62%;
  transform: translateX(-50%);
  background: radial-gradient(58% 60% at 50% 45%, rgba(10,7,4,.96), rgba(10,7,4,.78) 58%, rgba(10,7,4,.30) 78%, transparent 92%);
  filter: blur(10px); pointer-events: none;
}

@media (max-width: 900px) {
  .kb-rek--4, .kb-rek--3 { display: none; }
  .kb-zaal__stijl { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .kb-bundel { animation: none; opacity: .6; }
}
@media (prefers-contrast: more) {
  .kb-zaal { display: none; }
}

/* ---------- Het levende boek: vleugels + vrije vlucht ---------- */
.kb-vlucht--js { animation: none; top: 0; left: 0; will-change: transform, filter; }
.kb-vlucht--js .kb-vlucht__dobber { animation: none; transform-style: preserve-3d; will-change: transform; }
/* ---------- Liggende stapel bovenop een rij ---------- */
.kb-stapelrug {
  position: relative; flex: 0 0 auto; align-self: flex-end;
  width: var(--w, 40px); height: var(--h, 34px);
  display: flex; flex-direction: column; justify-content: flex-end; gap: 1px;
}
.kb-stapelrug span {
  display: block; height: var(--bh, 9px); border-radius: 2px;
  background:
    linear-gradient(180deg, rgba(255,220,160,.22), rgba(0,0,0,.35)),
    linear-gradient(90deg, var(--c1, #6E2226), var(--c2, #3A1013));
  box-shadow: 0 1px 2px rgba(0,0,0,.7), inset 0 0 0 1px rgba(212,175,55,.18);
}
.kb-stapelrug span::after { /* zichtbare bladzijden aan de kopse kant */
  content: ""; position: absolute; right: 2px; width: 30%; top: 2px; bottom: 2px;
  background: repeating-linear-gradient(180deg, #CBB68C 0 1px, #9C8358 1px 2px);
  opacity: .55;
}
.kb-gat { flex: 0 0 auto; width: var(--w, 14px); height: 1px; }

/* ============================================================
   HET LEVENDE BOEK — de kaften zíjn de vleugels
   ============================================================ */
.kb-boek {
  position: relative; width: 200px; height: 140px;
  transform-style: preserve-3d; perspective: 900px;
  --slag: 1.5s;
}
.kb-boek__gloed {
  position: absolute; left: 50%; top: 50%; width: 260px; height: 200px;
  transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(circle, rgba(255,190,110,.30), rgba(255,190,110,0) 68%);
  filter: blur(14px); animation: kb-gloed-puls 3.4s infinite ease-in-out;
}
@keyframes kb-gloed-puls { 0%,100% { opacity: .7; } 50% { opacity: 1; transform: translate(-50%,-50%) scale(1.08); } }

/* de twee helften: kaft + bladstapel, samen één vleugel */
.kb-boek__helft {
  position: absolute; top: 0; width: 50%; height: 100%;
  transform-style: preserve-3d;
}
.kb-boek__helft--l { left: 0;  transform-origin: right center; animation: kb-slag-l var(--slag) infinite cubic-bezier(.4,0,.5,1); }
.kb-boek__helft--r { right: 0; transform-origin: left center;  animation: kb-slag-r var(--slag) infinite cubic-bezier(.4,0,.5,1); }

@keyframes kb-slag-l {
  0%   { transform: rotateY(16deg); }
  26%  { transform: rotateY(76deg); }   /* opslag */
  40%  { transform: rotateY(66deg); }
  70%  { transform: rotateY(2deg); }    /* neerslag */
  84%  { transform: rotateY(10deg); }
  100% { transform: rotateY(16deg); }
}
@keyframes kb-slag-r {
  0%   { transform: rotateY(-16deg); }
  26%  { transform: rotateY(-76deg); }
  40%  { transform: rotateY(-66deg); }
  70%  { transform: rotateY(-2deg); }
  84%  { transform: rotateY(-10deg); }
  100% { transform: rotateY(-16deg); }
}

/* buitenkant: leren kaft met gouden kader en hoekornamenten */
.kb-kaft {
  position: absolute; inset: 0; transform: translateZ(-2px);
  background:
    linear-gradient(120deg, rgba(255,220,160,.16), rgba(0,0,0,.35) 60%),
    linear-gradient(180deg, #6E2226, #3A1013);
  box-shadow: inset 0 0 0 1px rgba(212,175,55,.55), inset 0 0 22px rgba(0,0,0,.6);
}
.kb-boek__helft--l .kb-kaft { border-radius: 9px 2px 2px 9px; }
.kb-boek__helft--r .kb-kaft { border-radius: 2px 9px 9px 2px; }
.kb-kaft::before { /* dubbele gouden filet */
  content: ""; position: absolute; inset: 7px;
  border: 1px solid rgba(226,196,116,.62);
  box-shadow: inset 0 0 0 3px rgba(0,0,0,.25), inset 0 0 0 4px rgba(226,196,116,.28);
  border-radius: 3px;
}
.kb-kaft::after { /* leernarf */
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background-image: var(--kb-ruis); background-size: 80px 80px;
  opacity: .16; mix-blend-mode: overlay;
}

/* de bladen: elk blad loopt iets na op de kaft → leest als veren */
.kb-blad {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(120,90,40,.14), rgba(0,0,0,0) 18%),
    linear-gradient(160deg, #FBF3DE, var(--kb-blad) 44%, #CDB88E 88%);
  box-shadow: 0 1px 2px rgba(0,0,0,.35);
  animation-duration: var(--slag);
  animation-iteration-count: infinite;
  animation-timing-function: cubic-bezier(.4,0,.5,1);
  animation-delay: calc(var(--i, 1) * -0.05s);
}
.kb-boek__helft--l .kb-blad { animation-name: kb-veer-l; }
.kb-boek__helft--r .kb-blad { animation-name: kb-veer-r; }
@keyframes kb-veer-l {
  0%   { transform: rotateY(0deg) translateZ(var(--z, 0px)); }
  26%  { transform: rotateY(13deg) translateZ(var(--z, 0px)); }
  70%  { transform: rotateY(-5deg) translateZ(var(--z, 0px)); }
  100% { transform: rotateY(0deg) translateZ(var(--z, 0px)); }
}
@keyframes kb-veer-r {
  0%   { transform: rotateY(0deg) translateZ(var(--z, 0px)); }
  26%  { transform: rotateY(-13deg) translateZ(var(--z, 0px)); }
  70%  { transform: rotateY(5deg) translateZ(var(--z, 0px)); }
  100% { transform: rotateY(0deg) translateZ(var(--z, 0px)); }
}
.kb-boek__helft--l .kb-blad { border-radius: 8px 1px 1px 8px; transform-origin: right center; }
.kb-boek__helft--r .kb-blad { border-radius: 1px 8px 8px 1px; transform-origin: left center; }
.kb-blad::after { /* regels tekst, te klein om te lezen — precies zoals echt */
  content: ""; position: absolute; inset: 16% 18%;
  background-image: repeating-linear-gradient(180deg, rgba(90,66,30,.34) 0 1px, rgba(0,0,0,0) 1px 7px);
  opacity: .55;
}
.kb-blad--top { box-shadow: 0 2px 6px rgba(0,0,0,.4), inset 0 0 18px rgba(150,110,50,.18); }

/* vergulde snee aan de buitenrand */
.kb-snee {
  position: absolute; top: 3px; bottom: 3px; width: 5px;
  background: repeating-linear-gradient(180deg, #F0DCA8 0 2px, #C9A94F 2px 3px);
  box-shadow: 0 0 6px rgba(212,175,55,.55);
}
.kb-boek__helft--l .kb-snee { left: -3px; border-radius: 3px 0 0 3px; }
.kb-boek__helft--r .kb-snee { right: -3px; border-radius: 0 3px 3px 0; }

/* rug met ribben en kapitaalband */
.kb-boek__rug {
  position: absolute; left: 50%; top: -5px; width: 16px; height: calc(100% + 10px);
  transform: translateX(-50%) translateZ(1px); border-radius: 4px;
  background:
    linear-gradient(90deg, rgba(0,0,0,.65), rgba(255,235,190,.20) 45%, rgba(0,0,0,.65)),
    linear-gradient(180deg, #7B1E22, #3A1013);
  box-shadow: 0 0 20px rgba(212,175,55,.45), inset 0 0 6px rgba(0,0,0,.6);
}
.kb-boek__rug::after {
  content: ""; position: absolute; inset: 7px 0;
  background-image: repeating-linear-gradient(180deg,
    rgba(0,0,0,0) 0 20px, rgba(0,0,0,.5) 20px 21px,
    rgba(226,196,116,.75) 21px 24px, rgba(0,0,0,.45) 24px 26px);
}
.kb-boek__lint {
  position: absolute; left: 50%; top: 62%; width: 7px; height: 52px;
  margin-left: -3px; transform: translateZ(2px); z-index: 3;
  background: linear-gradient(180deg, #A3282D, #4C1114);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 74%, 0 100%);
  box-shadow: 0 3px 8px rgba(0,0,0,.6);
  animation: kb-lint 2.6s infinite ease-in-out;
}
@keyframes kb-lint {
  0%, 100% { transform: translateZ(2px) rotate(-7deg) scaleY(1); }
  50%      { transform: translateZ(2px) rotate(9deg) scaleY(1.12); }
}

@media (prefers-reduced-motion: reduce) {
  .kb-boek__helft--l { transform: rotateY(34deg); }
  .kb-boek__helft--r { transform: rotateY(-34deg); }
  .kb-blad, .kb-boek__lint, .kb-boek__gloed { animation: none !important; }
}

/* ============================================================
   OUDHEID — kaarsen met echte vlam, spinnenwebben, doorlopende kast
   ============================================================ */

/* doorlopende achterwand: de rekken staan in één donkere kast, geen naad */
.kb-zaal__wand {
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,.22) 0 2px, rgba(0,0,0,0) 2px 34px),
    linear-gradient(180deg, #100B06 0%, #1E1409 34%, #241809 62%, #140D06 100%);
}
.kb-zaal__wand::after { /* houtnerf */
  content: ""; position: absolute; inset: 0;
  background-image: var(--kb-ruis); background-size: 220px 220px;
  opacity: .10; mix-blend-mode: overlay;
}

/* --- Kaars in een smeedijzeren houder --- */
.kb-kandelaar { position: absolute; width: 60px; }
.kb-kandelaar__halo {
  position: absolute; left: 50%; bottom: 34px; width: 340px; height: 340px;
  transform: translateX(-50%); border-radius: 50%;
  background: radial-gradient(circle, rgba(255,186,96,.42) 0%, rgba(255,170,80,.16) 38%, rgba(255,170,80,0) 70%);
  filter: blur(18px); animation: kb-flikker 6.7s infinite ease-in-out;
}
.kb-kaarslijf {
  position: relative; width: 22px; height: var(--kh, 86px); margin: 0 auto;
  border-radius: 4px 4px 2px 2px;
  background:
    linear-gradient(90deg, #4A3A22 0%, #C9B590 22%, #F6EDD4 44%, #E0CBA2 62%, #6A5334 100%);
  box-shadow: inset 0 0 10px rgba(0,0,0,.35), 0 2px 6px rgba(0,0,0,.6);
}
.kb-kaarslijf::before { /* gesmolten wasrand met druppels */
  content: ""; position: absolute; left: -4px; right: -4px; top: -6px; height: 18px;
  border-radius: 50% 50% 40% 40% / 80% 80% 30% 30%;
  background: linear-gradient(180deg, #FFF6E0, #E4D0A6 60%, #C7AE7E);
  box-shadow: 0 3px 6px rgba(0,0,0,.4);
}
.kb-kaarslijf::after { /* twee gestolde druipers langs de zijkant */
  content: ""; position: absolute; left: 1px; top: 8px; width: 5px; height: 42%;
  border-radius: 0 0 4px 4px;
  background: linear-gradient(180deg, #FFF6E0, rgba(230,212,170,.1));
  opacity: .85;
}
.kb-pit { position: absolute; left: 50%; top: -9px; width: 2px; height: 9px; transform: translateX(-50%); background: #2A1B0C; }
.kb-vlam {
  position: absolute; left: 50%; top: -34px; width: 16px; height: 30px;
  transform: translateX(-50%); transform-origin: 50% 100%;
  border-radius: 50% 50% 46% 46% / 74% 74% 26% 26%;
  background: radial-gradient(60% 62% at 50% 74%, #FFFBE8 0 16%, #FFD98A 34%, #FFA33C 58%, rgba(255,110,20,.55) 76%, rgba(255,90,10,0) 88%);
  filter: blur(.5px) drop-shadow(0 0 14px rgba(255,170,70,.9));
  animation: kb-vlam 1.05s infinite ease-in-out;
}
.kb-vlam::after { /* blauwe kern */
  content: ""; position: absolute; left: 50%; bottom: 1px; width: 7px; height: 9px;
  transform: translateX(-50%); border-radius: 50%;
  background: radial-gradient(circle, rgba(150,190,255,.85), rgba(120,160,255,0) 72%);
}
@keyframes kb-vlam {
  0%   { transform: translateX(-50%) scale(1, 1) skewX(0deg); opacity: .96; }
  17%  { transform: translateX(-50%) scale(.92, 1.12) skewX(-5deg); opacity: 1; }
  43%  { transform: translateX(-50%) scale(1.06, .9) skewX(4deg); opacity: .88; }
  61%  { transform: translateX(-50%) scale(.95, 1.08) skewX(-3deg); opacity: 1; }
  88%  { transform: translateX(-50%) scale(1.02, .96) skewX(2deg); opacity: .92; }
  100% { transform: translateX(-50%) scale(1, 1) skewX(0deg); opacity: .96; }
}
.kb-houder { /* ijzeren schaaltje met druiprand */
  position: relative; width: 52px; height: 12px; margin: 0 auto;
  border-radius: 3px 3px 50% 50% / 3px 3px 90% 90%;
  background: linear-gradient(180deg, #4A4038 0%, #221C16 60%, #0E0B08 100%);
  box-shadow: 0 6px 12px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,210,150,.25);
}
.kb-houder::after { /* gedraaide arm naar de wand */
  content: ""; position: absolute; left: 50%; top: 10px; width: 4px; height: 30px;
  transform: translateX(-50%); border-radius: 2px;
  background: linear-gradient(180deg, #322920, #14100C);
}

/* --- Spinnenwebben in de hoeken --- */
.kb-web {
  position: absolute; width: 260px; height: 260px; opacity: .16;
  will-change: opacity; contain: paint;
  background:
    repeating-conic-gradient(from 0deg at 0% 0%,
      rgba(255,248,230,.55) 0 .35deg, rgba(0,0,0,0) .35deg 9deg),
    radial-gradient(circle at 0% 0%,
      rgba(0,0,0,0) 0 24px, rgba(255,248,230,.42) 24px 25px,
      rgba(0,0,0,0) 25px 52px, rgba(255,248,230,.36) 52px 53px,
      rgba(0,0,0,0) 53px 88px, rgba(255,248,230,.30) 88px 89px,
      rgba(0,0,0,0) 89px 132px, rgba(255,248,230,.26) 132px 133px,
      rgba(0,0,0,0) 133px 184px, rgba(255,248,230,.20) 184px 185px,
      rgba(0,0,0,0) 185px 244px, rgba(255,248,230,.15) 244px 245px, rgba(0,0,0,0) 245px);
  -webkit-mask-image: radial-gradient(circle at 0% 0%, #000 0 42%, rgba(0,0,0,.35) 72%, transparent 100%);
          mask-image: radial-gradient(circle at 0% 0%, #000 0 42%, rgba(0,0,0,.35) 72%, transparent 100%);
  animation: kb-webwiegen 9s infinite ease-in-out;
}
.kb-web--tl { top: 0; left: 0; }
.kb-web--tr { top: 0; right: 0; transform: scaleX(-1); animation-delay: -3s; }
.kb-web--bl { bottom: 0; left: 0; transform: scaleY(-1); animation-delay: -5s; width: 180px; height: 180px; }
@keyframes kb-webwiegen {
  0%, 100% { opacity: .13; }
  50%      { opacity: .20; }
}
/* een enkele draad die uit de hoek hangt */
.kb-draad {
  position: absolute; top: 0; width: 1px; height: 130px;
  background: linear-gradient(180deg, rgba(255,248,230,.35), rgba(255,248,230,0));
  transform-origin: top center; animation: kb-draad 7s infinite ease-in-out;
}
@keyframes kb-draad {
  0%, 100% { transform: rotate(-2deg); }
  50%      { transform: rotate(3deg); }
}

/* --- Het boek duikt in je gezicht bij een paginawissel --- */
.kb-duik {
  position: fixed; inset: 0; z-index: 120; pointer-events: none;
  display: grid; place-items: center; overflow: hidden;
}
.kb-duik__flits {
  position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 50%, rgba(255,196,110,.55), rgba(255,170,70,.12) 45%, transparent 72%);
  animation: kb-flits .78s forwards ease-in;
}
.kb-duik .kb-boek {
  animation: kb-duikvlucht .78s forwards cubic-bezier(.45,.02,.75,.4);
  transform-origin: 50% 50%;
}
@keyframes kb-duikvlucht {
  0%   { transform: translate3d(0, 22vh, 0) scale(.34) rotate(-14deg); filter: blur(2px); opacity: 0; }
  22%  { opacity: 1; }
  70%  { transform: translate3d(0, -2vh, 0) scale(2.6) rotate(6deg); filter: blur(0); opacity: 1; }
  100% { transform: translate3d(0, -8vh, 0) scale(9) rotate(14deg); filter: blur(7px); opacity: 0; }
}
@keyframes kb-flits {
  0%   { opacity: 0; }
  62%  { opacity: .5; }
  100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .kb-duik { display: none; }
  .kb-vlam, .kb-kandelaar__halo, .kb-web, .kb-draad { animation: none !important; }
}

/* ============================================================
   MAGIE — levende kaarsen, ademende boeken, een spin, muziek
   ============================================================ */

/* posities van de kaarsen in de zaal */
.kb-kandelaar--a { left: 7%; bottom: 27%; }
.kb-kandelaar--b { right: 9%; bottom: 43%; --kh: 62px; transform: scale(.84); }
.kb-kandelaar--c { left: 21%; bottom: 58%; --kh: 48px; transform: scale(.6); opacity: .9; }

/* gouden glans die traag over de titel trekt */
.kb-glans {
  background-image: linear-gradient(100deg,
    #EFE0BE 0 38%, #FFF6D2 46%, #F3D77A 51%, #D4AF37 55%, #EFE0BE 66%);
  background-size: 240% 100%;
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 26px rgba(212,175,55,.45));
  animation: kb-glans 9s infinite linear;
}
@keyframes kb-glans {
  0%   { background-position: 140% 0; }
  100% { background-position: -60% 0; }
}

/* boeken die ademen; af en toe schuift er één naar voren — lees mij */
.kb-rug { animation: kb-adem var(--adem, 11s) var(--ad, 0s) infinite ease-in-out; }
@keyframes kb-adem {
  0%, 100% { transform: rotate(var(--tilt, 0deg)) translateY(var(--dy, 0px)); }
  50%      { transform: rotate(var(--tilt, 0deg)) translateY(calc(var(--dy, 0px) - 2px)); }
}
.kb-rug--wakker {
  animation: kb-wakker 2.8s ease-in-out;
  z-index: 2;
}
@keyframes kb-wakker {
  0%, 100% { transform: translateY(0) rotate(0deg); filter: brightness(1); }
  30%      { transform: translateY(-15px) rotate(-2.5deg); filter: brightness(1.45) saturate(1.15); }
  55%      { transform: translateY(-11px) rotate(1.5deg); filter: brightness(1.5); }
}
.kb-rug--wakker::before { opacity: .3; }

/* de spin aan haar draad */
.kb-spinweb-lijn {
  position: absolute; top: 0; width: 1px; height: 200px;
  background: linear-gradient(180deg, rgba(255,248,230,.4), rgba(255,248,230,.12));
}
.kb-spin {
  position: absolute; top: 0; left: 50%; width: 22px; height: 16px;
  transform: translateX(-50%);
  animation: kb-spin-zak 22s infinite ease-in-out;
}
.kb-spin__lijf {
  position: absolute; left: 50%; top: 3px; width: 12px; height: 10px;
  transform: translateX(-50%); border-radius: 50%;
  background: radial-gradient(60% 55% at 38% 32%, #4A3B2C, #14100B 70%);
  box-shadow: 0 1px 3px rgba(0,0,0,.7), inset 0 0 3px rgba(255,200,140,.25);
}
.kb-spin__lijf::after { /* kopje */
  content: ""; position: absolute; left: 50%; top: -4px; width: 6px; height: 5px;
  transform: translateX(-50%); border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #5A4835, #17120C);
}
.kb-spin__poot {
  position: absolute; left: 50%; top: 6px; width: 9px; height: 1.5px;
  background: linear-gradient(90deg, #2A2118, rgba(42,33,24,.35));
  border-radius: 2px; transform-origin: left center;
  animation: kb-poot 1.6s infinite ease-in-out;
}
@keyframes kb-poot {
  0%, 100% { transform: rotate(var(--r, 0deg)) scaleX(1); }
  50%      { transform: rotate(calc(var(--r, 0deg) + 8deg)) scaleX(.9); }
}
@keyframes kb-spin-zak {
  0%   { transform: translate(-50%, 0) rotate(0deg); }
  12%  { transform: translate(-50%, 6px) rotate(3deg); }
  38%  { transform: translate(-50%, 132px) rotate(-2deg); }
  52%  { transform: translate(-50%, 118px) rotate(4deg); }
  74%  { transform: translate(-50%, 168px) rotate(-3deg); }
  100% { transform: translate(-50%, 0) rotate(0deg); }
}

/* twinkelende toversprankels tussen het stof */
.kb-dust i.kb-twink {
  background: #FFF2CE;
  box-shadow: 0 0 10px rgba(255,214,140,.95), 0 0 20px rgba(212,175,55,.55);
}

/* magische vonkenkrans bij hover op een keuzekaart */
.kb-keuze:hover .kb-keuze__icoon, .kb-keuze:focus-visible .kb-keuze__icoon {
  animation: kb-tover .9s ease-out;
}
@keyframes kb-tover {
  0%   { transform: scale(1) rotate(0deg); filter: drop-shadow(0 0 0 rgba(255,214,140,0)); }
  45%  { transform: scale(1.18) rotate(-6deg); filter: drop-shadow(0 0 16px rgba(255,214,140,.9)); }
  100% { transform: scale(1) rotate(0deg); filter: drop-shadow(0 0 0 rgba(255,214,140,0)); }
}

@media (prefers-reduced-motion: reduce) {
  .kb-rug, .kb-spin, .kb-spin__poot, .kb-glans { animation: none !important; }
  .kb-glans { color: var(--kb-perkament); -webkit-text-fill-color: currentColor; background: none; }
}

/* Echte boekenstapel in CSS (vervangt de oude kleurbalken) */
.kb-boekstapel {
  position: absolute; right: 2%; bottom: 168px; z-index: -1;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  filter: drop-shadow(0 26px 34px rgba(0,0,0,.75));
}
.kb-boekstapel span {
  position: relative; width: var(--w, 240px); height: var(--h, 26px);
  border-radius: 3px; transform: rotate(var(--r, 0deg));
  background:
    linear-gradient(180deg, rgba(255,220,160,.20), rgba(0,0,0,.30) 55%, rgba(0,0,0,.5)),
    linear-gradient(90deg, var(--c1, #7A5A2E), var(--c2, #3A2712));
  box-shadow: 0 3px 9px rgba(0,0,0,.7), inset 0 0 0 1px rgba(212,175,55,.20);
}
.kb-boekstapel span::before { /* bladzijden aan de kopse kant */
  content: ""; position: absolute; top: 3px; bottom: 3px; right: 4px; width: 62%;
  border-radius: 1px;
  background: repeating-linear-gradient(180deg, rgba(226,212,178,.85) 0 1.5px, rgba(150,128,90,.7) 1.5px 3px);
  box-shadow: inset -2px 0 4px rgba(0,0,0,.45);
  opacity: .8;
}
.kb-boekstapel span::after { /* gouden filet op de rug */
  content: ""; position: absolute; left: 6px; top: 50%; width: 26%; height: 1px;
  transform: translateY(-50%);
  background: linear-gradient(90deg, rgba(226,196,116,.85), rgba(226,196,116,0));
}
@media (max-width: 900px) { .kb-boekstapel { display: none; } }

@media print {
  .kb-atmos, .kb-shelf, .kb-toasts { display: none; }
  body { background: #fff; color: #000; }
}

/* ============================================================
   APP-UITBREIDINGEN — beheer-CRUD in dezelfde sfeer
   (toegevoegd bovenop het originele Klasbib-design)
   ============================================================ */

/* Knopvarianten */
.kb-btn--klein { min-height: 38px; padding: 8px 14px; font-size: .86rem; }
.kb-btn--rood {
  color: #F4D2CE; border-color: rgba(196,89,92,.6);
  --btn-bg: linear-gradient(180deg, #5A1E20, #3A1013);
}
.kb-btn--rood:hover { box-shadow: 0 0 20px rgba(196,89,92,.4); }
.kb-btn--stil {
  --btn-bg: transparent; border: var(--kb-lijn); color: var(--kb-perkament-2); min-height: 38px; padding: 8px 14px;
}

/* Sectiekop: titel links, actie rechts */
.kb-sectiekop { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--kb-s3); flex-wrap: wrap; margin-bottom: var(--kb-s3); }

/* Donker invoerveld (beheer) */
.kb-invoer, .kb-select, .kb-textarea {
  width: 100%; min-height: 46px; padding: 10px 14px;
  font-family: var(--kb-font-body); font-size: 16px; color: var(--kb-perkament);
  background: var(--kb-hout); border: var(--kb-lijn); border-radius: var(--kb-radius-btn);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.kb-textarea { min-height: 108px; resize: vertical; line-height: 1.5; }
.kb-invoer::placeholder, .kb-textarea::placeholder { color: var(--kb-perkament-3); }
.kb-invoer:focus, .kb-select:focus, .kb-textarea:focus {
  outline: none; border-color: rgba(212,175,55,.7); box-shadow: 0 0 0 3px rgba(212,175,55,.16);
}
.kb-select { appearance: none; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--kb-goud) 50%), linear-gradient(135deg, var(--kb-goud) 50%, transparent 50%);
  background-position: calc(100% - 18px) center, calc(100% - 12px) center; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat;
  padding-right: 38px; width: auto; min-width: 200px;
}
.kb-select option { background: var(--kb-nacht); color: var(--kb-perkament); }

/* Formulierkaart (toevoegen) */
.kb-form {
  position: relative; background: var(--kb-nacht); border: var(--kb-lijn);
  border-radius: var(--kb-radius); box-shadow: var(--kb-schaduw-l);
  padding: var(--kb-s4); margin-bottom: var(--kb-s4);
}
.kb-form h3 { font-family: var(--kb-font-kop); color: var(--kb-goud); font-size: 1.1rem; margin-bottom: var(--kb-s3); letter-spacing: .06em; }
.kb-form__rij { display: flex; gap: var(--kb-s2); flex-wrap: wrap; align-items: end; }
.kb-form__rij .kb-invoer { flex: 1 1 180px; }
.kb-form__veld { display: grid; gap: 6px; margin-bottom: var(--kb-s3); }
.kb-form__veld label { font-family: var(--kb-font-kop); font-size: .9rem; letter-spacing: .06em; color: var(--kb-perkament-2); }
.kb-twee { display: grid; grid-template-columns: 1fr 1fr; gap: var(--kb-s3); margin-bottom: var(--kb-s4); }
@media (max-width: 720px) { .kb-twee { grid-template-columns: 1fr; } .kb-form__rij { flex-direction: column; align-items: stretch; } }

/* Filterbalk-select mag naast de zoekbalk */
.kb-balk .kb-select { min-height: 46px; }

/* Codechip in tabel */
.kb-code {
  font-family: "Courier New", monospace; font-size: .82rem; letter-spacing: .05em;
  color: var(--kb-goud); background: rgba(0,0,0,.34); border: 1px solid rgba(212,175,55,.25);
  padding: 3px 9px; border-radius: 6px;
}

/* Actiecel in tabel */
.kb-tabel__acties { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.kb-tabel__acties form { margin: 0; }

/* Dialoogvenster (bewerken) */
.kb-dialog {
  border: var(--kb-lijn-sterk); border-radius: var(--kb-radius); padding: var(--kb-s4);
  max-width: 440px; width: 92%; color: var(--kb-perkament);
  background: linear-gradient(180deg, var(--kb-hout-licht), var(--kb-nacht));
  box-shadow: var(--kb-schaduw);
}
.kb-dialog::backdrop { background: rgba(10,7,4,.66); backdrop-filter: blur(2px); }
.kb-dialog h3 { font-family: var(--kb-font-kop); color: var(--kb-goud); margin-bottom: var(--kb-s2); }
.kb-dialog__acties { display: flex; justify-content: flex-end; gap: var(--kb-s2); margin-top: var(--kb-s3); }

/* Kleine teksthulpjes */
.kb-mut { color: var(--kb-perkament-3); }
.kb-klein { font-size: .84rem; }
.kb-hint-tekst { color: var(--kb-perkament-3); font-size: .86rem; margin-top: var(--kb-s2); }