/* Leer-onderdelen: groepspagina, oefenronde, printvellen. Gebruikt de tokens uit styles.css. */

.zacht { color: var(--inkt-zacht); }
.klein { font-size: .9rem; color: var(--inkt-licht); }

/* ---------------- groepskop ---------------- */
.groep-kop { padding: clamp(1.75rem, 4vw, 3rem) 0 1.25rem; }
.groep-kop__rij { display: grid; grid-template-columns: auto 1fr; gap: clamp(1rem, 3vw, 2rem); align-items: center; }
.groep-badge {
  width: clamp(96px, 13vw, 150px); aspect-ratio: 1; border-radius: 30px;
  display: grid; place-items: center; background: var(--c-licht);
  border: 3px solid var(--inkt); box-shadow: 6px 6px 0 var(--inkt); transform: rotate(-4deg);
}
.groep-badge span {
  font-family: var(--f-display); font-weight: 900; font-size: clamp(4rem, 9vw, 6.5rem); line-height: 1;
  color: var(--c); -webkit-text-stroke: 3px var(--inkt); paint-order: stroke fill;
  font-variation-settings: 'SOFT' 100, 'WONK' 1;
}
.groep-kop h1 { font-size: clamp(2.2rem, 5vw, 3.8rem); margin-bottom: .2rem; }
.groep-kop .lead { color: var(--inkt-zacht); font-size: clamp(1.02rem, 1.4vw, 1.2rem); max-width: 60ch; margin: 0; }
@media (max-width: 560px) { .groep-kop__rij { grid-template-columns: 1fr; } .groep-badge { width: 92px; border-radius: 22px; } }

/* periode-schakelaar */
.periode { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; margin: 1.5rem 0 0; }
.periode__label { font-family: var(--f-hand); font-size: 1.2rem; color: var(--inkt-zacht); }
.periode__knoppen { display: inline-flex; padding: 5px; gap: 5px; background: var(--kaart); border: 2px solid var(--inkt); border-radius: 18px; }
.periode__knoppen button {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
  padding: .5rem 1rem; border: 0; border-radius: 13px; background: transparent; cursor: pointer; text-align: left;
  color: var(--inkt-zacht);
}
.periode__knoppen button b { font-weight: 600; color: var(--inkt); }
.periode__knoppen button small { font-size: .78rem; }
.periode__knoppen button[aria-checked="true"] { background: var(--c, var(--teal)); }
.periode__knoppen button[aria-checked="true"] b, .periode__knoppen button[aria-checked="true"] small { color: var(--inkt); }
.g8 .periode__knoppen button[aria-checked="true"] b, .g8 .periode__knoppen button[aria-checked="true"] small { color: #fff; }

/* tabs */
.tabs-band { position: sticky; top: var(--nav-h); z-index: 20; background: rgba(251, 245, 233, .94); backdrop-filter: blur(8px); border-bottom: 2px solid var(--inkt); margin-top: 1.5rem; }
.tabs { display: flex; gap: .25rem; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs a {
  display: inline-flex; align-items: center; gap: .5rem; white-space: nowrap;
  padding: .95rem 1.2rem .8rem; font-weight: 600; color: var(--inkt-zacht); text-decoration: none;
  border-bottom: 5px solid transparent; margin-bottom: -2px;
}
.tabs a:hover { color: var(--inkt); }
.tabs a[aria-selected="true"] { color: var(--inkt); border-bottom-color: var(--c, var(--zon)); }
.tabs a span { font-size: 1.15rem; }
@media (max-width: 560px) { .tabs a { padding: .85rem .8rem .7rem; font-size: .95rem; } }

#paneel { padding-top: clamp(1.5rem, 3vw, 2.25rem); min-height: 420px; }
#leer-app:not(.klaar) #paneel::before { content: 'Even laden…'; font-family: var(--f-hand); font-size: 1.3rem; color: var(--inkt-licht); }

/* ---------------- oefenen-tab ---------------- */
.oefen-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: clamp(1rem, 2vw, 1.5rem); align-items: stretch; }
@media (max-width: 820px) { .oefen-grid { grid-template-columns: 1fr; } }
.start-kaart { background: var(--c-licht, var(--kaart)); }
.start-kaart h2 { margin-bottom: .35rem; }
.wie { margin: 1.25rem 0 1.5rem; }
.wie__label { display: block; font-weight: 600; margin-bottom: .5rem; }
.wie__chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.chip {
  min-height: 42px; padding: .4rem 1rem; border-radius: 999px; cursor: pointer;
  border: 2px solid var(--inkt); background: var(--kaart); font-weight: 600; color: var(--inkt);
}
.chip--aan { background: var(--inkt); color: #fff; }
.chip--nieuw { border-style: dashed; background: transparent; font-weight: 500; }
.start-knop { width: 100%; max-width: 340px; }

.voortgang-kaart { display: flex; flex-direction: column; gap: .9rem; }
.lvl { display: flex; gap: .9rem; align-items: center; }
.lvl__nr { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; font-family: var(--f-display); font-weight: 900; font-size: 1.6rem; background: var(--zon); border: 2px solid var(--inkt); flex: none; }
.lvl > div { flex: 1; }
.lvl small { color: var(--inkt-licht); }
.balk { height: 12px; border-radius: 99px; background: var(--papier-2); border: 1.5px solid var(--inkt); overflow: hidden; margin: .3rem 0 .15rem; }
.balk span { display: block; height: 100%; background: var(--gras); }
.streak { font-size: 1.05rem; }
.badges { display: flex; flex-wrap: wrap; gap: .35rem; }
.badge { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-size: 1.2rem; background: var(--papier-2); filter: grayscale(1); opacity: .35; }
.badge--aan { filter: none; opacity: 1; background: var(--zon-licht); border: 1.5px solid var(--zon-diep); }

.onderwerpen { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .75rem; }
.onderwerp {
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: .75rem; align-items: center;
  text-align: left; padding: .85rem 1rem; border-radius: 16px; cursor: pointer;
  background: var(--kaart); border: 2px solid var(--inkt); box-shadow: 0 3px 0 var(--inkt);
  color: var(--inkt); transition: transform .12s var(--ease);
}
.onderwerp:hover { transform: translateY(-2px); }
.onderwerp__ico { grid-row: span 2; font-size: 1.5rem; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; background: var(--papier-2); }
.onderwerp b { font-weight: 600; line-height: 1.25; }
.onderwerp small { color: var(--inkt-licht); font-size: .82rem; }
.onderwerp--reken .onderwerp__ico { background: var(--c-licht, var(--zon-licht)); }

/* ---------------- printen-tab ---------------- */
.weekbundel { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(1.25rem, 4vw, 3rem); align-items: center; background: var(--kaart); }
@media (max-width: 820px) { .weekbundel { grid-template-columns: 1fr; } }
.weekbundel__beeld { position: relative; height: 300px; }
.mini-vel {
  position: absolute; left: 12%; top: 6%; width: 64%; height: 86%;
  background: #fff; border: 2px solid var(--inkt); border-radius: 6px; box-shadow: 4px 4px 0 var(--inkt);
  padding: 1rem; display: flex; flex-direction: column; gap: .55rem; transform: rotate(-3deg);
}
.mini-vel--2 { transform: rotate(4deg) translate(14px, 6px); background: var(--zon-licht); }
.mini-vel--3 { transform: rotate(9deg) translate(30px, 12px); background: var(--hemel-licht); }
.mini-vel b { font-family: var(--f-display); font-size: 1.3rem; }
.mini-vel i { display: block; height: 7px; border-radius: 4px; background: var(--papier-2); }
.mini-vel i.kort { width: 60%; }
.mini-som { font-family: var(--f-hand); font-size: 1.1rem; }
.weekbundel__beeld .sticker { position: absolute; right: 2%; bottom: 8%; transform: rotate(-6deg); }
.bundel-form { display: flex; flex-wrap: wrap; align-items: end; gap: .9rem 1.25rem; margin: 1.25rem 0 .75rem; }
.bundel-form label { display: flex; flex-direction: column; gap: .3rem; font-weight: 600; font-size: .92rem; }
.bundel-form input:not([type]) {
  min-height: 48px; padding: .5rem .9rem; font: inherit; font-weight: 400; border-radius: 12px;
  border: 2px solid var(--inkt); background: #fff; min-width: 200px;
}
.bundel-form .vink { flex-direction: row; align-items: center; gap: .5rem; min-height: 48px; font-weight: 500; }
.bundel-form .vink input { width: 22px; height: 22px; accent-color: var(--teal); }

.werkbladen { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: .6rem; }
.werkblad {
  display: grid; grid-template-columns: auto 1fr; column-gap: .7rem; align-items: center;
  padding: .75rem .95rem; border-radius: 14px; text-decoration: none; color: var(--inkt);
  background: var(--kaart); border: 1.5px solid var(--lijn-sterk);
}
.werkblad:hover { color: var(--inkt); border-color: var(--inkt); background: #fff; }
.werkblad span { grid-row: span 2; font-size: 1.3rem; }
.werkblad b { font-weight: 600; font-size: .95rem; line-height: 1.25; }
.werkblad small { color: var(--inkt-licht); font-size: .8rem; }
.werkblad::after { content: '🖨️'; display: none; }

/* ---------------- spellen-tab ---------------- */
.spel-kaarten { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2vw, 1.5rem); }
@media (max-width: 860px) { .spel-kaarten { grid-template-columns: 1fr; } }
.spel-kaart {
  --sk: var(--zon-licht);
  display: flex; flex-direction: column; gap: .4rem; padding: 1.4rem; border-radius: var(--r);
  background: var(--sk); color: var(--inkt); text-decoration: none;
  border: 2px solid var(--inkt); box-shadow: 4px 4px 0 var(--inkt); transition: transform .15s var(--ease);
}
.spel-kaart:hover { color: var(--inkt); transform: translate(-2px, -2px) rotate(-.5deg); }
.spel-kaart--koraal { --sk: var(--koraal-licht); }
.spel-kaart--hemel { --sk: var(--hemel-licht); }
.spel-kaart__ico { font-size: 2.2rem; }
.spel-kaart h3 { margin: .2rem 0 0; }
.spel-kaart p { margin: 0 0 .6rem; color: var(--inkt-zacht); }
.spel-kaart .knop { align-self: flex-start; margin-top: auto; }

/* ---------------- uitleg-tab ---------------- */
.uitleg-intro { margin-bottom: 1.5rem; }
.uitleg-vak { display: flex; gap: .5rem; align-items: center; margin: 2rem 0 .75rem; }
.uitleg-lijst { display: grid; gap: .6rem; }
.uitleg-item { background: var(--kaart); border: 2px solid var(--inkt); border-radius: 16px; }
.uitleg-item summary {
  list-style: none; cursor: pointer; padding: 1rem 3rem 1rem 1.2rem; font-weight: 600; position: relative;
}
.uitleg-item summary::-webkit-details-marker { display: none; }
.uitleg-item summary::after {
  content: '+'; position: absolute; right: 1rem; top: 50%; transform: translateY(-50%);
  width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  background: var(--zon); border: 2px solid var(--inkt); font-weight: 700;
}
.uitleg-item[open] summary::after { content: '−'; }
.uitleg-item__body { padding: 0 1.2rem 1.2rem; }
.uitleg-voorbeeld { background: var(--zon-licht); border-radius: 12px; padding: .85rem 1rem; margin: .5rem 0 .75rem; line-height: 1.7; }
.uitleg-voorbeeld .hand { display: block; font-size: 1.15rem; color: var(--koraal-diep); }
.uitleg-tip { margin: 0; font-size: .95rem; color: var(--inkt-zacht); }

/* ================= oefenronde ================= */
body.oefen-open { overflow: hidden; }
.oefen {
  position: fixed; inset: 0; z-index: 200; overflow-y: auto;
  background-color: var(--papier);
  background-image: linear-gradient(var(--ruit) 1px, transparent 1px), linear-gradient(90deg, var(--ruit) 1px, transparent 1px);
  background-size: 28px 28px;
  animation: opkomen .3s var(--ease) both;
}
.oefen__balk {
  position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 1rem;
  padding: .75rem var(--gutter); background: var(--papier); border-bottom: 2px solid var(--inkt);
}
.oefen__sluit { width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--inkt); background: var(--kaart); cursor: pointer; font-size: 1.1rem; flex: none; }
.oefen__voortgang { flex: 1; height: 16px; border-radius: 99px; background: var(--kaart); border: 2px solid var(--inkt); overflow: hidden; }
.oefen__voortgang span { display: block; height: 100%; background: var(--gras); transition: width .4s var(--ease); }
.oefen__xp { font-weight: 700; min-width: 64px; text-align: right; }
.oefen__binnen { max-width: 760px; margin: 0 auto; padding: clamp(1rem, 4vw, 2.5rem) var(--gutter) 4rem; }
.oefen__binnen--lezen { max-width: 1180px; display: grid; grid-template-columns: 1.1fr 1fr; gap: 1.5rem; align-items: start; }
@media (max-width: 900px) { .oefen__binnen--lezen { grid-template-columns: 1fr; } }
.oefen__tekst {
  background: #fff; border: 2px solid var(--inkt); border-radius: var(--r); padding: 1.1rem 1.3rem;
  max-height: calc(100svh - 140px); overflow-y: auto; position: sticky; top: 90px; line-height: 1.75;
}
@media (max-width: 900px) { .oefen__tekst { position: static; max-height: none; } }
.oefen__tekst summary { font-family: var(--f-display); font-weight: 700; font-size: 1.3rem; cursor: pointer; margin-bottom: .5rem; }
.oefen__tekst p { margin: 0 0 .9em; }
.alinea-nr { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--papier-2); font-size: .75rem; font-weight: 700; margin-right: .5rem; vertical-align: 2px; }
.gat { display: inline-block; min-width: 70px; border-bottom: 2px dashed var(--koraal); }
.oefen__kaart {
  background: var(--kaart); border: 2px solid var(--inkt); border-radius: var(--r-lg);
  box-shadow: 6px 6px 0 var(--inkt); padding: clamp(1.25rem, 4vw, 2.25rem);
}
.oefen__kaart--midden { text-align: center; max-width: 560px; margin: 2rem auto 0; }
.oefen__meta { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-bottom: 1rem; }
.oefen__teller { margin-left: auto; font-weight: 600; color: var(--inkt-licht); }
.vak-tag { display: inline-flex; gap: .35rem; align-items: center; padding: .25rem .75rem; border-radius: 99px; font-size: .88rem; font-weight: 600; background: var(--papier-2); }
.vak-tag--rekenen { background: var(--zon-licht); }
.vak-tag--lezen { background: var(--hemel-licht); }
.vak-tag--spelling, .vak-tag--werkwoorden { background: var(--koraal-licht); }
.vak-tag--leestekens { background: var(--gras-licht); }
.oefen__vraag { font-size: clamp(1.25rem, 2.6vw, 1.6rem); font-weight: 500; line-height: 1.45; margin-bottom: 1.4rem; }
.oefen__vraag .verhaal { display: block; font-size: .85em; line-height: 1.6; }
.oefen__vraag .citaat, .pb-vraagtekst .citaat { display: inline-block; margin-top: .5rem; padding: .35rem .8rem; background: var(--zon-licht); border-radius: 8px; font-style: italic; }
.mc { display: grid; gap: .65rem; }
.mc__optie {
  display: flex; align-items: center; gap: .9rem; min-height: 60px; padding: .7rem 1rem;
  text-align: left; font-size: 1.08rem; color: var(--inkt); cursor: pointer;
  background: #fff; border: 2px solid var(--inkt); border-radius: 16px; box-shadow: 0 3px 0 var(--inkt);
  transition: transform .1s, background .15s;
}
.mc__optie:hover:not(:disabled) { transform: translateY(-1px); background: var(--zon-licht); }
.mc__optie:disabled { cursor: default; opacity: .6; }
.mc__letter { width: 34px; height: 34px; flex: none; border-radius: 10px; display: grid; place-items: center; font-weight: 700; background: var(--papier-2); }
.mc__optie.goed { opacity: 1; background: var(--gras-licht); border-color: var(--gras-diep); box-shadow: 0 3px 0 var(--gras-diep); }
.mc__optie.goed .mc__letter { background: var(--gras); color: #fff; }
.mc__optie.fout { opacity: 1; background: var(--koraal-licht); border-color: var(--koraal-diep); box-shadow: 0 3px 0 var(--koraal-diep); animation: schud .35s; }
@keyframes schud { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
.getal { display: flex; gap: .75rem; flex-wrap: wrap; }
.getal__in {
  flex: 1 1 180px; min-height: 64px; padding: .5rem 1.1rem; font: inherit; font-size: 1.8rem; font-weight: 700;
  border: 3px solid var(--inkt); border-radius: 16px; background: #fff; color: var(--inkt);
}
.getal__in:focus { outline: none; box-shadow: var(--ring); }
.getal__in.goed { background: var(--gras-licht); border-color: var(--gras-diep); }
.getal__in.fout { background: var(--koraal-licht); border-color: var(--koraal-diep); animation: schud .35s; }
.oefen__onder { margin-top: 1rem; }
.hint-knop { background: none; border: 0; padding: .4rem 0; color: var(--teal); font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.hint-tekst { margin-top: .5rem; padding: .8rem 1rem; border-radius: 12px; background: var(--hemel-licht); border-left: 5px solid var(--hemel); }
.oefen__feedback:empty { display: none; }
.oefen__feedback { margin-top: 1.25rem; padding: 1rem 1.2rem; border-radius: 16px; animation: opkomen .3s var(--ease) both; }
.oefen__feedback.is-goed { background: var(--gras-licht); border: 2px solid var(--gras-diep); }
.oefen__feedback.is-fout { background: var(--zon-licht); border: 2px dashed var(--zon-diep); }
.oefen__feedback .hand { display: block; font-size: 1.45rem; line-height: 1.2; margin-bottom: .3rem; }
.oefen__feedback.is-goed .hand { color: var(--gras-diep); }
.oefen__feedback.is-fout .hand { color: var(--koraal-diep); }
.oefen__feedback p { margin: 0 0 .9rem; }
.volgende { width: 100%; }
.groot-ico { font-size: 4rem; line-height: 1; margin-bottom: .5rem; }
.eind-score { font-size: 1.3rem; }
.eind-score b { font-family: var(--f-display); font-size: 2.6rem; }
.nieuwe-badge { display: flex; gap: .9rem; align-items: center; text-align: left; margin: .75rem auto; max-width: 360px; padding: .7rem 1rem; background: var(--zon-licht); border: 2px solid var(--inkt); border-radius: 14px; }
.nieuwe-badge span { font-size: 2rem; }
.nieuwe-badge small { display: block; color: var(--inkt-zacht); }
.confetti { position: fixed; top: -12px; width: 10px; height: 16px; border-radius: 2px; z-index: 300; animation: val 2.8s cubic-bezier(.3, .6, .4, 1) forwards; pointer-events: none; }
@keyframes val { to { top: 105vh; transform: rotate(720deg) translateX(40px); } }

/* ================= printvellen (A4) ================= */
.print-pagina { background: #e9e2d2; }
.print-balk {
  position: sticky; top: 0; z-index: 5; display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; justify-content: space-between;
  padding: .75rem var(--gutter); background: var(--teal-diep); color: #fff;
}
.print-balk b { font-family: var(--f-display); font-size: 1.15rem; }
.print-balk .knoppen { display: flex; gap: .5rem; flex-wrap: wrap; }
.vellen { padding: 1.5rem 0 4rem; display: flex; flex-direction: column; align-items: center; gap: 1.5rem; }

.pb-vel {
  width: 210mm; min-height: 297mm; padding: 13mm 14mm 12mm; background: #fff; color: #111;
  font-family: var(--f-body); font-size: 10.5pt; line-height: 1.45;
  box-shadow: 0 2px 0 rgba(0, 0, 0, .05), 0 12px 32px rgba(0, 0, 0, .12);
  display: flex; flex-direction: column;
}
@media screen and (max-width: 840px) {
  .vellen { padding: 1rem 0 3rem; }
  .pb-vel { width: calc(100vw - 20px); min-height: 0; padding: 18px 16px; font-size: 13px; }
}
.pb-kop { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; padding-bottom: 4mm; margin-bottom: 4mm; border-bottom: 2.5px solid #13302e; }
.pb-merk { font-family: var(--f-hand); font-size: 12pt; color: var(--teal); }
.pb-kop h2 { font-family: var(--f-display); font-size: 22pt; margin: 0; line-height: 1.1; }
.pb-kop h2 .pb-dag { font-family: var(--f-hand); font-weight: 400; font-size: 15pt; color: var(--koraal-diep); margin-left: .3em; }
.pb-kop p { margin: 1mm 0 0; font-size: 9.5pt; color: #4a5a58; }
.pb-kop__rechts { display: flex; flex-direction: column; gap: 2mm; min-width: 58mm; }
.pb-veld { font-size: 9.5pt; display: flex; gap: 2mm; align-items: flex-end; }
.pb-veld span { flex: 1; border-bottom: 1px solid #333; min-height: 5mm; font-family: var(--f-hand); font-size: 12pt; padding-left: 1mm; }
.pb-score { font-weight: 600; }
.pb-score span { max-width: 14mm; }
.pb-blok { margin-bottom: 4mm; break-inside: auto; }
.pb-blok h3 { display: flex; align-items: center; gap: 2mm; font-family: var(--f-display); font-size: 13pt; margin: 0 0 2.5mm; padding: 1.2mm 3mm; background: #f3e9d4; border-radius: 3mm; }
.pb-ico { font-size: 11pt; }
.pb-tekst { columns: 2; column-gap: 6mm; font-size: 10pt; line-height: 1.55; margin-bottom: 3mm; padding: 3mm 4mm; border: 1px solid #cfc4ab; border-radius: 3mm; }
.pb-tekst h4 { column-span: all; font-family: var(--f-display); font-size: 13pt; margin: 0 0 2mm; }
.pb-tekst p { margin: 0 0 2mm; }
.pb-alinea { display: inline-block; min-width: 4.5mm; height: 4.5mm; line-height: 4.5mm; text-align: center; border-radius: 50%; background: #f3e9d4; font-size: 7.5pt; font-weight: 700; margin-right: 1.5mm; }
.pb-gat { letter-spacing: 1px; }
.pb-vraag { display: flex; gap: 2.5mm; margin-bottom: 2.6mm; break-inside: avoid; }
.pb-nr { flex: none; min-width: 7.5mm; height: 6mm; padding: 0 1mm; display: inline-grid; place-items: center; border-radius: 1.5mm; background: #13302e; color: #fff; font-size: 8.5pt; font-weight: 700; }
.pb-vraagtekst .verhaal { display: inline; }
.pb-opties { display: grid; grid-template-columns: repeat(4, auto); justify-content: start; gap: .8mm 6mm; margin-top: 1mm; font-size: 9.8pt; }
.pb-opties--lang { grid-template-columns: 1fr 1fr; }
.pb-optie { display: inline-flex; gap: 1.6mm; align-items: baseline; }
.pb-rondje { flex: none; width: 4.4mm; height: 4.4mm; border: 1.2px solid #333; border-radius: 50%; display: inline-grid; place-items: center; font-size: 7pt; font-weight: 700; transform: translateY(.6mm); }
.pb-sommen { display: grid; grid-template-columns: 1fr 1fr; gap: 3mm 8mm; }
.pb-som { display: flex; gap: 2.5mm; align-items: flex-end; min-height: 8mm; break-inside: avoid; }
.pb-som--lang { grid-column: 1 / -1; align-items: flex-start; flex-wrap: wrap; }
.pb-somtekst { font-size: 11pt; }
.pb-som--lang .pb-somtekst { flex: 1 1 70%; font-size: 10pt; }
.pb-lijn { flex: 1 1 22mm; min-width: 22mm; max-width: 40mm; border-bottom: 1.2px solid #333; height: 6mm; }
.pb-som--lang .pb-lijn { flex: 0 0 34mm; margin-left: auto; }
.pb-sommen .pb-vraag { grid-column: 1 / -1; }
/* rekenwerkblad: één kolom, vaste antwoordkolom, kladvak waar nodig */
.pb-werk { flex: 1; display: flex; flex-direction: column; justify-content: space-between; gap: 5mm; }
.pb-groep { display: flex; flex-direction: column; flex: 1; justify-content: space-around; }
.pb-groepkop { display: flex; align-items: baseline; gap: 2.5mm; margin: 0 0 1.5mm; font-family: var(--f-display); font-size: 13pt; color: #13302e; }
.pb-groepkop span { font-family: var(--f-body); font-size: 9pt; font-weight: 600; color: var(--teal); text-transform: uppercase; letter-spacing: .06em; }
.pb-rij { display: grid; grid-template-columns: 9mm 1fr 40mm; column-gap: 4mm; align-items: end; padding: 2.2mm 0; border-bottom: 1px solid #eee6d4; break-inside: avoid; }
.pb-rij:last-child { border-bottom: 0; }
.pb-rijnr { align-self: start; width: 6.5mm; height: 6.5mm; border: 1.2px solid #13302e; border-radius: 50%; display: grid; place-items: center; font-size: 8.5pt; font-weight: 700; color: #13302e; }
.pb-rijvraag { font-size: 11pt; line-height: 1.45; align-self: start; padding-top: .3mm; }
.pb-rijvraag .verhaal { display: inline; }
.pb-antw { height: 7mm; border-bottom: 1.3px solid #333; }
.pb-klad {
  grid-column: 2 / 3; position: relative; height: 15mm; margin-top: 2mm; border: 1px solid #d8cfb8; border-radius: 2mm;
  background-image: linear-gradient(#ece5d3 1px, transparent 1px), linear-gradient(90deg, #ece5d3 1px, transparent 1px);
  background-size: 5mm 5mm; background-position: -1px -1px;
}
.pb-klad span { position: absolute; top: .6mm; right: 1.5mm; font-family: var(--f-hand); font-size: 8.5pt; color: #a99f88; }
@media screen and (max-width: 840px) { .pb-rij { grid-template-columns: 7mm 1fr 26mm; } }
.pb-voet { margin-top: auto; padding-top: 3mm; border-top: 1px dashed #bbb; display: flex; justify-content: space-between; font-size: 9pt; color: #555; }
.pb-sterren { font-size: 14pt; letter-spacing: 2mm; color: var(--zon-diep); }
.pb-vel--antwoorden { background: #fffdf7; }
.pb-antdag { break-inside: avoid; margin-bottom: 4mm; }
.pb-antdag h3 { font-family: var(--f-display); font-size: 12pt; margin: 0 0 1.5mm; }
.pb-anttabel { width: 100%; border-collapse: collapse; font-size: 8.8pt; line-height: 1.35; }
.pb-anttabel th, .pb-anttabel td { padding: 1.1mm 2mm; border-bottom: 1px solid #e3dcc9; vertical-align: top; text-align: left; }
.pb-anttabel th { width: 9mm; color: var(--teal); }
.pb-anttabel .pb-ant { width: 30mm; font-weight: 700; }
.pb-anttabel .pb-uitw { color: #3d4b49; }
.pb-anttabel .verhaal { display: inline; }

@media print {
  @page { size: A4; margin: 0; }
  html, body, .print-pagina { background: #fff !important; }
  .print-balk { display: none !important; }
  .vellen { padding: 0; gap: 0; display: block; }
  .pb-vel { box-shadow: none; width: 210mm; min-height: 297mm; break-after: page; }
  .pb-vel:last-child { break-after: auto; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* meten op echte A4-maat (KVM.print.pasAan), ook op kleine schermen */
.vellen--meet .pb-vel { width: 210mm !important; min-height: 297mm !important; padding: 13mm 14mm 12mm !important; font-size: 10.5pt !important; }
.vellen--meet .pb-rij { grid-template-columns: 9mm 1fr 40mm !important; }

/* ---------- groepspagina: illustratie, onderwerpen per vak, leerdoelen ---------- */
.groep-kop__rij { grid-template-columns: auto 1fr auto; }
.groep-kop__uil { position: relative; width: clamp(240px, 26vw, 330px); align-self: center; }
.groep-kop__uil img { border-radius: 22px; border: 3px solid var(--inkt); box-shadow: 6px 6px 0 var(--inkt); transform: rotate(1.5deg); background: var(--papier); }
.groep-kop__ballon { z-index: 1; }
.groep-kop__uil img { width: 100%; height: auto; display: block; }
.groep-kop__ballon {
  position: absolute; right: 92%; top: 4%; width: max-content; max-width: 210px; padding: .55rem .85rem;
  font-family: var(--f-hand); font-size: 1.15rem; line-height: 1.2; background: var(--kaart);
  border: 2px solid var(--inkt); border-radius: 16px 16px 4px 16px; box-shadow: 3px 3px 0 var(--inkt); transform: rotate(-3deg);
}
@media (max-width: 900px) { .groep-kop__rij { grid-template-columns: auto 1fr; } .groep-kop__uil { display: none; } }
.onderwerpen-kop { display: flex; align-items: center; gap: .5rem; margin: 1.25rem 0 .65rem; font-size: 1.05rem; font-family: var(--f-body); font-weight: 700; color: var(--inkt-zacht); }
.onderwerpen { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.onderwerp { min-height: 76px; }
.onderwerp b { overflow-wrap: break-word; hyphens: auto; }
.onderwerp--lezen .onderwerp__ico { background: var(--hemel-licht); }
.onderwerp--spelling .onderwerp__ico { background: var(--koraal-licht); }
.onderwerp--werkwoorden .onderwerp__ico { background: var(--gras-licht); }
.onderwerp--leestekens .onderwerp__ico { background: var(--zon-licht); }
.lvl--voorbeeld { opacity: .75; }
.leerdoelen__lijst { grid-template-columns: repeat(3, 1fr); column-gap: 1.5rem; }
@media (max-width: 820px) { .leerdoelen__lijst { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .leerdoelen__lijst { grid-template-columns: 1fr; } }
.groep-wissel { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; margin-top: 1.25rem; padding-top: 1rem; border-top: 1.5px dashed var(--lijn); }
.groep-wissel span { font-family: var(--f-hand); font-size: 1.2rem; margin-right: .3rem; }
.groep-wissel a, .groep-wissel b {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; text-decoration: none;
  font-family: var(--f-display); font-weight: 900; font-size: 1.35rem; color: var(--inkt);
  background: var(--c-licht); border: 2px solid var(--inkt);
}
.groep-wissel a:hover { background: var(--c); color: var(--inkt); transform: translateY(-2px); }
.groep-wissel b { background: var(--c); box-shadow: 0 3px 0 var(--inkt); }
@media (min-width: 1000px) { .onderwerpen > :last-child:nth-child(4n+1) { grid-column: span 2; } }
.pb-klad--groot { height: 27mm; }
@media (max-width: 560px) {
  .tabs { gap: 0; }
  .tabs a { flex: 1; flex-direction: column; gap: .1rem; justify-content: center; text-align: center; padding: .6rem .2rem .55rem; font-size: .88rem; }
  .groep-wissel span { flex-basis: 100%; }
}

/* leestekst op een eigen vel (groep 7-8): grotere letter, vult de A4 (KVM.print.pasAan) */
.pb-vel--tekst .pb-tekst { flex: 1; font-size: var(--tf, 11pt); line-height: 1.6; border: 0; padding: 0; margin: 0; column-gap: 8mm; column-rule: 1px solid #eee6d4; }
.pb-vel--tekst .pb-tekst h4 { font-size: 1.45em; margin: 0 0 3mm; }
.pb-vel--tekst .pb-tekst p { margin: 0 0 .7em; }
.pb-vel--tekst .pb-alinea { font-size: .7em; min-width: 1.5em; height: 1.5em; line-height: 1.5em; }
.pb-leestijd { font-weight: 600; color: var(--teal); }
/* vragenblad dat net te vol is: iets compacter */
.pb-vel--compact .pb-kop { padding-bottom: 2.5mm; margin-bottom: 3mm; }
.pb-vel--compact .pb-vraag { margin-bottom: 1.7mm; }
.pb-vel--compact .pb-vraagtekst { font-size: 10pt; line-height: 1.35; }
.pb-vel--compact .pb-opties { font-size: 9.3pt; line-height: 1.3; gap: .3mm 5mm; }
.pb-vel--compact .pb-voet { padding-top: 2mm; }