.preview-balk { background: var(--inkt); color: var(--room); text-align: center; font: 700 .85rem/1.3 var(--tekst); padding: .5rem 1rem; }
.held .label { margin-bottom: .6rem; }
.held p.klein { font-size: .98rem; color: var(--inkt-zacht); }
.plaat-rustig { margin: 0; border: 2px solid var(--inkt); border-radius: 16px; overflow: hidden; background: var(--papier); }
.plaat-rustig svg { display: block; width: 100%; height: auto; }
/* de kaart van het boek: een rustig getint vlak per deel, de hoofdstukken als pillen */
.delen { list-style: none; margin: 1.2rem 0 0; padding: 0; display: grid; gap: .7rem; }
.delen > li { display: grid; grid-template-columns: minmax(0, 14rem) minmax(0, 1fr); gap: .5rem 1.4rem; align-items: start; padding: .9rem 1.1rem; border-radius: 16px; }
.delen > li:nth-child(1) { background: #fcf2d3; } .delen > li:nth-child(2) { background: #e3eef7; } .delen > li:nth-child(3) { background: #fde9dc; }
.delen > li:nth-child(4) { background: #e5efe1; } .delen > li:nth-child(5) { background: #eeeaf8; }
.delen .deel { font: 700 1.4rem/1.15 var(--hand); color: var(--koraal-donker); }
.delen .deel small { display: block; font: 800 .8rem/1.2 var(--tekst); color: var(--inkt-zacht); letter-spacing: .02em; }
.delen ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.delen ul a { display: inline-flex; align-items: baseline; gap: .35rem; padding: .25rem .7rem; border: 1.5px solid var(--inkt); border-radius: 999px; background: var(--papier); color: var(--inkt); text-decoration: none; font-size: .9rem; font-weight: 700; }
.delen ul a b { font: 700 1.05rem/1 var(--hand); color: var(--koraal-donker); }
.delen ul a:hover { background: var(--boter); }
/* een patroon per rij: tekening links, tekst rechts */
.patronen { list-style: none; margin: 0; padding: 0; }
.patroon { display: grid; grid-template-columns: minmax(0, 21rem) minmax(0, 1fr); gap: 1.2rem 2.6rem; align-items: start; padding: 2.2rem 0; border-top: 2px dotted rgba(52, 50, 74, .22); scroll-margin-top: 1rem; }
.patroon svg.kaart-plaat { width: 100%; height: auto; display: block; border: 2px solid var(--inkt); border-radius: 14px; }
.patroon .nr { font: 700 1.45rem/1 var(--hand); color: var(--koraal-donker); }
.patroon .nr small { font: 800 .8rem/1 var(--tekst); color: var(--inkt-zacht); margin-left: .5rem; }
.patroon h2 { font: 800 clamp(1.35rem, 2.6vw, 1.8rem)/1.2 var(--tekst); margin: .2rem 0 .6rem; }
.patroon .kern { margin: 0 0 1rem; max-width: 42rem; font-size: 1.1rem; font-weight: 700; }
.patroon .kern span { display: block; font: 700 1.2rem/1 var(--hand); color: var(--groen); margin-bottom: .15rem; }
.vak { border-radius: 16px; padding: .9rem 1.15rem 1rem; margin: 0 0 1rem; max-width: 42rem; }
.vak.boter { background: #fcf2d3; } .vak.lucht { background: #e3eef7; } .vak.salie { background: #e5efe1; } .vak.lila { background: #eeeaf8; } .vak.perzik { background: #fde9dc; }
.vak .wie { display: block; font: 700 1.25rem/1.1 var(--hand); color: var(--koraal-donker); margin-bottom: .35rem; }
.vak blockquote { margin: 0; font-size: 1rem; }
.vak blockquote p { margin: 0 0 .4rem; }
.vak cite { display: block; font-style: normal; font-size: .85rem; color: var(--inkt-zacht); }
.vak.leeg { background: none; padding: 0; color: var(--inkt-zacht); font-size: .95rem; }
details.proef { max-width: 42rem; }
details.proef summary { cursor: pointer; font-weight: 800; list-style: none; display: inline-flex; gap: .5rem; align-items: baseline; }
details.proef summary::-webkit-details-marker { display: none; }
details.proef summary::before { content: "+"; font: 700 1.3rem/1 var(--hand); color: var(--koraal-donker); width: 1rem; }
details.proef[open] summary::before { content: "–"; }
details.proef p { margin: .5rem 0 0; }
details.proef h3 { font: 800 .95rem/1.3 var(--tekst); margin: .9rem 0 .3rem; }
details.proef .prompt { background: var(--papier); border: 2px dashed var(--inkt-zacht); border-radius: 12px; padding: .65rem .85rem; font-size: .95rem; }
/* mediapakket */
.rij { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: 1.2rem 2.6rem; align-items: start; padding: 2.2rem 0; border-top: 2px dotted rgba(52, 50, 74, .22); }
.rij > .links { display: flex; justify-content: center; }
.rij svg.icoon { width: 96px; height: 96px; }
.rij h2 { font: 800 clamp(1.4rem, 3vw, 1.9rem)/1.2 var(--tekst); margin: 0 0 .7rem; }
.rij h3 { font: 800 1.05rem/1.3 var(--tekst); margin: 1.1rem 0 .3rem; }
.rij p { margin: 0 0 .8rem; max-width: 44rem; }
.rij .omslagen img { width: 46%; }
.feiten { margin: 1rem 0 0; padding: 1rem 1.2rem; border-radius: 16px; background: #e5efe1; display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: .35rem 1.2rem; max-width: 44rem; font-size: .98rem; }
.feiten dt { font-weight: 800; }
.feiten dd { margin: 0; }
.rij > .links.portretvak { flex-direction: column; align-items: center; text-align: center; }
.portretvak .label { margin-top: .7rem; background: var(--papier); }
.downloads { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 1.3rem; margin-top: 1rem; }
.downloads figure { margin: 0; }
.downloads img { display: block; width: 100%; height: 13rem; object-fit: contain; object-position: left bottom; }
.downloads figcaption { margin-top: .5rem; font-size: .9rem; }
.downloads figcaption b { display: block; }
.onderwerpen { list-style: none; margin: .8rem 0 0; padding: 0; counter-reset: ow; display: grid; gap: .9rem; max-width: 46rem; }
.onderwerpen li { counter-increment: ow; position: relative; padding-left: 2.4rem; }
.onderwerpen li::before { content: counter(ow); position: absolute; left: 0; top: -.15rem; font: 700 1.7rem/1 var(--hand); color: var(--koraal-donker); }
.onderwerpen .waar { display: block; font-size: .88rem; color: var(--inkt-zacht); }
.citaten { list-style: none; margin: .8rem 0 0; padding: 0; display: grid; gap: 1rem; max-width: 46rem; }
.citaten li { border-left: 4px solid var(--koraal); padding: .2rem 0 .2rem 1rem; }
.citaten q { font: 700 1.45rem/1.25 var(--hand); color: var(--inkt); quotes: "“" "”"; }
.citaten .waar { display: block; font-size: .88rem; color: var(--inkt-zacht); margin-top: .2rem; }
.vlak { display: grid; grid-template-columns: 6rem minmax(0, 1fr); gap: 1rem 1.6rem; align-items: center; border-radius: 18px; padding: 1.3rem 1.4rem; margin: 1.6rem 0; }
.vlak.lila { background: #eeeaf8; } .vlak.perzik { background: #fde9dc; }
.vlak svg.icoon { width: 5.5rem; height: 5.5rem; }
.vlak h2 { font: 800 1.4rem/1.25 var(--tekst); margin: 0 0 .4rem; }
.vlak p { margin: 0 0 .6rem; max-width: 46rem; } .vlak p:last-child { margin: 0; }
@media (max-width: 760px) {
  .patroon, .rij, .delen > li { grid-template-columns: minmax(0, 1fr); }
  .rij > .links { justify-content: flex-start; }
  .rij svg.icoon { width: 72px; height: 72px; }
  .vlak { grid-template-columns: 4rem minmax(0, 1fr); padding: 1rem; }
  .vlak svg.icoon { width: 4rem; height: 4rem; }
  .feiten { grid-template-columns: minmax(0, 1fr); gap: .1rem; } .feiten dd { margin-bottom: .5rem; }
  .downloads img { height: 10rem; }
}