/*
 * Werkboek dealwaardematrix, go.salesarchitects.nl/01-dealwaardematrix
 *
 * Alleen wat deze pagina extra nodig heeft. Tokens en componenten komen uit
 * /styles.css; hier geen eigen kleuren of maten buiten die tokens.
 */

.wb-h2{font-size:var(--fs-h2)}
.wb-h3{font-size:var(--fs-h4);margin:var(--space-7) 0 var(--space-4)}
.wb-h3--top{margin-top:0}
.wb-h3--rule{padding-bottom:var(--space-3);border-bottom:2px solid var(--sa-orange)}
.wb-lead{font-size:var(--fs-body-lg);max-width:68ch}
.wb-note{margin:var(--space-3) 0 0;font-size:var(--fs-sm);color:var(--sa-text-muted);max-width:80ch}
.wb-muted{color:var(--sa-text-muted)}
.wb-small{font-size:var(--fs-sm)}

/* ---------- hero: ruitjespapier in plaats van een foto ---------- */
.wb-hero{position:relative;background-color:var(--sa-bg-light);background-image:linear-gradient(var(--sa-grey-line) 1px,transparent 1px),linear-gradient(90deg,var(--sa-grey-line) 1px,transparent 1px);background-size:28px 28px;background-position:-1px -1px;border-bottom:1px solid var(--sa-grey-line);overflow:hidden}
.wb-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--sa-bg-light) 0%,rgba(244,247,250,.92) 45%,rgba(244,247,250,.35) 100%);pointer-events:none}
.wb-hero__inner{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:var(--space-8);align-items:center;padding-top:var(--space-8);padding-bottom:var(--space-8)}
.wb-hero__kicker{display:inline-flex;align-items:center;gap:var(--space-3);margin:0 0 var(--space-5);font-size:var(--fs-sm);font-weight:700;color:var(--sa-navy)}
.wb-hero__kicker span{padding:4px 12px;border-radius:var(--radius-pill);background:var(--sa-orange);color:#fff;text-transform:uppercase;letter-spacing:var(--ls-caps);font-size:var(--fs-xs)}
.wb-hero h1{font-size:var(--fs-display);line-height:var(--lh-tight);letter-spacing:var(--ls-display);max-width:14ch}
.wb-hero h1 mark{background:linear-gradient(transparent 62%,rgba(255,105,0,.28) 62%);color:inherit;padding:0 .05em}
.wb-hero__body{margin:var(--space-5) 0 0;font-size:var(--fs-body-lg);max-width:54ch;text-wrap:pretty}
.wb-hero__actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-5);margin-top:var(--space-6)}
.wb-hero__facts{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-5);margin:var(--space-6) 0 0;padding:0;list-style:none;font-size:var(--fs-sm);color:var(--sa-text-muted)}
.wb-hero__facts li{display:flex;align-items:center;gap:6px}
.wb-hero__facts .icon{font-size:18px;color:var(--sa-navy)}

/* de mini-matrix: eerst het voorbeeld, daarna de eigen matrix */
.wb-mini{margin:0;background:#fff;border-radius:var(--radius-card);box-shadow:var(--shadow-float);padding:var(--space-5);transform:rotate(1.2deg);border-top:6px solid var(--sa-orange)}
.wb-mini figcaption{display:flex;justify-content:space-between;align-items:baseline;gap:var(--space-3);margin-bottom:var(--space-4)}
.wb-mini__label{font-size:var(--fs-xs);font-weight:700;text-transform:uppercase;letter-spacing:var(--ls-caps);color:var(--sa-orange-hover)}
.wb-mini__crit{font-weight:700;color:var(--sa-navy);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:60%}
.wb-mini__grid{display:grid;grid-template-columns:minmax(0,1.1fr) repeat(4,minmax(0,1fr));gap:4px}
.wb-mini__grid span{display:flex;align-items:center;justify-content:center;min-height:40px;border-radius:4px;font-size:var(--fs-sm);font-weight:700;font-variant-numeric:tabular-nums;color:var(--sa-navy);background:var(--sa-bg-light);min-width:0;overflow:hidden}
.wb-mini__grid .h{min-height:0;padding:0 2px 4px;background:none;font-size:10px;line-height:1.2;text-align:center;color:var(--sa-text-muted);font-weight:500;align-items:flex-end}
.wb-mini__grid .r{justify-content:flex-start;padding:0 8px;background:none;font-size:var(--fs-xs);text-overflow:ellipsis;white-space:nowrap}
.wb-mini__grid .s-100{background:var(--sa-orange);color:#fff}
.wb-mini__grid .s-90{background:#FF8A3D;color:#fff}
.wb-mini__grid .s-70{background:#FFB27A}
.wb-mini__grid .s-50{background:#FFD3B3}
.wb-mini__grid .s-30{background:var(--sa-orange-soft)}
.wb-mini__grid .s-0{background:var(--sa-bg-light);color:var(--sa-text-muted)}
.wb-mini__grid .leeg{background:var(--sa-bg-light);color:var(--sa-grey-band)}
.wb-mini__foot{display:flex;align-items:center;gap:var(--space-2);margin:var(--space-4) 0 0;font-size:var(--fs-sm);color:var(--sa-text-muted)}
.wb-mini__dot{width:8px;height:8px;border-radius:50%;background:var(--sa-grey-band);flex:0 0 auto}
.wb-mini.is-eigen .wb-mini__dot{background:var(--sa-orange)}
@media (max-width:900px){.wb-hero__inner{grid-template-columns:1fr;gap:var(--space-7);padding-top:var(--space-7);padding-bottom:var(--space-7)}.wb-mini{transform:none;max-width:480px}}
@media (max-width:560px){.wb-hero__actions .btn--primary{width:100%}}

/* ---------- stappenbalk ---------- */
.wb-steps{background:#fff;border-bottom:1px solid var(--sa-grey-line)}
.wb-steps ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.wb-steps a{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-4) var(--space-3);text-decoration:none;color:var(--sa-navy);min-width:0}
.wb-steps a:hover strong{color:var(--sa-orange)}
.wb-steps b{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;border:2px solid var(--sa-navy);font-size:var(--fs-sm);flex:0 0 auto;transition:background var(--dur-base) var(--ease),border-color var(--dur-base) var(--ease),color var(--dur-base) var(--ease)}
.wb-steps li.is-klaar b{background:var(--sa-orange);border-color:var(--sa-orange);color:#fff}
.wb-steps li.is-bezig b{border-color:var(--sa-orange);color:var(--sa-orange-hover)}
.wb-steps span{display:flex;flex-direction:column;min-width:0}
.wb-steps strong{font-size:var(--fs-sm);transition:color var(--dur-fast) var(--ease)}
.wb-steps small{font-size:var(--fs-xs);color:var(--sa-text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wb-steps__bar{height:4px;background:var(--sa-bg-light);margin:0 calc(var(--gutter) * -1)}
.wb-steps__bar span{display:block;height:100%;width:0;background:var(--sa-orange);transition:width var(--dur-slow) var(--ease)}
@media (max-width:760px){.wb-steps ol{grid-template-columns:1fr 1fr}.wb-steps a{padding:var(--space-3) var(--space-2)}}

/* ---------- 80% ---------- */
.wb-stat{position:relative;background:var(--sa-orange-soft);border-radius:var(--radius-card);padding:var(--space-7);border-left:6px solid var(--sa-orange)}
.wb-stat__num{font-size:clamp(3.5rem,8vw,5.5rem);font-weight:700;line-height:1;color:var(--sa-orange-hover);letter-spacing:var(--ls-display)}
.wb-stat p{margin:var(--space-5) 0 var(--space-6);font-size:var(--fs-body-lg);color:var(--sa-navy)}
.wb-stat__who{padding-top:var(--space-5);border-top:1px solid rgba(0,17,88,.12);font-size:var(--fs-sm);line-height:1.45}
.wb-stat__who strong{display:block;color:var(--sa-navy)}
.wb-stat__who span{color:var(--sa-text-muted)}
@media (max-width:560px){.wb-stat{padding:var(--space-6)}}

/* ---------- drie vragen ---------- */
.wb-questions{list-style:none;margin:0 0 var(--space-4);padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-4)}
.wb-questions li{display:flex;flex-direction:column;gap:var(--space-3);padding:var(--space-5);background:#fff;border-radius:var(--radius-card);border:1px solid var(--sa-grey-line)}
.wb-questions b{font-size:var(--fs-h3);color:var(--sa-orange)}
.wb-questions span{font-weight:700;color:var(--sa-navy)}
@media (max-width:760px){.wb-questions{grid-template-columns:1fr}}

/* ---------- tabellen ---------- */
.wb-table-wrap{position:relative;overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--radius-card);border:1px solid var(--sa-grey-line);background:#fff}
.wb-table{width:100%;border-collapse:collapse;font-size:var(--fs-body)}
.wb-table th,.wb-table td{padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--sa-grey-line);text-align:left;vertical-align:middle}
.wb-table thead th{background:var(--sa-navy);color:#fff;font-size:var(--fs-sm);font-weight:700;line-height:1.3;vertical-align:bottom}
.wb-table tbody tr:last-child>*{border-bottom:0}
.wb-table tbody th{color:var(--sa-navy);font-weight:700}
.wb-table td+td,.wb-table th+td,.wb-table td+th{border-left:1px solid var(--sa-grey-line)}

.wb-table--voorbeeld{min-width:620px}
.wb-table--voorbeeld td{text-align:center;font-weight:700;font-variant-numeric:tabular-nums;color:var(--sa-navy)}
.wb-table--voorbeeld thead th+th{text-align:center}
/* warmte naar score: hoe hoger, hoe oranjer */
.s-100{background:var(--sa-orange);color:#fff!important}
.s-90,.s-80{background:#FF8A3D;color:#fff!important}
.s-70,.s-60{background:#FFB27A}
.s-50,.s-40{background:#FFD3B3}
.s-35,.s-30,.s-25{background:var(--sa-orange-soft)}
.s-15,.s-5,.s-0{background:#fff;color:var(--sa-text-muted)!important}

.wb-checks{margin-top:var(--space-6);max-width:80ch}

/* invulvelden in een tabel */
.wb-table input,.wb-table select{width:100%;min-width:0;padding:10px 12px;border-radius:var(--radius-sm);border:1px solid var(--sa-grey-line);background:#fff;font:400 var(--fs-body) var(--font);color:var(--sa-text);outline:none;transition:border-color var(--dur-base) var(--ease),box-shadow var(--dur-base) var(--ease)}
.wb-table input:focus,.wb-table select:focus{border-color:var(--sa-navy);box-shadow:0 0 0 3px rgba(0,17,88,.08)}
.wb-table input[type=number]{text-align:center;font-weight:700;color:var(--sa-navy);font-variant-numeric:tabular-nums;-moz-appearance:textfield}
.wb-table input[type=number]::-webkit-inner-spin-button,.wb-table input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.wb-table .is-invalid{border-color:var(--sa-orange);background:var(--sa-orange-soft)}
.wb-table select{appearance:none;padding-right:30px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23001158' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 10px center}
.wb-table select:disabled{color:var(--sa-text-muted);background-color:var(--sa-bg-light)}

.wb-table--invul{min-width:720px}
.wb-table--invul th:first-child,.wb-table--invul td:first-child{width:30%}
.wb-table--invul thead th+th{text-align:center}
.wb-table--invul td{padding:var(--space-2)}
.wb-table--invul td:first-child input{font-weight:700;color:var(--sa-navy)}
.wb-table--invul td.heat input{border-color:transparent;background:transparent;color:inherit}
.wb-table--invul td.heat input:focus{border-color:var(--sa-navy);background:#fff;color:var(--sa-navy)}

.wb-table--test{min-width:820px}
.wb-table--test td{padding:var(--space-2)}
.wb-table--test .wb-nr{width:52px;text-align:center}
.wb-table--test td.wb-nr{font-weight:700;color:var(--sa-orange);font-variant-numeric:tabular-nums}
.wb-table--test .wb-score-kol{width:96px;text-align:center}
.wb-table--test td:nth-child(2){width:26%}
.wb-table--test tr.is-order td.wb-nr{background:var(--sa-orange-soft)}

.wb-table--afspraken{min-width:640px}
.wb-table--afspraken tbody th{width:24%}
.wb-table--afspraken td:last-child{width:24%;padding:var(--space-2)}
.wb-drempel-tag{display:inline-block;margin-left:var(--space-2);padding:2px 10px;border-radius:var(--radius-pill);background:var(--sa-orange);color:#fff;font-size:var(--fs-xs);font-variant-numeric:tabular-nums}

/* op een telefoon: elke rij een eigen kaart in plaats van opzij scrollen */
@media (max-width:640px){
  .wb-table--invul,.wb-table--test{min-width:0}
  .wb-table--invul thead,.wb-table--test thead{display:none}
  .wb-table--invul,.wb-table--invul tbody,.wb-table--test,.wb-table--test tbody{display:block}
  .wb-table--invul tr,.wb-table--test tr{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-2) var(--space-3);padding:var(--space-4);border-bottom:1px solid var(--sa-grey-line)}
  .wb-table--invul tbody tr:last-child,.wb-table--test tbody tr:last-child{border-bottom:0}
  .wb-table--invul td,.wb-table--test td{display:flex;flex-direction:column;gap:4px;width:auto!important;padding:0!important;border:0!important;background:none}
  .wb-table--invul td[data-label]::before,.wb-table--test td[data-label]::before{content:attr(data-label);font-size:var(--fs-xs);font-weight:700;color:var(--sa-text-muted);line-height:1.25}
  .wb-table--invul td.wb-cat{grid-column:1 / -1}
  .wb-table--invul td.heat input{border-color:var(--sa-grey-line)}
  .wb-table--invul td.heat{background:none!important;color:inherit!important}
  .wb-table--invul td.heat.s-100 input{background:var(--sa-orange);color:#fff}
  .wb-table--invul td.heat.s-90 input{background:#FF8A3D;color:#fff}
  .wb-table--invul td.heat.s-70 input{background:#FFB27A;color:var(--sa-navy)}
  .wb-table--invul td.heat.s-50 input{background:#FFD3B3;color:var(--sa-navy)}
  .wb-table--invul td.heat.s-30 input{background:var(--sa-orange-soft);color:var(--sa-navy)}
  .wb-table--invul td.heat.s-0 input{color:var(--sa-text-muted)}
  .wb-table--test tr{grid-template-columns:40px 1fr 1fr}
  .wb-table--test td.wb-nr{justify-content:center;align-items:center;grid-row:span 1;background:none!important}
  .wb-table--test td.wb-lead-cel{grid-column:2 / -1}
  .wb-table--test td[data-label]{grid-column:span 1}
  .wb-table--test td[data-label="Categorie"],.wb-table--test td[data-wb="label-criterium"]{grid-column:1 / 3}
  .wb-table--test td[data-label="Rol"]{grid-column:3 / 4}
  .wb-table--test td[data-label="Score"]{grid-column:1 / 3}
  .wb-table--test td[data-label="Wat werd het?"]{grid-column:3 / 4}
  .wb-table--test tr.is-order{background:var(--sa-orange-soft)}
  .wb-form{padding:var(--space-4)!important}
  .wb-fields{padding:var(--space-4)}
}

/* ---------- privacy: wij ontvangen niets ---------- */
.wb-privacy{display:flex;gap:var(--space-4);align-items:flex-start;margin-bottom:var(--space-5);padding:var(--space-5);background:#fff;border:1px solid var(--sa-grey-line);border-left:6px solid var(--sa-navy);border-radius:var(--radius-card)}
.wb-privacy strong{display:block;color:var(--sa-navy);font-size:var(--fs-h4)}
.wb-privacy p{margin:var(--space-1) 0 0;max-width:80ch}
.wb-save strong{color:var(--sa-navy)}

/* ---------- werkblad ---------- */
.wb-sheet__tools{display:flex;flex-wrap:wrap;gap:var(--space-5)}
.wb-clear{color:var(--sa-text-muted)}
.wb-clear:hover{color:var(--sa-navy)}
.wb-sheet__head{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--space-4);flex-wrap:wrap;margin-bottom:var(--space-6)}
.wb-sheet__head h2{font-size:var(--fs-h2);display:flex;align-items:center;gap:var(--space-3)}
.wb-sheet__head h2 .icon{color:var(--sa-orange);font-size:28px}
.wb-form{padding:var(--space-7)}
@media (max-width:560px){.wb-form{padding:var(--space-5)}}
.wb-fields{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:var(--space-5);padding:var(--space-5);background:var(--sa-bg-light);border-radius:var(--radius-card)}
@media (max-width:760px){.wb-fields{grid-template-columns:1fr}}
.wb-fields textarea{min-height:52px}
.wb-form .wb-table-wrap{border-radius:var(--radius-sm)}
.wb-check{margin:var(--space-4) 0 0;padding:var(--space-3) var(--space-4);border-radius:var(--radius-sm);background:var(--sa-orange-soft);font-size:var(--fs-sm);display:flex;gap:var(--space-2);align-items:flex-start}
.wb-check .icon{font-size:20px;color:var(--sa-orange-hover)}
.wb-check.is-ok{background:var(--sa-bg-light)}
.wb-check.is-ok .icon{color:var(--sa-navy)}

/* ---------- analyse en drempel ---------- */
.wb-analyse{margin-top:var(--space-6);gap:var(--space-5)}
.wb-bars{list-style:none;margin:0 0 var(--space-4);padding:0;display:grid;gap:var(--space-3)}
.wb-bars li{display:grid;grid-template-columns:84px minmax(0,1fr) 44px;gap:var(--space-3);align-items:center;font-size:var(--fs-sm)}
.wb-bars b{color:var(--sa-navy)}
.wb-bars .bar{height:12px;border-radius:var(--radius-pill);background:#fff;overflow:hidden}
.wb-bars .bar span{display:block;height:100%;border-radius:inherit;background:var(--sa-navy-soft)}
.wb-bars .is-order .bar span{background:var(--sa-orange)}
.wb-bars .is-niets .bar span{background:var(--sa-grey-band)}
.wb-bars output{text-align:right;font-weight:700;color:var(--sa-navy);font-variant-numeric:tabular-nums}
.wb-bars small{grid-column:2 / -1;margin-top:-6px;color:var(--sa-text-muted)}
.wb-verdict{display:flex;gap:var(--space-2);align-items:flex-start;margin:0 0 var(--space-4);font-weight:500;color:var(--sa-navy)}
.wb-verdict .icon{font-size:20px;color:var(--sa-orange)}
.wb-drempel__row{display:flex;gap:var(--space-3);align-items:center;flex-wrap:wrap;margin-bottom:var(--space-3)}
.wb-drempel input{width:120px;padding:12px 14px;border-radius:var(--radius-sm);border:1.5px solid var(--sa-navy);font:700 var(--fs-h3) var(--font);color:var(--sa-navy);text-align:center;font-variant-numeric:tabular-nums;outline:none}
.wb-drempel input:focus{box-shadow:0 0 0 3px rgba(0,17,88,.12)}

/* ---------- tip, case ---------- */
.wb-tip{display:flex;gap:var(--space-4);align-items:flex-start;margin-top:var(--space-6);padding:var(--space-5);background:var(--sa-bg-light);border-radius:var(--radius-card)}
.wb-tip strong{display:block;color:var(--sa-navy);font-size:var(--fs-h4)}
.wb-tip p{margin:var(--space-1) 0 0}
.wb-tip--wide{align-items:center;background:#fff;border:1px solid var(--sa-grey-line)}
.wb-tip--wide p{margin:0}
.wb-case{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);margin-top:var(--space-7);border-radius:var(--radius-card);overflow:hidden;background:var(--sa-navy);color:#fff}
.wb-case__photo img{width:100%;height:100%;object-fit:cover}
.wb-case__body{padding:var(--space-7);display:flex;flex-direction:column;justify-content:center}
.wb-case__num{font-size:var(--fs-h1);font-weight:700;line-height:1.1;margin-bottom:var(--space-4)}
.wb-case__body p:last-child{margin:0;color:rgba(255,255,255,.85);font-size:var(--fs-body-lg)}
@media (max-width:900px){.wb-case{grid-template-columns:1fr}.wb-case__photo{aspect-ratio:3/2}.wb-case__body{padding:var(--space-6)}}

/* ---------- bewaren ---------- */
.wb-save__actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-4);margin-top:var(--space-5)}

/* ---------- volgende stap: oranje, zoals de cover van de pdf ---------- */
.wb-next{background:var(--sa-orange)}
.wb-next .heading h2{color:var(--sa-navy)}
.wb-next .rule{background:var(--sa-navy)}
.wb-options{gap:var(--space-5)}
.wb-option{display:flex;flex-direction:column;gap:var(--space-3);height:100%;padding:var(--space-6);background:#fff;border-radius:var(--radius-card);box-shadow:0 10px 28px rgba(0,17,88,.18);color:var(--sa-text);text-decoration:none;transition:transform var(--dur-base) var(--ease),box-shadow var(--dur-base) var(--ease)}
.wb-option:hover{transform:translateY(-3px);box-shadow:var(--shadow-float);color:var(--sa-text)}
.wb-option__tag{font-size:var(--fs-xs);font-weight:700;text-transform:uppercase;letter-spacing:var(--ls-caps-wide);color:var(--sa-orange-hover)}
.wb-option strong{font-size:var(--fs-h3);color:var(--sa-navy);line-height:var(--lh-heading)}
.wb-option b{color:var(--sa-navy)}
.wb-option__go{margin-top:auto;padding-top:var(--space-3);display:inline-flex;align-items:center;gap:var(--space-2);font-weight:700;color:var(--sa-orange-hover)}
.wb-option__go .icon{font-size:20px;transition:transform var(--dur-base) var(--ease)}
.wb-option:hover .wb-option__go .icon{transform:translateX(3px)}
.wb-option__url{display:none}

/* masterclass, onder de twee opties */
.wb-mc{display:flex;align-items:center;justify-content:space-between;gap:var(--space-6);flex-wrap:wrap;margin-top:var(--space-5);padding:var(--space-6);background:var(--sa-navy);color:rgba(255,255,255,.85);border-radius:var(--radius-card)}
.wb-mc__body{flex:1 1 420px;min-width:0}
.wb-mc__tag{margin:0 0 var(--space-2);font-size:var(--fs-xs);font-weight:700;text-transform:uppercase;letter-spacing:var(--ls-caps);color:var(--sa-orange)}
.wb-mc h3{color:#fff;font-size:var(--fs-h3)}
.wb-mc p:not(.wb-mc__tag){margin:var(--space-3) 0 0;max-width:62ch}
.wb-mc__facts{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-5);margin:var(--space-4) 0 0;padding:0;list-style:none;font-size:var(--fs-sm)}
.wb-mc__facts li{display:flex;align-items:center;gap:6px}
.wb-mc__facts .icon{font-size:18px;color:var(--sa-orange)}
@media (max-width:560px){.wb-mc{padding:var(--space-5)}.wb-mc .btn{width:100%}}

@media (prefers-reduced-motion:reduce){
  .wb-steps__bar span,.wb-steps b,.wb-option,.wb-option__go .icon{transition:none}
  .wb-option:hover{transform:none}
}

/* ---------- print: het ingevulde werkboek als pdf ---------- */
@media print{
  @page{size:A4;margin:14mm 12mm}
  body{font-size:10.5pt;padding:0!important}
  .wb-privacy,.wb-mc,.wb-uitleg,.site-header,.skip,.wb-hero__actions,.wb-hero__facts,.wb-mini,.wb-steps,.wb-screen,noscript,.site-footer{display:none!important}
  .section{padding:18px 0!important}
  .section--light,.wb-fields,.card--light,.wb-tip{background:#fff!important}
  .wb-hero{background:#fff!important;border:0}
  .wb-hero::after{display:none}
  .wb-hero__inner{display:block;padding:0 0 12px!important}
  .wb-hero h1{font-size:24pt;max-width:none}
  .wb-hero__body{font-size:11pt}
  .wb-hero__kicker span{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .card{box-shadow:none}
  .wb-form{padding:0!important;border:0}
  .wb-table-wrap{overflow:visible;border-color:#999}
  .wb-table{min-width:0!important;font-size:9.5pt}
  .wb-table th,.wb-table td{padding:5px 7px!important}
  .wb-table thead th{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .wb-table input,.wb-table select,.wb-drempel input,.wb-fields input,.wb-fields textarea{border:0!important;border-bottom:1px solid #999!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;padding:3px 2px!important;appearance:none;-webkit-appearance:none}
  .wb-fields textarea{resize:none;min-height:0;overflow:hidden}
  .wb-table select{background-image:none!important}
  #test,#afspraken{break-before:page}
  .grid-2{display:block}
  .wb-analyse{display:grid!important;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}
  .wb-analyse .card{padding:12px;border:1px solid var(--sa-grey-line)}
  .wb-bars{gap:4px}
  .wb-table--test tr.is-leeg{display:none}
  .wb-table--test select{font-size:8.5pt}
  .wb-table--test td:nth-child(2){width:18%}
  .wb-table--test .wb-score-kol{width:56px}
  .wb-sheet__head{margin-bottom:12px}
  .heading{margin-bottom:12px}
  .heading .intro{font-size:10.5pt;margin-top:8px}
  .wb-table,.wb-case,.wb-option,.wb-analyse>*{break-inside:avoid}
  .wb-case,.wb-next{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .wb-next .heading{margin-bottom:12px}
  .wb-option__url{display:block;font-size:9pt;color:var(--sa-text-muted)}
  .wb-option{box-shadow:none}
  .wb-case__photo{display:none}
  .wb-case{grid-template-columns:1fr}
  .wb-bars .bar,.wb-bars .bar span,.s-100,.s-90,.s-80,.s-70,.s-60,.s-50,.s-40,.s-35,.s-30,.s-25,.wb-drempel-tag{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}