:root {
  --bg1: #ccfbf1; --bg2: #f0fdfa;
  --accent: #0f766e; --accent2: #115e59; --accent-zacht: #ccfbf1;
}
.kz-rustig { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; background: #fff; border: 2px solid var(--lijn);
  border-radius: 999px; padding: 6px 14px; font-weight: 700; cursor: pointer; font-size: 16px; }
.kz-rustig input { width: 20px; height: 20px; accent-color: var(--accent); }
.tijdbalk.uit { visibility: hidden; }

/* kluis */
.kz-kluis { border-radius: 18px; padding: 10px; background: linear-gradient(180deg, #475569, #334155); box-shadow: var(--schaduw); margin-bottom: 4px; }
.kz-deur { display: flex; align-items: center; gap: 14px; background: linear-gradient(180deg, #94a3b8, #64748b); border-radius: 12px; padding: 10px 14px;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.4), inset 0 -3px 0 rgba(0,0,0,.2); transition: transform .8s; transform-origin: left center; }
.kz-deur.open { transform: perspective(700px) rotateY(-28deg); }
.kz-draai { flex: none; width: 56px; height: 56px; border-radius: 50%; position: relative; transition: transform .6s cubic-bezier(.3,1.4,.6,1);
  background: radial-gradient(circle, #e2e8f0 0 30%, #1e293b 31% 36%, #cbd5e1 37%),
    repeating-conic-gradient(#334155 0 2deg, transparent 2deg 30deg); box-shadow: 0 3px 0 #1e293b; }
.kz-draai i { position: absolute; left: 50%; top: 3px; width: 4px; height: 12px; margin-left: -2px; background: #dc2626; border-radius: 2px; }
.kz-draai.schok { animation: kzschok .4s; }
@keyframes kzschok { 25% { margin-left: -6px; } 50% { margin-left: 6px; } 75% { margin-left: -3px; } }
.kz-code { flex: 1; display: flex; gap: 6px; justify-content: center; }
.kz-wiel { width: 40px; height: 52px; border-radius: 8px; background: #1e293b; display: grid; place-items: center;
  box-shadow: inset 0 6px 8px rgba(0,0,0,.5), 0 2px 0 rgba(255,255,255,.3); }
.kz-wiel b { font: 900 28px/1 ui-monospace, monospace; color: #64748b; }
.kz-wiel.open { background: #064e3b; }
.kz-wiel.open b { color: #4ade80; text-shadow: 0 0 8px #22c55e; animation: kzrol .35s; }
@keyframes kzrol { from { transform: translateY(-18px); opacity: 0; } }
.kz-slot { font-size: 36px; flex: none; }

/* alinea */
.kz-blad { background: #fff; border-radius: 22px; box-shadow: var(--schaduw); padding: 16px 18px 18px; }
.kz-vraag { font-family: var(--lees); font-weight: 700; font-size: 23px; margin-bottom: 10px; }
.kz-label { display: block; font-family: system-ui, sans-serif; font-size: 13px; font-weight: 900; color: var(--accent);
  text-transform: uppercase; letter-spacing: .6px; margin-bottom: 2px; }
.kz-tekst { display: flex; flex-direction: column; gap: 6px; }
.kz-zin { position: relative; text-align: left; font-family: var(--lees); font-size: 21px; line-height: 1.45; color: var(--ink, #0f172a);
  background: #f8fafc; border: 2px solid transparent; border-radius: 12px; padding: 7px 12px 7px 38px; animation: in .2s ease-out both; }
.kz-zin .k { position: absolute; left: 10px; top: 10px; width: 20px; height: 20px; border-radius: 6px; display: grid; place-items: center;
  background: var(--accent-zacht); color: var(--accent2); font: 900 12px system-ui, sans-serif; }
.kz-zin:disabled { cursor: default; opacity: 1; }
.kz-tekst:not(.tik) .kz-zin .k { display: none; }
.kz-tekst:not(.tik) .kz-zin { padding-left: 12px; background: #fffdf7; }
.kz-tekst.tik .kz-zin { border-color: var(--lijn); box-shadow: 0 3px 0 var(--lijn); }
.kz-tekst.tik .kz-zin:hover:not(:disabled) { border-color: var(--accent); background: #f0fdfa; }
.kz-zin.goed { background: var(--goed-zacht) !important; border-color: var(--goed) !important; }
.kz-zin.fout { background: var(--fout-zacht) !important; border-color: var(--fout) !important; }
.kz-tekst.lang { display: block; background: #fffdf7; border-radius: 14px; padding: 6px 14px; font-family: var(--lees); font-size: 19px; line-height: 1.55; }
.kz-tekst.lang p { margin: 8px 0; }
.kz-keuzes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.kz-keuzes.lang { grid-template-columns: 1fr; }
.kz-keuzes.leeg { display: none; }
.kz-keuze { position: relative; text-align: left; background: #fff; border: 3px solid var(--lijn); border-radius: 14px;
  padding: 10px 14px 10px 40px; font-family: var(--lees); font-weight: 700; font-size: 19px; line-height: 1.3;
  box-shadow: 0 4px 0 var(--lijn); animation: in .2s ease-out both; }
.kz-keuze .k { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 22px; height: 22px; border-radius: 6px;
  display: grid; place-items: center; background: var(--accent-zacht); color: var(--accent2); font: 900 13px system-ui, sans-serif; }
.kz-keuze:hover { border-color: var(--accent); }
.kz-keuze.goed { background: var(--goed-zacht); border-color: var(--goed); }
.kz-keuze.fout { background: var(--fout-zacht); border-color: var(--fout); }
.laag .kz-mis { background: var(--fout-zacht); border-radius: 12px; padding: 8px 12px; margin-top: 8px; }

@media (max-width: 560px) {
  .kz-deur { gap: 8px; padding: 8px; }
  .kz-draai { width: 40px; height: 40px; }
  .kz-wiel { width: 26px; height: 38px; }
  .kz-wiel b { font-size: 19px; }
  .kz-code { gap: 3px; }
  .kz-slot { font-size: 24px; }
  .kz-blad { padding: 12px; }
  .kz-vraag { font-size: 19px; }
  .kz-zin { font-size: 18px; }
  .kz-keuzes { grid-template-columns: 1fr; }
  .kz-keuze { font-size: 17px; }
  .kz-tekst.lang { font-size: 17px; padding: 4px 10px; }
}