/* ==========================================================
   Spellinggenerator – Juf Zisa
   Stijl in lijn met andere PRO-tools
   ========================================================== */

:root {
  --zisa-blauw: #2C5F8D;
  --zisa-blauw-licht: #E8F1F8;
  --zisa-geel: #F5C842;
  --zisa-grijs: #F4F4F4;
  --zisa-tekst: #2A2A2A;
  --zisa-rand: #DADADA;
  --zisa-groen: #6BAE5A;
  --zisa-rood: #D9534F;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: 'Segoe UI', system-ui, sans-serif;
  background: var(--zisa-grijs);
  color: var(--zisa-tekst);
}

/* ===== Topbar ===== */
.topbar {
  background: var(--zisa-blauw);
  color: white;
  padding: 12px 20px;
  display: flex;
  align-items: center;
  gap: 16px;
}
.topbar h1 { margin: 0; font-size: 1.2rem; flex: 1; }
.terug {
  color: white;
  text-decoration: none;
  font-size: 0.9rem;
  padding: 6px 12px;
  border-radius: 6px;
  background: rgba(255,255,255,0.15);
}
.terug:hover { background: rgba(255,255,255,0.25); }
.badge {
  background: var(--zisa-geel);
  color: var(--zisa-blauw);
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: bold;
}

/* ===== Layout ===== */
.layout {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 16px;
  padding: 16px;
  max-width: 1400px;
  margin: 0 auto;
}

@media (max-width: 900px) {
  .layout { grid-template-columns: 1fr; }
}

/* ===== Sidebar ===== */
.sidebar {
  background: white;
  border-radius: 8px;
  padding: 16px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  height: fit-content;
}
.block { margin-bottom: 20px; }
.block h2 {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--zisa-blauw);
  margin: 0 0 8px 0;
}
.block label {
  display: block;
  margin: 6px 0;
  font-size: 0.9rem;
}
.block input[type="number"],
.block input[type="text"],
.block select {
  width: 100%;
  padding: 6px 8px;
  border: 1px solid var(--zisa-rand);
  border-radius: 4px;
  margin-top: 2px;
  font-family: inherit;
}

/* ===== Knoppen ===== */
.cat-knop, .graad-knop, .niveau-knop {
  display: block;
  width: 100%;
  padding: 8px 10px;
  margin-bottom: 4px;
  border: 1px solid var(--zisa-rand);
  background: white;
  border-radius: 6px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  font-size: 0.9rem;
  transition: all 0.15s;
}
.cat-knop:hover:not(.disabled),
.graad-knop:hover:not(.disabled),
.niveau-knop:hover {
  background: var(--zisa-blauw-licht);
  border-color: var(--zisa-blauw);
}
.cat-knop.actief, .graad-knop.actief, .niveau-knop.actief {
  background: var(--zisa-blauw);
  color: white;
  border-color: var(--zisa-blauw);
  font-weight: 600;
}
.cat-knop.disabled, .graad-knop.disabled {
  color: #999;
  background: #f8f8f8;
  cursor: not-allowed;
}
.binnenkort {
  font-size: 0.7rem;
  color: #aaa;
  font-style: italic;
  float: right;
}

/* Lijstje "Binnenkort beschikbaar" onder categorie-knoppen */
.binnenkort-blok {
  margin-top: 12px;
  padding: 8px 10px;
  background: #f8f8f8;
  border-left: 3px solid #ddd;
  border-radius: 4px;
}
.binnenkort-titel {
  font-size: 0.78rem;
  font-weight: 600;
  color: #888;
  margin: 0 0 4px 0;
}
.binnenkort-lijst {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.74rem;
  color: #999;
  line-height: 1.5;
}
.binnenkort-lijst li {
  padding-left: 12px;
  position: relative;
}
.binnenkort-lijst li::before {
  content: "•";
  position: absolute;
  left: 4px;
  color: #ccc;
}

.niveau-knoppen {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 4px;
}
.niveau-knoppen button {
  margin: 0;
  text-align: center;
  font-size: 0.85rem;
  padding: 8px 4px;
}
.niveau-uitleg {
  font-size: 0.8rem;
  color: #666;
  background: var(--zisa-blauw-licht);
  padding: 8px 10px;
  border-radius: 4px;
  margin-top: 8px;
  line-height: 1.4;
}

/* ===== Module instellingen (subtype-knoppen) ===== */
.subtype-knoppen {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
}
.subtype-knoppen button {
  margin: 0;
  padding: 6px;
  font-size: 0.8rem;
  border: 1px solid var(--zisa-rand);
  background: white;
  border-radius: 4px;
  cursor: pointer;
}
.subtype-knoppen button.actief {
  background: var(--zisa-geel);
  border-color: var(--zisa-geel);
  font-weight: 600;
}
.oefenvorm-lijst label {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 0;
  font-size: 0.88rem;
}

/* 3-koloms variant voor subcat-knoppen (Korte / Tweeklanken / Verwar) */
.subcat-3kol {
  grid-template-columns: 1fr 1fr 1fr !important;
}

/* Ontbrekende letter: rooster met vakje + rest van het woord */
.ontbreekt-rooster {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px 24px;
  margin-top: 10px;
}
.ontbreekt-cel {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 1.3rem;
  font-family: 'Comic Sans MS', 'Segoe Print', sans-serif;
}
.ontbreekt-nr {
  font-weight: bold;
  color: var(--zisa-blauw);
  min-width: 24px;
  font-size: 1rem;
}
.ontbreekt-vakje {
  display: inline-block;
  width: 32px;
  height: 36px;
  border: 2px solid #444;
  border-radius: 4px;
  background: #fff;
}
.ontbreekt-rest {
  letter-spacing: 1px;
}

/* Inline variant (in zinnen) */
.ontbreekt-vakje-inline {
  display: inline-block;
  width: 26px;
  height: 28px;
  border: 2px solid #444;
  border-radius: 4px;
  background: #fff;
  vertical-align: middle;
  margin: 0 2px;
}

/* Klankgroep checkboxes (ie/eu/ui/oe/aai/ooi/oei/eeuw/ieuw) */
.klankgroep-keuze {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px 10px;
  margin-top: 4px;
}
.klankgroep-keuze label {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.88rem;
  padding: 2px 0;
}

/* ===== Lijntype knoppen (globaal) ===== */
.lijn-knoppen {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 4px;
}
.lijn-knop {
  padding: 8px 4px;
  border: 1px solid var(--zisa-rand);
  background: white;
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.78rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.lijn-knop.actief {
  background: var(--zisa-blauw);
  color: white;
  border-color: var(--zisa-blauw);
  font-weight: 600;
}
/* Mini-preview boven het label van de knop */
.lijn-mini {
  width: 38px;
  height: 18px;
  background-position: left center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.lijn-mini.enkel    { border-bottom: 1.5px solid currentColor; }
.lijn-mini.dubbel   { border-top: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; }
.lijn-mini.vier {
  border: none;
  background:
    linear-gradient(to bottom, currentColor 1.5px, transparent 1.5px) top    / 100% 100% no-repeat,
    linear-gradient(to bottom, currentColor 1px,   transparent 1px)   0 33%  / 100% 100% no-repeat,
    linear-gradient(to bottom, currentColor 1.5px, transparent 1.5px) 0 66%  / 100% 100% no-repeat,
    linear-gradient(to bottom, currentColor 1px,   transparent 1px)   bottom / 100% 100% no-repeat;
  opacity: 0.85;
}

/* Per-oefenvorm override: kleine select naast de checkbox */
.oefenvorm-rij {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 4px 2px 4px;
  font-size: 0.88rem;
  background: #FAFAFA;
  border-radius: 4px;
  margin-top: 4px;
}
.oefenvorm-rij:hover {
  background: var(--zisa-blauw-licht);
}
.oefenvorm-label {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  cursor: pointer;
}
.oef-icoon {
  font-size: 1.1rem;
  width: 22px;
  text-align: center;
}
.oef-naam {
  flex: 1;
  font-weight: 500;
}
.oefenvorm-rij select {
  padding: 2px 4px;
  border: 1px solid var(--zisa-rand);
  border-radius: 4px;
  font-size: 0.75rem;
  background: white;
  max-width: 90px;
}
.oef-uitleg {
  font-size: 0.75rem;
  color: #666;
  padding: 0 4px 8px 32px;
  line-height: 1.4;
  margin-bottom: 4px;
}

/* ===== Tabs voor niveau-overzicht in oefenvormen ===== */
.oef-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 2px;
  background: var(--zisa-rand);
  padding: 2px;
  border-radius: 6px;
  margin-bottom: 8px;
}
.oef-tab {
  border: none;
  background: white;
  padding: 6px 4px;
  border-radius: 4px;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.82rem;
  color: #666;
  font-weight: 500;
  transition: all 0.15s;
}
.oef-tab:hover {
  background: var(--zisa-blauw-licht);
}
.oef-tab.actief {
  background: var(--zisa-blauw);
  color: white;
  font-weight: 600;
}

/* Mini-reset knop in oefenvormen-titel */
.mini-btn {
  background: white;
  border: 1px solid var(--zisa-rand);
  border-radius: 4px;
  padding: 2px 8px;
  font-size: 0.7rem;
  cursor: pointer;
  color: #666;
  font-family: inherit;
}
.mini-btn:hover {
  background: var(--zisa-blauw-licht);
  border-color: var(--zisa-blauw);
  color: var(--zisa-blauw);
}

/* ===== Actie knoppen ===== */
.actie-knoppen {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 16px;
}
.primair, .secundair {
  padding: 10px;
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.9rem;
  border: none;
  transition: filter 0.15s;
}
.primair {
  background: var(--zisa-blauw);
  color: white;
}
.secundair {
  background: white;
  color: var(--zisa-blauw);
  border: 1px solid var(--zisa-blauw);
}
.primair:hover, .secundair:hover { filter: brightness(0.95); }

/* Hoofdknop "Voeg toe" — extra zichtbaar */
.primair-groot {
  font-size: 1rem;
  padding: 14px 16px;
  background: #4caf50; /* groen om "toevoegen" te markeren */
}

/* Download-groep onder de hoofdknop */
.download-groep {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed #ccc;
}
.download-groep-titel {
  font-size: 0.78rem;
  color: #666;
  margin: 0 0 6px 0;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.download-knop {
  width: 100%;
  margin-bottom: 4px;
}
.download-niveaus {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 4px;
  margin: 4px 0;
}
.download-niveau-knop {
  font-size: 0.78rem;
  padding: 6px 4px;
}

/* Wis-knop — rood om te waarschuwen */
.secundair-rood {
  margin-top: 10px;
  padding: 8px;
  background: white;
  color: #c33;
  border: 1px solid #d99;
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.85rem;
}
.secundair-rood:hover {
  background: #fee;
}

/* Welkomst-tekst in lege bundel */
.preview-leeg {
  text-align: center;
  padding: 60px 30px;
  color: #666;
}
.preview-leeg h3 {
  margin-bottom: 12px;
  color: #333;
}
.preview-leeg p {
  font-size: 0.95rem;
  line-height: 1.5;
}

/* Wikkel rond elk werkblad in de bundel-preview met ✕ knop */
.bundel-item-wrap {
  position: relative;
  margin-bottom: 24px;
}
.bundel-item-verwijder-knop {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #fff;
  color: #c33;
  border: 2px solid #c33;
  font-size: 1.05rem;
  font-weight: bold;
  cursor: pointer;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  transition: all 0.15s;
}
.bundel-item-verwijder-knop:hover {
  background: #c33;
  color: white;
  transform: scale(1.1);
}
/* In PDF-export verbergen we de ✕ knop */
.pdf-render .bundel-item-verwijder-knop {
  display: none !important;
}

/* +1 woord knop linksboven het werkblad (alleen in preview, niet in PDF) */
.bundel-item-plus-knop {
  position: absolute;
  top: -4px;
  left: -4px;
  padding: 6px 12px;
  border-radius: 16px;
  background: #4caf50;
  color: white;
  border: 2px solid #388e3c;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  z-index: 10;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  transition: all 0.15s;
  font-family: inherit;
}
.bundel-item-plus-knop:hover {
  background: #388e3c;
  transform: scale(1.05);
}
/* In PDF-export verbergen */
.pdf-render .bundel-item-plus-knop {
  display: none !important;
}

/* Verborgen-class voor knoppen die nog niet relevant zijn */
.verborgen {
  display: none !important;
}

/* ✕ verwijder-knop op individuele woord/zin-rijen.
   Standaard verborgen — wordt alleen zichtbaar binnen .bundel-item-wrap
   (= in de preview). In de PDF zitten werkbladen niet in een wrap, dus
   knoppen blijven verborgen.
   Positie: linksboven van de rij, klein, rood, lichte hover-feedback. */
.rij-verwijder-knop {
  display: none;
}
.bundel-item-wrap .rij-verwijder-knop {
  display: flex;
  position: absolute;
  top: 2px;
  left: 2px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  color: #c33;
  border: 1.5px solid #c33;
  font-size: 0.75rem;
  font-weight: bold;
  cursor: pointer;
  z-index: 5;
  align-items: center;
  justify-content: center;
  padding: 0;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
  transition: all 0.12s;
  opacity: 0;
}
/* De rij waar deze knop in zit moet position:relative hebben — anders
   plaatst de knop zich op het werkblad-niveau. We voegen relative toe
   aan elke rij die een ✕-knop bevat. */
.bundel-item-wrap .ov01-cel,
.bundel-item-wrap .ov02-rij,
.bundel-item-wrap .ov03-rij,
.bundel-item-wrap .ov05-rij,
.bundel-item-wrap .ov06-zin-rij,
.bundel-item-wrap .ov06-uitbreiding-rij {
  position: relative;
}
/* Knop verschijnt op hover van de rij — minder visueel rommelig */
.bundel-item-wrap .ov01-cel:hover .rij-verwijder-knop,
.bundel-item-wrap .ov02-rij:hover .rij-verwijder-knop,
.bundel-item-wrap .ov03-rij:hover .rij-verwijder-knop,
.bundel-item-wrap .ov05-rij:hover .rij-verwijder-knop,
.bundel-item-wrap .ov06-zin-rij:hover .rij-verwijder-knop,
.bundel-item-wrap .ov06-uitbreiding-rij:hover .rij-verwijder-knop,
.bundel-item-wrap .rij-verwijder-knop:hover {
  opacity: 1;
}
.bundel-item-wrap .rij-verwijder-knop:hover {
  background: #c33;
  color: white;
  transform: scale(1.15);
}

/* ============================================================
   OV06 — Zinnen invullen
   ============================================================ */
.ov06-blad {
  font-family: 'Comic Sans MS', 'Segoe Print', sans-serif;
  width: 21cm;
  box-sizing: border-box;
  padding: 1.5cm 1.8cm !important;
  margin: 0 auto;
  background: white;
  color: #222;
  box-shadow: none !important;
  position: relative;
}
.preview-modus .ov06-blad + .ov06-blad {
  margin-top: 20px;
}

/* Woordbank bovenaan */
.ov06-woordbank {
  margin-top: 14px;
  padding: 12px 14px;
  background: #fff8e1;
  border: 2px dashed #ffa500;
  border-radius: 8px;
}
.ov06-bank-titel {
  font-weight: 700;
  margin-bottom: 6px;
  font-size: 0.95rem;
  color: #444;
}
.ov06-bank-woorden {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
}
.ov06-bank-woord {
  font-size: 1.05rem;
  font-weight: 600;
  background: white;
  padding: 4px 10px;
  border-radius: 4px;
  border: 1px solid #ddd;
}

/* Zinnen-lijst */
.ov06-zinnen-lijst {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ov06-zin-rij {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 4px;
}
.ov06-nr {
  font-weight: 700;
  font-size: 1rem;
  color: #444;
  min-width: 24px;
  flex-shrink: 0;
}
.ov06-zin-inhoud {
  flex: 1;
}
/* ⭐ Oefenen: keuzewoorden + zin op één rij */
.ov06-zin-rij-basis {
  flex-wrap: wrap;
}
.ov06-zin-rij-basis .ov06-keuze-rij {
  flex-shrink: 0;
  margin-bottom: 0;
}
.ov06-keuze-rij {
  display: flex;
  gap: 8px;
  margin-bottom: 4px;
  font-weight: 600;
  align-items: center;
}
.ov06-keuze-woord {
  display: inline-block;
  border: 2px solid #444;
  border-radius: 16px;
  padding: 2px 12px;
  background: white;
  font-size: 0.95rem;
}
.ov06-keuze-juist {
  background: #c8e6c9;
  border-color: #4caf50;
  border-width: 2.5px;
}
.ov06-zin-tekst {
  flex: 1;
  font-size: 1rem;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  line-height: 1.6;
}

/* Inline streep (canvas in tekst) */
.ov06-streep-inline {
  display: inline-block;
  vertical-align: middle;
  width: 200px;
  margin: 0 4px;
}
.ov06-streep-inline canvas.schrijflijn-canvas {
  display: inline-block;
  vertical-align: middle;
  width: 200px;
}
.ov06-streep-fallback {
  display: inline-block;
  border-bottom: 2px solid #888;
  width: 180px;
  margin: 0 4px;
}
.ov06-antwoord-inline {
  display: inline-block;
  background: #e3f2fd;
  color: #1f4e78;
  padding: 0 6px;
  border-radius: 3px;
  font-weight: 700;
  margin: 0 2px;
}

/* Uitbreiding-niveau: woord links, schrijflijn rechts (zo veel mogelijk ruimte) */
.ov06-uitbreiding-rij {
  padding: 8px 4px;
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 8px;
  align-items: center;
}
.ov06-uitbreiding-woord {
  font-weight: 700;
  font-size: 1.05rem;
  color: #444;
  padding-right: 4px;
  text-align: left;
}
.ov06-uitbreiding-lijn canvas.schrijflijn-canvas {
  display: block;
  width: 100%;
}

/* ============================================================
   OV05 — Klank kiezen + inkleuren
   Verticale layout: plaatje boven, klank-keuze midden, schrijflijn onder
   ============================================================ */
.ov05-blad {
  font-family: 'Comic Sans MS', 'Segoe Print', sans-serif;
  width: 21cm;
  box-sizing: border-box;
  padding: 1.5cm 1.8cm !important;
  margin: 0 auto;
  background: white;
  color: #222;
  box-shadow: none !important;
  position: relative;
}
.preview-modus .ov05-blad + .ov05-blad {
  margin-top: 20px;
}

/* Rooster: 3 of 4 kolommen, elke cel verticaal */
.ov05-rooster {
  margin-top: 12px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
}

/* Eén "rij" = één woord, verticaal opgebouwd */
.ov05-rij {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px 8px;
  border: 1.5px solid #ddd;
  border-radius: 8px;
  background: #fafafa;
}

/* Plaatje bovenaan */
.ov05-plaatje {
  font-size: 2.4rem;
  text-align: center;
  line-height: 1;
}
.ov05-plaatje-leeg {
  height: 8px; /* kleine spacer als geen plaatje */
}

/* Middelste deel: klank-keuze of streepje */
.ov05-midden {
  width: 100%;
  display: flex;
  justify-content: center;
}

/* BASIS: woord met cirkels */
.ov05-woord-met-keuze {
  font-size: 1.15rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 2px;
  flex-wrap: nowrap;
}
.ov05-woord-deel {
  display: inline-block;
}
.ov05-cirkel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #444;
  border-radius: 50%;
  min-width: 30px;
  height: 30px;
  padding: 0 4px;
  margin: 0 2px;
  font-size: 0.9rem;
  background: white;
  font-weight: 600;
}
.ov05-cirkel-juist {
  background: #c8e6c9;
  border-color: #4caf50;
  border-width: 2.5px;
}

/* KERN: woord met streepje */
.ov05-woord-met-streepje {
  font-size: 1.2rem;
  font-weight: 600;
  text-align: center;
}
.ov05-streepje {
  display: inline-block;
  color: #888;
  letter-spacing: 1px;
  margin: 0 4px;
}
.ov05-streepje-antwoord {
  display: inline-block;
  color: #2196F3;
  font-weight: 700;
  margin: 0 4px;
  background: #e3f2fd;
  padding: 0 6px;
  border-radius: 3px;
}

/* Schrijflijn onderaan — voor alle niveaus */
.ov05-lijn-cel {
  position: relative;
  width: 100%;
}
.ov05-lijn-cel canvas.schrijflijn-canvas {
  display: block;
  width: 100%;
}
.ov05-lijn-antwoord {
  position: absolute;
  top: 50%;
  left: 8px;
  transform: translateY(-50%);
  font-size: 0.95rem;
  font-weight: 600;
  color: #2196F3;
  z-index: 2;
  font-family: 'Comic Sans MS', sans-serif;
  background: white;
  padding: 0 4px;
  line-height: 1;
}

.ov05-niet-passend {
  color: #c33;
  font-size: 0.85rem;
  font-style: italic;
  text-align: center;
}

/* ============================================================
   OV04 — Categoriseren op klank
   ============================================================ */
.ov04-blad {
  font-family: 'Comic Sans MS', 'Segoe Print', sans-serif;
  width: 21cm;
  box-sizing: border-box;
  padding: 1.0cm 1.5cm !important;
  margin: 0 auto;
  background: white;
  color: #222;
  box-shadow: none !important;
  position: relative;
}
.preview-modus .ov04-blad + .ov04-blad {
  margin-top: 20px;
}

/* Legende bovenaan */
.ov04-legende {
  display: flex;
  justify-content: center;
  gap: 24px;
  margin: 14px 0;
  padding: 8px;
  background: #f9f9f9;
  border-radius: 6px;
}
.ov04-legende-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.9rem;
}
.ov04-legende-kleur {
  display: inline-block;
  width: 18px;
  height: 18px;
  border-radius: 3px;
  border: 1px solid #999;
}

/* Woorden-lijst */
.ov04-woorden-titel {
  margin-top: 14px;
  font-weight: 600;
  font-size: 0.92rem;
}
.ov04-woorden-lijst {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 22px;
  padding: 10px 14px;
  margin-top: 6px;
  margin-bottom: 14px;
  background: #fafafa;
  border: 1.5px solid #ddd;
  border-radius: 6px;
}
.ov04-woord {
  font-size: 1.15rem;
  font-weight: 600;
  color: #1a1a1a;
}
.klank-gekleurd {
  font-weight: 700;
}

/* Kolommen onderaan */
.ov04-kolommen {
  display: grid;
  gap: 12px;
  margin-top: 8px;
}
.ov04-kolommen-2 { grid-template-columns: 1fr 1fr; }
.ov04-kolommen-3 { grid-template-columns: 1fr 1fr 1fr; }

.ov04-kolom {
  border: 1.5px solid #ccc;
  border-radius: 6px;
  overflow: hidden;
}
.ov04-kolom-titel {
  color: white;
  text-align: center;
  font-weight: 700;
  padding: 6px;
  font-size: 0.95rem;
}
.ov04-kolom-lijnen {
  padding: 8px 8px 4px 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ov04-kolom-lijn {
  position: relative;
}
.ov04-kolom-lijn canvas.schrijflijn-canvas {
  display: block;
  width: 100%;
}

/* Antwoord op de schrijfregel (oplossingen) */
.ov04-lijn-antwoord {
  position: absolute;
  top: 50%;
  left: 6px;
  transform: translateY(-50%);
  font-size: 0.9rem;
  font-weight: 600;
  color: #2196F3;
  z-index: 2;
  font-family: 'Comic Sans MS', sans-serif;
  background: white;
  padding: 0 3px;
  line-height: 1;
}

/* Zijbalk-instellingen voor OV04 */
.ov04-kolom-rij {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 6px;
  margin-bottom: 6px;
  align-items: center;
}
.ov04-kolom-rij input[type="color"] {
  width: 32px;
  height: 28px;
  padding: 0;
  border: 1px solid #ccc;
  border-radius: 4px;
  cursor: pointer;
}
.ov04-kolom-rij select.ov04-klank {
  grid-column: 2;
  width: 100%;
  font-size: 0.82rem;
  padding: 4px;
}
.ov04-kolom-rij input.ov04-titel {
  grid-column: 1 / 3;
  width: 100%;
  font-size: 0.82rem;
  padding: 4px 6px;
  margin-top: 2px;
}

/* ============================================================
   OV03 — Letters door elkaar
   ============================================================ */
.ov03-blad {
  font-family: 'Comic Sans MS', 'Segoe Print', sans-serif;
  width: 21cm;
  box-sizing: border-box;
  padding: 1.5cm 1.8cm !important;
  margin: 0 auto;
  background: white;
  color: #222;
  box-shadow: none !important;
  position: relative;
}
.preview-modus .ov03-blad + .ov03-blad {
  margin-top: 20px;
}

/* Rooster van rijen */
.ov03-rooster {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Eén rij — layout hangt af van niveau (met/zonder plaatje) */
.ov03-rij {
  display: grid;
  gap: 12px;
  align-items: center;
  padding: 4px 0;
  border-bottom: 1px dashed #ddd;
}
.ov03-rij:last-child {
  border-bottom: none;
}
/* Basis: plaatje + letters + lijn */
.ov03-rij-basis {
  grid-template-columns: 60px auto 1fr;
}
/* Kern + Verdieping: geen plaatje, dus: letters + lijn */
.ov03-rij-kern,
.ov03-rij-verdieping {
  grid-template-columns: auto 1fr;
}

/* Plaatje-cel */
.ov03-plaatje {
  font-size: 2.2rem;
  text-align: center;
  width: 50px;
  line-height: 1;
}

/* Letters in losse hokjes */
.ov03-letters {
  display: flex;
  gap: 6px;
}
.ov03-hokje {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 38px;
  border: 2px solid #444;
  border-radius: 4px;
  background: white;
  font-size: 1.3rem;
  font-weight: 700;
  color: #1a1a1a;
  font-family: 'Comic Sans MS', 'Segoe Print', sans-serif;
}
/* Eerste letter blauw bij kern-niveau */
.ov03-hokje-blauw {
  color: #2196F3;
  border-color: #2196F3;
  background: #e3f2fd;
}

/* Schrijflijn-cel */
.ov03-lijn-cel {
  position: relative;
  width: 100%;
}
.ov03-lijn-cel canvas.schrijflijn-canvas {
  display: block;
  width: 100%;
}

/* Antwoord op de schrijfregel (oplossingen) */
.ov03-lijn-antwoord {
  position: absolute;
  top: 50%;
  left: 8px;
  transform: translateY(-50%);
  font-size: 1.05rem;
  font-weight: 600;
  color: #2196F3;
  z-index: 2;
  font-family: 'Comic Sans MS', sans-serif;
  background: white;
  padding: 0 4px;
  line-height: 1;
}

/* ============================================================
   OV02 — Woord 3x overschrijven
   ============================================================ */
.ov02-blad {
  font-family: 'Comic Sans MS', 'Segoe Print', sans-serif;
  width: 21cm;
  box-sizing: border-box;
  padding: 1.5cm 1.8cm !important;
  margin: 0 auto;
  background: white;
  color: #222;
  box-shadow: none !important;
  position: relative;
}
.preview-modus .ov02-blad + .ov02-blad {
  margin-top: 20px;
}

/* Rooster van rijen — elke rij is één woord */
.ov02-rooster {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Eén rij = plaatje + woord + 3 schrijflijnen */
.ov02-rij {
  display: grid;
  grid-template-columns: auto 110px 1fr;
  gap: 12px;
  align-items: center;
  padding: 4px 0;
  border-bottom: 1px dashed #ddd;
}
.ov02-rij:last-child {
  border-bottom: none;
}

/* Plaatje-cel */
.ov02-plaatje {
  font-size: 2.2rem;
  text-align: center;
  width: 50px;
  line-height: 1;
}

/* Woord-cel (in vetgedrukt zwart) */
.ov02-woord {
  font-size: 1.05rem;
  font-weight: 600;
  color: #1a1a1a;
}

/* 3 schrijflijnen naast elkaar */
.ov02-lijnen-blok {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  width: 100%;
}
.ov02-lijn-cel {
  position: relative;
}
.ov02-lijn-cel canvas.schrijflijn-canvas {
  display: block;
  width: 100%;
}

/* Antwoord op de schrijfregel (oplossingen) */
.ov02-lijn-antwoord {
  position: absolute;
  top: 50%;
  left: 6px;
  transform: translateY(-50%);
  font-size: 0.85rem;
  font-weight: 600;
  color: #2196F3;
  z-index: 2;
  font-family: 'Comic Sans MS', sans-serif;
  background: white;
  padding: 0 3px;
  line-height: 1;
}

/* Bij "geen plaatje": sluit de plaatje-kolom */
.ov02-rij:not(:has(.ov02-plaatje)) {
  grid-template-columns: 110px 1fr;
}

/* Helpers voor instellingen-blokken (consistent met OV01) */
.ov-instel-blok {
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px dashed #e0e0e0;
}
.ov-instel-blok:last-of-type {
  border-bottom: none;
}
.ov-instel-titel {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  color: var(--zisa-blauw);
  margin-bottom: 6px;
}
.ov-instel-nr {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--zisa-blauw);
  color: white;
  font-size: 0.78rem;
  font-weight: bold;
}

/* ===== BEWERKEN-MODUS ===== */
/* Wanneer body.bewerk-aan, krijgen alle [data-bewerk-id] elementen
   een gele achtergrond zodat duidelijk is wat aanpasbaar is. */
body.bewerk-aan [data-bewerk-id] {
  background: #FFF8C4;
  outline: 1.5px dashed #D4A800;
  outline-offset: 2px;
  border-radius: 3px;
  cursor: text;
  transition: background 0.15s;
}
body.bewerk-aan [data-bewerk-id]:hover {
  background: #FFEC8A;
}
body.bewerk-aan [data-bewerk-id]:focus {
  background: #FFFFFF;
  outline: 2px solid var(--zisa-blauw);
  outline-offset: 2px;
}

/* Knop in actieve staat */
#bewerken-toggle.actief {
  background: var(--zisa-geel);
  color: var(--zisa-blauw);
  border-color: var(--zisa-geel);
  font-weight: 600;
}

/* ===== Preview paneel ===== */
.preview-paneel {
  background: white;
  border-radius: 8px;
  padding: 24px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  min-height: 600px;
}

/* ===== OPLOSSINGEN-MODUS ===== */
/* Antwoorden in rood, op of in de schrijflijnen/vakjes */
.antwoord {
  color: #D9534F;
  font-weight: bold;
  font-family: 'Comic Sans MS', 'Segoe Print', sans-serif;
}
/* Antwoord ON een schrijflijn: positioneer rechtboven de lijn */
.dictee-lijn .antwoord,
.schrijflijn .antwoord {
  display: inline-block;
  padding: 0 4px;
  position: relative;
  top: -2px;
}
/* Antwoord IN een vakje (b/d ontbrekende letter) */
.ontbreekt-vakje .antwoord,
.ontbreekt-vakje-inline .antwoord {
  font-size: 1.1rem;
  display: inline-block;
  padding-top: 4px;
}
/* Badge "OPLOSSINGEN" in de header */
.oplossingen-badge {
  display: inline-block;
  margin-left: 12px;
  background: #D9534F;
  color: white;
  padding: 2px 10px;
  border-radius: 4px;
  font-size: 0.8rem;
  font-weight: bold;
  letter-spacing: 0.5px;
  vertical-align: middle;
}
/* Het werkblad zelf krijgt een rode rand om het visueel te onderscheiden */
.werkblad.met-antwoorden {
  border-left: 4px solid #D9534F;
}

/* ============================================================
   WOORDENKIEZER MODAL
   ============================================================ */
.wk-modal {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.wk-modal-inhoud {
  background: white;
  border-radius: 10px;
  width: 100%;
  max-width: 900px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}
.wk-modal-header {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--zisa-rand);
}
.wk-modal-header h2 {
  margin: 0;
  font-size: 1.2rem;
  color: var(--zisa-blauw);
}
.wk-teller-rij {
  display: flex;
  align-items: center;
  gap: 10px;
}
.wk-teller {
  font-size: 0.9rem;
  color: #555;
  background: var(--zisa-blauw-licht);
  padding: 4px 12px;
  border-radius: 12px;
}
.wk-teller strong {
  color: var(--zisa-blauw);
  font-size: 1rem;
}
.wk-sluiten {
  border: none;
  background: transparent;
  font-size: 1.4rem;
  cursor: pointer;
  color: #888;
  padding: 4px 10px;
  border-radius: 4px;
}
.wk-sluiten:hover {
  background: #f0f0f0;
  color: #333;
}
.wk-mini-btn {
  background: white;
  border: 1px solid var(--zisa-rand);
  border-radius: 4px;
  padding: 4px 10px;
  font-size: 0.78rem;
  cursor: pointer;
  color: #666;
  font-family: inherit;
}
.wk-mini-btn:hover {
  background: var(--zisa-blauw-licht);
  color: var(--zisa-blauw);
}

.wk-modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px 20px;
}

/* Tabs */
.wk-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 2px solid var(--zisa-rand);
  margin-bottom: 16px;
}
.wk-tab {
  border: none;
  background: transparent;
  padding: 10px 20px;
  font-size: 0.95rem;
  font-family: inherit;
  cursor: pointer;
  color: #666;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  transition: all 0.15s;
}
.wk-tab:hover {
  color: var(--zisa-blauw);
}
.wk-tab.actief {
  color: var(--zisa-blauw);
  font-weight: 600;
  border-bottom-color: var(--zisa-blauw);
}

.wk-leerjaar-keuze {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.wk-leerjaar-keuze select {
  padding: 6px 10px;
  border: 1px solid var(--zisa-rand);
  border-radius: 4px;
  font-family: inherit;
}

/* Categorie-blokken */
.wk-categorie-blok {
  margin-bottom: 16px;
  border: 1px solid var(--zisa-rand);
  border-radius: 6px;
  overflow: hidden;
}
.wk-groep-titel {
  background: var(--zisa-blauw);
  color: white;
  padding: 8px 14px;
  font-size: 0.95rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
}
.wk-groep-titel:hover {
  filter: brightness(1.1);
}
.wk-groep-master {
  cursor: pointer;
  margin: 0;
  width: 16px;
  height: 16px;
}
.wk-groep-teller {
  margin-left: auto;
  opacity: 0.9;
}
.wk-cat-titel {
  background: var(--zisa-blauw-licht);
  padding: 6px 14px;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--zisa-blauw);
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid var(--zisa-rand);
}
.wk-cat-titel:first-child { border-top: none; }
.wk-cat-acties {
  display: flex;
  gap: 4px;
}
.wk-cat-mini-btn {
  background: white;
  border: 1px solid var(--zisa-rand);
  border-radius: 3px;
  padding: 2px 8px;
  font-size: 0.72rem;
  cursor: pointer;
  font-family: inherit;
}
.wk-cat-mini-btn:hover {
  background: var(--zisa-blauw);
  color: white;
}

.wk-woordenrooster {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 4px;
  padding: 8px 14px;
  background: white;
}
.wk-woord-vinkje {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px;
  border-radius: 3px;
  font-size: 0.85rem;
  cursor: pointer;
  transition: background 0.1s;
}
.wk-woord-vinkje:hover {
  background: var(--zisa-blauw-licht);
}
.wk-woord-vinkje input {
  flex-shrink: 0;
}
.wk-woord-vinkje.gekozen {
  background: #FFF8C4;
  font-weight: 500;
}

.wk-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 14px 20px;
  border-top: 1px solid var(--zisa-rand);
}

.wk-binnenkort {
  font-size: 0.95rem;
  background: var(--zisa-blauw-licht);
  padding: 16px;
  border-radius: 6px;
  color: #555;
  line-height: 1.6;
}

/* Schrijflijn — canvas-versie (5 types uit schrijfgenerator) */
.ov01-canvas-wrap {
  width: 100%;
  margin-bottom: 4px;
  position: relative; /* zodat antwoord absoluut gepositioneerd kan worden */
}
.ov01-canvas-wrap canvas.schrijflijn-canvas {
  display: block;
  width: 100%;
}

/* Antwoord op de schrijfregel (oplossing OV01).
   Gepositioneerd op verticaal midden = de schrijfzone tussen mid1 en base lijnen. */
.ov01-lijn-antwoord {
  position: absolute;
  top: 50%;
  left: 6px;
  transform: translateY(-50%);
  font-size: 0.95rem;
  font-weight: 600;
  color: #2196F3;
  z-index: 2;
  font-family: 'Comic Sans MS', sans-serif;
  background: white;
  padding: 0 4px;
  line-height: 1;
}

/* Zin-blok canvas */
.ov01-zin-canvas-wrap {
  width: 100%;
  margin-top: 6px;
  position: relative;
}
.ov01-zin-canvas-wrap canvas.schrijflijn-canvas {
  display: block;
  width: 100%;
}

/* Richtlijn-tekst onder zin-vak in oplossing */
.ov01-zin-richtlijn {
  margin: 8px 0 0 0;
  font-size: 0.85rem;
  color: #666;
  font-style: italic;
}

/* Fallback (oude eenvoudige basislijntjes — alleen als canvas-module niet werkt) */
.ov01-schrijflijn {
  border-bottom: 1.2px solid #333;
  width: 100%;
  display: block;
}
.ov01-blad.lijnhoogte-middel .ov01-schrijflijn { 
  height: 16px; 
  min-height: 16px;
}
.ov01-blad.lijnhoogte-klein .ov01-schrijflijn  { 
  height: 11px;
  min-height: 11px;
}

/* Lijntype-keuze — 5 radio-opties als kleine knop-cards met canvas-voorbeeld */
.lijntype-keuze {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
  margin-top: 4px;
}
.lijntype-radio {
  cursor: pointer;
  text-align: center;
  font-size: 0.7rem;
  position: relative;
}
.lijntype-radio input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
}
.lijntype-radio .lijntype-naam {
  display: block;
  padding: 4px 2px 6px 2px;
  border: 1.5px solid var(--zisa-rand);
  border-radius: 4px;
  background: white;
  color: #555;
  transition: all 0.1s;
}
.lijntype-radio .lijntype-preview {
  display: block;
  width: 100%;
  height: 28px;
  margin-bottom: 2px;
  background: white;
  border-radius: 2px;
}
.lijntype-radio .lijntype-label {
  display: block;
  font-size: 0.7rem;
  line-height: 1.1;
  font-weight: 600;
}
.lijntype-radio .lijntype-label small {
  display: block;
  font-size: 0.6rem;
  font-weight: normal;
  color: #888;
  margin-top: 1px;
}
.lijntype-radio:hover .lijntype-naam {
  border-color: var(--zisa-blauw);
  background: var(--zisa-blauw-licht);
}
.lijntype-radio input[type="radio"]:checked + .lijntype-naam {
  border-color: var(--zisa-blauw);
  border-width: 2.5px;
  background: var(--zisa-blauw-licht);
}
.lijntype-radio input[type="radio"]:checked + .lijntype-naam .lijntype-label {
  color: var(--zisa-blauw);
}

/* === Niveau-vinkjes (differentiatie-bundel) === */
.ov-niveau-vinkjes {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 6px;
}
.ov-niveau-vink {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border: 1.5px solid var(--zisa-rand);
  border-radius: 4px;
  cursor: pointer;
  background: white;
  transition: all 0.1s;
}
.ov-niveau-vink:hover {
  border-color: var(--zisa-blauw);
  background: var(--zisa-blauw-licht);
}
.ov-niveau-vink.actief {
  border-color: var(--zisa-blauw);
  background: var(--zisa-blauw-licht);
}
.ov-niveau-vink input[type="checkbox"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
  flex-shrink: 0;
}
.ov-niveau-vink .ov-niveau-naam {
  display: flex;
  flex-direction: column;
  gap: 1px;
  font-size: 0.85rem;
}
.ov-niveau-vink .ov-niveau-naam strong {
  color: var(--zisa-blauw);
}
.ov-niveau-vink .ov-niveau-naam small {
  color: #888;
  font-size: 0.72rem;
}

/* === Niveau-badge op werkblad === */
.ov01-niveau-badge {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: normal;
  padding: 2px 8px;
  border-radius: 10px;
  margin-left: 8px;
  vertical-align: middle;
  background: white;
}
/* Uitbreidings-blok (4 sterren) */
.ov01-uitbreiding-blok {
  border: 2px dashed #FFA500;
  background: #FFF8E1;
  padding: 10px 14px;
  border-radius: 6px;
  margin-top: 10px;
}
.ov01-uit-label {
  font-size: 0.85rem;
  color: #666;
  margin-bottom: 2px;
  font-weight: 600;
}

.ov01-niveau-basis {
  background: #B6E7A0;
  color: #2F6B2F;
}
.ov01-niveau-kern {
  background: #FFF2CC;
  color: #996600;
}
.ov01-niveau-verdieping {
  background: #DAE8FC;
  color: #1F4E78;
}
.ov01-niveau-uitbreiding {
  background: #FFE4B5;
  color: #8B4513;
  font-weight: 700;
}

/* Empty-state als graad geen woorden heeft */
.wk-leeg-graad {
  text-align: center;
  padding: 40px 20px;
  color: #666;
}
.wk-leeg-graad h3 {
  color: var(--zisa-blauw);
  margin: 0 0 12px 0;
}

.ov01-voettekst {
  /* Absoluut gepositioneerd onderaan het werkblad. Werkblad is 29cm hoog,
     A4 is 29.7cm. Door bottom: 0.8cm te gebruiken staat de voettekst op
     ~1.5cm vanaf de papierrand (29.7 - 29 + 0.8 = 1.5cm). 
     left/right: 1.8cm minimum past bij alle blad-varianten met hun eigen
     horizontale padding. */
  position: absolute;
  bottom: 0.8cm;
  left: 1.8cm;
  right: 1.8cm;
  padding-top: 8px;
  border-top: 1px solid #ddd;
  text-align: center;
  font-size: 0.7rem;
  color: #999;
  font-family: 'Comic Sans MS', 'Segoe Print', sans-serif;
  font-style: italic;
  letter-spacing: 0.3px;
}

/* === A4-grens marker (alleen in preview, niet in PDF) === */
/* Toont onder elk werkblad een rode tekst die markeert waar de A4-pagina eindigt.
   Werkt via .preview-modus class die JS toevoegt aan #preview maar NIET aan de
   PDF-render-container. */
.preview-modus .ov01-blad {
  position: relative;
}
.preview-modus .ov01-blad::after {
  content: "➖➖➖ hier valt A4-grens ➖➖➖";
  display: block;
  position: absolute;
  /* 28.5cm laat ruimte voor printer-marges (hardware snijdt vaak 0.5cm van elke kant). 
     Als content óver deze lijn valt, dreigt afsnijding bij print. */
  top: 28.5cm;
  left: 0;
  right: 0;
  text-align: center;
  color: #d9534f;
  font-size: 0.75rem;
  font-family: 'Comic Sans MS', sans-serif;
  font-weight: bold;
  letter-spacing: 1px;
  pointer-events: none;
}

/* ============================================================
   OV01 — Plaatje → woord schrijven
   ============================================================ */
.ov01-blad {
  font-family: 'Comic Sans MS', 'Segoe Print', sans-serif;
  width: 21cm;
  /* GEEN min-height — kan over A4 duwen. Inhoud bepaalt hoogte. */
  box-sizing: border-box;
  padding: 1.5cm 1.8cm !important;
  margin: 0 auto;
  background: white;
  color: #222;
  box-shadow: none !important;
  position: relative;
}
/* Visuele scheiding tussen werkbladen alleen in preview */
.preview-modus .ov01-blad + .ov01-blad {
  margin-top: 20px;
}
/* Page-break ALLEEN tussen meerdere bladen onder elkaar (bundel) — niet voor enkel blad */
.ov01-blad + .ov01-blad {
  page-break-before: always;
  break-before: page;
}

.ov01-header {
  margin-bottom: 14px;
  /* Header mag NIET afbreken: naam+datum+titel horen bij elkaar */
  page-break-inside: avoid;
  break-inside: avoid;
}
.ov01-naam-rij {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.92rem;
  margin-bottom: 8px;
}
.ov01-lijn-naam, .ov01-lijn-datum {
  display: inline-block;
  border-bottom: 1px solid #444;
  height: 18px;
}
.ov01-lijn-naam { flex: 2; min-width: 180px; }
.ov01-lijn-datum { flex: 1; min-width: 100px; margin-left: 6px; }

.ov01-titel {
  background: #1a1a1a;
  color: white;
  text-align: center;
  font-size: 1.3rem;
  margin: 8px 0 6px 0;
  padding: 8px 16px;
  font-weight: bold;
}
.ov01-ondertitel {
  text-align: center;
  font-size: 0.95rem;
  color: #555;
  margin: 0 0 12px 0;
  font-style: italic;
}

/* 3 stappen-instructie */
.ov01-stappen {
  background: #FFF8E1;
  border: 1.5px solid #F4B400;
  border-radius: 6px;
  padding: 10px 14px;
  margin-bottom: 16px;
  /* Stappen-blok mag NIET afbreken */
  page-break-inside: avoid;
  break-inside: avoid;
}
.ov01-stappen-label {
  font-weight: bold;
  font-size: 0.95rem;
  color: #333;
  margin-bottom: 6px;
}
.ov01-stap-rij {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 0;
  font-size: 0.95rem;
}
.ov01-vakje {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 1.5px solid #333;
  background: white;
  flex-shrink: 0;
}

/* Plaatjes-rooster */
.ov01-rooster {
  margin-bottom: 14px;
}
.ov01-rooster-rij {
  display: flex;
  flex-direction: row;
  gap: 10px;
  margin-bottom: 10px;
  /* Een rij mag niet afbreken — plaatjes blijven samen op dezelfde pagina */
  page-break-inside: avoid;
  break-inside: avoid;
}
.ov01-cel {
  flex: 1 1 0;
  min-width: 0;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 8px 6px;
  background: white;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.ov01-cel-leeg {
  border: 1px dashed #eee;
}
.ov01-cel-plaatje {
  font-size: 3.5rem;
  line-height: 1.1;
  margin-bottom: 4px;
  text-align: center;
}
.ov01-cel-woord {
  font-size: 1.05rem;
  font-weight: 600;
  color: #1a1a1a;
  margin-bottom: 6px;
  text-align: center;
}
.ov01-cel-woord-leeg {
  height: 6px;
}

/* === BASIS-niveau: 3 keuze-hokjes onder plaatje === */
.ov01-cel-keuze {
  display: flex;
  gap: 4px;
  margin: 4px 0 8px 0;
  width: 100%;
  justify-content: center;
}
.ov01-keuze-hokje {
  flex: 1;
  text-align: center;
  padding: 6px 4px;
  border: 1.5px solid #555;
  border-radius: 3px;
  background: white;
  font-size: 1rem;
  font-weight: 600;
  color: #1a1a1a;
  font-family: 'Comic Sans MS', 'Segoe Print', sans-serif;
  /* Wat compactere lettergrootte zodat 3 woorden naast elkaar passen */
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Bij oplossingen: juiste hokje krijgt groene achtergrond */
.ov01-keuze-hokje.juist {
  background: #c8e6c9;
  border-color: #4caf50;
  border-width: 2px;
}
.ov01-cel-lijnen {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Schrijflijn — eenvoudige basislijn voor nu (canvas komt later) */
.ov01-schrijflijn {
  border-bottom: 1.2px solid #333;
  width: 100%;
  display: block;
}

/* Hoogtevarianten — gebruiken margin-top voor afstand tussen lijnen */
.ov01-blad.lijnhoogte-middel .ov01-schrijflijn { 
  height: 16px; 
  min-height: 16px;
}
.ov01-blad.lijnhoogte-klein .ov01-schrijflijn  { 
  height: 11px;
  min-height: 11px;
}

/* Verdieping: zin-opdracht onderaan */
.ov01-zin-blok {
  margin-top: 14px;
  padding: 10px 14px;
  background: #E8F5E9;
  border: 1.5px solid #66BB6A;
  border-radius: 6px;
  page-break-inside: avoid;
  break-inside: avoid;
}
.ov01-zin-vraag {
  margin: 4px 0 8px 0;
  font-size: 0.95rem;
  font-weight: 500;
}
.ov01-zin-lijn {
  border-bottom: 1.5px solid #1a1a1a;
  height: 22px;
  margin-top: 8px;
  width: 100%;
}

/* Oplossingenpagina */
.ov01-oplossing {
  background: white;
}
.ov01-opl-uitleg {
  font-size: 0.95rem;
  color: #555;
  margin: 8px 0;
}
.ov01-opl-lijst {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.ov01-opl-item {
  flex: 1 1 30%;
  min-width: 200px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background: #FAFAFA;
}
.ov01-opl-emoji {
  font-size: 1.6rem;
}
.ov01-opl-woord {
  font-weight: 600;
  color: var(--zisa-blauw);
}
.ov01-opl-zin {
  margin-top: 14px;
  padding: 10px;
  background: #E8F5E9;
  border-radius: 6px;
  font-size: 0.9rem;
}

/* Sidebar: niveau-knoppen voor OV01 */
.ov-niveau-knoppen {
  display: flex;
  gap: 4px;
  margin-bottom: 6px;
}
.ov-niveau-knoppen button {
  flex: 1;
  padding: 6px 4px;
  border: 1px solid var(--zisa-rand);
  background: white;
  border-radius: 4px;
  font-size: 0.82rem;
  font-family: inherit;
  cursor: pointer;
  color: #555;
}
.ov-niveau-knoppen button.actief {
  background: var(--zisa-blauw);
  color: white;
  border-color: var(--zisa-blauw);
  font-weight: 600;
}

/* ===== WEEKDICTEE WIZARD STAPPEN ===== */
.wd-stap {
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px dashed var(--zisa-rand);
}
.wd-stap:last-child {
  border-bottom: none;
}
.wd-stap-kop {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.wd-stap-nr {
  background: var(--zisa-blauw);
  color: white;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
  font-weight: bold;
}
.wd-stap-titel {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--zisa-blauw);
}
.wd-kiezer-knop {
  width: 100%;
  padding: 10px;
  background: var(--zisa-geel);
  color: var(--zisa-blauw);
  border: none;
  border-radius: 6px;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: filter 0.15s;
}
.wd-kiezer-knop:hover {
  filter: brightness(0.95);
}
.wd-stap-info {
  font-size: 0.82rem;
  margin: 6px 0 0 0;
  color: #888;
}

/* Empty state als nog geen woorden gekozen */
.weekdictee-empty {
  text-align: center;
  padding: 60px 30px;
  color: #888;
}
.weekdictee-empty h3 {
  color: var(--zisa-blauw);
  margin: 0 0 12px 0;
}

/* Dagen-lijst compacter (geen dropdown meer) */
.weekdictee-dagen-lijst {
  border: 1px solid var(--zisa-rand);
  border-radius: 4px;
  padding: 8px 10px;
  background: white;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 12px;
}

/* ===== WEEKDICTEE ===== */

.weekdictee-blad {
  font-family: 'Comic Sans MS', 'Segoe Print', sans-serif;
  /* Compactere padding: 1.0cm boven/onder, 1.8cm links/rechts. 
     Zo passen werkbladen binnen A4 (29.7cm). Links/rechts blijft ruimer
     voor printer-marges. */
  padding: 1.0cm 1.8cm !important;
}

.weekdictee-header {
  margin-bottom: 10px;
}
.weekdictee-naam-rij {
  font-size: 0.9rem;
  margin-bottom: 5px;
}
.naam-lijn-lang {
  display: inline-block;
  border-bottom: 1px solid #444;
  width: 250px;
  margin-left: 6px;
}
.weekdictee-titel {
  background: #1a1a1a;
  color: white;
  text-align: center;
  font-size: 1.1rem;
  margin: 0 0 8px 0;
  padding: 6px 16px;
  font-weight: bold;
}

/* Dag-blok = de complete cel met zwarte rand */
.dag-blok {
  border: 2px solid #1a1a1a;
  margin-bottom: 14px;
  page-break-inside: avoid;
  break-inside: avoid;
}

/* Kop van een dag (grijze balk) */
.dag-blok-kop {
  display: grid;
  grid-template-columns: 1fr 2fr;
  background: #C8C8C8;
  border-bottom: 2px solid #1a1a1a;
}
.dag-kop-links {
  padding: 8px 12px;
  font-size: 1rem;
  border-right: 2px solid #1a1a1a;
}
.dag-kop-rechts {
  padding: 8px 12px;
  font-size: 1rem;
  text-align: center;
}

/* Body: woorden links, verbetering rechts */
.dag-blok-body {
  display: grid;
  grid-template-columns: 1fr 2fr;
  background: white;
}
.dag-woorden {
  padding: 12px 16px;
  border-right: 2px solid #1a1a1a;
}
.dag-verbeter {
  padding: 12px 16px;
}

/* === Schrijflijn voor woorden (linkerkant) — nu via canvas === */
.dag-woord-rij {
  margin-bottom: 8px;
  position: relative;
  display: block;
}
.dag-woord-rij {
  margin-bottom: 8px;
  position: relative;
  display: block;
}
/* Antwoord positioneren OP de schrijfregel (tussen mid1 en base lijnen).
   De canvas heeft 4 lijnen: top, mid1 (boven x-hoogte), base, bottom.
   De x-hoogte zone is tussen mid1 en base. Daar moet het antwoord staan.
   Bij hoogte "klein" (14px tussen lijnen): canvas-h = 5+14*3+5 = 52px.
   - top: 5, mid1: 19, base: 33, bottom: 47
   - schrijfzone midden: ~26px (van top)
   - relatief: 26/52 = ~50%
   Bij hoogte "middel" (20px tussen lijnen): canvas-h = 5+20*3+5 = 70px.
   - top: 5, mid1: 25, base: 45, bottom: 65
   - schrijfzone midden: ~35px
   - relatief: 35/70 = ~50%
   Dus 50% werkt voor beide! */
.dag-woord-rij .antwoord {
  position: absolute;
  top: 50%;
  left: 6px;
  transform: translateY(-50%);
  font-size: 0.85rem;
  font-weight: 600;
  color: #2196F3;
  z-index: 2;
  font-family: 'Comic Sans MS', sans-serif;
  /* Witte achtergrond zodat de schrijflijnen erachter niet door de letters lopen */
  background: white;
  padding: 0 3px;
  /* Lijn-hoogte iets lager dan font-size zodat tekst compact blijft */
  line-height: 1;
}
.wd-canvas-wrap {
  display: block;
  width: 100%;
}
.wd-canvas-wrap canvas {
  display: block;
  width: 100%;
  height: auto;
}

/* Verbeter-rooster: 2 kolommen (verbeter het hier - meestal 1 of 2 fouten max per woord) */
.verbeter-rij {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 8px;
}
.verbeter-cel {
  display: block;
}

/* Zinvak — nu canvas i.p.v. blauw vlak */
.dag-zinnen {
  border-top: 2px solid #1a1a1a;
  padding: 6px 16px;
  background: white;
}
.wd-zin-rij {
  position: relative;
  margin: 4px 0;
}
.wd-zin-canvas-wrap {
  display: block;
  width: 100%;
}
.wd-zin-canvas-wrap canvas {
  display: block;
  width: 100%;
  height: auto;
}

/* Antwoord op zinvak (bij oplossingen) — gepositioneerd op de schrijfregel */
.zin-antwoord {
  position: absolute;
  top: 50%;
  left: 10px;
  transform: translateY(-50%);
  font-size: 0.9rem;
  font-family: 'Comic Sans MS', sans-serif;
  color: #2196F3;
  font-weight: 600;
  z-index: 2;
  background: white;
  padding: 0 4px;
  line-height: 1;
}

/* Reflectie onderaan laatste pagina */
.weekdictee-reflectie {
  margin-top: 20px;
  padding: 12px 16px;
  border: 2px solid #1a1a1a;
  page-break-inside: avoid;
}
.weekdictee-reflectie-vraag {
  margin: 0 0 10px 0;
  font-size: 1rem;
  font-weight: 500;
}
.weekdictee-reflectie-vakjes {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 10px;
  text-align: center;
}
.reflectie-emoji {
  font-size: 1.8rem;
  padding: 8px;
  border: 1.5px solid #888;
  border-radius: 6px;
  background: white;
}

/* Sidebar UI voor weekdictee */
.weekdictee-dagen-lijst {
  border: 1px solid var(--zisa-rand);
  border-radius: 4px;
  padding: 6px;
  background: #FAFAFA;
}
.weekdictee-dag-rij {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 6px;
  align-items: center;
  padding: 3px 0;
}
.weekdictee-dag-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.88rem;
  cursor: pointer;
}
.weekdictee-dag-rij select {
  padding: 3px 4px;
  border: 1px solid var(--zisa-rand);
  border-radius: 4px;
  font-size: 0.78rem;
  background: white;
}

/* ===== Werkblad styling (in preview EN PDF) ===== */
.werkblad {
  background: white;
  width: 21cm;
  /* min-height: 29cm — kleiner dan A4 (29.7cm) om te voorkomen dat
     subpixel-rounding bij PDF-rendering een lege tweede pagina veroorzaakt.
     De voettekst (bottom: 0.8cm) staat dan op ~1.5cm vanaf de papierrand. */
  min-height: 29cm;
  box-sizing: border-box;
  padding: 1.5cm 2cm;
  margin: 0 auto;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
  font-family: 'Comic Sans MS', 'Segoe Print', sans-serif;
  color: #222;
  position: relative;
}
/* Specifieke blad-classes (ov01-blad t/m ov06-blad) overschrijven .werkblad
   met eigen padding. Daarom dwingen we hier de min-height ook af op die
   specifieke selectors, zodat de voettekst altijd onderaan kan blijven staan.
   Weekdictee uitgesloten omdat daar geen voettekst zit. */
.werkblad.ov01-blad,
.werkblad.ov02-blad,
.werkblad.ov03-blad,
.werkblad.ov04-blad,
.werkblad.ov05-blad,
.werkblad.ov06-blad {
  min-height: 29cm;
}
/* In preview iets ruimte tussen werkbladen voor visuele scheiding */
.preview-modus .werkblad + .werkblad {
  margin-top: 20px;
}
/* Elke werkblad behalve het eerste begint op een nieuwe PDF-pagina */
.werkblad + .werkblad {
  page-break-before: always;
  break-before: page;
}
/* Class-gebaseerde versie voor bundel-PDF — html2pdf "before" config */
.pagina-break-voor {
  page-break-before: always !important;
  break-before: page !important;
}
.werkblad-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 2px solid var(--zisa-blauw);
  padding-bottom: 10px;
  margin-bottom: 20px;
}
.werkblad-titel {
  font-size: 1.4rem;
  font-weight: bold;
  color: var(--zisa-blauw);
  margin: 0;
}
.werkblad-naam {
  font-size: 0.9rem;
  color: #666;
}
.werkblad-naam .naam-lijn {
  display: inline-block;
  border-bottom: 1px solid #999;
  width: 120px;
  margin-left: 6px;
}

.opdracht {
  margin-bottom: 18px;
}
.opdracht-instructie {
  font-weight: bold;
  color: var(--zisa-blauw);
  font-size: 1rem;
  margin-bottom: 8px;
}

/* Oefenvorm: invul met keuzewoorden */
.invul-rij {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}
.keuzewoord-balk {
  background: var(--zisa-blauw-licht);
  border: 1px dashed var(--zisa-blauw);
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 1.05rem;
  margin-bottom: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

/* Oefenvorm: woord met plaatje */
.woord-plaatje-rooster {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 12px;
}
.woord-plaatje-cel {
  text-align: center;
  border: 1px solid #ddd;
  padding: 8px;
  border-radius: 6px;
}
.woord-plaatje-cel .plaatje {
  height: 60px;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.woord-plaatje-cel .woord-afbeelding {
  max-height: 60px;
  max-width: 100%;
  object-fit: contain;
}
.woord-plaatje-cel .woord-emoji {
  font-size: 2.5rem;
  line-height: 1;
}
.woord-label {
  font-weight: bold;
  margin-bottom: 4px;
}
/* ==========================================================
   SCHRIJFLIJNEN — 3 types
   Werkt door een class .lijn-{type} op .werkblad te zetten.
   Elke schrijflijn (.schrijflijn of .dictee-lijn) past zich aan.
   ========================================================== */

/* Basisreservering: alle schrijflijnen gebruiken een vaste hoogte
   zodat de lay-out niet verschuift bij een ander lijntype. */
.schrijflijn,
.dictee-lijn {
  position: relative;
  height: 32px;
  margin: 6px auto;
  width: 100%;
  background-repeat: repeat-x;
  background-position: left bottom;
}

/* --- Type 1: ENKELE LIJN --- */
.lijn-enkel .schrijflijn,
.lijn-enkel .dictee-lijn {
  border-bottom: 1.5px solid #333;
  background: none;
}

/* --- Type 2: DUBBELE LIJN (cahier) --- */
.lijn-dubbel .schrijflijn,
.lijn-dubbel .dictee-lijn {
  border-bottom: 1.5px solid #333;
  border-top: 1.5px solid #333;
  background: none;
}

/* --- Type 3: VIERLIJNSSYSTEEM --- */
/* 4 lijnen: bovenlijn (ascenderhoogte), middenlijn-boven (x-hoogte top),
   middenlijn-onder (basislijn), onderlijn (descenderhoogte).
   Wij tekenen ze met repeating-linear-gradient. */
.lijn-vier .schrijflijn,
.lijn-vier .dictee-lijn {
  height: 36px;
  border: none;
  background:
    linear-gradient(to bottom, #444 1.5px, transparent 1.5px) top    / 100% 100% no-repeat,
    linear-gradient(to bottom, #c8c8c8 1px, transparent 1px) 0 33%   / 100% 100% no-repeat,
    linear-gradient(to bottom, #444 1.5px, transparent 1.5px) 0 66%  / 100% 100% no-repeat,
    linear-gradient(to bottom, #c8c8c8 1px, transparent 1px) bottom  / 100% 100% no-repeat;
}

/* Oefenvorm: categoriseren (sorteren) */
.sorteer-tabel {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 12px;
}
.sorteer-tabel th {
  background: var(--zisa-blauw-licht);
  border: 1.5px solid var(--zisa-blauw);
  padding: 8px;
  font-size: 1rem;
}
.sorteer-tabel td {
  border: 1px solid #aaa;
  height: 38px;
  padding: 4px 8px;
  vertical-align: top;
}

/* Oefenvorm: dictee zinnen */
.dictee-zin {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  margin-bottom: 14px;
}
.dictee-nr {
  font-weight: bold;
  color: var(--zisa-blauw);
  min-width: 22px;
}
.dictee-lijn {
  flex: 1;
  /* hoogte en visueel uiterlijk worden door .lijn-{type} bepaald */
}

/* Oefenvorm: fouten verbeteren */
.fouten-zin {
  margin-bottom: 12px;
  font-size: 1.05rem;
}
.fouten-correctie {
  display: inline-block;
  min-width: 200px;
  height: 24px;
  margin-left: 8px;
  vertical-align: middle;
}
/* Lijntype toepassen op fouten-correctie */
.lijn-enkel .fouten-correctie { border-bottom: 1.5px solid #333; }
.lijn-dubbel .fouten-correctie { border-bottom: 1.5px solid #333; border-top: 1.5px solid #333; }
.lijn-vier .fouten-correctie {
  height: 32px;
  background:
    linear-gradient(to bottom, #444 1.5px, transparent 1.5px) top    / 100% 100% no-repeat,
    linear-gradient(to bottom, #c8c8c8 1px, transparent 1px) 0 33%   / 100% 100% no-repeat,
    linear-gradient(to bottom, #444 1.5px, transparent 1.5px) 0 66%  / 100% 100% no-repeat,
    linear-gradient(to bottom, #c8c8c8 1px, transparent 1px) bottom  / 100% 100% no-repeat;
}

/* PDF print versie */
@media print {
  body { background: white; }
  .topbar, .sidebar, .actie-knoppen { display: none; }
  .preview-paneel { box-shadow: none; padding: 0; }
  .werkblad { box-shadow: none; margin: 0; page-break-after: always; }
}
/* =====================================================
   ZIJBALK REDESIGN (mei 2026)
   Graad-tabs, hoofdgroep-selector, oefenvorm-multiselect
   ===================================================== */

/* --- Graad-tabs bovenaan --- */
.graad-tabs {
  display: flex;
  gap: 0;
  margin-bottom: 16px;
  border-bottom: 2px solid #e0e0e0;
}
.graad-tab {
  flex: 1;
  background: #f5f5f5;
  border: 1px solid #e0e0e0;
  border-bottom: none;
  border-radius: 8px 8px 0 0;
  padding: 10px 12px;
  font-size: 0.95rem;
  font-weight: 600;
  color: #555;
  cursor: pointer;
  position: relative;
  top: 2px;
  transition: all 0.15s;
}
.graad-tab:hover:not(:disabled):not(.actief) {
  background: #eaf4ff;
}
.graad-tab.actief {
  background: #fff;
  color: var(--zisa-blauw, #2563eb);
  border-color: #cdd9e8;
  border-bottom: 2px solid #fff;
}
.graad-tab:disabled {
  cursor: not-allowed;
  color: #bbb;
}
.graad-tab .binnenkort {
  display: block;
  font-size: 0.65rem;
  font-weight: normal;
  color: #999;
}

/* --- Uitklap-secties --- */
.zb-sectie {
  background: #fafbfc;
  border: 1px solid #e0e6ec;
  border-radius: 10px;
  margin-bottom: 12px;
  overflow: hidden;
}
.zb-sectie[open] {
  background: #fff;
  border-color: #cdd9e8;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.zb-sectie-titel {
  padding: 12px 14px;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 600;
  color: #2c3e50;
  display: flex;
  align-items: center;
  gap: 10px;
  list-style: none;
  user-select: none;
}
.zb-sectie-titel::-webkit-details-marker { display: none; }
.zb-sectie-titel::before {
  content: "▸";
  font-size: 0.85rem;
  color: #888;
  transition: transform 0.15s;
}
.zb-sectie[open] > .zb-sectie-titel::before {
  transform: rotate(90deg);
}
.zb-nr {
  display: inline-block;
  background: var(--zisa-blauw, #2563eb);
  color: white;
  font-size: 0.75rem;
  font-weight: bold;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  text-align: center;
  line-height: 22px;
}
.zb-label { flex: 1; }
.zb-teller {
  font-size: 0.78rem;
  font-weight: normal;
  color: var(--zisa-blauw, #2563eb);
  background: #e7f0fb;
  padding: 2px 8px;
  border-radius: 12px;
}
.zb-teller:empty { display: none; }
.zb-sectie-inhoud {
  padding: 4px 14px 14px;
}
.zb-uitleg {
  font-size: 0.8rem;
  color: #666;
  margin: 0 0 10px 0;
}

/* --- Hoofdgroep-selector --- */
.zb-hoofdgroep {
  background: #fff;
  border: 1px solid #e0e6ec;
  border-radius: 8px;
  margin-bottom: 8px;
  overflow: hidden;
}
.zb-hoofdgroep[open] {
  background: #fcfdff;
}
.zb-hg-titel {
  padding: 10px 12px;
  cursor: pointer;
  font-size: 0.92rem;
  display: flex;
  align-items: center;
  gap: 10px;
  list-style: none;
}
.zb-hg-titel::-webkit-details-marker { display: none; }
.zb-hg-titel::before {
  content: "▸";
  font-size: 0.75rem;
  color: #999;
  transition: transform 0.15s;
}
.zb-hoofdgroep[open] > .zb-hg-titel::before {
  transform: rotate(90deg);
}
.zb-hg-master {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: var(--zisa-blauw, #2563eb);
}
.zb-hg-label {
  flex: 1;
  font-weight: 600;
  color: #2c3e50;
}
.zb-hg-teller {
  font-size: 0.75rem;
  color: #888;
  background: #f0f3f7;
  padding: 1px 8px;
  border-radius: 10px;
}
.zb-hg-uitleg {
  font-size: 0.75rem;
  color: #777;
  font-style: italic;
  padding: 0 12px 8px 40px;
}
.zb-hg-inhoud {
  padding: 4px 12px 10px 32px;
}
.zb-groep {
  margin-bottom: 10px;
}
.zb-groep:last-child { margin-bottom: 0; }
.zb-groep-titel {
  font-size: 0.78rem;
  text-transform: uppercase;
  color: #888;
  font-weight: 600;
  margin-bottom: 4px;
  letter-spacing: 0.04em;
}
.zb-cat-rij {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.zb-cat-vink {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  background: #f5f7fa;
  border: 1px solid #e0e6ec;
  border-radius: 14px;
  font-size: 0.85rem;
  cursor: pointer;
  user-select: none;
  transition: all 0.12s;
}
.zb-cat-vink:hover {
  border-color: #b6cce8;
  background: #eef4fc;
}
.zb-cat-vink.aan {
  background: #e7f0fb;
  border-color: var(--zisa-blauw, #2563eb);
  color: var(--zisa-blauw, #2563eb);
  font-weight: 500;
}
.zb-cat-vink input {
  margin: 0;
  cursor: pointer;
  accent-color: var(--zisa-blauw, #2563eb);
}
.zb-cat-aantal {
  font-size: 0.72rem;
  color: #999;
  font-weight: normal;
}
.zb-cat-vink.aan .zb-cat-aantal {
  color: var(--zisa-blauw, #2563eb);
  opacity: 0.7;
}

/* --- Sectie 2: Open woordenkiezer --- */
.zb-knop-groot {
  width: 100%;
  background: var(--zisa-blauw, #2563eb);
  color: white;
  border: none;
  padding: 12px 16px;
  font-size: 1rem;
  font-weight: 600;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s;
}
.zb-knop-groot:hover:not(:disabled) {
  background: #1d4ed8;
  transform: translateY(-1px);
}
.zb-knop-groot:disabled {
  background: #b8c4d3;
  cursor: not-allowed;
  opacity: 0.7;
}
.zb-info {
  margin: 8px 0 0 0;
  font-size: 0.85rem;
  text-align: center;
}

/* --- Sectie 3: Oefenvormen --- */
.zb-oefenvorm {
  background: #fff;
  border: 1px solid #e0e6ec;
  border-radius: 8px;
  margin-bottom: 6px;
  overflow: hidden;
}
.zb-oefenvorm.aan {
  border-color: #82b3e8;
  background: #f7fbff;
}
.zb-oef-titel {
  padding: 8px 12px;
  cursor: pointer;
  font-size: 0.92rem;
  display: flex;
  align-items: center;
  gap: 10px;
  list-style: none;
}
.zb-oef-titel::-webkit-details-marker { display: none; }
.zb-oef-checkbox {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: var(--zisa-blauw, #2563eb);
}
.zb-oef-label {
  flex: 1;
  color: #2c3e50;
}
.zb-oefenvorm.aan .zb-oef-label {
  font-weight: 600;
  color: var(--zisa-blauw, #2563eb);
}
.zb-oef-instel {
  padding: 8px 12px 12px 40px;
  border-top: 1px solid #ecf1f7;
  background: #fcfdff;
}
.zb-oef-rij {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.zb-oef-rij:last-child { margin-bottom: 0; }
.zb-oef-rij > label {
  font-size: 0.82rem;
  color: #555;
  font-weight: 500;
  min-width: 110px;
}
.zb-oef-niveaus {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  flex: 1;
}
.zb-niveau-vink {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  background: #f0f3f7;
  border: 1px solid #e0e6ec;
  border-radius: 12px;
  font-size: 0.78rem;
  cursor: pointer;
}
.zb-niveau-vink.aan {
  background: #fff5e0;
  border-color: #f0b840;
  color: #8a5b00;
}
.zb-niveau-vink input { margin: 0; }
.zb-oef-aantal {
  width: 60px;
  padding: 4px 8px;
  font-size: 0.85rem;
  border: 1px solid #cdd9e8;
  border-radius: 5px;
}
.zb-hoogte-knoppen {
  display: flex;
  gap: 4px;
}
.zb-hoogte-btn {
  padding: 4px 10px;
  font-size: 0.8rem;
  background: #f5f7fa;
  border: 1px solid #e0e6ec;
  border-radius: 5px;
  cursor: pointer;
  color: #555;
}
.zb-hoogte-btn.actief {
  background: var(--zisa-blauw, #2563eb);
  border-color: var(--zisa-blauw, #2563eb);
  color: white;
}

/* --- Leeg-state voor graad zonder data --- */
.zb-leeg {
  font-style: italic;
  color: #999;
  text-align: center;
  padding: 16px;
}

/* ==========================================================
   OV07 — Verkleinwoorden — stijlblok
   PLAK DIT BLOK ONDERAAN style.css
   ========================================================== */

.ov07-rooster {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 14px;
}

.ov07-kol-koppen {
  display: grid;
  grid-template-columns: 1fr 40px 2fr;
  gap: 12px;
  align-items: center;
  padding: 4px 36px 4px 4px;
  border-bottom: 2px solid var(--zisa-blauw, #2196F3);
  margin-bottom: 4px;
}
.ov07-kol-kop {
  font-weight: bold;
  color: var(--zisa-blauw, #2196F3);
  font-size: 0.95rem;
  text-transform: lowercase;
  letter-spacing: 0.05em;
}

.ov07-rij {
  display: grid;
  align-items: center;
  padding: 6px 4px;
  border-bottom: 1px dashed #e0e0e0;
  position: relative;
  gap: 12px;
}
.ov07-rij:last-child {
  border-bottom: none;
}

.ov07-rij-basis {
  grid-template-columns: 80px auto 1fr;
}
.ov07-grondwoord {
  font-family: "Sassoon Primary", "Andika", sans-serif;
  font-size: 1.4rem;
  font-weight: bold;
  color: #333;
}
.ov07-uitgang-keuzes {
  display: flex;
  gap: 6px;
  align-items: center;
}
.ov07-uitgang-keuze {
  display: inline-block;
  padding: 4px 10px;
  border: 2px solid #999;
  border-radius: 999px;
  font-family: "Sassoon Primary", "Andika", sans-serif;
  font-size: 1.05rem;
  color: #555;
  background: #fff;
  user-select: none;
}
.ov07-uitgang-juist {
  border-color: #4CAF50;
  background: #E8F5E9;
  color: #2E7D32;
  font-weight: bold;
}

.ov07-rij-kern,
.ov07-rij-verdieping {
  grid-template-columns: 1fr 40px 2fr;
}
.ov07-kol-woord {
  font-family: "Sassoon Primary", "Andika", sans-serif;
  font-size: 1.35rem;
  display: flex;
  align-items: center;
  min-height: 38px;
}
.ov07-kol-verklein {
  display: flex;
  align-items: center;
  min-height: 38px;
}
.ov07-pijl {
  text-align: center;
  font-size: 1.4rem;
  color: var(--zisa-blauw, #2196F3);
  font-weight: bold;
}

.ov07-gegeven {
  background: #F5F5F5;
  padding: 4px 12px;
  border-radius: 6px;
  border: 1px solid #E0E0E0;
  color: #333;
  font-weight: bold;
}

.ov07-lijn-cel {
  position: relative;
  width: 100%;
}
.ov07-lijn-antwoord {
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-55%);
  font-family: "Sassoon Primary", "Andika", sans-serif;
  font-size: 1.2rem;
  color: #c00;
  font-weight: bold;
  z-index: 2;
  pointer-events: none;
}
.ov07-fallback-lijn {
  border-bottom: 1.5px solid #333;
  height: 24px;
}

.ov07-uitbreiding-container {
  margin-top: 14px;
}
.ov07-verhaal-origineel {
  background: #FFFAE6;
  border: 1.5px solid #F0D060;
  border-radius: 10px;
  padding: 12px 18px;
  margin-bottom: 16px;
}
.ov07-verhaal-titel {
  font-weight: bold;
  font-size: 1.05rem;
  color: #B8860B;
  margin-bottom: 6px;
  font-family: "Sassoon Primary", "Andika", sans-serif;
}
.ov07-verhaal-zinnen {
  font-family: "Sassoon Primary", "Andika", sans-serif;
}
.ov07-verhaal-zin {
  font-size: 1.1rem;
  line-height: 1.6;
  margin: 4px 0;
  color: #222;
}
.ov07-zn-marker {
  font-weight: bold;
  color: #B8860B;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.ov07-zn-opl {
  color: #c00;
  text-decoration: none;
}
.ov07-verhaal-zinnen-oplossing {
  background: #FFEBEE;
  border: 1.5px solid #EF9A9A;
  border-radius: 10px;
  padding: 12px 18px;
}
.ov07-verhaal-schrijf {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ov07-verhaal-lijn {
  width: 100%;
}

.ov07-blad.lijnhoogte-klein .ov07-rij {
  padding: 3px 4px;
}
.ov07-blad.lijnhoogte-klein .ov07-grondwoord,
.ov07-blad.lijnhoogte-klein .ov07-kol-woord {
  font-size: 1.2rem;
}

.ov07-rij,
.ov07-uitbreiding-container,
.ov07-verhaal-origineel {
  break-inside: avoid;
  page-break-inside: avoid;
}

.preview-modus .werkblad {
  position: relative;
}

.preview-modus .werkblad::after {
  content: "➖➖➖ hier valt A4-grens — alles eronder valt op pagina 2 ➖➖➖";
  display: block;
  position: absolute;
  top: 28.5cm;
  left: 0;
  right: 0;
  text-align: center;
  color: #d9534f;
  font-size: 0.78rem;
  font-family: 'Comic Sans MS', 'Segoe Print', sans-serif;
  font-weight: bold;
  letter-spacing: 1px;
  pointer-events: none;
  background: linear-gradient(to bottom, transparent 0%, transparent 45%, #d9534f 45%, #d9534f 55%, transparent 55%, transparent 100%);
  padding: 4px 0;
}
/* ==========================================================
   OV07 — 2-KOLOMS LAYOUT voor ⭐ Oefenen en ⭐⭐ Toepassen
   
   PLAK DIT BLOK ONDERAAN style.css
   
   Wat het doet:
   - ⭐ Oefenen: cellen met woord/keuzes/lijn onder elkaar,
     2 cellen naast elkaar → dubbel zoveel oefeningen per A4
   - ⭐⭐ Toepassen: 2 rijen naast elkaar (woord → lijn)
   - ⭐⭐⭐ Verdiepen blijft 1 kolom (al breed wegens beide kolommen)
   - ⭐⭐⭐⭐ Uitbreiden blijft volle breedte (verhaal)
   ========================================================== */

/* === ⭐⭐ Toepassen: 2-koloms grid van rijen ===
   Bestaat al uit drie kolommen (woord, pijl, lijn) per rij.
   Met 2-koloms grid komen er per rij 2 zo'n compacte rijen naast elkaar. */
.ov07-rooster.ov07-tweekoloms {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 24px;
}
.ov07-rooster.ov07-tweekoloms .ov07-rij-kern {
  grid-template-columns: auto 25px 1fr;
  padding: 4px 4px;
  gap: 8px;
}
.ov07-rooster.ov07-tweekoloms .ov07-grondwoord,
.ov07-rooster.ov07-tweekoloms .ov07-kol-woord {
  font-size: 1.2rem;
}

/* === ⭐ Oefenen: cellen met inhoud onder elkaar, 2 cellen per rij === */
.ov07-rooster.ov07-tweekoloms-cellen {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 24px;
  margin-top: 14px;
}

.ov07-cel-basis {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  padding: 8px 6px;
  border-bottom: 1px dashed #e0e0e0;
  position: relative;
}
.ov07-cel-basis .ov07-grondwoord {
  font-family: "Sassoon Primary", "Andika", sans-serif;
  font-size: 1.3rem;
  font-weight: bold;
  color: #333;
  text-align: center;
  margin-bottom: 2px;
}
.ov07-cel-basis .ov07-uitgang-keuzes {
  display: flex;
  gap: 6px;
  justify-content: center;
  margin-bottom: 4px;
}
.ov07-cel-basis .ov07-lijn-cel {
  width: 100%;
}

/* In compact-modus (lijnhoogte klein) nog krapper */
.ov07-blad.lijnhoogte-klein .ov07-rooster.ov07-tweekoloms,
.ov07-blad.lijnhoogte-klein .ov07-rooster.ov07-tweekoloms-cellen {
  gap: 4px 18px;
}
.ov07-blad.lijnhoogte-klein .ov07-cel-basis {
  padding: 4px 4px;
}
.ov07-blad.lijnhoogte-klein .ov07-cel-basis .ov07-grondwoord {
  font-size: 1.15rem;
}
.ov07-blad.lijnhoogte-klein .ov07-rooster.ov07-tweekoloms .ov07-rij-kern {
  padding: 2px 4px;
}

/* Verwijder-knop op hover binnen cel-layout */
.bundel-item-wrap .ov07-cel-basis:hover .rij-verwijder-knop {
  opacity: 1;
}
.ov07-cel-basis {
  position: relative;
}


.bundel-item-wrap .ov07-rij:hover .rij-verwijder-knop,
.bundel-item-wrap .ov07-cel:hover .rij-verwijder-knop {
  opacity: 1;
}

/* OV07-rijen en -cellen moeten relatieve positie hebben zodat de ✕ knop
   binnen de rij/cel komt te staan (niet bovenaan het hele werkblad). */
.ov07-rij,
.ov07-cel {
  position: relative;
}

/* === Verdiepen-rij compactere grid (kleinere middencolom) === */
.ov07-rooster-verdieping .ov07-rij-verdieping {
  grid-template-columns: 1fr 30px 1fr;
  gap: 14px;
  padding: 4px 4px;
  align-items: center;
}

/* === Cellen krijgen consistente hoogte gelijk aan de schrijflijn === */
.ov07-rooster-verdieping .ov07-kol-woord,
.ov07-rooster-verdieping .ov07-kol-verklein {
  min-height: 44px;
  display: flex;
  align-items: center;
  font-size: 1.25rem;
}

/* === Gegeven-cel: compacter, mooier, gecentreerd === */
.ov07-rooster-verdieping .ov07-gegeven {
  background: #F5F5F5;
  padding: 6px 14px;
  border-radius: 6px;
  border: 1px solid #DDD;
  color: #222;
  font-weight: bold;
  font-family: "Sassoon Primary", "Andika", sans-serif;
  font-size: 1.25rem;
  justify-content: center;
  width: 100%;
  box-sizing: border-box;
}

/* === Pijl gecentreerd, niet te groot === */
.ov07-rooster-verdieping .ov07-pijl {
  text-align: center;
  font-size: 1.2rem;
  color: var(--zisa-blauw, #2196F3);
}

/* === Compact-modus (klein) iets krapper === */
.ov07-blad.lijnhoogte-klein .ov07-rooster-verdieping .ov07-rij-verdieping {
  padding: 2px 4px;
}
.ov07-blad.lijnhoogte-klein .ov07-rooster-verdieping .ov07-kol-woord,
.ov07-blad.lijnhoogte-klein .ov07-rooster-verdieping .ov07-kol-verklein {
  min-height: 36px;
  font-size: 1.1rem;
}
.ov07-blad.lijnhoogte-klein .ov07-rooster-verdieping .ov07-gegeven {
  font-size: 1.1rem;
  padding: 4px 10px;
}

/* === Verdiepen: koppen-grid matcht rij-grid === */
.ov07-rooster-verdieping .ov07-kol-koppen {
  grid-template-columns: 1fr 30px 1fr;
  gap: 14px;
  padding: 4px 36px 4px 4px;
}

/* === Koppen gecentreerd (zelfde alignment als cellen eronder) === */
.ov07-rooster-verdieping .ov07-kol-koppen .ov07-kol-kop {
  text-align: center;
}

/* === Kern (⭐⭐ Toepassen) gebruikt geen koppen meer maar voor safety === */
.ov07-rooster-kern .ov07-kol-koppen .ov07-kol-kop {
  text-align: center;
}

.ov07-lijn-antwoord {
  color: #2E7D32 !important;
}
 
.ov07-zn-opl {
  color: #2E7D32 !important;
}
 
.ov07-verhaal-zinnen-oplossing {
  background: #E8F5E9 !important;
  border-color: #81C784 !important;
}

/* ==========================================================
   OV08 — MINIMALE EXTRA STYLING
   
   PLAK DIT BLOK ONDERAAN style.css
   (verwijder eerst alle eerdere ov08-* CSS-blokken die ik je gaf)
   
   OV08 gebruikt automatisch dezelfde styling als OV07 omdat alle
   OV08-elementen ÓÓK de ov07-class hebben (zie ov08.js).
   
   Dit kleine blok voegt enkel toe wat OV08 nodig heeft maar OV07
   niet heeft: het TELWOORD bij ⭐⭐ Toepassen.
   ========================================================== */

/* Telwoord (veel, twee, drie, ...) in ⭐⭐ Toepassen */
.ov08-telwoord {
  font-family: "Sassoon Primary", "Andika", sans-serif;
  font-size: 1.05rem;
  color: var(--zisa-blauw, #2196F3);
  font-style: italic;
  white-space: nowrap;
  min-width: 50px;
  text-align: center;
}

/* In compact-modus iets kleiner */
.ov08-blad.lijnhoogte-klein .ov08-telwoord {
  font-size: 0.95rem;
  min-width: 40px;
}

/* OV08-specifieke grid-aanpassing voor ⭐⭐ Toepassen
   (rij heeft extra telwoord-kolom dat OV07 niet heeft) */
.ov08-rooster.ov08-tweekoloms .ov08-rij-kern {
  grid-template-columns: auto 22px auto 1fr;
  gap: 6px;
  align-items: center;
}
/* ==========================================================
   OV08 — MINIMALE EXTRA STYLING
   
   PLAK DIT BLOK ONDERAAN style.css
   (verwijder eerst alle eerdere ov08-* CSS-blokken die ik je gaf)
   
   OV08 gebruikt automatisch dezelfde styling als OV07 omdat alle
   OV08-elementen ÓÓK de ov07-class hebben (zie ov08.js).
   
   Dit kleine blok voegt enkel toe wat OV08 nodig heeft maar OV07
   niet heeft: het TELWOORD bij ⭐⭐ Toepassen.
   ========================================================== */

/* Telwoord (veel, twee, drie, ...) in ⭐⭐ Toepassen */
.ov08-telwoord {
  font-family: "Sassoon Primary", "Andika", sans-serif;
  font-size: 1.05rem;
  color: var(--zisa-blauw, #2196F3);
  font-style: italic;
  white-space: nowrap;
  min-width: 50px;
  text-align: center;
}

/* In compact-modus iets kleiner */
.ov08-blad.lijnhoogte-klein .ov08-telwoord {
  font-size: 0.95rem;
  min-width: 40px;
}

/* OV08-specifieke grid-aanpassing voor ⭐⭐ Toepassen
   (rij heeft extra telwoord-kolom dat OV07 niet heeft) */
.ov08-rooster.ov08-tweekoloms .ov08-rij-kern {
  grid-template-columns: auto 22px auto 1fr;
  gap: 6px;
  align-items: center;
}

/* ===== ⭐⭐⭐⭐ UITBREIDEN — invul-zinnen met inline schrijflijn ===== */

.ov08-invul-blok {
  margin-bottom: 24px;
}

.ov08-invul-titel,
.ov08-eigen-titel {
  font-weight: bold;
  color: var(--zisa-blauw, #2196F3);
  margin-bottom: 12px;
  font-size: 1.05rem;
}

.ov08-invul-lijst {
  list-style: decimal;
  padding-left: 28px;
  margin: 0;
}

.ov08-invul-zin {
  padding: 10px 0;
  font-size: 1.05rem;
  line-height: 1.8;
}

/* De inline schrijflijn naast (woord) */
.ov08-invul-lijn {
  display: inline-block;
  vertical-align: middle;
  position: relative;
  margin: 0 4px;
  min-width: 180px;
}

.ov08-invul-lijn canvas {
  vertical-align: middle;
}

.ov08-invul-antwoord {
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-55%);
  color: #2E7D32;
  font-weight: bold;
  z-index: 2;
  pointer-events: none;
}

.ov08-fallback-lijn-inline {
  display: inline-block;
  width: 160px;
  border-bottom: 1.5px solid #333;
  vertical-align: middle;
}

/* ===== Eigen schrijfblok onderaan ===== */
.ov08-eigen-blok {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1.5px dashed #ccc;
}

.ov08-eigen-lijn {
  margin: 8px 0;
}
/* ==========================================================
   OV08 — MINIMALE EXTRA STYLING
   
   PLAK DIT BLOK ONDERAAN style.css
   (verwijder eerst alle eerdere ov08-* CSS-blokken die ik je gaf)
   
   OV08 gebruikt automatisch dezelfde styling als OV07 omdat alle
   OV08-elementen ÓÓK de ov07-class hebben (zie ov08.js).
   
   Dit kleine blok voegt enkel toe wat OV08 nodig heeft maar OV07
   niet heeft: het TELWOORD bij ⭐⭐ Toepassen.
   ========================================================== */

/* Telwoord (veel, twee, drie, ...) in ⭐⭐ Toepassen */
.ov08-telwoord {
  font-family: "Sassoon Primary", "Andika", sans-serif;
  font-size: 1.05rem;
  color: var(--zisa-blauw, #2196F3);
  font-style: italic;
  white-space: nowrap;
  min-width: 50px;
  text-align: center;
}

/* In compact-modus iets kleiner */
.ov08-blad.lijnhoogte-klein .ov08-telwoord {
  font-size: 0.95rem;
  min-width: 40px;
}

/* OV08-specifieke grid-aanpassing voor ⭐⭐ Toepassen
   (rij heeft extra telwoord-kolom dat OV07 niet heeft) */
.ov08-rooster.ov08-tweekoloms .ov08-rij-kern {
  grid-template-columns: auto 22px auto 1fr;
  gap: 6px;
  align-items: center;
}

/* ===== ⭐⭐⭐⭐ UITBREIDEN — invul-zinnen met inline schrijflijn ===== */

.ov08-invul-blok {
  margin-bottom: 24px;
}

.ov08-invul-titel,
.ov08-eigen-titel {
  font-weight: bold;
  color: var(--zisa-blauw, #2196F3);
  margin-bottom: 12px;
  font-size: 1.05rem;
}

.ov08-invul-lijst {
  list-style: none;
  padding-left: 0;
  margin: 0;
  counter-reset: ov08-tel;
}

.ov08-invul-zin {
  padding: 12px 0;
  font-size: 1.05rem;
  line-height: 1.8;
  position: relative;
  padding-left: 32px;
  counter-increment: ov08-tel;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.ov08-invul-zin::before {
  content: counter(ov08-tel) ".";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  font-weight: bold;
  color: #555;
  width: 24px;
  text-align: right;
}

/* De inline schrijflijn naast (woord) */
.ov08-invul-lijn {
  display: inline-block;
  vertical-align: middle;
  position: relative;
  margin: 0 4px;
  min-width: 180px;
}

.ov08-invul-lijn canvas {
  vertical-align: middle;
}

.ov08-invul-antwoord {
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-55%);
  color: #2E7D32;
  font-weight: bold;
  z-index: 2;
  pointer-events: none;
}

.ov08-fallback-lijn-inline {
  display: inline-block;
  width: 160px;
  border-bottom: 1.5px solid #333;
  vertical-align: middle;
}

/* ===== Eigen schrijfblok onderaan ===== */
.ov08-eigen-blok {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1.5px dashed #ccc;
}

.ov08-eigen-lijn {
  margin: 8px 0;
}/* ==========================================================
   OV09 — KLINKERDIEF STYLING
   
   PLAK DIT BLOK ONDERAAN style.css
   ========================================================== */

/* ===== ⭐ Oefenen — afbeelding + 2 schrijfwijzen + lijn ===== */
.ov09-basis-rooster {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 16px;
}

.ov09-basis-cel {
  position: relative;
  padding: 12px;
  background: #FAFAFA;
  border-radius: 8px;
  border: 1px solid #E0E0E0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.ov09-basis-afb {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 95px;
}

.ov09-basis-keuzes {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 28px;
  width: 100%;
  align-items: center;
  flex-wrap: wrap;
}

.ov09-basis-keuze {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.1rem;
  font-family: "Sassoon Primary", "Andika", sans-serif;
  font-weight: bold;
}

.ov09-basis-lijn {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 4px;
}

.ov09-bolletje {
  display: inline-block;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid #555;
  flex-shrink: 0;
}

.ov09-keuze-juist .ov09-bolletje {
  background: #2E7D32;
  border-color: #2E7D32;
  position: relative;
}

.ov09-keuze-juist .ov09-bolletje::after {
  content: "✓";
  color: white;
  font-size: 14px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-weight: bold;
}

.ov09-keuze-juist {
  color: #2E7D32;
}

/* ===== ⭐⭐ Toepassen — afbeelding + schrijflijn ===== */
.ov09-kern-rooster {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
  margin-top: 16px;
}

.ov09-kern-cel {
  position: relative;
  padding: 12px;
  background: #FAFAFA;
  border-radius: 8px;
  border: 1px solid #E0E0E0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.ov09-kern-afb {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 95px;
}

.ov09-kern-lijn {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
}

/* ===== ⭐⭐⭐ Verdiepen — afbeeldingen sorteer ===== */
.ov09-verdieping-rooster {
  margin-top: 16px;
}

.ov09-verdieping-afbeeldingen {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  padding: 16px;
  background: #FAFAFA;
  border-radius: 8px;
  border: 1px dashed #BBB;
  margin-bottom: 20px;
}

.ov09-verdieping-cel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px;
  background: white;
  border-radius: 6px;
  border: 1px solid #DDD;
  min-height: 110px;
  position: relative;
}

.ov09-afb {
  display: inline-block;
}

.ov09-afb-fallback {
  font-size: 1.2rem;
  font-weight: bold;
  color: #888;
  font-style: italic;
}

.ov09-verdieping-kolommen {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
}

.ov09-verdieping-kolom {
  display: flex;
  flex-direction: column;
}

.ov09-verdieping-kolom-kop {
  padding: 8px 10px;
  color: white;
  font-weight: bold;
  font-size: 0.95rem;
  text-align: center;
  border-radius: 6px 6px 0 0;
}

.ov09-verdieping-kolom-lijnen {
  background: #FAFAFA;
  padding: 12px 8px;
  border-radius: 0 0 6px 6px;
  border: 1px solid #E0E0E0;
  border-top: none;
  min-height: 120px;
}

.ov09-verdieping-kolom-lijn {
  position: relative;
  margin: 10px 0;
}

/* ===== ⭐⭐⭐⭐ Uitbreiden — foute zinnen ===== */
.ov09-uitbreiding-rooster {
  margin-top: 16px;
}

.ov09-uitbreiding-rij {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 8px;
  align-items: start;
  padding: 10px 12px;
  margin: 8px 0;
  border-bottom: 1px dashed #E0E0E0;
  position: relative;
}

.ov09-uitbreiding-nr {
  font-weight: bold;
  color: #666;
  grid-column: 1;
  grid-row: 1 / span 2;
}

.ov09-uitbreiding-zin {
  font-size: 1.05rem;
  line-height: 1.6;
  grid-column: 2;
}

.ov09-uitbreiding-correctie {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
  grid-column: 2;
}

.ov09-uitbreiding-pijl {
  color: var(--zisa-blauw, #2196F3);
  font-size: 1.2rem;
}

.ov09-uitbreiding-lijn {
  position: relative;
  display: inline-block;
}

/* ===== Algemene elementen geërfd van OV07 ===== */
.ov09-titel-balk {
  /* erft van ov07-titel-balk */
}

.ov09-opdracht-blok {
  /* erft van ov07-opdracht-blok */
}

.ov09-lijn-antwoord {
  /* erft van ov07-lijn-antwoord (color groen) */
}

.ov09-lege-tekst {
  text-align: center;
  padding: 40px 20px;
  color: #666;
  font-size: 1rem;
  line-height: 1.6;
}

.ov09-lege-tekst em {
  color: var(--zisa-blauw, #2196F3);
  font-style: normal;
  font-weight: bold;
}

/* Doorgestreepte foute vorm bij oplossingen ⭐⭐⭐⭐ */
.ov09-uitbreiding-fout {
  text-decoration: line-through;
  text-decoration-color: #C00;
  text-decoration-thickness: 2px;
  color: #C00;
  font-weight: bold;
}

/* ==========================================================
   MODUS-SYSTEEM
   Startscherm, modus-badge in topbar, herhalingsbundel-placeholder,
   weekdictee-paneel.
   ========================================================== */

/* ===== Topbar: modus-badge + wisselknop =====
   Topbar mag wrappen op smalle schermen zodat de wisselknop altijd zichtbaar
   blijft. h1 krijgt min-width:0 zodat hij wel mag inkrimpen. */
.topbar { flex-wrap: wrap; row-gap: 8px; }
.topbar h1 { min-width: 0; }

.modus-badge {
  background: var(--zisa-geel);
  color: var(--zisa-blauw);
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.2px;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.modus-wisselen {
  background: rgba(255,255,255,0.18);
  color: white;
  border: 1px solid rgba(255,255,255,0.35);
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 0.85rem;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s;
  white-space: nowrap;
  flex-shrink: 0;
}
.modus-wisselen:hover {
  background: rgba(255,255,255,0.28);
}

/* Op smalle schermen: knop nadrukkelijk tonen door op nieuwe regel te zetten,
   en de h1 hoeft niet meer flex:1 te zijn — anders verdrukt hij de knoppen. */
@media (max-width: 720px) {
  .topbar h1 { font-size: 1.05rem; flex: 0 0 auto; }
  .modus-badge { font-size: 0.78rem; padding: 3px 8px; }
  .modus-wisselen { font-size: 0.8rem; padding: 5px 10px; }
}

/* ===== Startscherm ===== */
.modus-startscherm {
  min-height: calc(100vh - 56px);
  background:
    radial-gradient(circle at 15% 20%, rgba(245,200,66,0.10) 0, transparent 45%),
    radial-gradient(circle at 85% 80%, rgba(44,95,141,0.08) 0, transparent 50%),
    var(--zisa-grijs);
  padding: 60px 24px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
.modus-startscherm-binnen {
  max-width: 1100px;
  width: 100%;
  text-align: center;
}
.modus-titel {
  font-size: 2.2rem;
  margin: 0 0 12px 0;
  color: var(--zisa-blauw);
  font-weight: 700;
  letter-spacing: -0.5px;
}
.modus-ondertitel {
  font-size: 1.05rem;
  color: #555;
  margin: 0 0 48px 0;
}

/* ===== Modus-kaarten ===== */
.modus-kaarten {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 40px;
}
@media (max-width: 880px) {
  .modus-kaarten { grid-template-columns: 1fr; }
  .modus-startscherm { padding: 40px 16px; }
  .modus-titel { font-size: 1.7rem; }
}

.modus-kaart {
  /* Reset button defaults */
  font-family: inherit;
  border: none;
  text-align: left;
  cursor: pointer;
  /* Card-styling */
  background: white;
  border-radius: 14px;
  padding: 28px 22px 22px 22px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.06);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  position: relative;
  overflow: hidden;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  /* Accent bar bovenaan */
  border-top: 4px solid var(--zisa-blauw);
}
.modus-kaart::before {
  /* Subtiel pattern-blok rechtsboven */
  content: "";
  position: absolute;
  top: -30px;
  right: -30px;
  width: 100px;
  height: 100px;
  background: radial-gradient(circle, rgba(44,95,141,0.06) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}
.modus-kaart:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(44,95,141,0.12);
}
.modus-kaart:focus-visible {
  outline: 3px solid var(--zisa-geel);
  outline-offset: 2px;
}

.modus-kaart-werkblad   { border-top-color: var(--zisa-blauw); }
.modus-kaart-herhaling  { border-top-color: var(--zisa-geel); opacity: 0.78; }
.modus-kaart-weekdictee { border-top-color: var(--zisa-groen); }

.modus-kaart-icoon {
  font-size: 2.6rem;
  line-height: 1;
  margin-bottom: 4px;
}
.modus-kaart-titel {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--zisa-blauw);
  letter-spacing: -0.2px;
}
.modus-kaart-uitleg {
  font-size: 0.93rem;
  line-height: 1.5;
  color: #444;
  flex: 1;
}
.modus-kaart-cta {
  margin-top: 10px;
  color: var(--zisa-blauw);
  font-weight: 600;
  font-size: 0.92rem;
  transition: transform 0.15s;
}
.modus-kaart:hover .modus-kaart-cta {
  transform: translateX(3px);
}
.modus-kaart-cta-binnenkort {
  color: #999;
  font-style: italic;
}

.modus-startscherm-voet {
  font-size: 0.85rem;
  color: #888;
  font-style: italic;
  margin-top: 16px;
}

/* ===== Herhalingsbundel placeholder ===== */
.modus-placeholder {
  min-height: calc(100vh - 56px);
  background: var(--zisa-grijs);
  padding: 60px 24px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
.modus-placeholder-binnen {
  max-width: 640px;
  width: 100%;
  background: white;
  border-radius: 14px;
  padding: 48px 40px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.06);
  text-align: center;
  border-top: 4px solid var(--zisa-geel);
}
.modus-placeholder-icoon {
  font-size: 3.6rem;
  margin-bottom: 12px;
}
.modus-placeholder-binnen h2 {
  font-size: 1.6rem;
  color: var(--zisa-blauw);
  margin: 0 0 16px 0;
}
.modus-placeholder-lead {
  font-size: 1.02rem;
  line-height: 1.55;
  color: #444;
  margin: 0 0 24px 0;
}
.modus-placeholder-checklist {
  text-align: left;
  list-style: none;
  padding: 0;
  margin: 0 auto 24px auto;
  max-width: 460px;
  background: var(--zisa-blauw-licht);
  border-radius: 10px;
  padding: 16px 20px;
}
.modus-placeholder-checklist li {
  padding: 6px 0;
  font-size: 0.95rem;
  color: #333;
}
.modus-placeholder-voet {
  font-size: 0.9rem;
  color: #666;
  margin: 0 0 24px 0;
}
.modus-placeholder-knop {
  min-width: 220px;
}

/* ==========================================================
   WEEKDICTEE-PANEEL (modus "weekdictee")
   ========================================================== */
.wd-paneel {
  padding: 16px;
  max-width: 1400px;
  margin: 0 auto;
}
.wd-paneel-layout {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 16px;
}
@media (max-width: 900px) {
  .wd-paneel-layout { grid-template-columns: 1fr; }
}

.wd-paneel-zijbalk {
  background: white;
  border-radius: 8px;
  padding: 18px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  height: fit-content;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.wd-paneel-blok {
  border-bottom: 1px dashed var(--zisa-rand);
  padding-bottom: 16px;
}
.wd-paneel-blok:last-of-type {
  border-bottom: none;
  padding-bottom: 0;
}

.wd-paneel-stap {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.wd-stap-nr {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--zisa-blauw);
  color: white;
  font-size: 0.85rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.wd-stap-titel {
  font-size: 1rem;
  font-weight: 600;
  color: var(--zisa-blauw);
}

.wd-paneel-uitleg {
  font-size: 0.82rem;
  color: #666;
  margin: 0 0 10px 0;
  line-height: 1.4;
}

.wd-paneel-info {
  font-size: 0.85rem;
  margin: 8px 0 0 0;
  line-height: 1.4;
}
.wd-info-grijs { color: #888; }
.wd-info-groen { color: var(--zisa-groen); }

.wd-paneel-leeg {
  text-align: center;
  color: #888;
  font-size: 0.9rem;
  padding: 12px 0;
}

/* Categorie-blok (lijkt op zijbalk-stijl, eigen prefix .wd-) */
.wd-hoofdgroep {
  background: var(--zisa-grijs);
  border-radius: 6px;
  margin-bottom: 8px;
  border: 1px solid var(--zisa-rand);
}
.wd-hoofdgroep > summary {
  padding: 8px 10px;
  cursor: pointer;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  gap: 8px;
  list-style: none;
  user-select: none;
}
.wd-hoofdgroep > summary::-webkit-details-marker { display: none; }
.wd-hoofdgroep > summary::before {
  content: "▸";
  color: var(--zisa-blauw);
  transition: transform 0.15s;
  display: inline-block;
}
.wd-hoofdgroep[open] > summary::before {
  transform: rotate(90deg);
}
.wd-hg-label { flex: 1; font-weight: 600; }
.wd-hg-teller {
  background: white;
  border: 1px solid var(--zisa-rand);
  border-radius: 10px;
  padding: 1px 8px;
  font-size: 0.75rem;
  color: #555;
}
.wd-hg-inhoud { padding: 4px 10px 10px 10px; background: white; }

.wd-groep + .wd-groep { margin-top: 10px; }
.wd-groep-titel {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: #777;
  margin: 8px 0 6px 0;
  font-weight: 600;
}
.wd-cat-rij {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.wd-cat-vink {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: white;
  border: 1px solid var(--zisa-rand);
  border-radius: 14px;
  padding: 4px 10px;
  font-size: 0.82rem;
  cursor: pointer;
  transition: all 0.12s;
}
.wd-cat-vink:hover { border-color: var(--zisa-blauw); }
.wd-cat-vink.aan {
  background: var(--zisa-blauw-licht);
  border-color: var(--zisa-blauw);
  color: var(--zisa-blauw);
  font-weight: 600;
}
.wd-cat-vink input[type="checkbox"] {
  width: 14px;
  height: 14px;
  cursor: pointer;
  margin: 0;
}
.wd-cat-aantal { color: #888; font-size: 0.74rem; }

.wd-paneel-hoogte-rij {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
}
.wd-paneel-mini-label {
  font-size: 0.85rem;
  color: #555;
}

.wd-paneel-acties {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 4px;
}
.wd-paneel-actie:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.wd-paneel-preview-wrap {
  /* Hergebruikt .preview-paneel styling die al bestaat */
}


/* ==========================================================
   WEEKDICTEE-PANEEL — extra UI (toon woorden, bewerken, ✕)
   ========================================================== */

/* Toggles + mini uitleg */
.wd-paneel-toggle {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  cursor: pointer;
  font-size: 0.92rem;
  line-height: 1.35;
  padding: 4px 0;
}
.wd-paneel-toggle input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 2px 0 0 0;
  flex-shrink: 0;
  cursor: pointer;
}
.wd-paneel-toggle small {
  color: #888;
  font-size: 0.82rem;
  font-weight: normal;
}
.wd-paneel-mini-uitleg {
  font-size: 0.78rem;
  color: #777;
  margin: 6px 0 0 24px;
  line-height: 1.4;
}

/* Het bewerken-knopje */
.wd-paneel-bewerk-knop {
  width: 100%;
  margin-top: 8px;
  padding: 8px;
}
.wd-paneel-bewerk-knop.actief {
  background: var(--zisa-geel);
  border-color: #d4a017;
  color: #5a4400;
}

/* Het Preview-blok visueel onderscheiden — dit zijn instellingen die enkel
   het scherm beïnvloeden, niet de PDF. Geel-accent past bij Zisa-stijl. */
.wd-paneel-blok-preview {
  background: linear-gradient(180deg, #fffaee 0%, #fff7e3 100%);
  border-left: 3px solid var(--zisa-geel);
  padding-left: 12px;
  margin-left: -12px;
  padding-right: 12px;
  margin-right: -12px;
  padding-top: 12px;
  padding-bottom: 14px;
  border-radius: 4px;
}
.wd-paneel-blok-preview .wd-stap-nr {
  background: var(--zisa-geel);
  color: #5a4400;
  font-size: 1rem;
}

/* "Toon woorden" actief: de .antwoord-spans zien er in preview lichter uit
   zodat de leerkracht weet "dit is preview-only".
   In de PDF zijn ze gewoon zwart (we strippen de class .wd-toont-woorden
   uit de kloon vóór html2pdf hem rendert). */
.wd-toont-woorden .antwoord {
  color: var(--zisa-blauw);
  opacity: 0.78;
  font-style: italic;
}
.wd-toont-woorden .antwoord.zin-antwoord {
  font-size: 0.95em;
}

/* Bewerk-modus: gele highlight rond bewerkbare elementen */
.wd-bewerk-aan [data-bewerk-id] {
  outline: 2px dashed rgba(245,200,66,0.95);
  outline-offset: 2px;
  border-radius: 3px;
  cursor: text !important;
  background: rgba(255,250,230,0.7);
  transition: background 0.12s;
  padding: 1px 3px;
  margin: 0 1px;
}
.wd-bewerk-aan [data-bewerk-id]:hover {
  background: rgba(255,243,196,0.95);
}
.wd-bewerk-aan [data-bewerk-id]:focus {
  outline-color: var(--zisa-geel);
  outline-style: solid;
  outline-width: 2.5px;
  background: #fff;
  box-shadow: 0 0 0 1px var(--zisa-geel);
}

/* ✕ verwijder-knop op woord- en zin-rij */
.dag-woord-rij,
.wd-zin-rij {
  position: relative;
}
.wd-verwijder-woord {
  position: absolute;
  top: -6px;
  left: -6px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  color: #c33;
  border: 1.5px solid #c33;
  font-size: 0.7rem;
  font-weight: bold;
  cursor: pointer;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
  transition: all 0.12s;
  opacity: 0;
}
/* Zichtbaar bij hover van de hele rij, of bij focus van de knop zelf */
.dag-woord-rij:hover .wd-verwijder-woord,
.wd-zin-rij:hover .wd-verwijder-woord,
.wd-verwijder-woord:focus {
  opacity: 1;
}
.wd-verwijder-woord:hover {
  background: #c33;
  color: white;
  transform: scale(1.1);
}


/* ==========================================================
   WEEKDICTEE — Dicteerblad / Leerling-blad onderscheid (v2)
   ========================================================== */

/* Download-sectie titel */
.wd-paneel-download-titel {
  font-size: 0.78rem;
  color: #555;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--zisa-rand);
}

/* Dicteerblad-knop visueel onderscheiden (geel-accent = leerkracht-only) */
.wd-paneel-download-leerkracht {
  background: linear-gradient(180deg, #fffaee 0%, #fff5d8 100%);
  border-color: #d4a017;
  color: #5a4400;
  font-weight: 600;
}
.wd-paneel-download-leerkracht:hover:not(:disabled) {
  background: linear-gradient(180deg, #fff5d8 0%, #ffefc0 100%);
}

/* Mini-uitleg BOVENAAN het bewerk-blok (vóór de knop) */
.wd-paneel-mini-uitleg-top {
  font-size: 0.84rem;
  color: #555;
  margin: 0 0 10px 0;
  line-height: 1.45;
}

/* Bewerken-knop nu primair (geel-accent) zodat hij meer opvalt */
.wd-paneel-bewerk-knop {
  width: 100%;
  margin: 0 0 6px 0;
  padding: 10px;
  background: var(--zisa-geel);
  color: #5a4400;
  border-color: #d4a017;
  font-weight: 600;
}
.wd-paneel-bewerk-knop:hover {
  background: #f0c038;
}
.wd-paneel-bewerk-knop.actief {
  background: #5a4400;
  color: var(--zisa-geel);
  border-color: #5a4400;
}
.wd-paneel-bewerk-knop.actief::before {
  content: "● ";
  color: #ff6b6b;
}

/* Preview-blok: betere opening — niet meer met een "Preview"-label maar
   met een directe instructie. De .wd-toont-woorden class is niet meer
   nodig (preview toont altijd woorden) — opruimen. */
.wd-paneel-blok-preview .wd-stap-nr {
  font-size: 1.1rem;
}

/* De .antwoord-spans in de preview: niet meer cursief/lichter (preview =
   exact wat op het dicteerblad komt). */
#wd-paneel-preview .antwoord {
  color: inherit;
  opacity: 1;
  font-style: normal;
}


/* ==========================================================
   OV10 — Samenstellingen
   
   We hergebruiken bewust .ov01-header, .ov01-titel, .ov01-stappen,
   .ov01-voettekst, .ov01-niveau-badge, .oplossingen-badge, .werkblad
   en .rij-verwijder-knop styling — alleen wat OV10-specifiek is
   krijgt eigen regels (woordzoeker-rooster, plaatjes-combinatie,
   verbinden-kolommen, beschrijving-rijen).
   ========================================================== */

/* ----- BASIS: woordzoeker met plaatjes ----- */
.ov10-basis-inhoud {
  margin-top: 12px;
}
.ov10-basis-afb-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin: 0 auto 14px;
  max-width: 700px;
}
.ov10-basis-afb-cel {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 70px;
  background: #f7f9fc;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 6px;
}
.ov10-afb-img {
  max-width: 100%;
  max-height: 80px;
  object-fit: contain;
}
.ov10-afb-emoji-combo {
  font-size: 2rem;
  line-height: 1;
  letter-spacing: 2px;
}

.ov10-basis-rooster {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin: 16px auto;
  width: fit-content;
  font-family: "Courier New", monospace;
}
.ov10-basis-rij {
  display: flex;
  gap: 3px;
}
.ov10-hokje {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 28px;
  border: 1px solid #bbb;
  border-radius: 3px;
  background: #fff;
  font-size: 1rem;
  font-weight: 600;
  text-transform: lowercase;
}
.ov10-hokje-vul {
  color: #666;
}
.ov10-hokje-treffer {
  background: #fff8d6;
  border-color: #d4a017;
  color: #2C5F8D;
}

/* ----- Noteer-rijen (gedeeld door basis + verdieping) ----- */
.ov10-noteer-label {
  font-weight: 600;
  margin: 14px 0 8px 0;
  font-size: 0.95rem;
}
.ov10-basis-noteer,
.ov10-vb-noteer {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ov10-basis-noteer-rij {
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
  padding: 4px 0;
}
.ov10-noteer-nr {
  font-weight: 600;
  color: #2C5F8D;
  min-width: 20px;
}
.ov10-noteer-lijn-cel {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
}

/* ----- KERN: plaatje + plaatje = samenstelling ----- */
.ov10-kern-rooster {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 12px;
}
.ov10-kern-rij {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 16px;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px dashed #e0e0e0;
  position: relative;
}
.ov10-kern-plaatjes {
  display: flex;
  align-items: center;
  gap: 6px;
}
.ov10-deel-emoji {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  background: #f7f9fc;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 1.8rem;
}
.ov10-deel-tekst {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 52px;
  height: 52px;
  padding: 0 10px;
  background: #fff8d6;
  border: 1.5px solid #d4a017;
  border-radius: 6px;
  font-size: 0.95rem;
  font-weight: 600;
  color: #5a4400;
}
.ov10-kern-plus,
.ov10-kern-is {
  font-size: 1.3rem;
  color: #2C5F8D;
  font-weight: bold;
  padding: 0 2px;
}
.ov10-kern-lijn-cel {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
}

/* ----- VERDIEPING: verbind twee kolommen ----- */
.ov10-vb-grid {
  display: grid;
  grid-template-columns: 1fr 80px 1fr;
  gap: 0;
  margin: 14px auto;
  padding: 14px;
  background: #f7f9fc;
  border-radius: 6px;
  max-width: 520px;
}
.ov10-vb-kolom {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ov10-vb-links {
  align-items: flex-end;
}
.ov10-vb-rechts {
  align-items: flex-start;
}
.ov10-vb-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1rem;
  font-weight: 600;
  color: #333;
  padding: 6px 12px;
  background: white;
  border: 1px solid #ccc;
  border-radius: 4px;
  min-width: 100px;
}
.ov10-vb-links .ov10-vb-item {
  justify-content: space-between;
}
.ov10-vb-rechts .ov10-vb-item {
  justify-content: flex-start;
}
.ov10-vb-punt {
  color: #2C5F8D;
  font-size: 1.4rem;
  line-height: 1;
}

/* ----- UITBREIDING: beschrijving + lijn ----- */
.ov10-ub-rooster {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 12px;
}
.ov10-ub-rij {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px dashed #e0e0e0;
  position: relative;
}
.ov10-ub-inhoud {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ov10-ub-beschrijving {
  margin: 0;
  font-size: 0.98rem;
  color: #333;
  font-style: italic;
}
.ov10-ub-lijn-cel {
  position: relative;
  display: flex;
  align-items: center;
}

/* ----- Antwoord-tekst (op alle niveaus dezelfde stijl als OV02/OV03) ----- */
.ov10-lijn-antwoord {
  position: absolute;
  z-index: 1;
  font-weight: 600;
  color: #2C5F8D;
  font-size: 1rem;
  pointer-events: none;
}

/* Fallback voor wanneer schrijflijnen-bibliotheek niet geladen is */
.ov10-fallback-lijn {
  display: inline-block;
  height: 18px;
  border-bottom: 1.5px solid #333;
  width: 100%;
}


/* ----- OV10 BASIS: 6 noteer-rijen in 2 kolommen van 3 ----- */
.ov10-basis-noteer-2kol {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 24px;
}
.ov10-basis-noteer-2kol .ov10-basis-noteer-rij {
  padding: 2px 0;
}

/* ----- OV10 VERDIEPING: 2 mini-oefeningen naast elkaar ----- */
.ov10-vb-twee-kolommen {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 10px;
}
.ov10-vb-mini {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
/* Binnen een mini-oefening: smallere grid + compactere items */
.ov10-vb-twee-kolommen .ov10-vb-grid {
  grid-template-columns: 1fr 30px 1fr;
  padding: 10px 6px;
  max-width: none;
  margin: 0;
}
.ov10-vb-twee-kolommen .ov10-vb-item {
  padding: 4px 8px;
  font-size: 0.92rem;
  min-width: 0;
}
.ov10-vb-twee-kolommen .ov10-vb-kolom {
  gap: 7px;
}
.ov10-vb-twee-kolommen .ov10-vb-noteer .ov10-basis-noteer-rij {
  padding: 2px 0;
}


/* ==========================================================
   GLOBALE SCHRIJFLIJN-KEUZE (sectie 4 van zijbalk)
   7 knoppen met canvas-previews + hoogte-keuze
   ========================================================== */

.zb-lt-label {
  display: block;
  font-size: 0.85rem;
  color: #444;
  font-weight: 600;
  margin: 0 0 6px 0;
}

.zb-lt-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-bottom: 6px;
}

.zb-lt-knop {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 6px 4px;
  background: white;
  border: 1.5px solid #ccc;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.zb-lt-knop:hover {
  border-color: #999;
  background: #fafafa;
}

.zb-lt-knop.actief {
  background: var(--zisa-geel, #ffd84d);
  border-color: #d4a017;
  box-shadow: 0 1px 3px rgba(212, 160, 23, 0.3);
}

.zb-lt-knop.actief .zb-lt-naam {
  color: #5a4400;
  font-weight: 700;
}

.zb-lt-preview {
  display: block;
  width: 100%;
  height: 52px;
  background: white;
  border-radius: 2px;
}

.zb-lt-knop.actief .zb-lt-preview {
  background: white;
}

.zb-lt-naam {
  font-size: 0.72rem;
  color: #555;
  font-weight: 600;
  text-align: center;
}


/* +1 woord knop in disabled-staat: uitgegrijsd maar duidelijk klikbaar
   voor tooltip-leesbaarheid (anders snapt leerkracht niet waarom hij niets doet). */
.bundel-item-plus-knop.is-uitgegrijsd,
.bundel-item-plus-knop:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  background: #eee;
  color: #888;
}
.bundel-item-plus-knop.is-uitgegrijsd:hover,
.bundel-item-plus-knop:disabled:hover {
  background: #eee;
  border-color: #ccc;
}


/* Info-regel in OV-instellingen voor OV's met vaste plafonds per niveau */
.zb-oef-rij.zb-oef-info {
  padding: 6px 10px;
  background: #f7f9fc;
  border-radius: 4px;
  margin-top: 4px;
}
.zb-oef-rij.zb-oef-info small {
  color: #555;
  font-size: 0.78rem;
  line-height: 1.4;
  display: block;
}


/* OV01 uitbreiding: 3 kolommen naast elkaar (woord / meervoud / verklein) */
.ov01-uit-kolommen {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
  margin-top: 6px;
}
.ov01-uit-kolom {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ov01-uit-kolom .ov01-uit-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: #444;
}


/* OV02 — Page-break en pagina 2 marge.
   Bij meer dan 8 woorden krijgt rij 9 een page-break voor + extra
   bovenmarge zodat de inhoud niet tegen de bladrand staat (geen header/
   opdracht zijn er meer op pagina 2). */
.ov02-rij.pagina-break-voor {
  page-break-before: always;
  break-before: page;
}
.ov02-rij.ov02-rij-pagina2-start {
  /* Visuele bovenmarge voor de eerste rij op pagina 2.
     Komt overeen met header+opdracht-hoogte van pagina 1 (~3cm). */
  padding-top: 2.5cm;
}


/* ==========================================================
   OV03 — 2-kolommen layout
   Per cel verticaal gestapeld: afbeelding (alleen basis) → letters → schrijflijn
   ========================================================== */

.ov03-rooster-2kol {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 16px;
  margin-top: 8px;
}

.ov03-cel {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 8px 10px 10px;
  background: #fafbfd;
  border: 1px solid #e3e7ee;
  border-radius: 6px;
}

.ov03-cel .rij-verwijder-knop {
  position: absolute;
  top: 4px;
  right: 4px;
}

.ov03-cel-plaatje {
  font-size: 2.2rem;
  line-height: 1;
  margin-bottom: 2px;
}

.ov03-cel-letters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 3px;
}

.ov03-cel-lijn {
  width: 100%;
  position: relative;
}


/* OV03 — Uitbreidingsblok: 2 schrijflijnen naast elkaar (was 2 onder elkaar). */
.ov03-uitbr-lijnen {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 4px;
}


/* OV04 uitbreiding — 3 zin-schrijflijnen onderaan op de pagina */
.ov04-zinnen-blok {
  margin-top: 16px;
  padding: 12px 14px;
  background: #f3f8e8;
  border: 1px solid #c8d8a8;
  border-radius: 8px;
}
.ov04-zinnen-titel {
  font-weight: 600;
  margin-bottom: 8px;
  font-size: 0.95rem;
  color: #333;
}
.ov04-zinnen-blok .ov01-zin-canvas-wrap,
.ov04-zinnen-blok > canvas.schrijflijn-canvas {
  margin-bottom: 6px;
}


/* OV04 symbool-hint (basis): groot, kleur van kolom */
.ov04-woord .ov04-symbool {
  font-weight: 700;
  font-size: 1.05em;
  display: inline-block;
  margin: 0 1px;
}
/* OV04 streepjes-hint (kern/verdieping): leesbaar onderstreepje-blok */
.ov04-woord .ov04-streepjes {
  font-family: 'Courier New', monospace;
  letter-spacing: 1px;
  font-weight: 700;
  color: #444;
}
/* Legende: symbool in cirkel van kolomkleur */
.ov04-legende-kleur {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  color: white;
  font-weight: 700;
  font-size: 13px;
}


/* OV05 keuze-hokjes (hele woorden naast elkaar) — kind omcirkelt */
.ov05-keuzes {
  display: flex;
  gap: 8px;
  flex-wrap: nowrap;
  justify-content: center;
  width: 100%;
}
.ov05-keuze-hokje {
  flex: 1;
  text-align: center;
  padding: 8px 6px;
  border: 1.5px solid #555;
  border-radius: 4px;
  background: white;
  font-size: 1rem;
  font-weight: 600;
  color: #1a1a1a;
  font-family: 'Comic Sans MS', 'Segoe Print', sans-serif;
  min-width: 0;
}
/* Bij oplossingen: juiste hokje groen */
.ov05-keuze-hokje.ov05-keuze-juist {
  background: #c8e6c9;
  border-color: #4caf50;
  border-width: 2px;
}


/* OV05 prefix vóór de schrijflijn ('hij' / 'ik' bij werkwoorden) */
.ov05-lijn-cel {
  display: flex;
  align-items: center;
  gap: 6px;
  position: relative;
}
.ov05-lijn-prefix {
  font-family: 'Comic Sans MS', 'Segoe Print', sans-serif;
  font-weight: 600;
  font-size: 0.95rem;
  color: #333;
  white-space: nowrap;
}


/* OV04 kleurpickers in zijbalk-instellingen */
.ov04-kleuren-rij {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ov04-kleur-cel {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  background: #f7f7f7;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.95rem;
}
.ov04-kleur-cel:hover {
  background: #efefef;
}
.ov04-kleur-input {
  width: 36px;
  height: 28px;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 0;
  cursor: pointer;
}
.ov04-kleur-reset {
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
}
.ov04-kleur-reset:hover {
  background: #f0f0f0;
}


/* OV04 kleurpickers in zijbalk-OV-instellingen (compacte vorm) */
.zb-oef-kleuren {
  display: flex !important;
  flex-direction: column;
  gap: 4px;
}
.zb-oef-kleuren > label {
  font-weight: 600;
  font-size: 0.85rem;
  color: #555;
}
.zb-ov04-kleuren {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  align-items: center;
}
.zb-ov04-kleur-cel {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 2px 4px;
  background: #fff;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.8rem;
}
.zb-ov04-kleur-cel:hover {
  background: #f5f5f5;
}
.zb-ov04-kleur-input {
  width: 26px;
  height: 22px;
  border: 1px solid #ccc;
  border-radius: 3px;
  padding: 0;
  cursor: pointer;
}
.zb-ov04-kleur-reset {
  width: 26px;
  height: 26px;
  border: 1px solid #ccc;
  border-radius: 3px;
  background: #fff;
  cursor: pointer;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.zb-ov04-kleur-reset:hover {
  background: #f0f0f0;
}


/* Groep-titel met master-vinkje (klikbaar) */
.zb-groep-titel {
  display: flex !important;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.92rem;
  padding: 4px 0;
  user-select: none;
}
.zb-groep-titel:hover {
  color: var(--zisa-blauw, #2196F3);
}
.zb-groep-master {
  cursor: pointer;
  margin: 0;
}


/* ============================================================
   HERHALINGSBUNDEL-MODUS
   ============================================================ */

.hb-layout {
  display: grid;
  grid-template-columns: 380px 1fr;
  min-height: 100vh;
  background: #f0f2f5;
}

/* Zijbalk hergebruikt .sidebar styling */
.hb-sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  padding: 16px;
  background: white;
  border-right: 1px solid #ddd;
}

/* Acties onderaan zijbalk */
.hb-bundel-acties {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 2px solid #eee;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* RECHTS: preview-paneel */
.hb-preview {
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

/* Topbalk met titel + navigatie */
.hb-topbalk {
  width: 100%;
  max-width: 820px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  background: white;
  border-radius: 12px;
  padding: 12px 20px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.hb-topbalk-titel {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1.1rem;
  font-weight: 600;
}
.hb-titel-input {
  border: 1px solid transparent;
  background: transparent;
  font-size: 1.05rem;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 4px;
  min-width: 200px;
  font-family: inherit;
}
.hb-titel-input:hover { border-color: #ddd; }
.hb-titel-input:focus { 
  border-color: var(--zisa-blauw, #2196F3); 
  outline: none; 
  background: #fff;
}

.hb-paginanav {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-self: center;
}
.hb-navknop {
  width: 36px;
  height: 36px;
  border: 1px solid #ccc;
  border-radius: 50%;
  background: white;
  font-size: 1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}
.hb-navknop:hover:not(:disabled) {
  background: var(--zisa-blauw, #2196F3);
  color: white;
  border-color: var(--zisa-blauw, #2196F3);
}
.hb-navknop:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}
.hb-paginanr-label {
  font-weight: 600;
  font-size: 0.95rem;
  min-width: 110px;
  text-align: center;
  color: #555;
}

.hb-acties {
  justify-self: end;
}

/* A4-pagina-preview wrapper */
.hb-pages-wrapper {
  background: #d0d5dd;
  padding: 24px;
  border-radius: 8px;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.08);
}

/* Pagina = echte A4: 21cm × 29.7cm (zelfde units als .werkblad!).
   Belangrijk: cm-units zorgen voor correcte schaling in PDF-export. */
.hb-pagina {
  width: 21cm;
  min-height: 29cm;
  background: white;
  padding: 1.5cm 2cm;
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
  border-radius: 2px;
  display: flex;
  flex-direction: column;
  position: relative;
  box-sizing: border-box;
}

/* Globale header op pagina 1 */
.hb-pagina-header {
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 2px solid var(--zisa-blauw, #2196F3);
}
.hb-naam-rij {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.9rem;
  margin-bottom: 12px;
}
.hb-lijn-vrij {
  display: inline-block;
  border-bottom: 1px solid #333;
  flex: 1;
  height: 18px;
}
.hb-lijn-vrij-kort {
  flex: 0 0 140px;
}
.hb-boekje-titel {
  font-size: 1.6rem;
  margin: 8px 0 0 0;
  color: var(--zisa-blauw, #2196F3);
  font-weight: 700;
  outline: none;
  border: 1px dashed transparent;
  padding: 2px 6px;
  border-radius: 4px;
}
.hb-boekje-titel:hover {
  border-color: #ccc;
}
.hb-boekje-titel:focus {
  border-color: var(--zisa-blauw, #2196F3);
  background: #f7fbff;
}

/* Pagina-inhoud (oefeningen) */
.hb-pagina-inhoud {
  flex: 1;
}

/* Voettekst */
.hb-pagina-voet {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid #ddd;
  display: flex;
  justify-content: space-between;
  font-size: 0.75rem;
  color: #888;
}
.hb-paginanr {
  font-weight: 600;
}

/* Item (= één oefening) */
.hb-item {
  margin-bottom: 18px;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  background: #fafafa;
  page-break-inside: avoid;
  position: relative;
}
.hb-item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 10px;
  background: #eef2f7;
  border-bottom: 1px solid #ddd;
  border-radius: 6px 6px 0 0;
  font-size: 0.85rem;
}
.hb-item-titel {
  color: #333;
}
.hb-niveau {
  color: #f9a825;
  margin-left: 4px;
}
.hb-item-acties {
  display: flex;
  gap: 4px;
}
.hb-item-acties button {
  width: 26px;
  height: 26px;
  border: 1px solid #ccc;
  background: white;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.hb-item-acties button:hover {
  background: #fff5e6;
  border-color: #f9a825;
}
.hb-knop-verwijder:hover {
  background: #ffebee !important;
  border-color: #e53935 !important;
  color: #e53935;
}
.hb-item-inhoud {
  padding: 8px 12px;
  background: white;
}
/* Werkblad-styling die binnen items komt: pagina-padding weghalen */
.hb-item-inhoud .werkblad {
  padding: 0;
  margin: 0;
  box-shadow: none;
  background: transparent;
  min-height: auto;
}
.hb-item-fout {
  padding: 10px;
  color: #e53935;
  font-style: italic;
}

/* Lege staat */
.hb-leeg {
  width: 21cm;
  min-height: 600px;
  background: white;
  padding: 60px 80px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
}
.hb-leeg-icoon {
  font-size: 4rem;
  margin-bottom: 16px;
}
.hb-leeg h3 {
  color: #333;
  margin: 0 0 12px 0;
}
.hb-leeg p {
  color: #666;
  max-width: 500px;
  line-height: 1.5;
}
.hb-leeg-tip {
  margin-top: 16px;
  padding: 12px 16px;
  background: #f7fbff;
  border-radius: 8px;
  font-size: 0.9rem;
  color: #555 !important;
}


/* OVERRIDE: werkblad binnen herhalings-bundel item is compacter en past
   binnen de pagina-inhoud breedte. */
.hb-item-inhoud .werkblad,
.hb-item-inhoud .werkblad.ov01-blad,
.hb-item-inhoud .werkblad.ov02-blad,
.hb-item-inhoud .werkblad.ov03-blad,
.hb-item-inhoud .werkblad.ov04-blad,
.hb-item-inhoud .werkblad.ov05-blad,
.hb-item-inhoud .werkblad.ov06-blad {
  width: 100%;
  min-height: auto;
  padding: 0;
  margin: 0;
  box-shadow: none;
  background: transparent;
  position: relative;
}

/* Pagina-break tussen werkbladen UIT in herhalings-modus (we doen onze
   eigen pagina-verdeling op item-niveau) */
.hb-item-inhoud .werkblad + .werkblad {
  page-break-before: auto;
  break-before: auto;
  margin-top: 12px;
}


/* Per-niveau aantal-input in zijbalk (alleen herhalings-modus) */
.zb-niveau-rij {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.zb-niveau-rij .zb-niveau-vink {
  flex: 1;
  margin-bottom: 0;
}
.zb-niveau-aantal {
  width: 75px;
  padding: 4px 6px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 0.85rem;
  text-align: center;
  font-family: inherit;
}
.zb-niveau-aantal:focus {
  outline: none;
  border-color: var(--zisa-blauw, #2196F3);
}
.zb-niveau-aantal::placeholder {
  color: #aaa;
  font-style: italic;
  font-size: 0.78rem;
}


/* Download-knoppen in topbalk */
.hb-acties {
  display: flex;
  gap: 8px;
  justify-self: end;
}
.hb-acties button {
  padding: 8px 14px;
  font-size: 0.9rem;
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
}
.hb-acties button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}


/* ============================================================
   HERHATTEN-MODAL bij entry herhalings-modus
   ============================================================ */
.hb-hervat-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
}
.hb-hervat-modal-inhoud {
  background: white;
  border-radius: 16px;
  padding: 40px 48px;
  max-width: 460px;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0,0,0,0.25);
}
.hb-hervat-icoon {
  font-size: 3.5rem;
  margin-bottom: 12px;
}
.hb-hervat-modal-inhoud h2 {
  color: var(--zisa-blauw, #2196F3);
  margin: 0 0 16px 0;
}
.hb-hervat-modal-inhoud p {
  color: #444;
  line-height: 1.5;
  margin: 8px 0;
}
.hb-hervat-knoppen {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 24px;
}
.hb-hervat-knoppen button {
  padding: 12px 20px;
  font-size: 1rem;
  border-radius: 8px;
  cursor: pointer;
  font-family: inherit;
  border: none;
}


/* PDF-laadbalk overlay */
#hb-pdf-loader {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100000;
}
.hb-pdf-loader-box {
  background: white;
  border-radius: 16px;
  padding: 36px 48px;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
  max-width: 400px;
}
.hb-pdf-loader-box h3 {
  color: var(--zisa-blauw, #2196F3);
  margin: 16px 0 8px 0;
}
.hb-pdf-loader-box p {
  color: #666;
  margin: 0;
  font-size: 0.95rem;
}
.hb-pdf-loader-spinner {
  width: 48px;
  height: 48px;
  margin: 0 auto;
  border: 5px solid #e0e0e0;
  border-top-color: var(--zisa-blauw, #2196F3);
  border-radius: 50%;
  animation: hb-spin 0.9s linear infinite;
}
@keyframes hb-spin {
  to { transform: rotate(360deg); }
}


/* ============================================================
   HERHALINGSBUNDEL — DOORLOPEND DOCUMENT (nieuwe aanpak)
   Eén lange container, items mogen splitsen tussen A4-pagina's
   ============================================================ */

/* Wrapper voor alle items: één lange A4-brede strip */
.hb-document {
  width: 21cm;
  background: white;
  padding: 1.5cm 2cm;
  box-sizing: border-box;
  margin: 0 auto;
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
  position: relative;
}

/* Document-header (Naam/Datum/Titel boven aan pagina 1) */
.hb-doc-header {
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 2px solid var(--zisa-blauw, #2196F3);
}

.hb-doc-inhoud {
  position: relative;
}

.hb-pagina-marker {
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  pointer-events: none;
  z-index: 10;
}
.hb-pagina-marker-lijn {
  height: 1px;
  background: repeating-linear-gradient(
    to right,
    #2196F3 0,
    #2196F3 8px,
    transparent 8px,
    transparent 16px
  );
  margin: 0 -20px;
}
.hb-pagina-marker-label {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--zisa-blauw, #2196F3);
  color: white;
  padding: 2px 14px;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}

/* hb-pages-wrapper als scroll-container */
.hb-pages-wrapper {
  background: #d0d5dd;
  padding: 24px;
  border-radius: 8px;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.08);
  max-height: calc(100vh - 200px);
  overflow-y: auto;
}

#hb-pages {
  position: relative;
}




/* Meer ademruimte tussen oefeningen in herhalingsbundel-document.
   Subtiele scheidingslijn maakt visueel duidelijk waar de ene oefening
   eindigt en de volgende begint. */
.hb-document .hb-item {
  margin-top: 40px !important;
  margin-bottom: 40px !important;
  padding-top: 24px !important;
  border-top: 2px dashed #d0d5dd !important;
}

/* Eerste item heeft GEEN bovenrand (zit direct onder de header) */
.hb-document .hb-doc-inhoud > .hb-item:first-child {
  margin-top: 16px !important;
  padding-top: 0 !important;
  border-top: none !important;
}




/* ============================================================
   HERHALINGSBUNDEL — BEWERK-MODUS (één enkele schone definitie)
   ============================================================ */

/* DEFAULT: ✕-knoppen verbergen binnen herhalings-items */
.hb-item .rij-verwijder-knop {
  display: none !important;
}

/* BEWERK-MODUS AAN: knoppen altijd zichtbaar (geen hover-truc) */
body.hb-bewerk-aan .hb-item .rij-verwijder-knop {
  display: flex !important;
  position: absolute !important;
  top: -8px !important;
  right: -8px !important;
  width: 24px !important;
  height: 24px !important;
  border-radius: 50% !important;
  background: #e53935 !important;
  color: white !important;
  border: 2px solid white !important;
  font-size: 0.75rem !important;
  font-weight: bold !important;
  cursor: pointer !important;
  z-index: 50 !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3) !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

body.hb-bewerk-aan .hb-item .rij-verwijder-knop:hover {
  background: #c62828 !important;
  transform: scale(1.15) !important;
}

/* Parent-cellen relative zodat ✕ goed positioneert */
body.hb-bewerk-aan .hb-item .ov01-cel,
body.hb-bewerk-aan .hb-item .ov02-rij,
body.hb-bewerk-aan .hb-item .ov03-cel,
body.hb-bewerk-aan .hb-item .ov03-rij,
body.hb-bewerk-aan .hb-item .ov04-rij,
body.hb-bewerk-aan .hb-item .ov05-rij,
body.hb-bewerk-aan .hb-item .ov06-zin-rij,
body.hb-bewerk-aan .hb-item .ov06-uitbreiding-rij,
body.hb-bewerk-aan .hb-item .ov07-rij,
body.hb-bewerk-aan .hb-item .ov08-rij,
body.hb-bewerk-aan .hb-item .ov08-invul-zin,
body.hb-bewerk-aan .hb-item .ov09-basis-cel,
body.hb-bewerk-aan .hb-item .ov09-uitbreiding-rij,
body.hb-bewerk-aan .hb-item .ov10-rij,
body.hb-bewerk-aan .hb-item .ov10-basis-rij {
  position: relative !important;
}

/* Bewerk-toggle actief-state */
#hb-bewerken-toggle.actief {
  background: #fff3e0 !important;
  border: 2px solid #ff9800 !important;
  color: #e65100 !important;
  font-weight: 600 !important;
}

/* Hint-balk in bewerk-modus */
body.hb-bewerk-aan #hb-pages::before {
  content: "✏️ Bewerk-modus actief — klik op de rode ✕-knoppen om woorden te verwijderen. Klik 'Bewerken: aan' om weer normaal te bekijken.";
  display: block;
  background: #fff3e0;
  border: 1px solid #ff9800;
  color: #e65100;
  padding: 10px 16px;
  border-radius: 8px;
  margin-bottom: 16px;
  font-size: 0.9rem;
  font-weight: 500;
}




/* ============================================================
   HERHALINGSBUNDEL — TOEVOEG-BALK ONDER ELK ITEM
   ============================================================ */

/* Toevoeg-balk: standaard verborgen, getoond in bewerk-modus */
.hb-item-toevoeg-balk {
  display: none;
  gap: 10px;
  padding: 12px;
  margin-top: 8px;
  background: #fff8e1;
  border: 2px dashed #ff9800;
  border-radius: 8px;
  justify-content: center;
}

body.hb-bewerk-aan .hb-item-toevoeg-balk {
  display: flex !important;
}

.hb-knop-toevoeg-woord {
  background: #4CAF50;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
  font-size: 0.95rem;
}
.hb-knop-toevoeg-woord:hover {
  background: #43a047;
  transform: translateY(-1px);
}

.hb-knop-reset-woorden {
  background: white;
  color: #666;
  border: 1px solid #ccc;
  padding: 8px 14px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.9rem;
}
.hb-knop-reset-woorden:hover {
  background: #f5f5f5;
  border-color: #999;
}

/* ============================================================
   TOEVOEG-MODAL
   ============================================================ */

#hb-toevoeg-modal {
  position: fixed;
  inset: 0;
  z-index: 50000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hb-toevoeg-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.5);
}
.hb-toevoeg-box {
  position: relative;
  background: white;
  border-radius: 12px;
  width: 90%;
  max-width: 480px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
  overflow: hidden;
}
.hb-toevoeg-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid #eee;
  background: #f7fbff;
}
.hb-toevoeg-header h3 {
  margin: 0;
  color: var(--zisa-blauw, #2196F3);
  font-size: 1.2rem;
}
.hb-toevoeg-sluiten {
  background: none;
  border: none;
  font-size: 1.3rem;
  cursor: pointer;
  color: #666;
  width: 32px;
  height: 32px;
  border-radius: 50%;
}
.hb-toevoeg-sluiten:hover {
  background: #e0e0e0;
  color: #333;
}
.hb-toevoeg-zoek {
  padding: 12px 20px;
  border-bottom: 1px solid #eee;
}
#hb-toevoeg-zoekveld {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid #ccc;
  border-radius: 8px;
  font-size: 1rem;
  box-sizing: border-box;
}
#hb-toevoeg-zoekveld:focus {
  outline: none;
  border-color: var(--zisa-blauw, #2196F3);
  box-shadow: 0 0 0 3px rgba(33,150,243,0.15);
}
.hb-toevoeg-lijst {
  overflow-y: auto;
  flex: 1;
  padding: 12px 20px 20px 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-content: flex-start;
}
.hb-toevoeg-woord {
  background: #f0f7ff;
  border: 1px solid #b3d4fc;
  color: #1565c0;
  padding: 8px 14px;
  border-radius: 20px;
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
}
.hb-toevoeg-woord:hover {
  background: var(--zisa-blauw, #2196F3);
  color: white;
  border-color: var(--zisa-blauw, #2196F3);
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(33,150,243,0.3);
}
.hb-toevoeg-leeg {
  text-align: center;
  color: #999;
  font-style: italic;
  padding: 20px;
  width: 100%;
}


/* ============================================================
   HERHALINGSBUNDEL — PAGE-BREAK REGELS (definitieve versie)
   ============================================================ */

/* Items mogen splitsen tussen pagina's */
.hb-document .hb-item {
  page-break-inside: auto !important;
  break-inside: auto !important;
}

/* MAAR: opdracht-blokken en uitbreidings-kaders blijven samen.
   Combinatie: avoid-inside (eigen splitsing) + avoid-after (volgende
   element schuift mee). Zo blijft opdracht ALTIJD bij eerste rij. */
.hb-document .ov01-stappen,
.hb-document .ov02-instructies,
.hb-document .ov03-instructies,
.hb-document .ov04-instructies,
.hb-document .ov05-instructies,
.hb-document .ov06-instructies,
.hb-document .ov07-instructies,
.hb-document .ov08-instructies,
.hb-document .ov09-instructies,
.hb-document .ov10-instructies,
.hb-document .ov01-uitbreiding-container,
.hb-document .ov01-zin-blok,
.hb-document .ov07-uitbreiding-container,
.hb-document .ov08-uitbreiding-container,
.hb-document .ov09-uitbreiding-rij,
.hb-document .ov10-ub-rij {
  page-break-inside: avoid !important;
  break-inside: avoid !important;
  page-break-after: avoid !important;
  break-after: avoid !important;
}


/* Opdracht + eerste rij wrapper: mag nooit splitsen */
.hb-opdracht-eerste-rij {
  page-break-inside: avoid !important;
  break-inside: avoid !important;
}

/* Ghost rij = onzichtbare kloon van eerste rij die als "anker" dient
   voor de PDF-engine om hoogte te kennen. Niet visueel zichtbaar maar
   neemt wel ruimte in zodat het blok inclusief eerste rij niet
   gesplitst kan worden. */
.hb-eerste-rij-ghost {
  visibility: hidden !important;
  pointer-events: none !important;
  max-height: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
}


/* Opdracht-blok moet altijd bij de volgende rij oefeningen blijven.
   page-break-after: avoid → als er pagina-break zou komen NA dit blok,
   schuif het hele blok mee naar de volgende pagina. */
.hb-document .hb-opdracht-blok {
  page-break-after: avoid !important;
  break-after: avoid !important;
  page-break-inside: avoid !important;
  break-inside: avoid !important;
}


/* ============================================================
   OPDRACHT + EERSTE RIJ SAMENHOUDEN (gefocuste oplossing)
   ============================================================ */

/* Opdracht: schuif door naar volgende pagina als er na deze 
   opdracht een page-break zou komen. */
.hb-document .hb-opdracht-blok {
  page-break-after: avoid !important;
  break-after: avoid !important;
  page-break-inside: avoid !important;
  break-inside: avoid !important;
}

/* Eerste rij na opdracht: mag niet alleen op een pagina starten
   zonder zijn opdracht ervoor. */
.hb-document .hb-eerste-rij-na-opdracht {
  page-break-before: avoid !important;
  break-before: avoid !important;
  page-break-inside: avoid !important;
  break-inside: avoid !important;
}

/* Rooster-wrapper rondom eerste rij ook avoid-before */
.hb-document .hb-rooster-met-eerste-rij {
  page-break-before: avoid !important;
  break-before: avoid !important;
}

/* HB-PDF-KEEP: wrapper voor opdracht + eerste rij in PDF-route */
.hb-pdf-keep {
  page-break-inside: avoid !important;
  break-inside: avoid !important;
  display: block !important;
  width: 100% !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Kolommen-roosters in PDF-context onsplitsbaar */
.hb-document .ov09-verdieping-kolommen,
.hb-document .ov09-verdieping-kolom,
.hb-document .ov10-vb-grid,
.hb-document .ov10-vb-cel,
.hb-document .ov10-afb-grid,
.hb-document .ov10-afb-cel {
  page-break-inside: avoid !important;
  break-inside: avoid !important;
}
/* ==========================================================
   PLAATJES IN OV-CELLEN (preview)
   Voor de nieuwe htmlVoorWoord output: <img class="woord-afbeelding">
   of bij fallback <span class="woord-emoji">{emoji}</span>
   ========================================================== */

/* OV01 cel-plaatje */
.ov01-cel-plaatje .woord-afbeelding {
  height: 60px;        /* vaste hoogte: visueel consistent over alle afbeeldingen */
  max-width: 100%;     /* mag tot volle cel-breedte uitstrekken indien nodig */
  width: auto;
  display: block;
  margin: 0 auto;
  object-fit: contain;
}
.ov01-cel-plaatje .woord-emoji {
  font-size: 3.5rem;
  line-height: 1.1;
  display: block;
  text-align: center;
}

/* OV02 plaatje (kleine rij-plaatjes) */
.ov02-plaatje .woord-afbeelding {
  height: 32px;        /* vaste hoogte */
  max-width: 100%;
  width: auto;
  display: block;
  margin: 0 auto;
  object-fit: contain;
}
.ov02-plaatje .woord-emoji {
  font-size: 1.8rem;
  line-height: 1;
  display: block;
  text-align: center;
}

/* OV03 cel-plaatje */
.ov03-cel-plaatje .woord-afbeelding {
  height: 50px;        /* vaste hoogte */
  max-width: 100%;
  width: auto;
  display: block;
  margin: 0 auto;
  object-fit: contain;
}
.ov03-cel-plaatje .woord-emoji {
  font-size: 2.5rem;
  line-height: 1.1;
  display: block;
  text-align: center;
}

/* OV05 plaatje (kleine rij-plaatjes) */
.ov05-plaatje .woord-afbeelding {
  height: 32px;        /* vaste hoogte */
  max-width: 100%;
  width: auto;
  display: block;
  margin: 0 auto;
  object-fit: contain;
}
.ov05-plaatje .woord-emoji {
  font-size: 1.8rem;
  line-height: 1;
  display: block;
  text-align: center;
}