/* ==========================================================================
   Taxatiewizard — ComicsWorth
   Nagebouwd uit de designhandoff van 23 augustus 2026.
   Tokens komen uit het Organic-systeem; de stripgrammatica (inktranden,
   harde offset-schaduwen, halftoonrasters) is daaruit opgebouwd.

   Alles is gescoped onder .cw- zodat het niet botst met de Bootstrap van
   de bestaande app. Dit bestand is bewust zelfstandig: het kan met de
   module mee naar een nieuwe applicatie.
   ========================================================================== */

/* De wizard staat op zichzelf en kan niet leunen op een reset elders: zonder
   deze regel telt een rand van 2,5px bij een breedte van 100% op tot méér dan
   de omhulling, en loopt een invoerveld rechts het scherm uit. */
.cw-page, .cw-page *, .cw-page *::before, .cw-page *::after { box-sizing: border-box; }

.cw-page {
  /* ---- pagina ---- */
  min-height: 100vh;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: var(--space-8) var(--space-4) 70px;
  color: var(--color-text);
  font-family: var(--font-body);
  background-color: var(--color-bg);
  background-image: radial-gradient(var(--color-accent-300) 1.4px, transparent 1.5px);
  background-size: 12px 12px;
}

/* ==========================================================================
   Frame
   ========================================================================== */

.cw-frame {
  width: 100%;
  max-width: 412px;
  min-height: 844px;
  display: flex;
  flex-direction: column;
  background: var(--color-neutral-100);
  border: 3px solid var(--color-neutral-900);
  border-radius: 32px;
  box-shadow: 10px 12px 0 var(--color-accent-2-700), var(--shadow-lg);
  overflow: hidden;
}

.cw-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-4) var(--space-3);
}
.cw-brand { font-family: var(--font-heading); font-size: 17px; letter-spacing: -0.01em; }
.cw-steplabel {
  font-size: 12px; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--color-neutral-600);
}

.cw-progress {
  height: 3px; border-radius: 999px;
  background: var(--color-neutral-200);
  margin: 0 var(--space-4);
}
.cw-progress-bar {
  height: 3px; border-radius: 999px; width: 4%;
  background: var(--color-accent);
  transition: width 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.cw-screen {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: var(--space-8) 22px var(--space-6);
}
.cw-screen[data-screen="photos"] { padding-top: 22px; }
.cw-screen[data-screen="confirm"],
.cw-screen[data-screen="condition"],
.cw-screen[data-screen="result"] { padding: var(--space-6) 22px; }

/* ==========================================================================
   Typografie
   ========================================================================== */

.cw-h1 {
  font-family: var(--font-heading); font-weight: 400;
  font-size: 40px; line-height: 1.04; letter-spacing: -0.02em;
  margin: var(--space-4) 0 var(--space-3); text-wrap: balance;
}
.cw-h2 {
  font-family: var(--font-heading); font-weight: 400;
  font-size: 29px; line-height: 1.1; letter-spacing: -0.015em;
  margin: 0 0 var(--space-2);
}
.cw-h2--sm { font-size: 28px; line-height: 1.12; margin-bottom: 6px; }
.cw-h2--scan { font-size: 24px; margin-bottom: var(--space-4); }

.cw-kicker {
  font-size: 12.5px; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--color-accent-700); margin-bottom: 6px;
}
.cw-lead {
  font-size: 16px; line-height: 1.55; color: var(--color-neutral-700);
  margin: 0 0 var(--space-6); max-width: 31ch;
}
.cw-sub { font-size: 14.5px; line-height: 1.5; color: var(--color-neutral-700); margin: 0 0 22px; }
.cw-where { font-size: 15px; line-height: 1.5; color: var(--color-neutral-700); margin: 0 0 var(--space-4); }
.cw-series-name { font-size: 15px; color: var(--color-neutral-700); margin: 0 0 22px; }
.cw-fineprint { font-size: 13.5px; line-height: 1.5; color: var(--color-neutral-600); margin: var(--space-3) 0 0; }

/* ==========================================================================
   Knoppen
   ========================================================================== */

.cw-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-body); font-weight: 600;
  border: 1px solid transparent; border-radius: 999px;
  padding: 11px 22px; cursor: pointer;
  transition: background 0.15s, color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.cw-btn:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.cw-btn-block { width: 100%; }

.cw-btn-primary { background: var(--color-accent); color: var(--color-bg); }
.cw-btn-primary:hover { background: var(--color-accent-600); }
.cw-btn-primary:active { background: var(--color-accent-700); }

.cw-btn-secondary {
  background: transparent; border-color: var(--color-accent);
  color: var(--color-accent-700);
}
.cw-btn-secondary:hover { background: var(--color-accent-100); }

.cw-btn-ghost { background: transparent; color: var(--color-accent); padding-inline: var(--space-1); }
.cw-btn-ghost:hover { color: var(--color-accent-800); }

.cw-cta { font-size: 16.5px; padding: var(--space-4); box-shadow: var(--shadow-md); }
.cw-btn--quiet { font-size: 14px; color: var(--color-neutral-700); }
.cw-btn--quiet:hover { color: var(--color-neutral-900); }

.cw-actions { margin-top: auto; display: flex; flex-direction: column; gap: 11px; padding-top: var(--space-6); }
.cw-actions--start { margin-top: auto; display: flex; flex-direction: column; gap: var(--space-3); }
.cw-actions-row { display: flex; justify-content: space-between; align-items: center; }

/* ==========================================================================
   1. Start
   ========================================================================== */

.cw-spines { display: flex; align-items: flex-end; gap: 5px; height: 104px; margin-bottom: 22px; }
.cw-spine { border: 2px solid var(--color-neutral-900); border-radius: 3px; }
.cw-spine:nth-child(1) { width: 19px; height: 96px;  background: var(--color-accent-600);   transform: rotate(-2deg); }
.cw-spine:nth-child(2) { width: 15px; height: 88px;  background: var(--color-accent-2-500); }
.cw-spine:nth-child(3) {
  width: 23px; height: 102px; background: var(--color-neutral-100); transform: rotate(1.5deg);
  background-image: linear-gradient(var(--color-accent-300) 0 6px, transparent 6px 100%);
  background-repeat: no-repeat; background-position: 0 12px;
}
.cw-spine:nth-child(4) { width: 14px; height: 78px;  background: var(--color-accent-300);   transform: rotate(-3deg); }
.cw-spine:nth-child(5) { width: 21px; height: 94px;  background: var(--color-accent-2-700); }
.cw-spine:nth-child(6) { width: 17px; height: 84px;  background: var(--color-neutral-300);  transform: rotate(2deg); }
.cw-spine:nth-child(7) { width: 26px; height: 70px;  background: var(--color-accent-400);   transform: rotate(6deg); transform-origin: bottom left; }

.cw-tag {
  display: inline-flex; align-items: center;
  border-radius: 999px; padding: 3px 10px;
  font-size: 11px; font-weight: 600; line-height: 1.5;
  background: var(--color-accent-2-200); color: var(--color-accent-2-800);
}
.cw-sticker {
  align-self: flex-start; padding: 6px 14px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  border: 2px solid var(--color-neutral-900); transform: rotate(-2.5deg);
}

/* Opsomming, geen omlijnde vlakken: die leken op de keuzeknoppen verderop
   in de wizard en nodigden uit tot klikken waar niets te klikken viel. */
.cw-punten {
  list-style: none; margin: 0 0 var(--space-6); padding: 0;
  display: flex; flex-direction: column; gap: 11px;
}
.cw-punten li {
  position: relative; padding-left: 19px;
  font-size: 14.5px; line-height: 1.45; color: var(--color-neutral-700);
}
.cw-punten li::before {
  content: ""; position: absolute; left: 0; top: 0.52em;
  width: 9px; height: 9px; border-radius: 999px;
  background: var(--color-accent-600);
}
.cw-punten b { font-weight: 600; color: var(--color-neutral-900); }

.cw-privacy { font-size: 12px; line-height: 1.45; color: var(--color-neutral-600); margin: 0; text-align: center; }

/* ==========================================================================
   2. Reeks
   ========================================================================== */

.cw-choices { display: flex; flex-direction: column; gap: var(--space-2); }
.cw-choice {
  text-align: left; cursor: pointer; font-family: var(--font-body);
  border: 2.5px solid var(--color-neutral-900);
  background: var(--color-neutral-100);
  border-radius: 18px; padding: 15px var(--space-4);
  transition: transform 0.15s, box-shadow 0.15s;
}
.cw-choice:nth-child(odd)  { box-shadow: 5px 5px 0 var(--color-accent-300); }
.cw-choice:nth-child(even) { box-shadow: 5px 5px 0 var(--color-accent-2-300); }
.cw-choice:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--color-accent-400); }
.cw-choice:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.cw-choice b { display: block; font-size: 16.5px; font-weight: 600; }
.cw-choice span { display: block; font-size: 13px; line-height: 1.4; color: var(--color-neutral-700); margin-top: 3px; }

/* ==========================================================================
   3. Foto's
   ========================================================================== */

.cw-dots { display: flex; gap: 5px; margin-bottom: 22px; }
.cw-dot { flex: 1; height: 5px; border-radius: 999px; background: var(--color-neutral-300); }
.cw-dot.is-current { background: var(--color-accent); }
.cw-dot.is-taken { background: var(--color-accent-2-500); }

.cw-diagram {
  position: relative; overflow: hidden;
  aspect-ratio: 3 / 2; border-radius: 24px;
  border: 3px solid var(--color-neutral-900);
  box-shadow: 6px 6px 0 var(--color-accent-2-300);
  background-color: var(--color-neutral-200);
  background-image: radial-gradient(var(--color-neutral-400) 1.2px, transparent 1.3px);
  background-size: 9px 9px;
}
.cw-pg {
  position: absolute; top: 13%; width: 37%; height: 74%;
  background: var(--color-neutral-100); border: 2.5px solid var(--color-neutral-900);
}
.cw-pg--l { left: 11%; border-radius: 10px 3px 3px 10px; }
.cw-pg--r { left: 52%; border-radius: 3px 10px 10px 3px; }
.cw-pg--spine { left: 48%; width: 4%; background: var(--color-neutral-300); border-radius: 0; }

.cw-cover {
  position: absolute; left: 32%; top: 11%; width: 40%; height: 78%;
  background: var(--color-neutral-100); border: 2.5px solid var(--color-neutral-900);
  border-radius: 4px 16px 16px 4px;
}
.cw-cover-spine {
  position: absolute; left: 27%; top: 11%; width: 5%; height: 78%;
  background: var(--color-accent-2-400); border: 2.5px solid var(--color-neutral-900);
  border-radius: 16px 2px 2px 16px;
}

.cw-target {
  position: absolute;
  border: 3px dashed var(--color-accent-700);
  background: var(--color-accent-200);
  opacity: 0.9; border-radius: 10px;
  animation: cw-pop 0.35s ease both;
}
.cw-corner { position: absolute; width: 12px; height: 12px; border-radius: 999px; background: var(--color-accent); }

.cw-caption {
  position: absolute; left: var(--space-3); bottom: var(--space-3);
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.03em;
  color: var(--color-neutral-700); background: var(--color-neutral-100);
  padding: 5px 10px; border-radius: 999px;
}

.cw-shot-done {
  position: absolute; inset: 0;
  background: var(--color-accent-2-700);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--space-2); animation: cw-rise 0.3s ease both;
}
.cw-shot-done i {
  width: 44px; height: 44px; border-radius: 999px;
  border: 3px solid var(--color-accent-2-100);
  display: flex; align-items: center; justify-content: center;
  color: var(--color-accent-2-100); font-size: 21px; font-style: normal;
}
.cw-shot-done span { font-family: var(--font-mono); font-size: 12px; color: var(--color-accent-2-200); }

.cw-find { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-4); }
.cw-find div { display: flex; gap: 11px; align-items: flex-start; }
.cw-find b {
  flex: none; width: 22px; height: 22px; border-radius: 999px;
  background: var(--color-accent-2-200); color: var(--color-accent-2-800);
  font-size: 12px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.cw-find span { font-size: 14px; line-height: 1.4; color: var(--color-neutral-800); }

.cw-balloon {
  position: relative; margin: 22px 0 0 8px;
  background: var(--color-accent-2-100);
  border: 2.5px solid var(--color-neutral-900); border-radius: 20px;
  padding: var(--space-3) var(--space-4);
  font-size: 13.5px; line-height: 1.45; color: var(--color-accent-2-900);
}
.cw-balloon::before {
  content: ""; position: absolute; left: 24px; top: -9px;
  width: 14px; height: 14px; background: var(--color-accent-2-100);
  border-left: 2.5px solid var(--color-neutral-900);
  border-top: 2.5px solid var(--color-neutral-900);
  transform: rotate(45deg);
}

.cw-shutter.is-taken { background: var(--color-accent-2-700); }
.cw-shutter.is-taken:hover { background: var(--color-accent-2-800); }

/* ==========================================================================
   4. Herkenning
   ========================================================================== */

.cw-soundboard {
  align-self: flex-start; background: var(--color-accent-300);
  border: 3px solid var(--color-neutral-900); border-radius: 20px;
  padding: var(--space-2) var(--space-4); margin-bottom: 22px;
  animation: cw-sway 2.4s ease-in-out infinite;
}
.cw-soundboard span {
  font-family: var(--font-heading); font-size: 26px;
  letter-spacing: 0.02em; color: var(--color-neutral-900);
}

.cw-scan { display: flex; flex-direction: column; gap: 11px; }
.cw-scanline { display: flex; gap: 11px; align-items: baseline; opacity: 0.3; transition: opacity 0.3s; }
.cw-scanline.is-visible { opacity: 1; }
.cw-scanline b {
  font-family: var(--font-mono); font-weight: 400; font-size: 11.5px;
  color: var(--color-accent-2-700); min-width: 74px;
}
.cw-scanline span { font-family: var(--font-mono); font-size: 13px; color: var(--color-neutral-800); }

.cw-working { margin-top: var(--space-6); font-size: 13.5px; color: var(--color-neutral-600); animation: cw-pulse 1.6s infinite; }

/* ==========================================================================
   5 & 7. Inktlijst
   ========================================================================== */

.cw-inklist {
  display: flex; flex-direction: column; gap: 2px;
  background: var(--color-neutral-900);
  border: 2.5px solid var(--color-neutral-900);
  border-radius: 20px; overflow: hidden;
}
.cw-inkrow {
  background: var(--color-neutral-100);
  padding: var(--space-3) var(--space-4);
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3);
}
.cw-inkrow em {
  display: block; font-style: normal;
  font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--color-neutral-600); margin-bottom: 3px;
}
.cw-inkrow b { font-size: 15.5px; font-weight: 600; }
.cw-inkrow .cw-tag { font-family: var(--font-mono); white-space: nowrap; }

.cw-inkrow--flat { padding: 11px var(--space-4); font-size: 14.5px; }
.cw-inkrow--flat span:first-child { color: var(--color-neutral-700); }
.cw-inkrow--flat span:last-child { font-weight: 600; text-align: right; }

/* Voorbeeldfoto's bij een staat: hoe ziet 'redelijk' er eigenlijk uit? */
.cw-voorbeelden { margin-top: var(--space-4); }
.cw-voorbeelden > .cw-listlabel { margin-bottom: 8px; }
.cw-strook {
  display: flex; gap: var(--space-2); overflow-x: auto;
  padding-bottom: 6px; -webkit-overflow-scrolling: touch;
}
.cw-strook figure { flex: none; width: 108px; margin: 0; cursor: zoom-in; }
.cw-strook img {
  display: block; width: 108px; height: 108px; object-fit: cover;
  border: 2.5px solid var(--color-neutral-900); border-radius: 14px;
  background: var(--color-neutral-200);
}
.cw-strook figcaption {
  font-size: 11.5px; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--color-neutral-600); margin-top: 5px; text-align: center;
}

/* Vergroten, zonder bibliotheek. */
.cw-loep {
  position: fixed; inset: 0; z-index: 50; display: flex;
  align-items: center; justify-content: center; padding: var(--space-4);
  background: rgba(28, 26, 23, 0.86); cursor: zoom-out;
}
.cw-loep img {
  max-width: 100%; max-height: 82vh; border-radius: 16px;
  border: 3px solid var(--color-neutral-100);
}
.cw-loep span {
  position: absolute; bottom: var(--space-4); left: 0; right: 0; text-align: center;
  color: var(--color-neutral-200); font-size: 13px;
}

/* De foto's die de bezoeker zelf maakte, op het overzicht. */
.cw-eigen { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-3) 0; }
.cw-eigen figure { width: 96px; margin: 0; }
.cw-eigen img {
  display: block; width: 96px; height: 96px; object-fit: cover;
  border: 2.5px solid var(--color-neutral-900); border-radius: 14px;
}
.cw-eigen figcaption { font-size: 11.5px; color: var(--color-neutral-600); text-align: center; margin-top: 4px; }
.cw-eigen button {
  display: block; width: 100%; margin-top: 3px; cursor: pointer;
  font-family: var(--font-body); font-size: 11.5px; color: var(--color-accent-700);
  background: none; border: none; padding: 0; text-decoration: underline;
}

/* De fotolijst voor een beoordeling: wat er is, en wat er nog moet. */
.cw-checks {
  display: flex; flex-direction: column; gap: var(--space-2);
  margin: var(--space-5) 0 var(--space-5);
}
.cw-check { display: flex; gap: 12px; align-items: flex-start; }
.cw-check i {
  flex: none; width: 24px; height: 24px; border-radius: 999px;
  border: 2.5px solid var(--color-neutral-900);
  background: var(--color-neutral-100);
  display: flex; align-items: center; justify-content: center;
  font-style: normal; font-size: 13px; font-weight: 700; line-height: 1;
}
.cw-check.is-done i {
  background: var(--color-accent-2-700);
  border-color: var(--color-accent-2-700);
  color: var(--color-accent-2-100);
}
.cw-check span { font-size: 13.5px; line-height: 1.4; color: var(--color-neutral-600); }
.cw-check b {
  display: block; font-size: 15px; font-weight: 600;
  color: var(--color-neutral-900); margin-bottom: 2px;
}
.cw-check.is-done b { color: var(--color-neutral-600); text-decoration: line-through; }

.cw-listlabel {
  font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--color-neutral-600); margin-bottom: 11px;
}

/* ==========================================================================
   6. Staat
   ========================================================================== */

.cw-cond {
  text-align: left; cursor: pointer; font-family: var(--font-body);
  border: 2.5px solid var(--color-neutral-900);
  background: var(--color-neutral-100);
  border-radius: 18px; padding: var(--space-3) var(--space-4);
  display: flex; align-items: center; gap: var(--space-3);
  transition: box-shadow 0.18s, background 0.18s;
}
.cw-cond:hover { background: var(--color-accent-100); }
.cw-cond:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.cw-cond.is-on {
  border-color: var(--color-accent-700);
  background: var(--color-accent-200);
  box-shadow: 5px 5px 0 var(--color-accent-400);
}
.cw-cond i {
  width: 20px; height: 20px; border-radius: 999px; flex: none;
  border: 2px solid var(--color-neutral-900); background: transparent;
}
.cw-cond.is-on i { background: var(--color-accent-700); }
.cw-cond b { display: block; font-size: 16px; font-weight: 600; }
.cw-cond em { display: block; font-style: normal; font-size: 13px; line-height: 1.4; color: var(--color-neutral-700); margin-top: 2px; }

.cw-aspects {
  margin-top: var(--space-3); background: var(--color-neutral-200);
  border-radius: 16px; padding: var(--space-4);
  animation: cw-rise 0.25s ease both;
}
.cw-aspect { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.cw-aspect > span:first-child { font-size: 14px; }
.cw-marks { display: flex; gap: 4px; }
.cw-mark {
  cursor: pointer; width: 26px; height: 26px; border-radius: 999px;
  border: 1.5px solid var(--color-neutral-400); background: transparent;
  font-family: var(--font-body); font-size: 11px; font-weight: 600;
  color: var(--color-neutral-700);
}
.cw-mark:hover { border-color: var(--color-accent); }
.cw-mark.is-on { background: var(--color-accent); color: #fff; }

/* ==========================================================================
   7. Resultaat
   ========================================================================== */

.cw-price {
  position: relative;
  background-color: var(--color-accent-2-700);
  background-image: radial-gradient(var(--color-accent-2-600) 2px, transparent 2.2px);
  background-size: 14px 14px;
  border: 3px solid var(--color-neutral-900); border-radius: 28px;
  box-shadow: 8px 8px 0 var(--color-accent-400);
  padding: var(--space-6) 22px; color: var(--color-accent-2-100);
}
.cw-price-sticker {
  position: absolute; right: -10px; top: -14px;
  background: var(--color-accent-300); color: var(--color-neutral-900);
  border: 2.5px solid var(--color-neutral-900); border-radius: 999px;
  padding: 5px 13px; font-size: 11.5px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase; transform: rotate(6deg);
}
.cw-price-amount {
  font-family: var(--font-heading); font-weight: 400; font-size: 46px;
  line-height: 1; letter-spacing: -0.02em; color: #fff;
  animation: cw-pop 0.45s ease both;
}
.cw-price-range { font-size: 14.5px; margin-top: var(--space-2); color: var(--color-accent-2-200); }
.cw-band { margin-top: var(--space-4); height: 6px; border-radius: 999px; background: var(--color-accent-2-800); position: relative; }
.cw-band i { position: absolute; top: 0; bottom: 0; border-radius: 999px; background: var(--color-accent-400); }
.cw-price-meta {
  display: flex; justify-content: space-between;
  font-family: var(--font-mono); font-size: 11px;
  margin-top: var(--space-2); color: var(--color-accent-2-300);
}

.cw-nodata {
  background: var(--color-neutral-200);
  border: 2px dashed var(--color-neutral-400); border-radius: 28px;
  padding: var(--space-6) 22px;
}
.cw-nodata b { display: block; font-family: var(--font-heading); font-weight: 400; font-size: 24px; line-height: 1.15; margin-bottom: var(--space-2); }
.cw-nodata p { font-size: 14.5px; line-height: 1.5; color: var(--color-neutral-700); margin: 0; }
.cw-nodata .cw-btn { margin-top: var(--space-4); font-size: 14.5px; padding: 11px 22px; background: var(--color-accent-2-700); color: var(--color-neutral-100); }
.cw-nodata .cw-btn:hover { background: var(--color-accent-2-800); }

/* ==========================================================================
   Animaties
   ========================================================================== */

@keyframes cw-rise  { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes cw-pulse { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }
@keyframes cw-pop   { 0% { transform: scale(0.86) rotate(-2deg); opacity: 0; } 60% { transform: scale(1.04) rotate(1deg); opacity: 1; } 100% { transform: none; opacity: 1; } }
@keyframes cw-sway  { 0%, 100% { transform: rotate(-2.5deg); } 50% { transform: rotate(2deg); } }

.cw-enter { animation: cw-rise 0.35s ease both; }
.cw-enter--slow { animation: cw-rise 0.4s ease both; }

@media (prefers-reduced-motion: reduce) {
  .cw-page *, .cw-page *::before, .cw-page *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ==========================================================================
   Klein scherm
   ========================================================================== */

@media (max-width: 460px) {
  .cw-page { padding: 0; }
  .cw-frame { border: none; border-radius: 0; box-shadow: none; min-height: 100vh; max-width: none; }
}

/* ==========================================================================
   Upload-toestanden
   ========================================================================== */

.cw-shot-bezig {
  position: absolute; inset: 0;
  background: var(--color-neutral-900);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--space-2); animation: cw-rise 0.2s ease both;
}
.cw-shot-bezig i {
  width: 34px; height: 34px; border-radius: 999px;
  border: 3px solid var(--color-accent-2-700); border-top-color: var(--color-accent-300);
  animation: cw-spin 0.8s linear infinite;
}
.cw-shot-bezig span { font-family: var(--font-mono); font-size: 12px; color: var(--color-neutral-300); }

@keyframes cw-spin { to { transform: rotate(360deg); } }

.cw-fout {
  background: var(--color-accent-200);
  border: 2px solid var(--color-neutral-900); border-radius: 14px;
  padding: 10px var(--space-3);
  /* Ruimte aan beide kanten: hij duikt tussen bestaande tekst op en mag daar
     niet tegenaan plakken. */
  margin: var(--space-3) 0;
  font-size: 13.5px; line-height: 1.45; color: var(--color-accent-900);
}

.cw-btn[disabled] { opacity: 0.65; cursor: default; }
.cw-btn[disabled]:hover { background: var(--color-accent); }

/* ==========================================================================
   Titelkeuze
   ========================================================================== */

.cw-zoek {
  width: 100%; font-family: var(--font-body); font-size: 16px;
  border: 2.5px solid var(--color-neutral-900); border-radius: 999px;
  padding: 12px var(--space-4); margin-bottom: var(--space-3);
  background: var(--color-neutral-100); color: var(--color-text);
  -webkit-appearance: none;
}
.cw-zoek:focus { outline: none; box-shadow: 4px 4px 0 var(--color-accent-300); }

/* De lijst mag scrollen; de knoppen eronder blijven bereikbaar. */
.cw-lijst { max-height: 46vh; overflow-y: auto; padding: 3px 6px 8px 3px; }

/* Het bestandsveld zit in het label; alleen het label is zichtbaar.
   Een echte labelactivering opent de kiezer op telefoon én desktop,
   waar een JavaScript-klik dat niet overal doet. */
.cw-bestand {
  position: absolute; width: 1px; height: 1px;
  opacity: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
label.cw-shutter { cursor: pointer; }
label.cw-shutter:focus-within { outline: 2px solid var(--color-accent-700); outline-offset: 2px; }

/* ==========================================================================
   Vraag stellen
   ========================================================================== */

.cw-veld { display: block; margin-bottom: var(--space-3); }
.cw-veld span {
  display: block; font-size: 12px; font-weight: 600; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--color-neutral-600); margin-bottom: 5px;
}
.cw-invoer {
  width: 100%; font-family: var(--font-body); font-size: 16px;
  border: 2.5px solid var(--color-neutral-900); border-radius: 16px;
  padding: 12px var(--space-3); background: var(--color-neutral-100);
  color: var(--color-text); -webkit-appearance: none;
}
.cw-invoer:focus { outline: none; box-shadow: 4px 4px 0 var(--color-accent-300); }
.cw-invoer--groot { min-height: 84px; resize: vertical; line-height: 1.5; }

.cw-link {
  font-family: var(--font-mono); font-size: 12.5px; word-break: break-all;
  background: var(--color-accent-2-100); border: 2.5px solid var(--color-neutral-900);
  border-radius: 16px; padding: var(--space-3); margin-bottom: var(--space-3);
}


/* De voet zit onderin de kaart, niet erbuiten: hij hoort bij de pagina en
   is de enige weg naar de leespagina's. `margin-top: auto` duwt hem naar de
   onderrand, want het frame is een kolom met een vaste minimumhoogte. */
.cw-voet {
  margin-top: auto;
  display: flex; justify-content: center; flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  padding: 14px var(--space-4);
  border-top: 2px solid var(--color-neutral-300);
  background: var(--color-neutral-200);
}
.cw-voet a {
  font-size: 13px; color: var(--color-neutral-700);
  text-decoration: none; border-bottom: 1.5px solid var(--color-neutral-400);
}
.cw-voet a:hover { color: var(--color-accent-700); border-bottom-color: var(--color-accent-600); }

/* ==========================================================================
   Toestemming om te tellen

   Onderin, niet over de hele pagina: de vraag is klein, dus de balk ook.
   ========================================================================== */

.cw-cookie {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  padding: var(--space-3);
  display: flex; justify-content: center;
}
.cw-cookie[hidden] { display: none; }

.cw-cookie-blok {
  width: 100%; max-width: 34rem;
  background: var(--color-neutral-100);
  border: 3px solid var(--color-neutral-900);
  border-radius: 20px;
  box-shadow: 6px 7px 0 var(--color-accent-2-700), var(--shadow-lg);
  padding: var(--space-4);
  display: flex; flex-direction: column; gap: var(--space-3);
}

.cw-cookie-tekst { margin: 0; font-size: 14px; line-height: 1.5; color: var(--color-neutral-800); }
.cw-cookie-knoppen { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.cw-cookie-knoppen .cw-btn { flex: 1 1 auto; font-size: 14.5px; padding: 11px var(--space-4); }

/* De pagina van de wizard is een flexrij; zonder deze twee regels gaat de
   cookielink náást het toestel staan in plaats van eronder. De leespagina's
   zijn gewoon block, daar valt hij vanzelf goed. */
.cw-page { flex-wrap: wrap; }
.cw-cookievoet { flex-basis: 100%; text-align: center; margin: var(--space-4) 0 var(--space-3); }

.cw-cookieknop {
  background: none; border: 0; padding: 4px 8px; cursor: pointer;
  font-family: var(--font-body); font-size: 12.5px;
  color: var(--color-neutral-600); text-decoration: underline;
}
.cw-cookieknop:hover { color: var(--color-neutral-800); }
.cw-cookie-knoppen .cw-btn-ghost { border: 2px solid var(--color-neutral-400); }

/* Het logo is altijd de weg terug naar de voorkant. Het blijft eruitzien als
   een naam, niet als een link — de aanwijzer verraadt dat het klikbaar is. */
a.cw-brand { color: inherit; text-decoration: none; }
a.cw-brand:hover { color: var(--color-accent-700); }

/* Terug moet je kunnen zién. Als vage grijze tekst werd hij over het hoofd
   gezien, terwijl het de enige weg terug is in de vragenlijst. */
.cw-terug {
  background: transparent;
  border-color: var(--color-neutral-400);
  color: var(--color-neutral-800);
  font-size: 14.5px; padding: 9px 18px;
}
.cw-terug:hover { background: var(--color-neutral-200); border-color: var(--color-neutral-900); }

/* De taalkeuze staat in dezelfde stille voetregel als de cookieknop: wie
   hem zoekt vindt hem, wie hem niet nodig heeft ziet er geen knop staan. */
.cw-cookievoet { display: flex; justify-content: center; align-items: center; gap: var(--space-3); flex-wrap: wrap; }

.cw-taal {
  font-size: 12.5px; color: var(--color-neutral-600);
  text-decoration: underline; text-underline-offset: 2px;
}
.cw-taal:hover { color: var(--color-neutral-800); }
.cw-taal.is-nu { color: var(--color-neutral-800); font-weight: 600; text-decoration: none; }