/* Bouw je waardeketen (versie 4). Bouwt voort op /scan/scan.css (fonts, kleuren, knoppen, blokken).
   Speels en rustig: grote tegels, een kleine "plop" bij elke tik, alles zonder inline stijlen. */

:root {
  --klaar: #27543B;
  --half: #D9A23B;
  --open: #A86B43;
  --half-licht: #FBF1DC;
  --open-licht: #F5E6DA;
}

h1[tabindex="-1"]:focus { outline: none; }
h1, h2 { hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }
.icoon { width: 1.25em; height: 1.25em; flex: none; vertical-align: -0.25em; }

/* ---------------------------------------------------------------- intro */
.wk-intro { padding: 20px 0 10px; text-align: center; }
.wk-intro .lead { font-size: 1.15rem; max-width: 34em; margin: 0 auto 1em; }
.wk-intro .keten { justify-content: center; margin: 22px 0 22px; }
.wk-knoppen { margin: 22px 0 10px; }
.knop.wk-groot { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 15px 30px; font-size: 1.08rem; min-height: 56px; }

/* ---------------------------------------------------------------- vraagschermen */
.stap { text-align: center; }
.stap .voortgang { margin-bottom: 18px; }
.stap-titel { margin-bottom: .2em; }
.wk-hint { color: var(--grijs); margin-bottom: 18px; }
.wk-nav { margin-top: 26px; text-align: left; }
.foutmelding:empty { display: none; }

/* Grote tegels om op te tikken */
.tegels-groot { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.tegels-groot.drie { grid-template-columns: repeat(3, 1fr); }
.tegel-groot {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  min-height: 128px; padding: 16px 10px; border-radius: 18px; cursor: pointer; text-align: center;
  background: #fff; border: 2px solid var(--lijn); box-shadow: 0 2px 0 var(--lijn);
  transition: transform .12s ease, border-color .15s, background .15s, box-shadow .15s;
  -webkit-tap-highlight-color: transparent;
}
.tegel-groot:hover { border-color: var(--groen); }
.tegel-groot:active { transform: scale(.95); }
.tegel-groot input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.tegel-groot:has(input:focus-visible) { outline: 3px solid var(--zand); outline-offset: 3px; }
.tg-icoon {
  width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: var(--mint); color: var(--groen); transition: background .15s, color .15s, transform .2s;
}
.tg-icoon .icoon { width: 32px; height: 32px; }
.tg-titel { font-weight: 700; color: var(--bos); line-height: 1.2; }
.tg-sub { font-size: .8rem; color: var(--grijs); }
.tg-vink {
  position: absolute; top: 10px; right: 10px; width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; background: var(--groen); color: #fff;
  transform: scale(0); transition: transform .2s cubic-bezier(.3, 1.6, .5, 1);
}
.tg-vink .icoon { width: 16px; height: 16px; }
.tegel-groot.aan, .tegel-groot:has(input:checked) { border-color: var(--groen); background: var(--mint); box-shadow: 0 2px 0 var(--groen); }
.tegel-groot:has(input:checked) .tg-icoon { background: var(--groen); color: #fff; animation: plop .35s ease; }
.tegel-groot:has(input:checked) .tg-vink { transform: scale(1); }
.tegel-groot.vol { opacity: .45; }
.tegel-groot.vast { cursor: default; }
.tegel-groot.vast .tg-icoon { background: var(--groen); color: #fff; }
/* Keten: een tegel die je wegtikt ziet er "uit" uit. */
.keten-tegels .tegel-groot:not(:has(input:checked)) { background: transparent; border-style: dashed; box-shadow: none; }
.keten-tegels .tegel-groot:not(:has(input:checked)) .tg-icoon { background: transparent; color: #b9b3a3; }
.keten-tegels .tegel-groot:not(:has(input:checked)) .tg-titel { color: #a29c8c; text-decoration: line-through; }
@keyframes plop { 0% { transform: scale(.7); } 60% { transform: scale(1.15); } 100% { transform: scale(1); } }

/* Wat weet je al: drie grote smileyknoppen per thema */
.weetvraag { border: 0; padding: 0; margin: 0 0 22px; min-width: 0; }
.weetvraag legend { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; font-family: "Lora", Georgia, serif; font-size: 1.2rem; font-weight: 600; color: var(--bos); padding: 0; }
.wv-icoon { width: 40px; height: 40px; border-radius: 50%; background: var(--groen); color: #fff; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.wv-vb { color: var(--grijs); font-size: .9rem; margin: 4px 0 10px; }
.smileys { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.smiley {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 6px; min-height: 104px;
  border-radius: 16px; border: 2px solid var(--lijn); background: #fff; cursor: pointer; font-weight: 600; color: var(--bos); font-size: .9rem; line-height: 1.2;
  transition: transform .12s ease, border-color .15s, background .15s; -webkit-tap-highlight-color: transparent;
}
.smiley:active { transform: scale(.95); }
.smiley input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.smiley .icoon { width: 40px; height: 40px; color: #b9b3a3; transition: color .15s; }
.smiley:has(input:focus-visible) { outline: 3px solid var(--zand); outline-offset: 3px; }
.smiley.s-ja:has(input:checked) { border-color: var(--klaar); background: var(--mint); }
.smiley.s-ja:has(input:checked) .icoon { color: var(--klaar); animation: plop .35s ease; }
.smiley.s-ongeveer:has(input:checked) { border-color: var(--half); background: var(--half-licht); }
.smiley.s-ongeveer:has(input:checked) .icoon { color: #9a6b12; animation: plop .35s ease; }
.smiley.s-weetniet:has(input:checked) { border-color: var(--open); background: var(--open-licht); }
.smiley.s-weetniet:has(input:checked) .icoon { color: var(--open); animation: plop .35s ease; }

/* ---------------------------------------------------------------- de keten als rij */
.keten-wrap { overflow-x: auto; margin: 0 -4px 18px; padding: 4px; }
.keten { list-style: none; display: flex; align-items: flex-start; padding: 0; margin: 0; min-width: min-content; }
.schakel { flex: 1 1 0; min-width: 62px; display: flex; flex-direction: column; align-items: center; text-align: center; position: relative; }
.schakel + .schakel::before { content: ""; position: absolute; top: 24px; right: calc(50% + 24px); width: calc(100% - 48px); height: 2px; background: var(--zand); }
.ring { width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 2px solid var(--groen); background: #fff; color: var(--groen); }
.ring .icoon { width: 24px; height: 24px; }
.is-jij .ring { background: var(--groen); color: #fff; }
.schakel .naam { font-size: .76rem; font-weight: 600; color: var(--bos); line-height: 1.2; margin-top: 6px; padding: 0 2px; hyphens: auto; -webkit-hyphens: auto; }
.keten-klein .ring { width: 40px; height: 40px; }
.keten-klein .ring .icoon { width: 20px; height: 20px; }
.keten-klein .schakel + .schakel::before { top: 20px; right: calc(50% + 20px); width: calc(100% - 40px); }
.keten-klein .schakel .naam { font-size: .7rem; }

/* ---------------------------------------------------------------- uitkomst */
.wk-kop h1 { margin-bottom: .3em; }
.wk-kop p:last-child { font-size: 1.05rem; }
.blok .groot { font-size: 1.1rem; color: var(--bos); }
.top { list-style: none; padding: 0; margin: 4px 0 10px; display: grid; gap: 10px; }
.top-item { display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid var(--lijn); border-left: 5px solid var(--open); border-radius: 12px; padding: 10px 12px; }
.top-item.st-klaar { border-left-color: var(--klaar); }
.top-item.st-deels { border-left-color: var(--half); }
.top-icoon { width: 42px; height: 42px; border-radius: 50%; background: var(--mint); color: var(--groen); display: flex; align-items: center; justify-content: center; flex: none; }
.top-icoon .icoon { width: 22px; height: 22px; }
.top-tekst { flex: 1; display: flex; flex-direction: column; line-height: 1.25; text-align: left; }
.top-tekst strong { color: var(--bos); }
.top-tekst span { font-size: .85rem; color: var(--grijs); }
.top-status { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; font-size: .85rem; white-space: nowrap; color: var(--open); }
.top-status .icoon { width: 20px; height: 20px; }
.st-klaar .top-status, .top-status.st-klaar { color: var(--klaar); }
.st-deels .top-status, .top-status.st-deels { color: #9a6b12; }
.top-status.st-open { color: var(--open); }

.wk-acties { display: grid; gap: 10px; margin: 22px 0 6px; }
.wk-acties .knop { width: 100%; }
.wk-gesprek { background: var(--koper); }
.wk-gesprek:hover { background: #8d5834; }
.print-hint { margin: -2px 0 4px; text-align: center; font-size: .9rem; color: var(--bos); background: var(--mint); border-radius: 8px; padding: 0 10px; max-height: 0; overflow: hidden; opacity: 0; transition: max-height .25s, opacity .25s, padding .25s; }
.print-hint.zichtbaar { max-height: 4em; opacity: 1; padding: 8px 10px; }
.wk-opnieuw { text-align: center; }
.link-knop { background: none; border: 0; color: var(--groen); text-decoration: underline; cursor: pointer; padding: 8px; }

@media (max-width: 600px) {
  .tegels-groot, .tegels-groot.drie { grid-template-columns: 1fr 1fr; gap: 10px; }
  .tegel-groot { min-height: 116px; }
  .wk-nav { flex-direction: row; }
  .wk-nav .knop { flex: 1; }
  .smiley { min-height: 96px; font-size: .85rem; }
}
@media (max-width: 420px) {
  .schakel { min-width: 58px; }
  .schakel .naam { font-size: .7rem; }
}
@media (prefers-reduced-motion: reduce) {
  .tegel-groot, .smiley, .tg-vink, .print-hint { transition: none; }
  .tegel-groot:has(input:checked) .tg-icoon, .smiley:has(input:checked) .icoon { animation: none; }
}

/* ---------------------------------------------------------------- het pdf-rapport (2 pagina's A4) */
.pdf { display: none; }

@media print {
  @page { size: A4; margin: 0; }
  html { font-size: 10pt; line-height: 1.45; background: #fff; }
  body { margin: 0; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .balk, .voet, .scherm-rapport { display: none !important; }
  main { max-width: none; padding: 0; margin: 0; }
  .pdf { display: block; text-align: left; }
  .pdf-pagina { position: relative; width: 210mm; height: 296.5mm; padding: 14mm 18mm 24mm; overflow: hidden; break-after: page; page-break-after: always; background: #fff; }
  .pdf-pagina:last-child { break-after: auto; page-break-after: auto; }
  .pdf-kop { display: flex; justify-content: space-between; align-items: center; border-bottom: 2px solid var(--groen); padding-bottom: 8px; margin-bottom: 18px; color: var(--grijs); font-size: 9pt; }
  .pdf-kop img { height: 36px; width: auto; }
  .pdf-titel h1 { font-size: 30pt; margin: 0; color: var(--bos); }
  .pdf-sub { font-family: "Lora", serif; font-style: italic; color: var(--koper); font-size: 13pt; margin: 0 0 10px; }
  .pdf-compliment { font-size: 11pt; color: var(--bos); }
  .pdf-nodig { background: var(--groen); color: #fff; border-radius: 10px; padding: 12px 16px 2px; margin: 6px 0 18px; }
  .pdf-nodig .label { color: var(--zand); }
  .pdf-nodig p:last-child { font-size: 11.5pt; }
  .pdf h2 { font-size: 14pt; margin: 16px 0 8px; }
  .pdf-keten { background: var(--creme); border-radius: 10px; padding: 14px 10px 10px; margin-bottom: 10px; }
  .pdf .top { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .pdf .top-item { padding: 8px 10px; }
  .pdf .top-icoon { width: 34px; height: 34px; }
  .pdf .top-icoon .icoon { width: 18px; height: 18px; }
  .pdf .top-tekst span { font-size: 8.5pt; }
  .pdf .top-status { font-size: 8.5pt; }
  .pdf .top-item .top-status span { display: none; }
  .pdf-tabel { font-size: 9.5pt; }
  .pdf-tabel td { padding: 9px 6px; vertical-align: middle; }
  .pdf-tabel tr:nth-child(even) td { background: var(--papier); }
  .pdf-thema { display: inline-flex; align-items: center; gap: 6px; color: var(--bos); }
  .pdf-thema .icoon { color: var(--groen); }
  .pdf-code { color: var(--koper); font-weight: 700; white-space: nowrap; }
  .pdf .acties li { padding-bottom: 14px; font-size: 11.5pt; }
  .pdf-pagina + .pdf-pagina h2:first-of-type { margin-top: 4px; }
  .pdf-cta { background: var(--bos); color: #fff; border-radius: 12px; padding: 14px 18px 6px; margin: 22px 0 18px; }
  .pdf-cta-kop { display: flex; gap: 8px; align-items: center; font-size: 13pt; margin-bottom: 4px; }
  .pdf-cta-kop .icoon { color: var(--zand); }
  .pdf-link { word-break: break-all; }
  .pdf-vsme { border-top: 1px solid var(--lijn); padding-top: 10px; color: var(--grijs); }
  .pdf-vsme .klein { font-size: 8.5pt; }
  .pdf-voet { position: absolute; left: 18mm; right: 18mm; bottom: 9mm; display: flex; justify-content: space-between; gap: 12px; border-top: 1px solid var(--lijn); padding-top: 6px; font-size: 7.5pt; color: var(--grijs); }
}

/* ---------------------------------------------------------------- VSME-kaarten en de strook B1 tot en met B11 */
.vkaarten { list-style: none; padding: 0; margin: 6px 0 10px; display: grid; gap: 10px; text-align: left; }
.vkaart { background: #fff; border: 1px solid var(--lijn); border-top: 5px solid var(--open); border-radius: 12px; padding: 10px 14px 8px; }
.vkaart.st-klaar { border-top-color: var(--klaar); }
.vkaart.st-deels { border-top-color: var(--half); }
.vk-kop { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 6px; }
.vk-code { font-size: .72rem; font-weight: 700; letter-spacing: .08em; color: var(--koper); border: 1px solid var(--zand); border-radius: 5px; padding: 1px 7px; }
.vk-titel { display: flex; align-items: center; gap: 10px; line-height: 1.25; }
.vk-titel strong { display: block; color: var(--bos); font-family: "Lora", Georgia, serif; font-size: 1.05rem; }
.vk-sub { display: block; font-size: .82rem; color: var(--grijs); }
.vk-actie { display: flex; gap: 8px; margin: 8px 0 2px; font-size: .92rem; color: var(--tekst); }
.vk-actie .icoon { color: var(--koper); margin-top: .15em; }

.strook { list-style: none; padding: 0; margin: 8px 0 6px; display: grid; grid-template-columns: repeat(11, 1fr); gap: 4px; }
.sk { position: relative; border-radius: 8px; padding: 6px 2px; min-height: 64px; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 3px; text-align: center; border: 2px solid var(--lijn); background: #fff; }
.sk-code { font-weight: 700; font-size: .78rem; color: var(--bos); }
.sk-naam { font-size: .58rem; line-height: 1.15; color: var(--grijs); hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }
.sk-klaar { background: var(--klaar); border-color: var(--klaar); }
.sk-klaar .sk-code, .sk-klaar .sk-naam { color: #fff; }
.sk-deels { border-color: var(--half); background: linear-gradient(to top, #F2D58F 50%, #fff 50%); }
.sk-deels .sk-naam { color: var(--bos); }
.sk-open { border-color: var(--open); border-style: solid; }
.sk-leeg { border-style: dashed; background: transparent; }
.sk-leeg .sk-code { color: #a29c8c; }
.strook-legenda { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 14px; padding: 0; margin: 4px 0 6px; font-size: .78rem; color: var(--grijs); }
.strook-legenda li { display: flex; align-items: center; gap: 5px; }
.sk-stip { width: 14px; height: 14px; border-radius: 4px; border: 2px solid var(--lijn); display: inline-block; }
.sk-stip.sk-klaar { background: var(--klaar); border-color: var(--klaar); }
.sk-stip.sk-deels { border-color: var(--half); }
.sk-stip.sk-open { border-color: var(--open); }
@media (min-width: 700px) { .vkaarten { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } }
@media (max-width: 600px) {
  .strook { grid-template-columns: repeat(6, 1fr); }
  .sk-naam { font-size: .62rem; }
}
@media print {
  .pdf .vkaarten { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .pdf .vkaart { padding: 8px 10px 6px; }
  .pdf .vk-titel strong { font-size: 10.5pt; }
  .pdf .vk-sub { font-size: 8pt; }
  .pdf .vk-actie { font-size: 9pt; }
  .pdf .top-icoon { width: 32px; height: 32px; }
  .pdf .top-icoon .icoon { width: 17px; height: 17px; }
  .pdf .top-status { font-size: 8pt; }
  .pdf .strook { gap: 5px; margin-top: 10px; }
  .pdf .sk { min-height: 74px; padding: 7px 3px; }
  .pdf .sk-code { font-size: 10pt; }
  .pdf .sk-naam { font-size: 6.6pt; }
  .pdf .strook-legenda { font-size: 8pt; }
  .pdf-vsme { font-size: 9pt; }
}

/* ---------------------------------------------------------------- versie 5: wat heb je al */
.heeftgroep { text-align: left; background: var(--papier); border: 1px solid var(--lijn); border-radius: 16px; padding: 12px 14px 4px; margin: 0 0 14px; }
.hg-kop { display: flex; align-items: center; gap: 10px; font-size: 1.15rem; margin: 0 0 8px; }
.heeftvraag { border: 0; padding: 0; margin: 0 0 14px; min-width: 0; }
.heeftvraag legend { font-weight: 600; color: var(--bos); padding: 0; margin-bottom: 6px; line-height: 1.35; }
.jnw { display: grid; grid-template-columns: 1fr 1fr 1.3fr; gap: 8px; }
.jn { position: relative; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.jn input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.jn span {
  display: flex; align-items: center; justify-content: center; min-height: 50px; padding: 6px; border-radius: 12px;
  border: 2px solid var(--lijn); background: #fff; font-weight: 700; color: var(--bos); text-align: center; line-height: 1.15;
  transition: transform .12s ease, background .15s, border-color .15s;
}
.jn:active span { transform: scale(.95); }
.jn input:focus-visible + span { outline: 3px solid var(--zand); outline-offset: 2px; }
.jn-ja input:checked + span { background: var(--klaar); border-color: var(--klaar); color: #fff; animation: plop .3s ease; }
.jn-nee input:checked + span { background: var(--open-licht); border-color: var(--open); color: var(--open); animation: plop .3s ease; }
.jn-weetniet input:checked + span { background: var(--half-licht); border-color: var(--half); color: #8a5f12; animation: plop .3s ease; }

/* Gevonden bewijs */
.gevonden { list-style: none; padding: 0; margin: 4px 0; display: grid; gap: 6px; text-align: left; }
.gevonden li { display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--lijn); border-radius: 10px; padding: 8px 12px; }
.gevonden li > .icoon { color: #fff; background: var(--klaar); border-radius: 50%; padding: 3px; width: 22px; height: 22px; }
.gevonden li > span:nth-child(2) { flex: 1; color: var(--bos); font-weight: 600; }
.pijl-code { color: var(--koper); white-space: nowrap; }
.wk-gevonden { padding-top: 14px; }
@media (min-width: 700px) { .gevonden { grid-template-columns: 1fr 1fr; } }
@media print {
  .pdf .gevonden { grid-template-columns: 1fr 1fr; gap: 5px; }
  .pdf .gevonden li { padding: 5px 10px; font-size: 9.5pt; }
  .pdf .gevonden li > .icoon { width: 18px; height: 18px; }
}

/* ---------------------------------------------------------------- versie 6: automatische keten, verschil, verhaal */
.ketenkaarten { list-style: none; padding: 0; margin: 4px auto 10px; max-width: 520px; text-align: left; display: grid; gap: 0; }
.kk { position: relative; background: #fff; border: 2px solid var(--lijn); border-radius: 16px; margin-bottom: 26px; transition: opacity .15s; }
.kk:last-child { margin-bottom: 8px; }
.kk:not(:last-child)::after { content: ""; position: absolute; left: 41px; bottom: -26px; width: 2px; height: 26px; background: var(--zand); }
.kk > .kk-icoon, .kk label { display: flex; }
.kk { display: flex; align-items: center; gap: 14px; padding: 12px 14px; }
.kk label { align-items: center; gap: 14px; width: 100%; cursor: pointer; }
.kk-icoon { width: 52px; height: 52px; border-radius: 50%; background: var(--mint); color: var(--groen); display: flex; align-items: center; justify-content: center; flex: none; }
.kk-icoon .icoon { width: 28px; height: 28px; }
.kk-jij { border-color: var(--groen); background: var(--mint); }
.kk-jij .kk-icoon { background: var(--groen); color: #fff; }
.kk-tekst { display: flex; flex-direction: column; line-height: 1.25; flex: 1; }
.kk-tekst strong { color: var(--bos); font-size: 1.05rem; }
.kk-tekst span { color: var(--grijs); font-size: .88rem; }
.kk-wissel input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.kk-vink { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--lijn); display: flex; align-items: center; justify-content: center; color: transparent; flex: none; }
.kk-wissel input:checked ~ .kk-vink { background: var(--groen); border-color: var(--groen); color: #fff; }
.kk-wissel:has(input:focus-visible) { outline: 3px solid var(--zand); outline-offset: 2px; }
.kk-uit { opacity: .5; border-style: dashed; }
.kk-uit .kk-tekst strong { text-decoration: line-through; }

.tegels-groot.compact .tegel-groot { min-height: 104px; padding: 12px 8px; gap: 6px; }
.tegels-groot.compact .tg-icoon { width: 48px; height: 48px; }
.tegels-groot.compact .tg-icoon .icoon { width: 26px; height: 26px; }
.tegels-groot.compact .tg-titel { font-size: .92rem; }
.tegel-groot.suggestie { border-color: var(--zand); }
.tegel-groot.suggestie .tg-sub { color: var(--koper); font-weight: 700; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; }

.wk-verhaal { border-left: 5px solid var(--koper); }
.verhaal-tekst { font-family: "Lora", Georgia, serif; font-size: 1.12rem; line-height: 1.65; color: var(--bos); text-align: left; }
.sk-eigen { border-color: var(--koper); }
.sk-eigen.sk-klaar { background: var(--koper); border-color: var(--koper); }
@media (min-width: 601px) { .strook { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 1fr; } }
@media print {
  .pdf .strook { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 1fr; }
  .pdf-nodig { background: var(--groen); }
  .pdf-nodig p:last-child { font-family: "Lora", Georgia, serif; font-size: 11pt; line-height: 1.55; }
  .pdf-nodig2 { background: var(--mint); border-radius: 10px; padding: 10px 16px 2px; margin: 0 0 6px; }
  .pdf-nodig2 .label { color: var(--koper); }
}

/* ---------------------------------------------------------------- versie 7: keten van links naar rechts, verhaal in drie regels */
.intro-kop { font-size: clamp(2.1rem, 6vw, 3.2rem); margin-bottom: .15em; }
.intro-lead { font-size: 1.3rem !important; color: var(--koper); font-family: "Lora", Georgia, serif; font-style: italic; }

.kstrook { overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; margin: 6px -20px 14px; padding: 6px 20px 10px; scrollbar-width: thin; }
.kstrook ol { list-style: none; display: flex; align-items: stretch; gap: 0; padding: 0; margin: 0; width: max-content; min-width: 100%; }
.kc-plek { scroll-snap-align: center; display: flex; flex: 1 1 0; }
.kc-pijl { display: flex; align-items: center; color: var(--koper); padding: 0 4px; flex: none; }
.kc-pijl .icoon { width: 20px; height: 20px; }
.kc {
  position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px;
  width: 150px; padding: 14px 10px 12px; background: #fff; border: 2px solid var(--lijn); border-radius: 16px; transition: opacity .15s;
}
.kc-icoon { width: 50px; height: 50px; border-radius: 50%; background: var(--mint); color: var(--groen); display: flex; align-items: center; justify-content: center; flex: none; }
.kc-icoon .icoon { width: 26px; height: 26px; }
.kc-naam { color: var(--bos); font-size: .95rem; line-height: 1.2; }
.kc-vb { color: var(--grijs); font-size: .78rem; line-height: 1.3; }
.kc-jij { border-color: var(--groen); background: var(--mint); }
.kc-jij .kc-icoon { background: var(--groen); color: #fff; }
.kc-wissel { cursor: pointer; }
.kc-wissel input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.kc-vink { position: absolute; top: 8px; right: 8px; width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--lijn); display: flex; align-items: center; justify-content: center; color: transparent; background: #fff; }
.kc-vink .icoon { width: 14px; height: 14px; }
.kc-wissel input:checked ~ .kc-vink { background: var(--groen); border-color: var(--groen); color: #fff; }
.kc-wissel:has(input:focus-visible) { outline: 3px solid var(--zand); outline-offset: 2px; }
.kc-uit { opacity: .5; border-style: dashed; }
.kc-uit .kc-naam { text-decoration: line-through; }
.kstrook.compact .kc { width: 108px; padding: 10px 6px; }
.kstrook.compact .kc-icoon { width: 38px; height: 38px; }
.kstrook.compact .kc-icoon .icoon { width: 20px; height: 20px; }
.kstrook.compact .kc-naam { font-size: .78rem; }
@media (min-width: 760px) {
  .kstrook { margin: 6px 0 14px; padding: 6px 0 10px; }
  .kc { width: auto; flex: 1; min-width: 0; }
}

.verhaal { margin: 0; display: grid; gap: 10px; text-align: left; }
.verhaal div { border-left: 3px solid var(--zand); padding-left: 12px; }
.verhaal dt { font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--koper); }
.verhaal dd { margin: 2px 0 0; font-family: "Lora", Georgia, serif; font-size: 1.08rem; line-height: 1.5; color: var(--bos); }

@media print {
  .pdf .kstrook { overflow: visible; margin: 0 0 10px; padding: 0; }
  .pdf .kstrook ol { width: 100%; }
  .pdf .kc { width: auto; flex: 1; min-width: 0; padding: 9px 6px 8px; border-width: 1.5px; }
  .pdf .kc-icoon { width: 34px; height: 34px; }
  .pdf .kc-icoon .icoon { width: 18px; height: 18px; }
  .pdf .kc-naam { font-size: 8.5pt; }
  .pdf .kc-vb { font-size: 7.2pt; }
  .pdf .kc-pijl .icoon { width: 14px; height: 14px; }
  .pdf .verhaal { gap: 6px; }
  .pdf .verhaal div { border-left-color: var(--zand); }
  .pdf .verhaal dt { color: var(--zand); font-size: 7.5pt; }
  .pdf .verhaal dd { color: #fff; font-size: 10.5pt; line-height: 1.45; }
}
@media (min-width: 760px) {
  .kstrook ol { width: 100%; }
  .kc-plek { min-width: 0; }
  .kstrook.compact .kc { width: auto; }
  h1, h2 { hyphens: manual; -webkit-hyphens: manual; }
}
@media print {
  .pdf .kc-plek { min-width: 0; }
}
@media print { .pdf-nodig { padding-bottom: 12px; } .pdf .verhaal dd { margin-bottom: 0; } }