/* cursusblad.html: één A4 per cursus voor je werkgever. Op het scherm een vel papier onder de bediening,
   op papier alleen het vel. Opgebouwd als een werkbon: kop, feitenstrook, offerteblok, dan de inhoud. */
.cb-hero{padding-bottom:clamp(28px, 3vw, 44px)}
.cb-bediening{display:flex;justify-content:space-between;align-items:center;gap:20px 32px;flex-wrap:wrap;margin-top:36px;padding-top:24px;border-top:1px solid var(--ink)}
.cb-kies ul{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.cb-kies a{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border:1px solid var(--field-line);font-weight:700;text-decoration:none;transition:border-color .25s var(--ease-quart),background-color .25s var(--ease-quart)}
.cb-kies a:hover{border-color:var(--ink)}
.cb-kies a[aria-current]{background:var(--ink);border-color:var(--ink);color:var(--on-dark)}
.cb-print{display:flex;align-items:center;gap:8px 16px;flex-wrap:wrap}
/* Zonder geldige ?cursus= (main zonder data-blad) staat alleen de keuze er. */
main:not([data-blad]) :is(.cb-print, .cb-blad, .cb-stappen){display:none}
.cb-print .hint{margin:0;max-width:30ch}

.cb-plek{padding-bottom:clamp(56px, 8vw, 120px)}
.cb-stappen{max-width:880px;margin-top:40px}
.cb-stappen .genummerd{margin-top:14px}
.cb-stappen .genummerd > li{padding:16px 0;gap:4px 16px;grid-template-columns:28px minmax(0, 1fr)}
.cb-stappen .genummerd span{color:var(--ink-2);line-height:1.5}
.cb-stappen .btn{margin-top:20px;max-width:100%;white-space:normal;text-align:center}
@media (min-width: 1180px){
  .cb-plek{display:grid;grid-template-columns:minmax(0, 880px) minmax(240px, 340px);gap:0 clamp(40px, 4vw, 72px);align-items:start}
  .cb-leeg{grid-column:1 / -1}
  .cb-stappen{position:sticky;top:calc(var(--header-h) + 32px);margin-top:0}
}
.cb-leeg{margin:0;max-width:60ch;font-size:1.0625rem;color:var(--ink-2)}
.cb-leeg:empty{display:none}

/* ---------- Het vel ---------- */
.cb-blad{max-width:880px;background:var(--paper);border:1px solid var(--line);border-top:6px solid var(--ink);padding:clamp(22px, 4.5vw, 56px)}
.cb-blad h2,.cb-blad h3,.cb-blad p,.cb-blad dl,.cb-blad dd{margin:0}

.cb-kop{display:flex;justify-content:space-between;align-items:center;gap:12px 24px;flex-wrap:wrap;padding-bottom:18px;border-bottom:1px solid var(--ink)}
.cb-merk{display:flex;align-items:center;gap:14px}
.cb-embleem{display:block;width:52px;height:52px;color:var(--ink)}
.cb-merk p,.cb-doc{display:grid;line-height:1.3}
.cb-merk b{font-size:1.125rem;font-weight:900;letter-spacing:-.01em}
.cb-merk span,.cb-doc span{font-size:.875rem;color:var(--ink-2)}
.cb-doc{text-align:right}
.cb-doc b{font-size:.8125rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}

.cb-intro{padding-block:clamp(22px, 3vw, 32px) 20px}
.cb-titel{font-size:clamp(1.75rem, 3.4vw, 2.5rem);font-weight:800;line-height:1.08;letter-spacing:-.03em}
.cb-kort{margin-top:10px !important;max-width:62ch;font-size:1.0625rem;line-height:1.55;color:var(--ink-2)}

.cb-feiten{display:grid;grid-template-columns:repeat(5, auto);border-block:1px solid var(--line)}
.cb-feiten > div{padding:12px 16px 12px 0}
.cb-feiten > div + div{padding-left:16px;border-left:1px solid var(--line)}
.cb-blad dt{font-size:.75rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.cb-feiten dd{margin-top:2px;font-weight:700;line-height:1.35}

.cb-h{font-size:1.125rem;font-weight:800;letter-spacing:-.01em;line-height:1.3}

.cb-offerte{display:grid;grid-template-columns:minmax(0, 1.25fr) minmax(0, 1fr);gap:20px clamp(24px, 4vw, 48px);margin-top:28px;padding:clamp(18px, 3vw, 28px);background:var(--sage-tint)}
.cb-velden{display:grid;gap:14px;margin-top:14px}
.cb-velden .veld input,.cb-velden .veld select{min-height:46px}
.cb-off-prijs{display:grid;align-content:start;gap:14px}
.cb-prijs > div{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:10px 0;border-bottom:1px solid var(--olive-line)}
.cb-prijs > div:first-child{padding-top:0}
.cb-prijs dt{text-transform:none;letter-spacing:0;font-size:.9375rem;font-weight:700;color:var(--ink)}
.cb-prijs dd{font-variant-numeric:tabular-nums;white-space:nowrap}
.cb-prijs b{font-size:1.5rem;font-weight:800;letter-spacing:-.02em}
.cb-prijs > div:has(.cb-duo){flex-wrap:wrap;row-gap:2px}
.cb-prijs .cb-duo{flex-basis:100%;font-size:.8125rem;font-weight:600;color:var(--ink-2);text-align:right}
.cb-factuur{font-size:.9375rem;line-height:1.5;color:var(--ink-2)}

.cb-kolommen{display:grid;grid-template-columns:minmax(0, 1.1fr) minmax(0, 1fr);gap:28px clamp(28px, 4.5vw, 56px);margin-top:32px}
.cb-prog{margin:14px 0 0;padding:0;list-style:none}
.cb-prog li{display:grid;grid-template-columns:3.6em minmax(0, 1fr);gap:12px;padding:7px 0;border-bottom:1px solid var(--line);line-height:1.4}
.cb-prog .cb-dag{display:block;margin-top:14px;padding:0 0 6px;border-bottom:1px solid var(--ink);font-size:.8125rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.cb-prog .cb-dag:first-child{margin-top:0}
.cb-tijd{font-weight:700;color:var(--ink-2);font-variant-numeric:tabular-nums}
.cb-zij{display:grid;align-content:start;gap:26px}
.cb-zij .checklist{margin-top:12px;gap:8px}
.cb-zij p{margin-top:10px !important;line-height:1.55}
.cb-zij .cb-sub{margin-top:2px !important;font-size:.875rem;color:var(--ink-2)}

.cb-data{margin-top:32px}
.cb-datalijst{margin:12px 0 0;padding:0;list-style:none;border-top:1px solid var(--ink)}
.cb-datalijst li{display:grid;grid-template-columns:minmax(0, 1.3fr) minmax(0, 1fr) auto;gap:4px 20px;align-items:baseline;padding:10px 0;border-bottom:1px solid var(--line)}
.cb-datalijst span{color:var(--ink-2);font-variant-numeric:tabular-nums}
.cb-datalijst .cb-vrij{color:var(--ink);font-weight:700;text-align:right}
.cb-datalijst .cb-geen{display:block;color:var(--ink-2)}

.cb-voet{display:grid;grid-template-columns:repeat(4, auto);justify-content:space-between;gap:14px 24px;margin-top:32px;padding-top:16px;border-top:1px solid var(--ink)}
.cb-voet div{display:grid;gap:2px;font-size:.9375rem}
.cb-voet span:first-child{font-size:.75rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.cb-voet a{text-decoration:none}

@media (max-width: 900px){
  .cb-feiten{grid-template-columns:repeat(3, minmax(0, 1fr))}
  .cb-feiten > div,.cb-feiten > div + div{padding:12px 12px 12px 0;border-left:0}
  .cb-offerte,.cb-kolommen{grid-template-columns:minmax(0, 1fr)}
  .cb-voet{grid-template-columns:repeat(2, minmax(0, 1fr))}
}
@media (max-width: 560px){
  .cb-bediening{align-items:flex-start;flex-direction:column}
  .cb-print .btn{width:100%}
  .cb-feiten{grid-template-columns:repeat(2, minmax(0, 1fr))}
  .cb-feiten > div:last-child{grid-column:1 / -1}
  .cb-doc{text-align:left}
  .cb-offerte{margin-inline:calc(-1 * clamp(22px, 4.5vw, 56px));padding-inline:clamp(22px, 4.5vw, 56px)}
  .cb-datalijst li{grid-template-columns:minmax(0, 1fr) auto}
  .cb-datalijst li > span:nth-child(2){grid-row:2;grid-column:1 / -1}
  .cb-voet{grid-template-columns:minmax(0, 1fr)}
}

/* ---------- Print: alleen het vel, invulvelden worden schrijflijnen ---------- */
@media print{
  html{font-size:10.5px}
  .cb-plek{padding:0}
  .cb-blad{max-width:none;border:0;border-top:4px solid var(--ink);padding:10px 0 0;background:none}
  .cb-blad,.cb-offerte,.checklist li::before{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .cb-kop{padding-bottom:10px}
  .cb-intro{padding-block:12px 10px}
  /* Een A4 is smaller dan het tabletbreekpunt: de brede indeling hier opnieuw. */
  .cb-feiten{grid-template-columns:repeat(5, auto)}
  .cb-feiten > div,.cb-feiten > div + div{padding:8px 12px}
  .cb-feiten > div:first-child{padding-left:0}
  .cb-feiten > div + div{border-left:1px solid var(--line)}
  .cb-voet{grid-template-columns:repeat(4, auto)}
  .cb-offerte{grid-template-columns:minmax(0, 1.25fr) minmax(0, 1fr);margin-top:18px;padding:14px 16px;gap:14px 28px}
  .cb-velden{gap:8px;margin-top:8px}
  /* Ruimte voor de duoprijs: zonder deze krappere rijen loopt het blad over naar een tweede A4. */
  .cb-prijs > div{padding:7px 0}
  .cb-prijs .cb-duo{line-height:1.3}
  /* id-selectors: de veldstijl uit site.css heeft meer gewicht dan een klasse. */
  #cb-form .veld{grid-template-columns:8.5em minmax(0, 1fr);align-items:end;gap:10px}
  #cb-form .veld input,#cb-form .veld select{min-height:0;height:20px;padding:0;border:0;border-bottom:1px solid var(--ink);background:none;font-weight:700}
  #cb-form ::placeholder{color:transparent}
  #cb-form select:has(option[value=""]:checked){color:transparent}
  /* De zijkolom (leerdoelen, inbegrepen, nazorg) is bij elke cursus de langste: hij krijgt de breedte, het programma heeft korte regels. */
  .cb-kolommen{grid-template-columns:minmax(0, 1fr) minmax(0, 1.4fr);margin-top:16px;gap:16px 28px}
  .cb-prog{margin-top:8px}
  .cb-prog li{padding:3px 0}
  .cb-prog .cb-dag{margin-top:10px;padding-bottom:4px}
  .cb-zij{gap:12px}
  .cb-zij .checklist{margin-top:8px}
  .cb-datalijst li{padding:6px 0}
  .cb-zij .checklist{gap:4px}
  .cb-data{margin-top:16px;break-inside:avoid}
  .cb-voet{margin-top:16px;padding-top:10px;break-inside:avoid}
}