/* ===========================================================================
   Retrieva — de stijl van de app (sep 2026).

   Alleen voor de app waar je ingelogd bent: app.html laadt dit na tokens.css
   en app.css. De website deelt tokens.css en blijft dus zoals hij is.

   Nieuwe letters (Outfit voor koppen, Plus Jakarta Sans voor tekst), iets
   diepere kleuren, rondere hoeken, een stippenraster over de hele pagina, en
   daaronder de opbouw van de startpagina.
   =========================================================================== */

/* Zelf gehost, net als de andere letters: er gaat geen verzoek naar Google
   (AVG). Allebei variabel, dus één bestand voor alle diktes. Licentie: OFL. */
@font-face {
  font-family: 'Outfit'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('/assets/fonts/Outfit-var.ttf') format('truetype');
}
@font-face {
  font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url('/assets/fonts/PlusJakartaSans-var.ttf') format('truetype');
}

/* ================================= tokens ================================= */

:root {
  --font-kop:  'Outfit', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Plus Jakarta Sans', 'Segoe UI', system-ui, sans-serif;

  --rond-m: 12px;          /* knoppen en velden */
  --rond-l: 16px;          /* kaarten */
  --rond-xl: 24px;         /* de grote kaart bovenaan */
}

:root,
:root[data-thema='donker'] {
  --grond:       #0B0C12;
  --vlak:        #13151F;
  --vlak-hover:  #181B28;
  --rand:        #23263A;
  --tekst:       #EEF0F7;
  --tekst-zacht: #C9CCDB;
  --tekst-dof:   #9AA0B8;

  --stip:          #1A1D2B;
  --accent-licht:  #A5A9FF;   /* labels en links op een donkere kaart */
  --chip-vlak:     #151722;
  --spoor:         #262A3F;   /* de lege kant van een balk */
  --ring-spoor:    #262A4D;
  --vandaag-van:   #1B1D3A;
  --vandaag-naar:  #141629;
  --vandaag-rand:  #2C3060;
  --vandaag-tekst: #B7BBD0;
  --stippel:       #2E3250;
  --nieuw-vlak:    #1A1D2B;
  --nieuw-tekst:   #C7CAFF;

  /* De vier snelknoppen: getinte vlakken met een heldere lijnkleur. */
  --tint-paars-vlak: #23264A; --tint-paars: #A5A9FF;
  --tint-teal-vlak:  #123331; --tint-teal:  #2DD4BF;
  --tint-geel-vlak:  #3A2C14; --tint-geel:  #F5B544;
  --tint-groen-vlak: #16321F; --tint-groen: #4ADE80;
}

/* Licht: dezelfde opbouw, eigen waarden. De zijbalk blijft donker (merk). */
:root[data-thema='licht'] {
  --stip:          #D9DFE8;
  --accent-licht:  #3546D9;
  --chip-vlak:     #FFFFFF;
  --spoor:         #E1E6EE;
  --ring-spoor:    #DDE2F5;
  --vandaag-van:   #EEF0FF;
  --vandaag-naar:  #FFFFFF;
  --vandaag-rand:  #C9CEF5;
  --vandaag-tekst: #42505F;
  --stippel:       #B6C2CF;
  --nieuw-vlak:    #E9ECFF;
  --nieuw-tekst:   #3546D9;

  --tint-paars-vlak: #E9ECFF; --tint-paars: #3546D9;
  --tint-teal-vlak:  #E1F6F3; --tint-teal:  #0F766E;
  --tint-geel-vlak:  #FBF2DC; --tint-geel:  #8A6206;
  --tint-groen-vlak: #E8F5ED; --tint-groen: #1E7F4C;
}

/* ================================== basis ================================= */

body {
  background-color: var(--grond);
  background-image: radial-gradient(var(--stip) 1px, transparent 1px);
  background-size: 24px 24px;
  background-attachment: fixed;
}
/* Het oude raster bovenin is overbodig nu de hele pagina stippen heeft. */
.hoofd-kolom::before { display: none; }

h1 { font-weight: 700; }

.hoofd { padding: 40px 56px 64px; }
.hoofd > .stapel { gap: 28px; }
.kaart, .kerncijfer, .vaktegel { border-radius: var(--rond-l); }

@media (max-width: 860px) {
  .hoofd { padding: var(--r4) var(--r4) calc(var(--r8) + 40px); }
  .hoofd > .stapel { gap: var(--r5); }
}

/* ============================== startpagina =============================== */

.startpagina { display: flex; flex-direction: column; gap: 28px; }
.start-inhoud { display: flex; flex-direction: column; gap: 28px; }

/* ---- 1. kopregel ---- */

.start-kop {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--r4); flex-wrap: wrap;
}
.start-datum { font-size: 14px; color: var(--tekst-dof); margin-bottom: 4px; }
.start-kop h1 {
  font-family: var(--font-kop); font-size: 40px; font-weight: 700;
  letter-spacing: -.02em; line-height: 1.1;
}
.start-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.start-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: var(--rond-vol);
  background: var(--chip-vlak); border: 1px solid var(--rand);
  font-size: 14px; color: var(--tekst-zacht);
}
.start-chip b { color: var(--tekst); font-weight: 700; }
.start-chip svg { flex: none; }
.start-chip .groen { color: var(--tint-groen); display: inline-flex; }
.start-chip .geel { color: var(--tint-geel); display: inline-flex; }

/* ---- 2. vandaag ---- */

.start-vandaag {
  display: flex; align-items: center; justify-content: space-between; gap: var(--r6);
  padding: 40px 44px; border-radius: var(--rond-xl);
  background: linear-gradient(135deg, var(--vandaag-van) 0%, var(--vandaag-naar) 60%);
  border: 1px solid var(--vandaag-rand);
}
.start-vandaag-tekst { max-width: 560px; min-width: 0; }
.start-label {
  display: block; font-size: 12px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--accent-licht);
}
.start-vandaag h2 {
  font-family: var(--font-kop); font-size: 34px; font-weight: 700;
  letter-spacing: -.02em; line-height: 1.15; margin-top: 10px;
}
.start-vandaag-tekst > p { font-size: 16px; color: var(--vandaag-tekst); margin-top: 10px; }
.start-vandaag-acties {
  display: flex; align-items: center; gap: var(--r4); flex-wrap: wrap; margin-top: 24px;
}
.knop.start-cta {
  min-height: 52px; padding: 0 22px; border-radius: 12px;
  font-size: 16px; font-weight: 700; gap: 10px;
}
.start-duur { color: var(--tekst-dof); font-size: 14px; }

.start-dagdoel { display: flex; align-items: center; gap: var(--r5); flex: none; }
.start-ring { position: relative; width: 148px; height: 148px; flex: none; }
.start-ring svg { display: block; transform: rotate(-90deg); }
.start-ring .spoor { stroke: var(--ring-spoor); }
.start-ring .vulling { stroke: var(--actie-vlak); transition: stroke-dashoffset .6s ease; }
.start-ring-midden {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center;
}
.start-ring-midden b {
  font-family: var(--font-kop); font-size: 32px; font-weight: 700; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.start-ring-midden span { font-size: 13px; color: var(--tekst-dof); margin-top: 4px; }
.start-dagdoel-tekst { max-width: 180px; }
.start-dagdoel-tekst span { display: block; font-size: 13px; font-weight: 600; color: var(--accent-licht); }
.start-dagdoel-tekst p { font-size: 15px; color: var(--tekst-zacht); margin-top: 4px; }

/* ---- 3. snelknoppen ---- */

.start-snel { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.start-snelknop {
  display: flex; align-items: center; gap: 14px; padding: 18px; min-width: 0;
  background: var(--vlak); border: 1px solid var(--rand); border-radius: 16px;
  color: var(--tekst); text-decoration: none;
  transition: background 150ms, border-color 150ms;
}
.start-snelknop:hover { background: var(--vlak-hover); border-color: var(--actie-vlak); color: var(--tekst); }
.start-snel-ico {
  flex: none; width: 44px; height: 44px; border-radius: 12px;
  display: grid; place-items: center;
}
.start-snel-ico.paars { background: var(--tint-paars-vlak); color: var(--tint-paars); }
.start-snel-ico.teal  { background: var(--tint-teal-vlak);  color: var(--tint-teal); }
.start-snel-ico.geel  { background: var(--tint-geel-vlak);  color: var(--tint-geel); }
.start-snel-ico.groen { background: var(--tint-groen-vlak); color: var(--tint-groen); }
.start-snel-tekst { display: flex; flex-direction: column; min-width: 0; }
.start-snel-tekst b { font-size: 15px; font-weight: 700; }
.start-snel-tekst span {
  font-size: 13px; color: var(--tekst-dof);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ---- 4. vakken ---- */

.start-sectiekop {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--r3); margin-bottom: 16px;
}
.start-sectiekop h2 { font-family: var(--font-kop); font-size: 24px; font-weight: 700; }
.start-link {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--accent-licht); text-decoration: none; font-size: 14px; font-weight: 600;
}
.start-link:hover { color: var(--tekst); }

.start-vakken { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }

.start-vak {
  --vakkleur: var(--actie-vlak);
  display: flex; flex-direction: column; gap: 18px;
  padding: 22px; border-radius: 18px; text-align: left;
  background: var(--vlak); border: 1px solid var(--rand);
  color: var(--tekst); font: inherit; cursor: pointer;
  transition: background 150ms, border-color 150ms;
}
.start-vak:hover { background: var(--vlak-hover); border-color: color-mix(in srgb, var(--vakkleur) 55%, var(--rand)); }
.start-vak-boven { display: flex; align-items: center; gap: 14px; min-width: 0; }
.start-vak-ico {
  flex: none; width: 48px; height: 48px; border-radius: 14px;
  display: grid; place-items: center; color: var(--vakkleur);
  background: color-mix(in srgb, var(--vakkleur) 17%, var(--vlak));
  border: 1px solid color-mix(in srgb, var(--vakkleur) 38%, var(--vlak));
}
.start-vak-naam { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.start-vak-naam b {
  font-size: 17px; font-weight: 700;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.start-vak-naam span {
  font-size: 13px; color: var(--tekst-dof);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.start-vak-chip {
  flex: none; font-size: 12px; font-weight: 700; white-space: nowrap;
  padding: 4px 10px; border-radius: var(--rond-vol);
  background: color-mix(in srgb, var(--vakkleur) 18%, var(--vlak));
  color: color-mix(in srgb, var(--vakkleur) 72%, var(--tekst));
}
.start-vak-beheersing { display: flex; justify-content: space-between; font-size: 13px; color: var(--tekst-dof); }
.start-vak-beheersing b { color: var(--tekst); font-weight: 700; font-variant-numeric: tabular-nums; }
.start-balk { height: 8px; border-radius: var(--rond-vol); background: var(--spoor); overflow: hidden; margin-top: -10px; }
.start-balk i { display: block; height: 100%; border-radius: inherit; background: var(--vakkleur); }

.start-vak-nieuw {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  min-height: 150px; padding: 22px; border-radius: 18px;
  background: transparent; border: 2px dashed var(--stippel);
  color: var(--nieuw-tekst); font: inherit; font-size: 15px; font-weight: 700; cursor: pointer;
  transition: border-color 150ms, background 150ms;
}
.start-vak-nieuw:hover { border-color: var(--actie-vlak); background: var(--vlak); }
.start-vak-nieuw span.plus {
  width: 44px; height: 44px; border-radius: var(--rond-vol);
  display: grid; place-items: center; background: var(--nieuw-vlak);
}

/* ---- responsief ---- */

@media (max-width: 1100px) {
  .start-snel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .start-vakken { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Naast de zijbalk is er dan te weinig breedte voor tekst en ring naast
     elkaar; de ring gaat eronder. */
  .start-vandaag { padding: 32px; flex-direction: column; align-items: flex-start; }
}
@media (max-width: 700px) {
  .start-kop h1 { font-size: 30px; }
  .start-vandaag { flex-direction: column; align-items: flex-start; padding: 24px; }
  .start-vandaag h2 { font-size: 26px; }
  .start-snel, .start-vakken { grid-template-columns: 1fr; }
}

/* =============================== flashcards =============================== */
/* Overzichtsbalk bovenaan (in beide thema's donker), filters, en de stapels
   als tabel. Onder 1000px wordt elke rij een kaartje. */

:root,
:root[data-thema='donker'] {
  --fc-kop-vlak: #171a26;  --fc-lijn: #1E2130;  --fc-hover: #171A26;
  --fc-badge-vlak: #23264A; --fc-badge: #C7CAFF;
  --fc-nul-vlak: #1C1F2B;  --fc-nul: #9AA0B8;
  --fc-spoor: #262A3F;     --fc-vul: #4ADE80;
}
:root[data-thema='licht'] {
  --fc-kop-vlak: #F6F7FA;  --fc-lijn: #ECEFF5;  --fc-hover: #F9FAFC;
  --fc-badge-vlak: #E3E6FB; --fc-badge: #2A32B0;
  --fc-nul-vlak: #EEF0F4;  --fc-nul: #5B6275;
  --fc-spoor: #E6E9F0;     --fc-vul: #1F9D55;
}

.fc-kop { align-items: center; margin-bottom: 24px; }
.fc-kop h1 { font-size: 36px; font-weight: 700; letter-spacing: -.02em; }
.fc-kop .knop { min-height: 44px; border-radius: 12px; font-size: 14px; font-weight: 700; }

.fc-pagina { display: flex; flex-direction: column; gap: 24px; }

/* ---- overzichtsbalk ---- */
.fc-balk {
  display: flex; align-items: center; gap: 40px;
  padding: 28px 32px; border-radius: 22px;
  background: #16181F; color: #FFFFFF; border: 1px solid #23263A;
}
.fc-balk-tekst { flex: 1 1 auto; min-width: 0; }
.fc-label {
  display: block; font-size: 12px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: #A5A9FF;
}
.fc-balk h2 { font-size: 30px; font-weight: 700; letter-spacing: -.02em; margin-top: 6px; color: #FFFFFF; }
.fc-balk p { font-size: 15px; color: #B7BBD0; margin-top: 6px; }
.fc-cijfers { display: flex; gap: 32px; flex: none; }
.fc-cijfers div { display: flex; flex-direction: column; }
.fc-cijfers b { font-family: var(--font-kop); font-size: 28px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.fc-cijfers span { font-size: 13px; color: #B7BBD0; }
/* De balk is altijd donker, dus de knop krijgt hier de heldere accentkleur. */
.fc-balk .knop { flex: none; min-height: 52px; border-radius: 12px; font-size: 16px; font-weight: 700;
  background: #4F63FF; color: #FFFFFF; }
.fc-balk .knop:hover { background: #6B7CFF; }

/* ---- filters ---- */
.fc-filters { display: flex; align-items: center; justify-content: space-between; gap: var(--r3); flex-wrap: wrap; }
.fc-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.fc-chip {
  height: 36px; padding: 0 16px; border-radius: var(--rond-vol);
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
  background: var(--vlak); color: var(--tekst); border: 1px solid var(--rand-sterk);
  transition: background 150ms, border-color 150ms;
}
.fc-chip:hover { border-color: var(--actie-lijn); }
/* Gekozen filter in hetzelfde blauw als de andere keuzeknoppen, niet wit. */
.fc-chip[aria-pressed='true'] { background: var(--tm-gekozen); color: var(--tekst); border-color: var(--prep-accent); box-shadow: inset 0 0 0 1px var(--prep-accent); }
.fc-sorteer { font-size: 13px; color: var(--tekst-zacht); display: inline-flex; align-items: center; gap: 6px; }
.fc-sorteer select { width: auto; min-height: 0; padding: 6px 30px 6px 10px; font-size: 13px; }

/* ---- de lijst ---- */
.fc-lijst {
  background: var(--vlak); border: 1px solid var(--rand); border-radius: 18px; overflow: hidden;
}
.fc-rij {
  display: grid; grid-template-columns: 2.4fr 1fr 1.4fr 1.6fr; gap: 16px; align-items: center;
  padding: 20px 24px; border-bottom: 1px solid var(--fc-lijn);
  transition: background 150ms;
}
.fc-rij:last-child { border-bottom: 0; }
.fc-rij:not(.fc-tabelkop):hover { background: var(--fc-hover); }
.fc-tabelkop {
  padding: 14px 24px; background: var(--fc-kop-vlak);
  font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--tekst-dof);
}

.fc-stapel { display: flex; align-items: center; gap: 14px; min-width: 0; }
.fc-ico {
  --vakkleur: var(--actie-vlak);
  flex: none; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center;
  color: var(--vakkleur); background: color-mix(in srgb, var(--vakkleur) 17%, var(--vlak));
}
.fc-rij[style] .fc-ico { --vakkleur: inherit; }
:root[data-thema='licht'] .fc-ico {
  color: color-mix(in srgb, var(--vakkleur) 58%, #000000);
  background: color-mix(in srgb, var(--vakkleur) 16%, #FFFFFF);
}
.fc-ico.zonder,
:root[data-thema='licht'] .fc-ico.zonder { color: var(--tekst-dof); background: var(--fc-nul-vlak); }
.fc-stapel-tekst { display: flex; flex-direction: column; min-width: 0; }
.fc-naam {
  font-size: 16px; font-weight: 700; color: var(--tekst); text-decoration: none;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fc-naam:hover { color: var(--actie-lijn); text-decoration: underline; }
.fc-stapel-tekst > span { font-size: 13px; color: var(--tekst-dof); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.fc-badge {
  display: inline-flex; min-width: 36px; justify-content: center;
  padding: 4px 12px; border-radius: var(--rond-vol);
  font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums;
  background: var(--fc-badge-vlak); color: var(--fc-badge);
}
.fc-badge.nul { background: var(--fc-nul-vlak); color: var(--fc-nul); }
.fc-mobiel-label { display: none; }

.fc-beheerst { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--tekst-zacht); }
.fc-balkje { height: 6px; border-radius: var(--rond-vol); background: var(--fc-spoor); overflow: hidden; max-width: 180px; }
.fc-balkje i { display: block; height: 100%; border-radius: inherit; background: var(--fc-vul); }

.fc-acties { display: flex; justify-content: flex-end; align-items: center; gap: 8px; }
.fc-acties .knop { min-height: 40px; border-radius: 10px; font-size: 14px; font-weight: 700; padding: 0 16px; }
.knop.icoonknop { width: 40px; min-height: 40px; height: 40px; padding: 0; justify-content: center; border-radius: 10px; }

/* ---- lege staat ---- */
.fc-leeg {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 10px; padding: 56px 24px;
}
.fc-leeg-ico {
  width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center;
  background: var(--actie-zacht); color: var(--actie-lijn); margin-bottom: 6px;
}
.fc-leeg h2 { font-size: 22px; font-weight: 700; }
.fc-leeg p { color: var(--tekst-zacht); max-width: 420px; margin-bottom: 8px; }

/* ---- smaller: elke rij een kaartje ---- */
@media (max-width: 1000px) {
  .fc-balk { flex-direction: column; align-items: flex-start; gap: 20px; padding: 24px; }
  .fc-balk .knop { width: 100%; }
  .fc-tabelkop { display: none; }
  .fc-rij { grid-template-columns: auto 1fr; gap: 14px 20px; padding: 18px 20px; }
  .fc-stapel { grid-column: 1 / -1; }
  .fc-rij > [role='cell']:nth-child(2) { display: flex; align-items: center; gap: 8px; }
  .fc-mobiel-label { display: inline; font-size: 13px; color: var(--tekst-dof); }
  .fc-acties { grid-column: 1 / -1; justify-content: stretch; }
  .fc-acties .knop:not(.icoonknop) { flex: 1 1 0; justify-content: center; }
  .fc-balkje { max-width: none; }
  .fc-kop h1 { font-size: 30px; }
}

/* =========================== formulierpagina's ============================ */
/* Samenvattingen, Huiswerk en Toetsen: links "1. Je stof", rechts "2. Hoe wil
   je hem?" met de maakknop onderaan. Witte velden, gewone labels, een
   sleepvak voor bestanden. */

:root,
:root[data-thema='donker'] {
  --veld-vlak: #0F111A;  --veld-rand: #2A2E45;
  --label: #C9CCDB;      --hint: #8A90A3;
  --sleep-vlak: #10121B; --sleep-rand: #2E3250; --sleep-actief: #1B1E3D;
  --keuze-vlak: #1B1E3D; --keuze-tekst: #C7CAFF;
  --seg-vlak: #0F111A;
}
:root[data-thema='licht'] {
  --veld-vlak: #FFFFFF;  --veld-rand: #D3D8E3;
  --label: #3A4052;      --hint: #6B7285;
  --sleep-vlak: #F7F8FB; --sleep-rand: #C5CCD9; --sleep-actief: #EEF0FE;
  --keuze-vlak: #EEF0FE; --keuze-tekst: #2A32B0;
  --seg-vlak: #EEF0F4;
}

.fp-kop {
  display: flex; align-items: flex-end; justify-content: space-between; gap: var(--r4);
  flex-wrap: wrap; margin-bottom: 24px;
}
.fp-kop h1 { font-size: 36px; font-weight: 700; letter-spacing: -.02em; }
.fp-kop p { font-size: 15px; color: var(--tekst-zacht); margin-top: 4px; }
.fp-kop > .knop { min-height: 44px; border-radius: 12px; font-weight: 700; }
.fp-link {
  display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; padding: 0;
  font: inherit; font-size: 14px; font-weight: 700; color: var(--actie-lijn);
  text-decoration: none; cursor: pointer;
}
.fp-link:hover { color: var(--tekst); }

.fp-pagina { display: flex; flex-direction: column; gap: 24px; }
.fp-raster {
  display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 24px;
  align-items: stretch;
  /* Samen tot onderaan het scherm, zodat de maakknop op een laptop zonder
     scrollen in beeld staat. */
  min-height: max(520px, calc(100vh - 200px));
}
.fp-rechts { display: flex; min-width: 0; }
.fp-rechts > .fp-kaart { flex: 1; }

.fp-kaart {
  display: flex; flex-direction: column; gap: 20px; min-width: 0;
  padding: 28px; border-radius: 20px;
  background: var(--vlak); border: 1px solid var(--rand);
}
.fp-kaart > h2 { font-size: 20px; font-weight: 700; }
.fp-stof .sleepvak { flex: 1 1 auto; }
.fp-velden { display: flex; flex-direction: column; gap: 20px; }
.fp-duw { flex: 1 1 auto; }
.fp-maakbalk { display: flex; flex-direction: column; gap: 10px; }
.fp-naast { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.fp-naast input { min-width: 0; width: 100%; }
.fp-tip { font-size: 14px; color: var(--tekst-zacht); line-height: 1.55; }

.fp-sectiekop { margin-bottom: 16px; }
.fp-sectiekop h2 { font-size: 22px; font-weight: 700; }
.fp-sectiekop p { font-size: 14px; color: var(--tekst-dof); margin-top: 2px; }

/* ---- velden ---- */
.fp-veld { display: flex; flex-direction: column; gap: 8px; }
.fp-veld > label { font-size: 13px; font-weight: 700; color: var(--label); }
.fp-extra { font-weight: 500; color: var(--hint); }

.fp-kaart input[type='text'], .fp-kaart input[type='number'], .fp-kaart select, .fp-kaart textarea {
  background-color: var(--veld-vlak); border: 1px solid var(--veld-rand); border-radius: 10px;
  min-height: 44px; font-size: 15px;
}
.fp-kaart select:hover:not(:disabled) { background-color: var(--veld-vlak); border-color: var(--rand-sterk); }
.fp-kaart input::placeholder, .fp-kaart textarea::placeholder { color: var(--hint); }
.fp-kaart input:focus, .fp-kaart select:focus, .fp-kaart textarea:focus {
  outline: none; border-color: var(--actie-vlak); box-shadow: 0 0 0 3px rgba(59, 69, 224, .18);
}
.fp-plak { min-height: 120px; resize: vertical; }
textarea.fp-groei { min-height: 44px; resize: none; overflow: hidden; line-height: 1.45; }

/* ---- scheiding ---- */
.fp-scheiding { display: flex; align-items: center; gap: 12px; font-size: 13px; color: var(--hint); }
.fp-scheiding::before, .fp-scheiding::after { content: ''; flex: 1; height: 1px; background: var(--fc-lijn); }

/* ---- keuzeknoppen ---- */
.fp-keuzes { display: grid; grid-template-columns: repeat(var(--kolommen, 2), minmax(0, 1fr)); gap: 8px; }
.fp-keuze {
  min-height: 44px; padding: 0 12px; border-radius: 10px; cursor: pointer;
  font: inherit; font-size: 14px; font-weight: 600;
  background: var(--veld-vlak); color: var(--label); border: 1px solid var(--veld-rand);
  transition: border-color 150ms, background 150ms;
}
.fp-keuze:hover { border-color: var(--actie-lijn); }
.fp-keuze[aria-pressed='true'] {
  border: 2px solid var(--actie-vlak); background: var(--keuze-vlak); color: var(--keuze-tekst); font-weight: 700;
}
.fp-keuze-uitleg { font-size: 13px; color: var(--hint); margin-top: 8px; }

/* ---- de maakknop ---- */
.knop.fp-maak {
  width: 100%; min-height: 54px; border-radius: 14px; font-size: 16px; font-weight: 700;
  justify-content: center; gap: 10px;
}
.knop.fp-maak.stil { min-height: 46px; font-size: 15px; }
.knop.fp-maak:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.knop.fp-maak .tol { width: 18px; height: 18px; border-width: 2px; }

/* ---- sleepvak ---- */
.sleepvak {
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  gap: 8px; padding: 32px; min-height: 240px;
  border: 2px dashed var(--sleep-rand); border-radius: 16px; background: var(--sleep-vlak);
  transition: border-color 150ms, background 150ms;
}
.sleepvak.slepen { border-color: var(--actie-vlak); background: var(--sleep-actief); }
.sleepvak-ico {
  width: 64px; height: 64px; border-radius: 18px; display: grid; place-items: center;
  background: var(--keuze-vlak); color: var(--actie-lijn); margin-bottom: 6px;
}
.sleepvak-titel { font-size: 18px; font-weight: 700; }
.sleepvak-uitleg { font-size: 14px; color: var(--tekst-zacht); }
.sleepvak-knoppen { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 10px; }
.sleepvak-knoppen .knop { min-height: 46px; border-radius: 12px; font-size: 15px; font-weight: 700; padding: 0 18px; }
.sleepvak-lijst { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 12px; }
.sleepvak-kaartje {
  display: flex; align-items: center; gap: 8px; max-width: 220px;
  padding: 6px 6px 6px 6px; border-radius: 10px;
  background: var(--vlak); border: 1px solid var(--veld-rand); font-size: 13px;
}
.sleepvak-kaartje img { width: 36px; height: 36px; object-fit: cover; border-radius: 6px; flex: none; }
.sleepvak-bestandico {
  width: 36px; height: 36px; border-radius: 6px; display: grid; place-items: center; flex: none;
  background: var(--keuze-vlak); color: var(--actie-lijn);
}
.sleepvak-kaartje .naam { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.sleepvak-kaartje .wegknop {
  flex: none; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 6px;
  border: 0; background: none; color: var(--tekst-dof); cursor: pointer;
}
.sleepvak-kaartje .wegknop:hover { background: var(--vlak-hover); color: var(--tekst); }
.sleepvak-teller { font-size: 13px; color: var(--tekst-dof); }
.sleepvak-melding { font-size: 13px; color: var(--fout); }
.sleepvak-melding:empty, .sleepvak-teller:empty { display: none; }

/* ---- smaller ---- */
@media (max-width: 1000px) {
  .fp-raster { grid-template-columns: 1fr; min-height: 0; }
  /* Een animatie met transform maakt van de pagina het kader voor position:
     fixed, en dan blijft de knopbalk onderaan de pagina hangen in plaats van
     onderaan het scherm. */
  .hoofd > .fp-pagina { animation: none; }
  .fp-kop h1 { font-size: 30px; }
  /* De maakknop staat vast onderaan, boven de menubalk van de telefoon. */
  .fp-instellingen .fp-maakbalk {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--laag-plakkerig);
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    background: var(--vlak); border-top: 1px solid var(--rand); box-shadow: var(--schaduw-l);
  }
  .fp-pagina { padding-bottom: 140px; }
  .fp-instellingen .fp-maakbalk .knop.fp-maak { min-height: 50px; }
  .fp-instellingen .fp-maakbalk:has(.fp-maak + .fp-maak) { flex-direction: row; }
}
@media (min-width: 861px) and (max-width: 1000px) {
  .fp-instellingen .fp-maakbalk { left: 244px; }
}
@media (max-width: 860px) {
  .fp-instellingen .fp-maakbalk { bottom: calc(68px + env(safe-area-inset-bottom)); padding-bottom: 12px; }
  .fp-kaart { padding: 20px; }
  .sleepvak { padding: 24px 16px; min-height: 0; }
  .fp-pagina { padding-bottom: 110px; }
}

/* ---- oefenronde: waarom de andere opties fout zijn ---- */
.andere-opties { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.andere-opties li { display: flex; gap: 10px; align-items: baseline; }
.andere-letter {
  flex: none; display: inline-grid; place-items: center; width: 22px; height: 22px;
  border-radius: 6px; font-size: 12px; background: var(--amber-vlak); color: var(--amber);
  border: 1px solid color-mix(in srgb, var(--amber) 40%, transparent);
}

/* ---- huiswerk: foto's nooit breder dan het scherm ---- */
.bijlagen { display: flex; gap: var(--r2); flex-wrap: wrap; min-width: 0; max-width: 100%; }
.bijlagen img { max-width: 100%; height: auto; border-radius: var(--rond-m); border: 1px solid var(--rand); }
.beurt .bijlagen img { height: 108px; }

/* ---- een veld dat niet klopt ---- */
input[aria-invalid='true'], select[aria-invalid='true'], textarea[aria-invalid='true'] {
  border-color: var(--fout) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--fout) 22%, transparent) !important;
}

/* ============================ testrapport ronde 5 ========================== */

/* 18. Tellers in de mobiele menubalk als badge op de hoek van het icoon. */
@media (max-width: 860px) {
  .zijbalk nav .nav-knop .telling {
    position: absolute; top: 3px; left: calc(50% + 5px); right: auto; margin: 0;
    min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--rond-vol);
    background: #DC2626; color: #FFFFFF; opacity: 1;
    font-size: 10.5px; font-weight: 700; line-height: 18px; text-align: center;
    box-shadow: 0 0 0 2px var(--zijbalk);
  }
  .zijbalk nav .nav-knop .telling:empty { display: none; }
}

/* 19. Na een resultaat staat de maakknop gewoon in de kaart, niet vast onderin. */
@media (max-width: 1000px) {
  .fp-pagina.heeft-resultaat { padding-bottom: 0; }
  .fp-pagina.heeft-resultaat .fp-instellingen .fp-maakbalk {
    position: static; padding: 0; background: none; border: 0; box-shadow: none;
  }
}

/* 20. Licht thema: bovenbalk en menubalk op de telefoon volgen het thema;
   velden in vensters hebben dezelfde witte achtergrond als op Samenvattingen. */
@media (max-width: 860px) {
  :root[data-thema='licht'] .zijbalk { background: var(--vlak); border-top: 1px solid var(--rand); }
  :root[data-thema='licht'] .zijbalk nav .nav-knop { color: var(--tekst-zacht); }
  :root[data-thema='licht'] .zijbalk nav .nav-knop:hover { background: var(--vlak-hover); color: var(--tekst); }
  :root[data-thema='licht'] .zijbalk nav .nav-knop[aria-current='page'] { color: var(--actie-tekst); }
  :root[data-thema='licht'] .mobiele-kop { background: var(--vlak); color: var(--tekst); border-bottom: 1px solid var(--rand); }
  :root[data-thema='licht'] .zijbalk nav .nav-knop .telling { box-shadow: 0 0 0 2px var(--vlak); }
}
.modal input[type='text'], .modal input[type='email'], .modal input[type='password'], .modal input[type='number'],
.modal input[type='date'], .modal input[type='time'], .modal select, .modal textarea,
.formstijl input[type='text'], .formstijl input[type='email'], .formstijl input[type='password'], .formstijl input[type='number'],
.formstijl input[type='date'], .formstijl input[type='time'], .formstijl select, .formstijl textarea {
  background-color: var(--veld-vlak); border-color: var(--veld-rand); border-radius: 10px;
}
.modal select:hover:not(:disabled), .formstijl select:hover:not(:disabled) { background-color: var(--veld-vlak); }
.modal input:focus, .modal select:focus, .modal textarea:focus,
.formstijl input:focus, .formstijl select:focus, .formstijl textarea:focus {
  outline: none; border-color: var(--actie-vlak); box-shadow: 0 0 0 3px rgba(59, 69, 224, .18);
}

/* 21. Snelknoppen op Start: twee kolommen zodra vier te smal wordt, tekst mag
   over twee regels in plaats van afgekapt. */
@media (max-width: 1340px) { .start-snel { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.start-snel-tekst span { white-space: normal; overflow: visible; text-overflow: clip; }

/* 22. Instellingen: gewone labels, net als de formulierpagina's. */
.formstijl .veld > label, .modal .veld > label {
  text-transform: none; letter-spacing: 0; font-size: 13px; font-weight: 700; color: var(--label);
}

/* 23. Vakkaart op Start: strook met de kleur en het patroon van het vak. */
.start-vak { overflow: hidden; }
.start-vak-beeld {
  display: block; height: 52px; margin: -22px -22px -4px; overflow: hidden;
  border-bottom: 1px solid var(--rand);
}
.start-vak-beeld svg, .start-vak-beeld img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* 24. De naam en de abonnementsregel in de zijbalk zijn aparte links. */
.zijbalk-naam { color: inherit; text-decoration: none; }
.zijbalk-naam:hover b { text-decoration: underline; }

/* 25. Contrast: witte tekst op de accentknop minstens 4,5:1, ook bij hover. */
:root, :root[data-thema='donker'] { --actie-hover: #4453F0; }
.fc-balk .knop { background: #4550F0; }
.fc-balk .knop:hover { background: #3B45E0; }
:root[data-thema='licht'] .start-vak-chip { color: color-mix(in srgb, var(--vakkleur) 40%, #111A24); }
@media (max-width: 700px) { .start-snel { grid-template-columns: 1fr; } }

/* Planning op een telefoon: de dagkaarten mogen niet breder worden dan het
   scherm door een lange titel (grid 1fr = minimaal de inhoud). */
@media (max-width: 860px) {
  .kalender-week { grid-template-columns: minmax(0, 1fr); }
  .kaldag, .kaldag-lijst, .kaldag-leeg { min-width: 0; }
}

/* ======================== toets voorbereiden: detail ======================= */
/* Kopkaart met aftelblok, links de tijdlijn van het plan, rechts het
   materiaal als rij-kaarten. Onder 1000px alles onder elkaar. */

:root,
:root[data-thema='donker'] {
  --prep-accent: #5B63F5;   --prep-lijn: #2A2E45;      --prep-bol-rand: #3A3F5C;
  --prep-stap: #C9CCDB;     --prep-stap-nu: #FFFFFF;   --prep-taak: #B7BBD0;
  --prep-goed: #4ADE80;     --prep-vink: #0B0C12;
  --prep-info-vlak: #16183A; --prep-info: #C7CAFF;
  --tint-rood-vlak: #3A1A1C; --tint-rood: #F87171;
}
:root[data-thema='licht'] {
  --prep-accent: #3B45E0;   --prep-lijn: #DDE2EB;      --prep-bol-rand: #B6C2CF;
  --prep-stap: #3A4052;     --prep-stap-nu: #16181F;   --prep-taak: #5B6275;
  --prep-goed: #1F9D55;     --prep-vink: #FFFFFF;
  --prep-info-vlak: #E3E6FB; --prep-info: #2A32B0;
  --tint-rood-vlak: #FBECEA; --tint-rood: #B42318;
}

/* ---- boven: terug-link en kopkaart ---- */
.prep-boven { display: flex; flex-direction: column; gap: 14px; margin-bottom: 22px; }
.prep-bovenrij { display: flex; align-items: center; justify-content: space-between; gap: var(--r3); }
.prep-terug { font-size: 14px; color: var(--tekst-dof); text-decoration: none; }
.prep-terug:hover { color: var(--tekst); }

.prep-kop {
  display: flex; align-items: center; gap: 32px; padding: 28px 32px; border-radius: 22px;
  background: linear-gradient(135deg, var(--vandaag-van), var(--vandaag-naar));
  border: 1px solid var(--vandaag-rand);
}
.prep-teller {
  flex: none; width: 104px; height: 104px; border-radius: 22px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: var(--prep-accent); color: #FFFFFF; text-align: center;
}
.prep-teller b {
  font-family: var(--font-kop); font-size: 44px; font-weight: 700; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.prep-teller span { font-size: 13px; margin-top: 4px; }
.prep-teller.is-woord b { font-size: 22px; }
.prep-kop-midden { flex: 1 1 auto; min-width: 0; }
.prep-vakchip {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 700; color: var(--tekst-zacht);
}
.prep-vakchip i { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.prep-kop h1 {
  font-family: var(--font-kop); font-size: 30px; font-weight: 700; letter-spacing: -.02em;
  line-height: 1.15; margin: 8px 0 6px; overflow-wrap: anywhere;
}
.prep-kop-midden > p { font-size: 15px; color: var(--tekst-dof); }
.prep-kop-rechts { flex: none; width: 240px; display: flex; flex-direction: column; gap: 10px; }
.prep-kop-telling { display: flex; justify-content: space-between; gap: 8px; font-size: 14px; color: var(--tekst-dof); }
.prep-kop-telling b { color: var(--tekst); font-weight: 700; font-variant-numeric: tabular-nums; }
.prep-balk { height: 8px; border-radius: var(--rond-vol); background: var(--ring-spoor); overflow: hidden; }
.prep-balk i { display: block; height: 100%; border-radius: inherit; background: var(--prep-accent); transition: width .3s ease; }
.knop.prep-begin, .knop.prep-maak {
  min-height: 46px; margin-top: 6px; border-radius: 12px; justify-content: center;
  font-size: 15px; font-weight: 700; background: var(--prep-accent); color: #FFFFFF; border-color: transparent;
}
.knop.prep-begin:hover, .knop.prep-maak:hover { background: var(--actie-hover); color: #FFFFFF; }

/* ---- raster ---- */
.prep-raster { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 22px; align-items: start; }
.prep-rechts { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.prep-kaart {
  min-width: 0; padding: 24px 26px; border-radius: 20px;
  background: var(--vlak); border: 1px solid var(--rand);
}
.prep-kaart > h2, .prep-materiaal > h2 {
  font-family: var(--font-kop); font-size: 20px; font-weight: 700; margin-bottom: 18px;
}

/* ---- je plan: tijdlijn ---- */
.prep-tijdlijn { list-style: none; margin: 0; padding: 0; }
.prep-stap {
  position: relative; display: grid; grid-template-columns: 18px minmax(0, 1fr) auto;
  column-gap: 16px; align-items: start; padding-bottom: 22px;
}
.prep-stap:last-child { padding-bottom: 0; }
.prep-stap:not(:last-child)::before {
  content: ''; position: absolute; left: 8px; top: 24px; bottom: 2px; width: 2px;
  background: var(--prep-lijn);
}
.prep-bol {
  position: relative; width: 18px; height: 18px; margin-top: 2px; padding: 0;
  display: grid; place-items: center; border-radius: 50%; cursor: pointer;
  border: 2px solid var(--prep-bol-rand); background: var(--vlak); color: var(--prep-vink);
}
/* Groter klikvlak dan het bolletje zelf. */
.prep-bol::after { content: ''; position: absolute; inset: -12px; }
.prep-bol:hover { border-color: var(--prep-accent); }
.prep-stap.is-vandaag .prep-bol {
  background: var(--prep-accent); border-color: var(--prep-accent);
  box-shadow: 0 0 0 5px rgba(91, 99, 245, .2);
}
.prep-stap.is-gedaan .prep-bol { background: var(--prep-goed); border-color: var(--prep-goed); }
.prep-bol svg { stroke-width: 3; }
.prep-stap-tekst { min-width: 0; }
.prep-stap-tekst b { display: block; font-size: 15px; font-weight: 700; color: var(--prep-stap); }
.prep-stap.is-vandaag .prep-stap-tekst b { color: var(--prep-stap-nu); }
.prep-stap-tekst p { margin-top: 3px; font-size: 14px; line-height: 1.45; color: var(--prep-taak); overflow-wrap: anywhere; }
.prep-stap.is-gedaan .prep-stap-tekst { opacity: .7; }
.prep-chip {
  padding: 5px 11px; border-radius: var(--rond-vol); border: 1px solid transparent; cursor: pointer;
  background: var(--nieuw-vlak); color: var(--nieuw-tekst);
  font: inherit; font-size: 12px; font-weight: 700; white-space: nowrap;
}
.prep-chip:hover { border-color: var(--nieuw-tekst); }
.prep-chip:disabled { opacity: .6; cursor: progress; }
.prep-klaar {
  display: flex; align-items: center; gap: 8px; margin-bottom: 16px; padding: 10px 12px;
  border-radius: 12px; background: var(--tint-groen-vlak); color: var(--tint-groen); font-size: 14px; font-weight: 700;
}
.prep-leeg { font-size: 14px; color: var(--tekst-dof); }
.prep-advies { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--rand); }
.prep-advies summary { font-size: 14px; color: var(--tekst-dof); cursor: pointer; }
.prep-advies .samenvatting { margin-top: 12px; }

/* ---- je materiaal: rij-kaarten ---- */
.prep-materiaal { min-width: 0; }
.prep-mat-lijst { display: flex; flex-direction: column; gap: 10px; }
.prep-mat {
  display: flex; align-items: center; gap: 14px; width: 100%; min-width: 0;
  padding: 16px 18px; border-radius: 16px;
  background: var(--vlak); border: 1px solid var(--rand); color: var(--tekst);
}
.prep-mat-ico { flex: none; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; }
.prep-mat-ico.groen, .maak-optie-ico.groen { background: var(--tint-groen-vlak); color: var(--tint-groen); }
.prep-mat-ico.paars, .maak-optie-ico.paars { background: var(--tint-paars-vlak); color: var(--tint-paars); }
.prep-mat-ico.geel,  .maak-optie-ico.geel  { background: var(--tint-geel-vlak);  color: var(--tint-geel); }
.prep-mat-ico.teal,  .maak-optie-ico.teal  { background: var(--tint-teal-vlak);  color: var(--tint-teal); }
.prep-mat-ico.rood,  .maak-optie-ico.rood  { background: var(--tint-rood-vlak);  color: var(--tint-rood); }
.prep-mat-tekst { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.prep-mat-tekst b { font-size: 15px; font-weight: 700; overflow-wrap: anywhere; }
.prep-mat-tekst > span { font-size: 13px; color: var(--tekst-dof); overflow-wrap: anywhere; }
.prep-mat-link {
  flex: none; padding: 6px 0; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: 14px; font-weight: 700; color: var(--accent-licht); white-space: nowrap;
}
.prep-mat-link:hover { color: var(--tekst); }
.prep-mat-nieuw {
  background: transparent; border: 2px dashed var(--stippel); color: var(--nieuw-tekst);
  font: inherit; font-size: 15px; text-align: left;
}
button.prep-mat-nieuw { cursor: pointer; transition: border-color 150ms, background 150ms; }
button.prep-mat-nieuw:hover { border-color: var(--prep-accent); background: var(--vlak); }
.prep-mat-nieuw.is-uit { color: var(--tekst-dof); }
.prep-mat-nieuw.is-uit .prep-mat-tekst b { color: var(--tekst-zacht); }
.prep-mat-nieuw.is-fout { border-color: color-mix(in srgb, var(--tint-rood) 55%, transparent); color: var(--tekst); }
.prep-mat-plus {
  flex: none; width: 28px; height: 28px; border-radius: var(--rond-vol);
  display: grid; place-items: center; background: var(--nieuw-vlak); font-size: 18px; line-height: 1;
}
.prep-laadbalk { display: block; height: 4px; margin-top: 8px; border-radius: var(--rond-vol); background: var(--spoor); overflow: hidden; }
.prep-laadbalk i {
  display: block; width: 40%; height: 100%; border-radius: inherit; background: var(--prep-accent);
  animation: prep-laden 1.3s ease-in-out infinite;
}
@keyframes prep-laden { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
@media (prefers-reduced-motion: reduce) { .prep-laadbalk i { animation: none; width: 100%; opacity: .5; } }
.prep-kies-vak { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 8px; margin-bottom: 14px; }

.prep-info {
  display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 14px;
  background: var(--prep-info-vlak); color: var(--prep-info); font-size: 13px; text-decoration: none;
}
.prep-info svg { flex: none; }
.prep-info:hover { color: var(--prep-info); text-decoration: underline; }

/* ---- wat zal ik voor je maken? ---- */
.prep-raster .veld > label {
  text-transform: none; letter-spacing: 0; font-size: 13px; font-weight: 700; color: var(--label);
}
.prep-raster select, .prep-raster input[type='number'] {
  background-color: var(--veld-vlak); border-color: var(--veld-rand); border-radius: 10px;
}
.prep-sub { font-size: 14px; color: var(--tekst-dof); margin: -8px 0 16px; }
.prep-keuze .maak-optie { border-radius: 14px; background: var(--veld-vlak); border-color: var(--veld-rand); }
.prep-keuze .maak-optie-titel { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.prep-keuze .maak-optie-titel b { font-size: 15px; font-weight: 700; }
.prep-keuze .maak-optie-ico { width: 28px; height: 28px; border-radius: 8px; }
.prep-keuze .maak-optie-tekst > span:last-child { margin-top: 4px; font-size: 13px; }
.prep-keuze .prep-mat-lijst { margin-top: 4px; }
.prep-vakveld { margin-top: 16px; max-width: 360px; }
.knop.prep-maak { width: 100%; min-height: 50px; margin-top: 16px; font-size: 16px; }
.knop.prep-maak:disabled { opacity: 1; cursor: progress; }
.knop.prep-maak .tol { width: 20px; height: 20px; border-color: rgba(255, 255, 255, .35); border-top-color: #FFFFFF; }

/* ---- smaller ---- */
@media (max-width: 1000px) {
  .prep-kop { flex-direction: column; align-items: flex-start; gap: 20px; padding: 24px; }
  .prep-kop-midden, .prep-kop-rechts { width: 100%; }
  .prep-raster { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .prep-kop h1 { font-size: 24px; }
  .prep-kaart { padding: 20px; }
  .prep-stap { grid-template-columns: 18px minmax(0, 1fr); }
  .prep-chip { grid-column: 2; justify-self: start; margin-top: 8px; }
}
@media (max-width: 640px) { .prep-keuze .maak-optie-extra { padding-left: 30px; } }

/* ============================ voortgang: coach ============================ */
/* Hoofdkolom met de kop, drie adviezen en de kalender; rechts een kolom van
   360px met cijfers, onderwerpen en de volgende toets. */

:root,
:root[data-thema='donker'] {
  --vg-alinea: #B7BBD0;
  --vg-rood: #FCA5A5; --vg-geel: #FCD58A; --vg-groen: #86EFAC;
  --st-goed: #4ADE80; --st-matig: #F5B544; --st-zwak: #F87171;
  --kal-1: #1E2233; --kal-2: #2F3470; --kal-3: #4A51C9; --kal-4: #5B63F5;
  --vg-toets-vlak: #16183A; --vg-toets-rand: #2C3060;
}
:root[data-thema='licht'] {
  --vg-alinea: #5B6275;
  --vg-rood: #B42318; --vg-geel: #8A5A00; --vg-groen: #15803D;
  --st-goed: #15803D; --st-matig: #A15C07; --st-zwak: #B42318;
  --kal-1: #E6E9F0; --kal-2: #C9CEF5; --kal-3: #8B93EE; --kal-4: #3B45E0;
  --vg-toets-vlak: #EEF0FE; --vg-toets-rand: #C9CEF5;
}

.vg-raster { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 28px; align-items: start; }
.vg-hoofd, .vg-zij { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.vg-zij { gap: 14px; }

.vg-week { font-size: 14px; color: var(--tekst-dof); margin-bottom: -12px; }
.vg-kop h1 {
  font-family: var(--font-kop); font-size: 38px; font-weight: 700; line-height: 1.15;
  letter-spacing: -.02em; max-width: 820px; text-wrap: pretty;
}
.vg-kop h1 span { color: var(--accent-licht); }
.vg-kop p { margin-top: 12px; max-width: 680px; font-size: 16px; line-height: 1.55; color: var(--vg-alinea); }
.vg-kop .vg-knop { margin-top: 20px; }

.knop.vg-knop { min-height: 44px; border-radius: 12px; font-size: 14px; font-weight: 700; justify-content: center; }

/* ---- drie adviezen ---- */
.vg-adviezen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.vg-advies {
  display: flex; flex-direction: column; gap: 6px; min-width: 0;
  padding: 20px; border-radius: 18px; background: var(--vlak); border: 1px solid var(--rand);
}
.vg-advies-label { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.vg-advies.rood .vg-advies-label { color: var(--vg-rood); }
.vg-advies.geel .vg-advies-label { color: var(--vg-geel); }
.vg-advies.groen .vg-advies-label { color: var(--vg-groen); }
.vg-advies h2 { font-family: var(--font-body); font-size: 17px; font-weight: 700; line-height: 1.3; }
.vg-advies p { flex: 1 1 auto; font-size: 14px; line-height: 1.5; color: var(--tekst-dof); }
.vg-advies .vg-knop { margin-top: 10px; width: 100%; }
.vg-advies.rood .vg-knop:not(.stil) { background: var(--prep-accent); color: #FFFFFF; border-color: transparent; }
.vg-advies.rood .vg-knop:not(.stil):hover { background: var(--actie-hover); }

/* ---- kaarten ---- */
.vg-kaart {
  min-width: 0; padding: 22px 24px; border-radius: 18px;
  background: var(--vlak); border: 1px solid var(--rand);
}
.vg-kaartkop { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.vg-kaartkop h2 { font-family: var(--font-kop); font-size: 18px; font-weight: 700; }
.vg-link {
  padding: 0; border: 0; background: none; cursor: pointer; text-decoration: none;
  font: inherit; font-size: 14px; font-weight: 700; color: var(--accent-licht);
}
.vg-link:hover { color: var(--tekst); }

/* ---- kalender ---- */
.vg-legenda { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--tekst-dof); }
.vg-legenda span:first-child { margin-right: 4px; }
.vg-legenda span:last-child { margin-left: 4px; }
.vg-legenda i { width: 12px; height: 12px; border-radius: 3px; }
.vg-kal { display: flex; flex-direction: column; gap: 6px; }
.vg-kal-rij { display: grid; grid-template-columns: 40px repeat(7, minmax(0, 1fr)); gap: 6px; align-items: center; }
.vg-kal-dag { font-size: 12px; color: var(--tekst-dof); text-align: center; }
.vg-kal-week { font-size: 12px; color: var(--tekst-dof); white-space: nowrap; }
.vg-cel { height: 30px; border-radius: 6px; }
:is(.vg-cel, .vg-legenda i).t1 { background: var(--kal-1); }
:is(.vg-cel, .vg-legenda i).t2 { background: var(--kal-2); }
:is(.vg-cel, .vg-legenda i).t3 { background: var(--kal-3); }
:is(.vg-cel, .vg-legenda i).t4 { background: var(--kal-4); }
.vg-cel.is-toekomst { background: transparent; border: 1.5px dashed var(--rand-sterk); }
.vg-cel.is-vandaag { box-shadow: 0 0 0 2px var(--grond), 0 0 0 4px var(--prep-accent); }

/* ---- rechts: cijfers ---- */
.vg-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.vg-stat {
  display: flex; flex-direction: column; gap: 2px; min-width: 0;
  padding: 16px; border-radius: 14px; background: var(--vlak); border: 1px solid var(--rand);
}
.vg-stat b { font-family: var(--font-kop); font-size: 26px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.vg-stat span { font-size: 13px; color: var(--tekst-dof); }

/* ---- rechts: per onderwerp ---- */
.vg-onderwerpen { display: flex; flex-direction: column; gap: 16px; }
.vg-onderwerp { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.vg-onderwerp-kop { display: flex; justify-content: space-between; gap: 10px; }
.vg-onderwerp-kop b { font-size: 14px; font-weight: 700; overflow-wrap: anywhere; }
.vg-pct { font-size: 14px; font-weight: 700; color: var(--tekst-dof); font-variant-numeric: tabular-nums; }
.vg-pct.goed { color: var(--st-goed); }
.vg-pct.matig { color: var(--st-matig); }
.vg-pct.zwak { color: var(--st-zwak); }
.vg-balk { height: 8px; border-radius: var(--rond-vol); background: var(--spoor); overflow: hidden; }
.vg-balk i { display: block; height: 100%; border-radius: inherit; }
.vg-balk i.goed { background: var(--st-goed); }
.vg-balk i.matig { background: var(--st-matig); }
.vg-balk i.zwak { background: var(--st-zwak); }
.vg-onderwerp-sub { font-size: 12.5px; color: var(--tekst-dof); }

/* ---- rechts: volgende toets ---- */
.vg-toets { display: flex; flex-direction: column; gap: 4px; background: var(--vg-toets-vlak); border-color: var(--vg-toets-rand); }
.vg-toets-label { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-licht); }
.vg-toets b { font-size: 16px; font-weight: 700; margin-top: 4px; }
.vg-toets p { font-size: 14px; color: var(--tekst-dof); }
.vg-toets p::first-letter { text-transform: uppercase; }
.vg-toets .vg-link { align-self: flex-start; margin-top: 8px; }

.knop.vg-export { align-self: stretch; justify-content: center; min-height: 44px; border-radius: 12px; font-weight: 700; }
.vg-exportlijst { display: flex; flex-direction: column; gap: 8px; }
.vg-exportlijst .kaart { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 12px 16px; text-align: left; font: inherit; color: var(--tekst); }

/* ---- smaller ---- */
@media (max-width: 1000px) {
  .vg-raster { grid-template-columns: minmax(0, 1fr); }
  .vg-adviezen { grid-template-columns: minmax(0, 1fr); }
  .vg-kop h1 { font-size: 30px; }
}
@media (max-width: 600px) {
  .vg-kop h1 { font-size: 26px; }
  .vg-kaart { padding: 18px; }
  .vg-kal-rij { grid-template-columns: 44px repeat(7, minmax(0, 1fr)); gap: 4px; }
  .vg-kal-week { font-size: 11px; }
}

/* =========================== timer: blokken met pauze ====================== */

:root,
:root[data-thema='donker'] { --tm-gekozen: #1B1D3A; --tm-pauze-vul: #4ADE80; }
:root[data-thema='licht']  { --tm-gekozen: #EEF0FE; --tm-pauze-vul: #1F9D55; }

.tm-kop { margin-bottom: 24px; }
.tm-kop h1 { font-family: var(--font-kop); font-size: 34px; font-weight: 700; letter-spacing: -.02em; }
.tm-kop p { margin-top: 4px; font-size: 15px; color: var(--tekst-dof); }
.tm-pagina { display: flex; flex-direction: column; gap: 14px; }

/* ---- hoofdkaart ---- */
.tm-hoofd {
  padding: 34px 40px; border-radius: 26px;
  background: var(--vlak); border: 1px solid var(--rand);
}
.tm-boven { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.tm-fase {
  display: block; font-size: 12px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--accent-licht);
}
.tm-fase.pauze { color: var(--tint-groen); }
.tm-onderwerp { display: block; margin-top: 6px; font-size: 18px; font-weight: 700; overflow-wrap: anywhere; }
.tm-klaarom { font-size: 14px; color: var(--tekst-dof); font-variant-numeric: tabular-nums; }

.tm-midden { display: flex; align-items: center; gap: 40px; margin: 22px 0 28px; }
.tm-tijd {
  flex: none; font-family: var(--font-kop); font-size: 120px; font-weight: 700; line-height: 1;
  letter-spacing: -.03em; font-variant-numeric: tabular-nums;
}
.tm-tijd.is-stil { opacity: .55; }

.tm-segmenten { flex: 1 1 auto; min-width: 0; display: flex; gap: 6px; }
.tm-seg { flex-basis: 0; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.tm-seg.pauze { min-width: 54px; }
.tm-seg-balk { display: block; height: 16px; border-radius: 6px; overflow: hidden; background: var(--ring-spoor); }
.tm-seg.pauze .tm-seg-balk { background: var(--tint-groen-vlak); }
.tm-seg-balk i { display: block; width: 0; height: 100%; background: var(--prep-accent); }
.tm-seg.pauze .tm-seg-balk i { background: var(--tm-pauze-vul); }
.tm-seg.is-nu .tm-seg-balk { box-shadow: 0 0 0 2px var(--prep-accent); }
.tm-seg.pauze.is-nu .tm-seg-balk { box-shadow: 0 0 0 2px var(--tm-pauze-vul); }
.tm-seg-label { font-size: 12px; color: var(--tekst-dof); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.tm-knoppen { display: flex; gap: 12px; flex-wrap: wrap; }
.knop.tm-knop { min-height: 54px; padding: 0 24px; border-radius: 14px; font-size: 16px; font-weight: 700; justify-content: center; }
.knop.tm-knop.primair { min-width: 160px; background: var(--prep-accent); color: #FFFFFF; border-color: transparent; }
.knop.tm-knop.primair:hover { background: var(--actie-hover); }

/* ---- drie kaarten ---- */
.tm-rij { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: start; }
.tm-kaart {
  display: flex; flex-direction: column; gap: 14px; min-width: 0;
  padding: 22px 24px; border-radius: 20px; background: var(--vlak); border: 1px solid var(--rand);
}
.tm-kaart h2 { font-family: var(--font-kop); font-size: 18px; font-weight: 700; }
.tm-klein { font-size: 13px; color: var(--tekst-dof); line-height: 1.5; }

.tm-keuzes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.tm-keuze {
  min-height: 44px; padding: 0 8px; border-radius: 10px; cursor: pointer;
  font: inherit; font-size: 14px; font-weight: 700;
  background: var(--veld-vlak); color: var(--label); border: 1px solid var(--veld-rand);
}
.tm-keuze:hover:not(:disabled) { border-color: var(--actie-lijn); }
.tm-keuze[aria-pressed='true'] { border: 2px solid var(--prep-accent); background: var(--tm-gekozen); color: var(--tekst); }
.tm-keuze:disabled { cursor: not-allowed; opacity: .6; }
.tm-eigen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.tm-veld { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.tm-veld > span { font-size: 13px; font-weight: 700; color: var(--label); }
.tm-veld input, .tm-veld select {
  width: 100%; min-height: 44px; background-color: var(--veld-vlak); border: 1px solid var(--veld-rand);
  border-radius: 10px; font-size: 15px;
}
.tm-veld input:focus, .tm-veld select:focus { outline: none; border-color: var(--actie-vlak); box-shadow: 0 0 0 3px rgba(59, 69, 224, .18); }

.tm-dagdoel-getal { font-size: 15px; color: var(--tekst-dof); }
.tm-dagdoel-getal b { font-family: var(--font-kop); font-size: 28px; font-weight: 700; color: var(--tekst); font-variant-numeric: tabular-nums; }
.tm-balk { height: 8px; border-radius: var(--rond-vol); background: var(--spoor); overflow: hidden; }
.tm-balk i { display: block; height: 100%; border-radius: inherit; background: var(--tm-pauze-vul); transition: width .4s ease; }

.tm-sessies { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.tm-sessies li { display: flex; align-items: center; gap: 10px; min-width: 0; font-size: 14px; }
.tm-sessie-ico {
  flex: none; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center;
  background: var(--tint-paars-vlak); color: var(--tint-paars);
}
.tm-sessie-naam { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tm-sessies b { flex: none; font-variant-numeric: tabular-nums; }

/* ---- smaller ---- */
@media (max-width: 1000px) {
  .tm-rij { grid-template-columns: minmax(0, 1fr); }
  .tm-midden { flex-direction: column; align-items: stretch; gap: 20px; }
  .tm-tijd { font-size: 80px; }
  .tm-hoofd { padding: 24px; }
  .tm-knoppen .knop.tm-knop { flex: 1 1 100%; }
}

/* ================================ herhalen ================================ */

.hh-kop { margin-bottom: 24px; }
.hh-kop h1 { font-family: var(--font-kop); font-size: 36px; font-weight: 700; letter-spacing: -.02em; }
.hh-kop p { margin-top: 4px; font-size: 15px; color: var(--tekst-dof); }
.hh-pagina { display: flex; flex-direction: column; gap: 22px; }

/* ---- vandaag ---- */
.hh-vandaag {
  display: flex; align-items: center; justify-content: space-between; gap: 32px;
  padding: 34px 40px; border-radius: var(--rond-xl);
  background: linear-gradient(135deg, var(--vandaag-van) 0%, var(--vandaag-naar) 60%);
  border: 1px solid var(--vandaag-rand);
}
.hh-vandaag-tekst { min-width: 0; max-width: 620px; }
.hh-label, .hh-teller {
  font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-licht);
}
.hh-vandaag h2 { margin-top: 10px; font-family: var(--font-kop); font-size: 32px; font-weight: 700; line-height: 1.15; letter-spacing: -.02em; }
.hh-vandaag-tekst > p { margin-top: 10px; font-size: 16px; color: var(--vandaag-tekst); }
.hh-acties { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 22px; }
.hh-acties select {
  width: auto; min-height: 48px; border-radius: 12px; background-color: var(--veld-vlak); border-color: var(--veld-rand);
}
.knop.hh-knop { min-height: 48px; padding: 0 20px; border-radius: 12px; font-size: 15px; font-weight: 700; justify-content: center; }
.hh-acties .knop.hh-knop:not(.stil), .hh-door .knop.hh-knop {
  background: var(--prep-accent); color: #FFFFFF; border-color: transparent;
}
.hh-acties .knop.hh-knop:not(.stil):hover, .hh-door .knop.hh-knop:hover { background: var(--actie-hover); }

.hh-cijfers { display: grid; grid-template-columns: repeat(3, minmax(96px, 1fr)); gap: 10px; flex: none; }
.hh-cijfer {
  display: flex; flex-direction: column; gap: 2px; padding: 16px; border-radius: 14px;
  background: var(--vlak); border: 1px solid var(--rand);
}
.hh-cijfer b { font-family: var(--font-kop); font-size: 28px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.hh-cijfer span { font-size: 13px; color: var(--tekst-dof); }
.hh-cijfer.geel b { color: var(--st-matig); }

/* ---- raster eronder ---- */
.hh-raster { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 22px; align-items: start; }
.hh-kolom { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.hh-kaart {
  display: flex; flex-direction: column; gap: 14px; min-width: 0;
  padding: 24px 26px; border-radius: 20px; background: var(--vlak); border: 1px solid var(--rand);
}
.hh-kaartkop { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.hh-kaartkop h2 { font-family: var(--font-kop); font-size: 20px; font-weight: 700; }
.hh-klein { font-size: 13.5px; line-height: 1.5; color: var(--tekst-dof); }
.hh-teller { color: var(--tekst-dof); letter-spacing: .08em; }

.hh-stapelbalk { display: flex; gap: 4px; height: 12px; }
.hh-stapelbalk i { display: block; min-width: 6px; border-radius: var(--rond-vol); }
.hh-stapelbalk i.zwak, .hh-stip.zwak { background: var(--st-zwak); }
.hh-stapelbalk i.matig, .hh-stip.matig { background: var(--st-matig); }
.hh-stapelbalk i.goed, .hh-stip.goed { background: var(--st-goed); }
.hh-fasen { list-style: none; margin: 0; padding: 0; }
.hh-fasen li { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--rand); }
.hh-fasen li > div { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; }
.hh-fasen li > div b { font-size: 15px; font-weight: 700; }
.hh-fasen li > div span { font-size: 13px; color: var(--tekst-dof); }
.hh-stip { flex: none; width: 10px; height: 10px; border-radius: 3px; }
.hh-aantal { font-family: var(--font-kop); font-size: 18px; font-variant-numeric: tabular-nums; }

.hh-staven { display: flex; align-items: flex-end; gap: 4px; height: 96px; }
.hh-staaf {
  flex: 1 1 0; min-width: 0; padding: 0; border: 0; border-radius: 4px 4px 2px 2px;
  background: var(--spoor); cursor: default;
}
.hh-staaf.vol { background: var(--prep-accent); cursor: pointer; }
.hh-staaf.vol:hover { background: var(--actie-hover); }
.hh-staaf.kan-niet { background: repeating-linear-gradient(45deg, var(--rand-sterk) 0 3px, transparent 3px 6px); }
.hh-staaf.kan-niet.vol { outline: 2px solid var(--st-matig); }
.hh-as { display: flex; justify-content: space-between; font-size: 12px; color: var(--tekst-dof); margin-top: -6px; }

.hh-lijst { list-style: none; margin: 0; padding: 0; }
.hh-lijst li { display: flex; align-items: baseline; gap: 12px; padding: 10px 0; border-top: 1px solid var(--rand); }
.hh-lijst-vak { flex: 0 0 90px; font-size: 12.5px; color: var(--tekst-dof); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hh-lijst-vraag { flex: 1 1 auto; min-width: 0; font-size: 14px; overflow-wrap: anywhere; }
.hh-weg {
  flex: none; align-self: center; width: 32px; height: 32px; display: grid; place-items: center;
  border: 0; border-radius: 8px; background: none; color: var(--tekst-dof); cursor: pointer;
}
.hh-weg:hover { background: var(--vlak-hover); color: var(--tekst); }

.hh-veld { display: flex; flex-direction: column; gap: 8px; }
.hh-veld > span { font-size: 13px; font-weight: 700; color: var(--label); }
.hh-veld small { font-size: 12.5px; color: var(--hint); }
.hh-veld input {
  max-width: 140px; min-height: 44px; background-color: var(--veld-vlak); border: 1px solid var(--veld-rand); border-radius: 10px;
}
/* Een datum met kalendericoon past niet in 140px: dan valt het jaartal weg. */
.hh-veld input[type='date'] { width: 100%; max-width: 240px; min-width: 190px; }
.hh-dagen { display: flex; gap: 6px; flex-wrap: wrap; }
.hh-dag {
  min-width: 44px; height: 40px; padding: 0 10px; border-radius: var(--rond-vol); cursor: pointer;
  font: inherit; font-size: 14px; font-weight: 700;
  background: var(--veld-vlak); color: var(--label); border: 1px solid var(--veld-rand);
}
.hh-dag[aria-pressed='true'] { background: var(--tm-gekozen); color: var(--tekst); border: 2px solid var(--prep-accent); }
.hh-vink {
  display: flex; flex-direction: row-reverse; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 0; border-top: 1px solid var(--rand); border-bottom: 1px solid var(--rand); cursor: pointer;
}
.hh-vink > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hh-vink b { font-size: 15px; font-weight: 700; }
.hh-vink span span { font-size: 13px; color: var(--tekst-dof); line-height: 1.45; }

/* ---- eindscherm van een herhaalronde: door met flashcards ---- */
.hh-door {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  margin: 16px 0; padding: 20px 24px; border-radius: 18px;
  background: var(--vg-toets-vlak); border: 1px solid var(--vg-toets-rand);
}
.hh-door b { font-size: 17px; font-weight: 700; }
.hh-door p { margin-top: 2px; font-size: 14px; color: var(--tekst-dof); }

@media (max-width: 1000px) {
  .hh-vandaag { flex-direction: column; align-items: stretch; padding: 26px; }
  .hh-raster { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .hh-vandaag h2 { font-size: 26px; }
  .hh-cijfers { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hh-cijfer { padding: 12px; }
  .hh-cijfer b { font-size: 22px; }
  .hh-acties > * { flex: 1 1 100%; }
  .hh-acties select { width: 100%; }
  .hh-kaart { padding: 20px; }
}

/* ================================ toetsplan =============================== */
/* Het overzicht: formulier zoals Huiswerk, daaronder je toetsplannen. */

.tp-lijst { display: flex; flex-direction: column; }
.tp-plannen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.tp-plan {
  display: flex; align-items: center; gap: 16px; min-width: 0;
  padding: 18px 20px; border-radius: 18px; background: var(--vlak); border: 1px solid var(--rand);
  color: var(--tekst); text-decoration: none; transition: background 150ms, border-color 150ms;
}
.tp-plan:hover { background: var(--vlak-hover); border-color: var(--prep-accent); color: var(--tekst); }
.tp-plan > svg { flex: none; color: var(--tekst-dof); }
.tp-teller {
  flex: none; width: 62px; height: 62px; border-radius: 16px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: var(--tint-paars-vlak); color: var(--tint-paars);
}
.tp-teller b { font-family: var(--font-kop); font-size: 24px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.tp-teller small { font-size: 11.5px; margin-top: 2px; }
.tp-teller.is-vandaag { background: var(--prep-accent); color: #FFFFFF; }
.tp-teller.is-vandaag b { font-size: 14px; }
.tp-plan-tekst { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.tp-plan-tekst > b { font-size: 16px; font-weight: 700; overflow-wrap: anywhere; }
.tp-plan-tekst > span:not(.tp-vak):not(.tp-voortgang) { font-size: 13px; color: var(--tekst-dof); }
.tp-vak { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; color: var(--tekst-zacht); }
.tp-vak i { width: 8px; height: 8px; border-radius: 2px; }
.tp-voortgang { display: flex; align-items: center; gap: 10px; margin-top: 4px; }
.tp-voortgang small { font-size: 12px; color: var(--tekst-dof); white-space: nowrap; }
.tp-balk { flex: 1 1 auto; max-width: 180px; height: 6px; border-radius: var(--rond-vol); background: var(--spoor); overflow: hidden; }
.tp-balk i { display: block; height: 100%; border-radius: inherit; background: var(--prep-accent); }
.tp-eerder { margin-top: 18px; }
.tp-eerder .tp-plannen { margin-top: 12px; }

@media (max-width: 1000px) { .tp-plannen { grid-template-columns: minmax(0, 1fr); } }
textarea.fp-groei.tp-vraag { min-height: 88px; resize: vertical; }
.fp-kaart input[type='date'] {
  background-color: var(--veld-vlak); border: 1px solid var(--veld-rand); border-radius: 10px; min-height: 44px; font-size: 15px;
}

/* ---- toetsplan: je plan aanpassen of opnieuw laten maken ---- */
.prep-plan-kop { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.prep-plan-kop h2 { font-family: var(--font-kop); font-size: 20px; font-weight: 700; }
.knop.prep-klein-knop { min-height: 40px; padding: 0 16px; border-radius: 10px; font-size: 14px; font-weight: 700; }
.knop.prep-klein-knop.primair { background: var(--prep-accent); color: #FFFFFF; border-color: transparent; }
.knop.prep-klein-knop.primair:hover { background: var(--actie-hover); }

.prep-wens {
  display: flex; flex-direction: column; gap: 10px; margin-top: 22px; padding: 18px;
  border-radius: 16px; background: var(--veld-vlak); border: 1px solid var(--veld-rand);
}
.prep-wens > label { font-size: 14px; font-weight: 700; color: var(--tekst); }
textarea.prep-wens-veld {
  min-height: 64px; resize: vertical; background-color: var(--vlak); border: 1px solid var(--veld-rand);
  border-radius: 10px; font-size: 15px;
}
.prep-wens-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.prep-wens-chip {
  padding: 6px 12px; border-radius: var(--rond-vol); cursor: pointer; border: 1px solid transparent;
  background: var(--nieuw-vlak); color: var(--nieuw-tekst); font: inherit; font-size: 13px; font-weight: 700;
}
.prep-wens-chip:hover { border-color: var(--nieuw-tekst); }
.prep-wens-onder { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.prep-wens-onder > span { flex: 1 1 220px; font-size: 13px; color: var(--tekst-dof); }

.prep-nieuw-label {
  padding: 4px 10px; border-radius: var(--rond-vol); font-size: 12px; font-weight: 700;
  background: var(--tint-geel-vlak); color: var(--tint-geel);
}
.prep-voorstel-uitleg {
  display: flex; gap: 10px; align-items: flex-start; margin-bottom: 18px; padding: 12px 14px;
  border-radius: 12px; background: var(--prep-info-vlak); color: var(--prep-info); font-size: 14px; line-height: 1.5;
}
.prep-voorstel-uitleg svg { flex: none; margin-top: 2px; }
.prep-tijdlijn.is-voorstel .prep-bol { cursor: default; }
.prep-voorstel-maken { margin-top: 16px; font-size: 14px; color: var(--tekst-dof); }
.prep-plan-knoppen { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 20px; }

.prep-bewerk { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.prep-bewerk-rij {
  display: grid; grid-template-columns: 150px 84px 150px minmax(0, 1fr) 40px; gap: 8px; align-items: end;
  padding: 12px; border-radius: 14px; background: var(--veld-vlak); border: 1px solid var(--veld-rand);
}
.prep-bewerk-rij.is-gedaan { opacity: .7; }
.prep-bewerk-veld { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.prep-bewerk-veld > span { font-size: 12px; font-weight: 700; color: var(--label); }
.prep-bewerk-veld input, .prep-bewerk-veld select {
  width: 100%; min-height: 40px; background-color: var(--vlak); border: 1px solid var(--veld-rand); border-radius: 10px; font-size: 14px;
}
.prep-weg {
  width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: 10px;
  background: none; color: var(--tekst-dof); cursor: pointer;
}
.prep-weg:hover { background: var(--tint-rood-vlak); color: var(--tint-rood); }
.prep-toevoegen {
  display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; margin-top: 10px;
  min-height: 48px; border-radius: 14px; border: 2px dashed var(--stippel); background: transparent;
  color: var(--nieuw-tekst); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
}
.prep-toevoegen:hover { border-color: var(--prep-accent); }

@media (max-width: 700px) {
  .prep-bewerk-rij { grid-template-columns: minmax(0, 1fr) 84px 40px; }
  .prep-bewerk-veld.hulp { grid-column: 1 / 3; }
  .prep-bewerk-veld.taak { grid-column: 1 / -1; grid-row: 3; }
  .prep-bewerk-rij .prep-weg { grid-column: 3; grid-row: 1; }
  .prep-plan-knoppen .knop { flex: 1 1 100%; justify-content: center; }
}

/* ============================== instellingen ============================== */
/* Twee kolommen met rustige kaarten. Elke aan/uit-keuze is dezelfde schakelaar
   rechts in een rij, met een lijn ertussen: geen grijze blokken meer. */

.st-kop { margin-bottom: 24px; }
.st-kop h1 { font-family: var(--font-kop); font-size: 36px; font-weight: 700; letter-spacing: -.02em; }
.st-kop p { margin-top: 4px; font-size: 15px; color: var(--tekst-dof); }
.st-raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; align-items: start; }
.st-kolom { display: flex; flex-direction: column; gap: 22px; min-width: 0; }

.st-pagina .kaart { padding: 24px 26px; border-radius: 20px; }
.st-pagina .kaart h2 { font-family: var(--font-kop); font-size: 20px; font-weight: 700; }
.st-pagina .kaart h3 { font-size: 16px; font-weight: 700; }
.st-pagina .kaart-kop { margin-bottom: 6px; }
.st-pagina p.klein.zacht { font-size: 14px; line-height: 1.5; color: var(--tekst-dof); }

/* Knoppen: één maat. */
.st-pagina .knop { min-height: 42px; padding: 0 18px; border-radius: 10px; font-size: 14px; font-weight: 700; }
.st-pagina .knop.stil { background: var(--veld-vlak); border-color: var(--veld-rand); }
.st-pagina .knop.stil:hover { border-color: var(--prep-accent); }
.st-pagina .knop.gevaar { background: var(--tint-rood-vlak); color: var(--tint-rood); border-color: transparent; }
.st-pagina .knop.gevaar:hover { background: var(--tint-rood); color: #FFFFFF; }

/* Velden. */
.st-pagina input[type='text'], .st-pagina input[type='email'], .st-pagina input[type='password'],
.st-pagina input[type='number'], .st-pagina select {
  min-height: 44px; font-size: 15px;
}

/* De schakelaar. */
.st-pagina input[type='checkbox'], input.schakelaar {
  appearance: none; -webkit-appearance: none; position: relative; flex: none;
  /* !important: een paar vinkjes krijgen in de code een eigen breedte mee. */
  width: 44px !important; height: 26px !important; min-height: 0 !important; margin: 0 !important; padding: 0; cursor: pointer;
  border-radius: var(--rond-vol); border: 1px solid var(--veld-rand); background: var(--spoor);
  transition: background 150ms, border-color 150ms;
}
.st-pagina input[type='checkbox']::after, input.schakelaar::after {
  content: ''; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%;
  background: #FFFFFF; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); transition: transform 150ms;
}
.st-pagina input[type='checkbox']:checked, input.schakelaar:checked { background: var(--prep-accent); border-color: var(--prep-accent); }
.st-pagina input[type='checkbox']:checked::after, input.schakelaar:checked::after { transform: translateX(18px); }
.st-pagina input[type='checkbox']:focus-visible, input.schakelaar:focus-visible { outline: 3px solid var(--actie-lijn); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .st-pagina input[type='checkbox'], .st-pagina input[type='checkbox']::after,
  input.schakelaar, input.schakelaar::after { transition: none; }
}

/* Rijen met een schakelaar: tekst links, schakelaar rechts. */
.st-pagina .optie-lijst { gap: 0; margin-top: 8px; }
.st-pagina .optie-rij {
  flex-direction: row-reverse; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 0; background: none; border: 0; border-top: 1px solid var(--rand); border-radius: 0;
}
.st-pagina .optie-rij:first-child { border-top: 0; }
.st-pagina .optie-rij:hover { background: none; }
.st-pagina .optie-rij-invoer { margin: 0; }
.st-pagina .optie-rij-titel { font-size: 15px; font-weight: 700; }
.st-pagina .optie-rij-uitleg { font-size: 13px; color: var(--tekst-dof); }
.st-pagina label.aankruis {
  flex-direction: row-reverse; justify-content: space-between; align-items: center !important; gap: 16px;
  font-size: 15px; font-weight: 600; color: var(--tekst);
}
.st-pagina label.aankruis input { margin: 0; }

/* Kleine labels in gewone letters, zoals op de rest van de app. */
.st-pagina .etiket { text-transform: none; letter-spacing: 0; font-size: 13px; font-weight: 700; color: var(--label); }

/* De voorbeeldmail als een mailtje, niet als een grijs blok. */
.st-pagina .voorbeeldmail {
  background: var(--veld-vlak); border: 1px solid var(--veld-rand); border-left: 3px solid var(--prep-accent);
  border-radius: 12px; font-size: 14px; color: var(--tekst-zacht);
}

.st-pagina .taaltegel { border-radius: 12px; background: var(--veld-vlak); border-color: var(--veld-rand); }
.st-pagina .taaltegel[aria-checked='true'] { border: 2px solid var(--prep-accent); background: var(--tm-gekozen); box-shadow: none; }

@media (max-width: 1000px) {
  .st-raster { grid-template-columns: minmax(0, 1fr); }
  .st-kop h1 { font-size: 30px; }
}
@media (max-width: 600px) {
  .st-pagina .kaart { padding: 20px; }
}

/* =========================== abonnement en prijzen ========================= */

.ab-kop { margin-bottom: 24px; }
.ab-kop h1 { font-family: var(--font-kop); font-size: 36px; font-weight: 700; letter-spacing: -.02em; }
.ab-kop p { margin-top: 4px; font-size: 15px; color: var(--tekst-dof); }
.ab-pagina { display: flex; flex-direction: column; gap: 22px; }
.ab-pagina .kaart { padding: 24px 26px; border-radius: 20px; }
.ab-pagina .kaart h2 { font-family: var(--font-kop); font-size: 20px; font-weight: 700; }

.ab-pagina .kaart.ab-stand {
  padding: 30px 34px; border-radius: var(--rond-xl);
  background: linear-gradient(135deg, var(--vandaag-van) 0%, var(--vandaag-naar) 60%);
  border: 1px solid var(--vandaag-rand);
}
.ab-label {
  display: block; margin-bottom: 8px; font-size: 12px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--accent-licht);
}
.ab-pagina .kaart.ab-stand h2 { font-size: 28px; }
.ab-pagina .kaart.ab-stand p { font-size: 16px; color: var(--vandaag-tekst); max-width: 680px; }
.ab-pagina .knop { min-height: 44px; border-radius: 12px; font-weight: 700; }
.ab-pagina details.kaart summary { font-weight: 700; font-size: 16px; }

/* De prijskaarten (ook op het scherm na je proef). */
.plannen { gap: 14px; margin-top: 16px; }
.plan {
  gap: 8px; padding: 22px 20px 18px; border-radius: 18px;
  background: var(--vlak); border: 1px solid var(--rand);
}
.plan.aanrader { border: 2px solid var(--prep-accent); background: var(--tm-gekozen); }
.plan-naam { font-size: 15px; font-weight: 700; }
.plan-naam .zacht { color: var(--tekst-dof); font-weight: 500; }
.plan-prijs { font-size: 30px; font-weight: 700; letter-spacing: -.01em; }
.plan-regel { font-size: 13px; color: var(--tekst-dof); line-height: 1.45; }
.plan .knop { min-height: 44px; border-radius: 12px; font-weight: 700; }
.plan .knop.stil { background: var(--veld-vlak); border-color: var(--veld-rand); }
.plan.aanrader .knop:not(.stil) { background: var(--prep-accent); color: #FFFFFF; }
.plan-bespaar { top: -11px; padding: 3px 10px; font-size: 12px; background: var(--st-goed); color: #06210F; }
:root[data-thema='licht'] .plan-bespaar { color: #FFFFFF; }

@media (max-width: 600px) {
  .ab-pagina .kaart.ab-stand { padding: 24px; }
  .ab-pagina .kaart.ab-stand h2 { font-size: 24px; }
  .ab-kop h1 { font-size: 30px; }
}

/* ======================= knoppen en velden, overal ======================== */
/* Licht thema: velden wit met een duidelijke rand (grijsblauw leek
   uitgeschakeld), randknoppen steviger, en knoppen zonder rand in de
   accentkleur, zodat je ziet dat het knoppen zijn. */

:root[data-thema='licht'] input[type='text'], :root[data-thema='licht'] input[type='email'],
:root[data-thema='licht'] input[type='password'], :root[data-thema='licht'] input[type='number'],
:root[data-thema='licht'] input[type='date'], :root[data-thema='licht'] input[type='time'],
:root[data-thema='licht'] input[type='search'], :root[data-thema='licht'] select,
:root[data-thema='licht'] textarea {
  background-color: #FFFFFF; border-color: #C5CCD9;
}
:root[data-thema='licht'] input:hover:not([disabled]), :root[data-thema='licht'] select:hover:not(:disabled),
:root[data-thema='licht'] textarea:hover { border-color: #8C99A8; background-color: #FFFFFF; }
:root[data-thema='licht'] input::placeholder, :root[data-thema='licht'] textarea::placeholder { color: #6B7285; }

:root[data-thema='licht'] .knop.stil {
  background: #FFFFFF; color: var(--tekst); border-color: #C5CCD9; font-weight: 600;
}
:root[data-thema='licht'] .knop.stil:hover { background: #F4F6FB; border-color: var(--actie-lijn); color: var(--tekst); }
:root[data-thema='licht'] .knop.kaal { color: var(--actie-lijn); font-weight: 600; }
:root[data-thema='licht'] .knop.kaal:hover { background: #EEF0FE; color: #2A32B0; }
:root[data-thema='licht'] .knop[disabled], :root[data-thema='licht'] .knop[aria-disabled='true'] { opacity: .55; }
:root[data-thema='licht'] .chip { border-color: #C5CCD9; color: var(--tekst); }

/* Donker thema: knoppen zonder rand iets lichter, zodat ze niet wegvallen. */
.knop.kaal { color: var(--tekst-zacht); }

/* ================== de lijst die openklapt bij een keuzelijst ================ */
/* Browsers die het kunnen (Chrome en Edge) tekenen de lijst in onze eigen
   stijl, in beide thema's; de standaardlijst had in het donkere thema witte
   randen. Andere browsers houden hun eigen lijst. */
@supports (appearance: base-select) {
  select, ::picker(select) { appearance: base-select; }
  select {
    display: inline-flex; align-items: center; justify-content: space-between; gap: 10px;
    background-image: none !important; padding-right: 14px;
  }
  select::picker-icon {
    content: ''; width: 9px; height: 9px; margin-top: -4px; color: var(--tekst-dof);
    border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg);
    transition: transform 150ms;
  }
  select:open::picker-icon { transform: rotate(225deg); margin-top: 4px; }
  ::picker(select) {
    margin-top: 6px; padding: 6px; max-height: min(360px, 60vh);
    background: var(--vlak); color: var(--tekst);
    border: 1px solid var(--rand); border-radius: 14px; box-shadow: var(--schaduw-l);
  }
  select option {
    display: flex; align-items: center; gap: 8px; min-height: 38px; padding: 8px 12px;
    border-radius: 9px; background: transparent; color: var(--tekst); font-size: 15px; cursor: pointer;
  }
  select option:hover, select option:focus-visible { background: var(--vlak-hover); outline: none; }
  select option:checked { background: var(--tm-gekozen); font-weight: 700; }
  select option::checkmark { order: 1; margin-left: auto; color: var(--prep-accent); }
  select option:disabled { color: var(--tekst-dof); cursor: default; }
}

/* ================================= planning ================================ */
/* Licht thema: dagen wit, weekend een tikje getint, vandaag in accent. Eerst
   waren werkdagen grijsblauw en het weekend wit, en dat las omgekeerd. De
   onderdelen krijgen in beide thema's een zachte tint van hun soort. */

.kalitem { background: color-mix(in srgb, var(--soortkleur, var(--rand)) 12%, var(--vlak)); }
.kalitem:hover { background: color-mix(in srgb, var(--soortkleur, var(--rand)) 20%, var(--vlak)); }
.kaldag, .kalvak { border-radius: 12px; }

:root[data-thema='licht'] .kaldag,
:root[data-thema='licht'] .kalvak { background: #FFFFFF; border-color: #DDE2EB; }
:root[data-thema='licht'] .kaldag.weekend,
:root[data-thema='licht'] .kalvak.weekend { background: #F6F8FB; }
:root[data-thema='licht'] .kalvak:hover { background: #F4F6FB; border-color: #B6C2CF; }
:root[data-thema='licht'] .kaldag.vandaag,
:root[data-thema='licht'] .kalvak.vandaag {
  background: #EEF0FE; border-color: var(--actie-lijn); box-shadow: inset 0 0 0 1px var(--actie-lijn);
}
:root[data-thema='licht'] .kalvak.buiten { opacity: .5; background: #F6F8FB; }
:root[data-thema='licht'] .kalitem { background: color-mix(in srgb, var(--soortkleur, #8C99A8) 9%, #FFFFFF); }
:root[data-thema='licht'] .kalitem:hover { background: color-mix(in srgb, var(--soortkleur, #8C99A8) 16%, #FFFFFF); }
:root[data-thema='licht'] .kaldag-toevoegen, :root[data-thema='licht'] .kaldag-leeg { border-color: #C5CCD9; color: #5B6275; }
:root[data-thema='licht'] .kalvak-item { color: var(--tekst); }

/* ---- herhalen: wat eraan komt ---- */
.knop.hh-klein-knop { min-height: 38px; padding: 0 14px; border-radius: 10px; font-size: 14px; font-weight: 700; }
.hh-dagblok + .hh-dagblok { margin-top: 18px; }
.hh-dagblok h3 {
  display: flex; align-items: center; gap: 8px; margin-bottom: 6px;
  font-family: var(--font-body); font-size: 14px; font-weight: 700; color: var(--tekst);
}
.hh-dagblok h3 span {
  padding: 1px 8px; border-radius: var(--rond-vol); font-size: 12px;
  background: var(--nieuw-vlak); color: var(--nieuw-tekst);
}
.hh-items { list-style: none; margin: 0; padding: 0; }
.hh-item { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--rand); min-height: 56px; }
.hh-item-ico { flex: none; width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; }
.hh-item-ico.groen { background: var(--tint-groen-vlak); color: var(--tint-groen); }
.hh-item-ico.paars { background: var(--tint-paars-vlak); color: var(--tint-paars); }
.hh-item-tekst { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.hh-item-tekst b {
  font-size: 14px; font-weight: 600; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
.hh-item-tekst span { font-size: 12.5px; color: var(--tekst-dof); }
.hh-item-knoppen { flex: none; display: flex; gap: 4px; }
.hh-icoonknop {
  width: 36px; height: 36px; display: grid; place-items: center; border-radius: 9px; cursor: pointer;
  border: 1px solid var(--veld-rand); background: var(--veld-vlak); color: var(--tekst-zacht);
}
.hh-icoonknop:hover { border-color: var(--prep-accent); color: var(--tekst); }
.hh-icoonknop.weg:hover { border-color: var(--tint-rood); background: var(--tint-rood-vlak); color: var(--tint-rood); }
.hh-item.is-weg { color: var(--tekst-dof); font-size: 14px; justify-content: space-between; }
.hh-link {
  padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: 14px; font-weight: 700; color: var(--accent-licht);
}
.hh-link:hover { color: var(--tekst); text-decoration: underline; }
.hh-meer { margin-top: 14px; }
.hh-leeg { font-size: 14px; color: var(--tekst-dof); }

/* ---- vensters: andere dag, toevoegen ---- */
.hh-venster { display: flex; flex-direction: column; gap: 14px; }
.hh-venster-tekst { font-size: 15px; font-weight: 600; }
.hh-venster input[type='date'], .hh-venster input[type='search'], .hh-venster select {
  min-height: 44px; background-color: var(--veld-vlak); border: 1px solid var(--veld-rand); border-radius: 10px;
}
.hh-tabs { display: inline-flex; gap: 4px; padding: 4px; border-radius: 12px; background: var(--veld-vlak); border: 1px solid var(--veld-rand); align-self: flex-start; }
.hh-tab {
  padding: 8px 16px; border: 0; border-radius: 9px; background: none; cursor: pointer;
  font: inherit; font-size: 14px; font-weight: 700; color: var(--tekst-dof);
}
.hh-tab[aria-selected='true'] { background: var(--prep-accent); color: #FFFFFF; }
.hh-zoekrij { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 200px); gap: 8px; }
.hh-kandidaten {
  display: flex; flex-direction: column; max-height: min(360px, 45vh); overflow-y: auto;
  border: 1px solid var(--veld-rand); border-radius: 12px; padding: 4px 12px;
}
.hh-kandidaat { display: flex; align-items: flex-start; gap: 12px; padding: 10px 0; border-top: 1px solid var(--rand); cursor: pointer; }
.hh-kandidaat:first-child { border-top: 0; }
.hh-kandidaat input { width: 18px; height: 18px; min-height: 0; margin-top: 2px; flex: none; accent-color: var(--prep-accent); }
.hh-kandidaten .hh-leeg { padding: 12px 0; }
.hh-toevoeg-onder { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.hh-toevoeg-onder .hh-veld input { max-width: 200px; }

@media (max-width: 600px) {
  .hh-zoekrij { grid-template-columns: minmax(0, 1fr); }
  .hh-item { align-items: flex-start; }
}

/* ---- prijskaarten: vier naast elkaar, smaller eronder ---- */
.plannen { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .plannen { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .plannen { grid-template-columns: minmax(0, 1fr); } }

/* ---- zijbalk: hoelang je abonnement nog loopt ---- */
.abo-balk {
  display: block; width: 100%; max-width: 150px; height: 4px; margin-top: 6px;
  border-radius: var(--rond-vol); background: rgba(255, 255, 255, .12); overflow: hidden;
}
.abo-balk i { display: block; height: 100%; border-radius: inherit; background: #5B63F5; transition: width .4s ease; }
.abo-balk[data-stand='let'] i { background: #F5B544; }
.abo-balk[data-stand='bijna'] i { background: #F87171; }
.prep-mat-nieuw.is-aanbevolen { border-color: var(--prep-accent); }
.prep-aanbevolen {
  margin-left: auto; padding: 3px 10px; border-radius: var(--rond-vol); font-size: 12px; font-weight: 700;
  background: var(--nieuw-vlak); color: var(--nieuw-tekst);
}

/* ============================ flashcards oefenen =========================== */
/* De kaart als echte kaart op de achtergrond van de pagina: in het lichte
   thema wit op grijs, in het donkere thema iets lichter dan de grond. De
   achterkant krijgt de accentkleur, zodat je ziet dat hij is omgedraaid. */

.modal-grond.volledig .modal { background: var(--grond); }
.modal-grond.volledig .modal-kop { background: var(--vlak); border-bottom: 1px solid var(--rand); }

.flitskaart-vlak {
  background: var(--vlak); border: 1px solid var(--rand); border-radius: 22px;
  box-shadow: var(--schaduw-m);
}
.flitskaart:not(.om):hover .flitskaart-vlak.voor { border-color: var(--prep-accent); }
.flitskaart-vlak.achter {
  background: var(--tm-gekozen); border: 2px solid var(--prep-accent);
  box-shadow: 0 24px 48px -28px var(--prep-accent);
}
.flitskaart-vlak h2 { font-family: var(--font-kop); font-weight: 700; letter-spacing: -.01em; }

/* Wist ik / Twijfel / Wist ik niet: drie gelijke, getinte knoppen. */
.oordelen { align-items: stretch; gap: 10px; margin-top: 18px; }
.oordeel {
  position: relative; margin: 0; min-height: 58px; padding: 12px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  border-radius: 14px; border: 2px solid transparent;
  font: inherit; font-size: 16px; transition: transform 120ms, filter 120ms;
}
.oordeel b { font-family: var(--font-kop); font-weight: 700; }
.oordeel:hover { filter: brightness(1.06); transform: translateY(-1px); }
.oordeel:focus-visible { outline: 3px solid var(--actie-lijn); outline-offset: 2px; }
.oordeel-goed  { background: var(--tint-groen-vlak); color: var(--tint-groen); border-color: color-mix(in srgb, var(--tint-groen) 45%, transparent); }
.oordeel-amber { background: var(--tint-geel-vlak);  color: var(--tint-geel);  border-color: color-mix(in srgb, var(--tint-geel) 45%, transparent); }
.oordeel-fout  { background: var(--tint-rood-vlak);  color: var(--tint-rood);  border-color: color-mix(in srgb, var(--tint-rood) 45%, transparent); }
.oordeel-toets {
  display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px;
  border-radius: 6px; font-size: 12px; font-weight: 700; opacity: .75;
  border: 1px solid currentColor;
}
@media (max-width: 600px) { .oordeel-toets { display: none; } .oordeel { font-size: 15px; } }

/* ---- flashcards: overzicht en stapel ---- */
/* De balk bovenaan was in beide thema's zwart; in het lichte thema nu licht. */
:root[data-thema='licht'] .fc-balk {
  background: linear-gradient(135deg, var(--vandaag-van) 0%, var(--vandaag-naar) 70%);
  border-color: var(--vandaag-rand); color: var(--tekst);
}
:root[data-thema='licht'] .fc-balk h2 { color: var(--tekst); }
:root[data-thema='licht'] .fc-balk p, :root[data-thema='licht'] .fc-cijfers span { color: var(--vandaag-tekst); }
:root[data-thema='licht'] .fc-label { color: var(--accent-licht); }
:root[data-thema='licht'] .fc-balk .knop { background: var(--prep-accent); }
.knop.fc-weg { width: 34px; min-height: 34px; padding: 0; }
.knop.fc-weg:hover { background: var(--tint-rood-vlak); color: var(--tint-rood); }

/* ================== labels en cijferkaarten: overal hetzelfde ============== */
/* Veldlabels in gewone letters, zoals op de vernieuwde pagina's. */
.veld > label {
  text-transform: none; letter-spacing: 0; font-size: 13px; font-weight: 700; color: var(--label);
}
/* Cijferkaarten zonder accentstreep en met een gewoon label. */
.kerncijfer { padding: 16px 18px; border-radius: 16px; }
.kerncijfer::before { display: none; }
.kerncijfer b { font-family: var(--font-kop); font-size: 28px; font-weight: 700; line-height: 1.1; }
.kerncijfer .etiket { text-transform: none; letter-spacing: 0; font-size: 13px; font-weight: 500; color: var(--tekst-dof); margin-top: 4px; }
/* Drie cijfers staan naast elkaar, ook in een smallere kolom. */
.rooster.k3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 520px) { .rooster.k3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .kerncijfer { padding: 12px; } .kerncijfer b { font-size: 22px; } }

/* ================== licht thema: geen grijsblauwe vlakken meer ============= */
/* --vlak-diep was in het lichte thema #E5EBF2: overal waar iets "verdiept"
   was (antwoordknoppen, kaartjes, tabellen) leek het grijs en uitgeschakeld.
   Nu een heel lichte tint, zodat wit en licht de toon zetten. */
:root[data-thema='licht'] { --vlak-diep: #F6F8FB; --vlak-hover: #EEF1F6; }

/* Antwoordknoppen bij een vraag: wit met een duidelijke rand. */
:root[data-thema='licht'] .optie-knop { background: #FFFFFF; border-color: #C5CCD9; }
:root[data-thema='licht'] .optie-knop:hover:not([disabled]) { background: #F4F6FB; border-color: var(--actie-lijn); }
.optie-knop { border-radius: 14px; }

/* ---- wanneer komt een vraag terug ---- */
.terugkomst { margin-top: 10px; }
.tk-rij {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 10px 12px; border-radius: 12px; background: var(--vlak-diep); border: 1px solid var(--rand);
}
.tk-ico { flex: none; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--tint-paars-vlak); color: var(--tint-paars); }
.tk-tekst { flex: 1 1 240px; min-width: 0; font-size: 14px; color: var(--tekst-dof); line-height: 1.45; }
.tk-tekst b { color: var(--tekst); font-weight: 600; }
.tk-knop, .tk-keuze {
  display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; cursor: pointer;
  border-radius: 10px; border: 1px solid var(--veld-rand); background: var(--veld-vlak); color: var(--tekst);
  font: inherit; font-size: 13.5px; font-weight: 700; white-space: nowrap;
}
.tk-knop:hover, .tk-keuze:hover { border-color: var(--prep-accent); }
.tk-keuze[aria-pressed='true'] { border: 2px solid var(--prep-accent); background: var(--tm-gekozen); }
.tk-keuze.weg { color: var(--tint-rood); }
.tk-keuze.weg:hover { border-color: var(--tint-rood); background: var(--tint-rood-vlak); }
.tk-keuzes { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }
.tk-datum { display: inline-flex; gap: 6px; align-items: center; }
.tk-datum input { width: auto; min-height: 36px; padding: 4px 10px; border-radius: 10px; background-color: var(--veld-vlak); border-color: var(--veld-rand); }

/* ======================= resultaten na een ronde of toets ================== */

.rs-pagina { display: flex; flex-direction: column; gap: 20px; }
.rs-kop {
  display: flex; align-items: center; justify-content: space-between; gap: 28px;
  padding: 30px 36px; border-radius: var(--rond-xl);
  background: linear-gradient(135deg, var(--vandaag-van) 0%, var(--vandaag-naar) 65%);
  border: 1px solid var(--vandaag-rand);
}
.rs-kop-tekst { min-width: 0; }
.rs-label { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-licht); }
.rs-kop h1 { margin-top: 8px; font-family: var(--font-kop); font-size: 32px; font-weight: 700; letter-spacing: -.02em; line-height: 1.15; overflow-wrap: anywhere; }
.rs-kop-tekst > p { margin-top: 8px; font-size: 16px; color: var(--vandaag-tekst); }
.rs-feiten { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 14px; font-size: 14px; color: var(--tekst-dof); }
.rs-feiten span { display: inline-flex; align-items: center; gap: 6px; }
.rs-ring { position: relative; flex: none; width: 132px; height: 132px; }
.rs-ring svg { display: block; }
.rs-ring-baan { stroke: var(--ring-spoor); }
.rs-ring-vul { stroke: var(--st-goed); transition: stroke-dasharray .5s ease; }
.rs-kop[data-status='matig'] .rs-ring-vul { stroke: var(--st-matig); }
.rs-kop[data-status='zwak'] .rs-ring-vul { stroke: var(--st-zwak); }
.rs-ring-midden { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.rs-ring-midden b { font-family: var(--font-kop); font-size: 30px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.rs-ring-midden span { font-size: 12px; color: var(--tekst-dof); margin-top: 4px; }

.rs-kaart {
  display: flex; flex-direction: column; gap: 12px; min-width: 0;
  padding: 24px 26px; border-radius: 20px; background: var(--vlak); border: 1px solid var(--rand);
}
.rs-kaart.rs-accent { border-color: var(--prep-accent); }
.rs-kaart.rs-zacht { background: var(--vlak-diep); }
.rs-kaart h2 { font-family: var(--font-kop); font-size: 20px; font-weight: 700; }
.rs-kaartkop { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.rs-klein { font-size: 14px; color: var(--tekst-dof); line-height: 1.5; }
.rs-rij { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

.rs-vragen { list-style: none; margin: 0; padding: 0; }
.rs-vraag { padding: 16px 0; border-top: 1px solid var(--rand); }
.rs-vraag:first-child { border-top: 0; padding-top: 4px; }
.rs-vraag-kop { display: flex; align-items: flex-start; gap: 10px; }
.rs-vraag-kop b { font-size: 16px; font-weight: 700; line-height: 1.4; overflow-wrap: anywhere; }
.rs-nr { flex: none; font-size: 13px; font-weight: 700; color: var(--tekst-dof); margin-top: 3px; min-width: 16px; }
.rs-status {
  flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  background: var(--vlak-diep); color: var(--tekst-dof);
}
.rs-status.klein { width: 20px; height: 20px; }
.rs-vraag[data-status='goed'] .rs-status, .rs-status[data-status='goed'] { background: var(--tint-groen-vlak); color: var(--tint-groen); }
.rs-vraag[data-status='fout'] .rs-status, .rs-status[data-status='fout'] { background: var(--tint-rood-vlak); color: var(--tint-rood); }
.rs-status .tol { width: 14px; height: 14px; border-width: 2px; }
.rs-antwoorden {
  display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 14px;
  margin: 10px 0 0 62px; font-size: 14px;
}
.rs-antwoorden dt { color: var(--tekst-dof); }
.rs-antwoorden dd { margin: 0; color: var(--tekst); overflow-wrap: anywhere; }
.rs-oordeel { margin-left: 62px; }
.rs-oordeel:empty { display: none; }
.rs-oordeel .bericht { margin-top: 10px; }
.rs-uitleg { margin: 10px 0 0 62px; font-size: 14px; }
.rs-uitleg summary { cursor: pointer; color: var(--accent-licht); font-weight: 700; }
.rs-uitleg > div { margin-top: 6px; color: var(--tekst-zacht); line-height: 1.55; }

/* Omzetten: een echte knop, geen blauw linkje. */
.omzet { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; font-size: 14px; color: var(--tekst-dof); }
.knop.omzet-knop { min-height: 36px; padding: 0 14px; border-radius: 10px; font-size: 13.5px; font-weight: 700; }

.rs-opnieuw { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.rs-opnieuw li { border-top: 1px solid var(--rand); }
.rs-opnieuw label { display: flex; align-items: center; gap: 10px; padding: 10px 0; cursor: pointer; font-size: 14px; }
.rs-opnieuw input { width: 18px; height: 18px; min-height: 0; flex: none; accent-color: var(--prep-accent); }
.rs-opnieuw small { color: var(--tekst-dof); }
.rs-opnieuw-onder { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.rs-veld { display: flex; flex-direction: column; gap: 6px; }
.rs-veld > span { font-size: 13px; font-weight: 700; color: var(--label); }
.rs-veld input { width: auto; min-width: 180px; min-height: 44px; border-radius: 10px; background-color: var(--veld-vlak); border-color: var(--veld-rand); }
.knop.rs-knop { min-height: 44px; padding: 0 18px; border-radius: 12px; font-size: 14.5px; font-weight: 700; }
.knop.rs-knop.primair { background: var(--prep-accent); color: #FFFFFF; border-color: transparent; }
.knop.rs-knop.primair:hover { background: var(--actie-hover); }
.rs-knoppen { display: flex; gap: 10px; flex-wrap: wrap; }

@media (max-width: 700px) {
  .rs-kop { flex-direction: column-reverse; align-items: flex-start; padding: 24px; }
  .rs-kop h1 { font-size: 26px; }
  .rs-antwoorden, .rs-oordeel, .rs-uitleg { margin-left: 0; }
  .rs-antwoorden { grid-template-columns: minmax(0, 1fr); }
  .rs-antwoorden dd { margin-bottom: 6px; }
  .rs-kaart { padding: 20px; }
}

/* ---- toetsen: de vijf moeilijkheidsgraden ---- */
.tt-niveaus .fp-keuze {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-height: 58px; padding: 6px 4px; font-size: 12.5px;
}
.tt-niveaus .fp-keuze b { font-family: var(--font-kop); font-size: 18px; line-height: 1; }
.tt-niveaus .fp-keuze[aria-pressed='false'] { opacity: .6; }
@media (max-width: 420px) { .tt-niveaus { --kolommen: 3 !important; } }
.tt-niveaus { gap: 6px; }
.tt-niveaus .fp-keuze { padding: 6px 2px; font-size: 11px; overflow: hidden; }
.tt-niveaus .fp-keuze span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Toetsen: wat elk niveau inhoudt, onder de knoppen. */
.tt-niveau-uitleg { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.tt-niveau-uitleg li { display: flex; align-items: baseline; gap: 8px; color: var(--tekst-dof); transition: opacity .15s; }
.tt-niveau-uitleg li.uit { opacity: .45; text-decoration: line-through; }
.tt-niveau-uitleg b { flex: none; width: 18px; font-family: var(--font-kop); color: var(--prep-accent); text-align: center; }
.tt-nv-naam { flex: none; min-width: 84px; font-weight: 700; color: var(--tekst); }
.tt-nv-uitleg { min-width: 0; }

/* ---- leerplan: tijd, uitslag en herkansing ---- */
.prep-tijd { display: flex; flex-direction: column; gap: 8px; }
.prep-tijd-kop { display: flex; align-items: center; gap: 12px; }
.prep-tijd-kop b { display: block; font-family: var(--font-kop); font-size: 22px; font-weight: 700; line-height: 1.1; }
.prep-tijd-kop span:not(.prep-tijd-ico) { font-size: 13px; color: var(--tekst-dof); }
.prep-tijd-ico { flex: none; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--tint-paars-vlak); color: var(--tint-paars); }
.prep-tijd-regel { font-size: 14px; color: var(--tekst); }
.prep-tijd-regel.krap { color: var(--tint-rood); }
.prep-tijd-uitleg { font-size: 13.5px; color: var(--tekst-dof); line-height: 1.5; }

.prep-herkansing-van {
  display: flex; align-items: center; gap: 8px; margin-bottom: 16px; padding: 10px 14px;
  border-radius: 12px; background: var(--vlak-diep); border: 1px solid var(--rand);
  font-size: 14px; color: var(--tekst-dof); text-decoration: none;
}
.prep-herkansing-van b { color: var(--tekst); }
.prep-herkansing-van:hover { border-color: var(--prep-accent); }

.prep-uitslag { display: flex; flex-direction: column; margin-bottom: 22px; border-color: var(--prep-accent); gap: 16px; }
.prep-uitslag-kop { display: flex; align-items: center; gap: 18px; }
.prep-uitslag-titel { min-width: 0; }
.prep-uitslag-titel h2 { font-family: var(--font-kop); font-size: 20px; font-weight: 700; }
.prep-uitslag-sub { margin-top: 4px; font-size: 14px; color: var(--tekst-dof); line-height: 1.5; }
.prep-uitslag-citaat { margin-top: 4px; font-size: 14px; color: var(--tekst-dof); font-style: italic; overflow-wrap: anywhere; }
.prep-cijfer {
  flex: none; width: 96px; height: 86px; padding: 0 6px; border-radius: 22px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; background: var(--tint-groen-vlak); color: var(--tint-groen);
}
.prep-cijfer[data-status='zwak'] { background: var(--tint-rood-vlak); color: var(--tint-rood); }
.prep-cijfer b { font-family: var(--font-kop); font-size: 32px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.prep-cijfer span { margin-top: 4px; font-size: 12px; font-weight: 700; }
.prep-analyse { padding-top: 14px; border-top: 1px solid var(--rand); }
.prep-uitslag-velden { display: flex; flex-direction: column; gap: 14px; }
.prep-cijfer-veld { max-width: 140px; font-size: 18px; font-weight: 700; }
.prep-herkans-vink { display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: 14.5px; font-weight: 600; }
.prep-herkans-vink input { width: 18px; height: 18px; min-height: 0; flex: none; accent-color: var(--prep-accent); }
.prep-uitslag-knoppen { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.prep-uitslag-knoppen .fp-maak { width: auto; }
.prep-herkansing-link {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px;
  background: var(--vlak-diep); border: 1px solid var(--rand); color: var(--tekst); text-decoration: none;
}
.prep-herkansing-link > span:nth-child(2) { flex: 1; display: flex; flex-direction: column; }
.prep-herkansing-link small { font-size: 13px; color: var(--tekst-dof); }
.prep-herkansing-link:hover { border-color: var(--prep-accent); }
@media (max-width: 600px) {
  .prep-uitslag-kop { align-items: flex-start; }
  .prep-cijfer { width: 68px; height: 68px; border-radius: 18px; }
  .prep-cijfer b { font-size: 26px; }
}

/* Herhalen: kaarten uit één stapel als bundel, uitklapbaar. */
.hh-item.hh-bundel { flex-direction: column; align-items: stretch; gap: 0; }
.hh-bundel-rij { display: flex; align-items: center; gap: 12px; }
.hh-icoonknop svg { transition: transform .15s; }
.hh-icoonknop.is-open svg { transform: rotate(90deg); }
.hh-bundel-kaarten { list-style: none; margin: 8px 0 0 44px; padding: 0; }
.hh-bundel-kaarten .hh-item { min-height: 48px; padding: 6px 0; }
.hh-bundel-kaarten .hh-item-ico { width: 26px; height: 26px; }
@media (max-width: 520px) { .hh-bundel-kaarten { margin-left: 12px; } }

/* Leerplan: "Toets al gehad?" ingeklapt, en waar je op oefent. */
.prep-uitslag.is-klein { border-color: var(--rand); padding-block: 16px; }
.prep-uitslag-klein { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.prep-uitslag-klein > div { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.prep-uitslag-klein b { font-size: 15px; }
.prep-uitslag-klein span { font-size: 13.5px; color: var(--tekst-dof); }
.prep-focus { display: flex; flex-direction: column; gap: 10px; margin-bottom: 22px; border-color: var(--prep-accent); }
.prep-focus h2 { margin-bottom: 0; }
.prep-focus-blok { display: flex; flex-direction: column; gap: 8px; padding-top: 14px; border-top: 1px solid var(--rand); }
.prep-focus-blok > b { font-size: 14.5px; }
.prep-focus-lijst { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.prep-focus-lijst li { display: flex; align-items: flex-start; gap: 8px; font-size: 14.5px; line-height: 1.45; }
.prep-focus-lijst svg { flex: none; margin-top: 3px; color: var(--prep-accent); }
/* Datum en uren naast elkaar als er plek is, anders onder elkaar. */
.fp-naast.prep-herkans-velden { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }

/* ---- je planning in je agenda ---- */
.agv { display: flex; flex-direction: column; gap: 18px; }
.agv-blok { display: flex; flex-direction: column; gap: 12px; padding: 18px; border-radius: 16px; background: var(--vlak-diep); border: 1px solid var(--rand); }
.agv-kop { display: flex; gap: 12px; align-items: flex-start; }
.agv-kop h3 { font-family: var(--font-kop); font-size: 17px; font-weight: 700; }
.agv-kop p { margin-top: 2px; font-size: 14px; color: var(--tekst-dof); line-height: 1.5; }
.agv-ico { flex: none; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--tint-paars-vlak); color: var(--tint-paars); }
.agv-rij { display: flex; gap: 8px; align-items: stretch; flex-wrap: wrap; }
.agv-rij input { flex: 1 1 260px; min-width: 0; min-height: 44px; background-color: var(--veld-vlak); border: 1px solid var(--veld-rand); border-radius: 10px; }
.agv-link { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; }
.agv-knoppen { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.agv-knoppen a.knop { text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.agv-uitleg summary { cursor: pointer; font-size: 14px; font-weight: 700; color: var(--accent-licht); }
.agv-uitleg ul { margin: 8px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; line-height: 1.5; }
.agv-uitleg p { margin-top: 8px; font-size: 13px; color: var(--tekst-dof); line-height: 1.5; }


/* Toetsen: bestaande toets uit Retrieva of uit een bestand. */
.tabs.tt-bron { align-self: flex-start; width: auto; }
.tabs.tt-bron button { padding-inline: 14px; font-size: 13.5px; }

/* Zijbalk onderaan: je initialen en je abonnement. De zijbalk is in beide
   thema's donker, dus hier altijd lichte tekst.
   - De initialen werden grijs doordat ".zijbalk-wie span" ook de avatar raakte.
   - "Proef · nog 7 dagen" werd bij hover var(--tekst): in het lichte thema
     bijna zwart, op een donkere achtergrond. */
.zijbalk-wie .avatar {
  color: #FFFFFF;
  background: linear-gradient(135deg, #6F7DFF 0%, #A48BFF 100%);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .14);
  text-shadow: 0 1px 1px rgba(0, 0, 0, .25);
}
.zijbalk .abo-regel { color: #9AA6B8; }
.zijbalk .abo-regel.let { color: #FFC56B; }
.zijbalk .abo-regel:hover, .zijbalk .abo-regel:focus-visible { color: #FFFFFF; }
.prep-herkans-keuze { display: flex; flex-direction: column; gap: 4px; }
.prep-herkans-keuze .fp-keuze-uitleg { margin-top: 0; padding-left: 28px; }

/* ---- voortgang: week terugkijken ---- */
.vg-weekkaart { display: flex; flex-direction: column; gap: 18px; }
.vg-w-kop { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.vg-w-kop h2 { font-family: var(--font-kop); font-size: 20px; font-weight: 700; }
.vg-w-kop p { margin-top: 2px; font-size: 13.5px; color: var(--tekst-dof); }
.vg-w-nav { display: flex; gap: 6px; align-items: center; }
.vg-w-pijl, .vg-w-nu {
  min-width: 36px; height: 36px; padding: 0 10px; border-radius: 10px; cursor: pointer; display: inline-grid; place-items: center;
  border: 1px solid var(--veld-rand); background: var(--veld-vlak); color: var(--tekst); font: inherit; font-size: 13.5px; font-weight: 700;
}
.vg-w-pijl:hover:not([disabled]), .vg-w-nu:hover { border-color: var(--prep-accent); }
.vg-w-pijl[disabled] { opacity: .35; cursor: default; }
.vg-w-leeg { font-size: 14.5px; color: var(--tekst-dof); }
.vg-w-cijfers { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.vg-w-cijfer { display: flex; flex-direction: column; gap: 2px; padding: 14px; border-radius: 14px; background: var(--vlak-diep); border: 1px solid var(--rand); min-width: 0; }
.vg-w-cijfer b { font-family: var(--font-kop); font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
.vg-w-cijfer > span { font-size: 13px; color: var(--tekst-dof); }
.vg-w-cijfer .vg-w-klein, .vg-w-verschil { font-size: 12.5px; color: var(--tekst-dof); }
.vg-w-verschil.meer { color: var(--tint-groen); }
.vg-w-verschil.minder { color: var(--tint-rood); }
.vg-w-dagen { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; align-items: end; }
.vg-w-dag { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; }
.vg-w-staafvak { width: 100%; max-width: 44px; height: 110px; display: flex; align-items: flex-end; border-radius: 10px; background: var(--vlak-diep); overflow: hidden; }
.vg-w-staafvak i { display: block; width: 100%; border-radius: 10px 10px 0 0; background: var(--prep-accent); }
.vg-w-dag b { font-size: 12px; font-weight: 700; min-height: 16px; font-variant-numeric: tabular-nums; }
.vg-w-dag > span:last-child { font-size: 12px; color: var(--tekst-dof); text-transform: capitalize; }
.vg-w-dag.is-vandaag > span:last-child { color: var(--tekst); font-weight: 700; }
.vg-w-dag.is-toekomst .vg-w-staafvak { opacity: .4; }
.vg-w-onder { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; }
.vg-w-blok h3 { font-size: 14.5px; font-weight: 700; margin-bottom: 8px; }
.vg-w-vakken, .vg-w-rondes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.vg-w-vakken li, .vg-w-rondes li { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--rand); }
.vg-w-vakken li:first-child, .vg-w-rondes li:first-child { border-top: 0; }
.vg-w-vakken li > i { flex: none; width: 10px; height: 10px; border-radius: 50%; }
.vg-w-vakken li > div, .vg-w-rondes li > div { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.vg-w-vakken b, .vg-w-rondes b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vg-w-vakken span, .vg-w-rondes li > div > span { font-size: 12.5px; color: var(--tekst-dof); }
.vg-w-balk { flex: none; width: 64px; height: 6px; border-radius: 3px; background: var(--vlak-diep); overflow: hidden; }
.vg-w-balk i { display: block; height: 100%; background: var(--tint-groen); }
.vg-w-score { flex: none; padding: 3px 9px; border-radius: 999px; font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.vg-w-score.goed { background: var(--tint-groen-vlak); color: var(--tint-groen); }
.vg-w-score.matig { background: var(--tint-geel-vlak, var(--vlak-diep)); color: var(--amber); }
.vg-w-score.zwak { background: var(--tint-rood-vlak); color: var(--tint-rood); }
.vg-w-planning { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--tekst-dof); }
@media (max-width: 640px) {
  .vg-w-cijfers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vg-w-staafvak { height: 80px; }
}

/* ---- bibliotheek: één filterbalk en compacte lijsten per maand ---- */
.bb-balk {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 8px; border-radius: 16px; background: var(--vlak); border: 1px solid var(--rand);
}
.bb-soorten { display: flex; gap: 4px; flex-wrap: wrap; }
.bb-tab {
  display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 12px; border-radius: 11px; cursor: pointer;
  border: 1px solid transparent; background: none; color: var(--tekst-zacht); font: inherit; font-size: 13.5px; font-weight: 700;
}
.bb-tab:hover { background: var(--vlak-hover); color: var(--tekst); }
.bb-tab[aria-selected='true'] { background: var(--tm-gekozen); color: var(--tekst); border-color: var(--prep-accent); }
.bb-aantal { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; display: inline-grid; place-items: center; font-size: 11.5px; background: var(--vlak-diep); color: var(--tekst-dof); font-variant-numeric: tabular-nums; }
.bb-tab[aria-selected='true'] .bb-aantal { background: var(--prep-accent); color: #FFFFFF; }
.bb-rechts { display: flex; gap: 8px; flex-wrap: wrap; }
.bb-select { width: auto; min-width: 150px; height: 38px; min-height: 0; padding: 0 34px 0 12px; border-radius: 11px; font-size: 13.5px; background-color: var(--veld-vlak); border: 1px solid var(--veld-rand); }
.bb-samenvatting { display: flex; align-items: center; gap: 12px; margin: 14px 2px 6px; font-size: 13.5px; color: var(--tekst-dof); }
.bb-wis { border: 0; background: none; padding: 0; cursor: pointer; font: inherit; font-weight: 700; color: var(--accent-licht); }
.bb-wis:hover { text-decoration: underline; }
.bb-lijst { display: flex; flex-direction: column; gap: 16px; }
.bb-leeg { padding: 24px 4px; color: var(--tekst-dof); }
.bb-groep { border-radius: 18px; background: var(--vlak); border: 1px solid var(--rand); overflow: hidden; }
.bb-kop {
  display: flex; align-items: center; gap: 8px; padding: 14px 18px 10px;
  font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--tekst-dof);
}
.bb-kop span { letter-spacing: 0; font-size: 11.5px; padding: 1px 7px; border-radius: 999px; background: var(--vlak-diep); }
.bb-rijen { display: flex; flex-direction: column; }
.bb-rij {
  display: flex; align-items: center; gap: 12px; padding: 11px 18px; border-top: 1px solid var(--rand);
  color: var(--tekst); text-decoration: none; transition: background .12s;
}
.bb-groep > .bb-rijen:first-child .bb-rij:first-child { border-top: 0; }
.bb-rij:hover { background: var(--vlak-hover); }
.bb-ico { flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--vlak-diep); color: var(--tekst-dof); }
.bb-rij.tint-paars .bb-ico { background: var(--tint-paars-vlak); color: var(--tint-paars); }
.bb-rij.tint-rood .bb-ico { background: var(--tint-rood-vlak); color: var(--tint-rood); }
.bb-rij.tint-geel .bb-ico { background: var(--tint-geel-vlak); color: var(--tint-geel); }
.bb-rij.tint-teal .bb-ico { background: var(--tint-teal-vlak); color: var(--tint-teal); }
.bb-rij.tint-groen .bb-ico { background: var(--tint-groen-vlak); color: var(--tint-groen); }
.bb-tekst { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.bb-tekst b { font-size: 14.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bb-meta, .bb-fragment { font-size: 12.5px; color: var(--tekst-dof); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bb-fragment { color: var(--tekst-zacht); font-style: italic; }
.bb-weg, .bb-pijl { flex: none; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 9px; color: var(--tekst-dof); }
.bb-weg { border: 1px solid transparent; background: none; cursor: pointer; opacity: 0; transition: opacity .12s; }
.bb-rij:hover .bb-weg, .bb-weg:focus-visible { opacity: 1; }
.bb-weg:hover { border-color: var(--tint-rood); background: var(--tint-rood-vlak); color: var(--tint-rood); }
@media (hover: none) { .bb-weg { opacity: 1; } }
@media (max-width: 640px) {
  .bb-balk { flex-direction: column; align-items: stretch; }
  .bb-soorten { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .bb-tab { flex: none; }
  .bb-rechts > * { flex: 1 1 0; min-width: 0; }
  .bb-rij { padding: 11px 14px; }
}
/* Nooit breder dan de pagina: de tabs scrollen dan zelf opzij. */
.bb-balk, .bb-soorten, .bb-lijst, .bb-groep, .bb-samenvatting { min-width: 0; max-width: 100%; }

/* Telefoon: twee maakknoppen naast elkaar mogen breken en passen altijd, en
   het menu "Meer" klapt naar links open zodat het binnen het scherm blijft. */
@media (max-width: 640px) {
  .fp-maakbalk .knop.fp-maak { flex: 1 1 0; min-width: 0; white-space: normal; line-height: 1.2; text-align: center; }
  .acties-meer-lijst { left: auto; right: 0; max-width: calc(100vw - 32px); }
}

/* ============================ telefoon, ronde 7 ============================ */

/* De bovenbalk: logo, de naam van het scherm waar je bent, je account rechts.
   Op het thuisscherm (zonder adresbalk) schuift de statusbalk van de telefoon
   over de pagina; de balk begint daarom onder die statusbalk. */
@media (max-width: 860px) {
  .mobiele-kop {
    min-height: 52px;
    padding: calc(var(--r2) + env(safe-area-inset-top, 0px)) var(--r4) var(--r2);
    border-bottom: 1px solid rgba(255, 255, 255, .08);
  }
  .mobiele-kop-merk { display: inline-flex; flex: none; }
  .mobiele-kop-titel {
    flex: 1 1 auto; min-width: 0;
    font-family: var(--font-kop); font-size: 17px; font-weight: 700; letter-spacing: -.02em;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .mobiele-kop-wie {
    flex: none; width: 32px; height: 32px; border-radius: var(--rond-vol);
    display: grid; place-items: center; text-decoration: none;
    background: linear-gradient(135deg, var(--actie-vlak), #7C5CFF);
    color: #FFFFFF; font-family: var(--font-kop); font-weight: 700; font-size: 12px;
  }
  .mobiele-kop-wie:hover { color: #FFFFFF; }

  /* De balk onderin: de knop waar je bent is gevuld en heeft een streepje
     erboven, zodat je het ook ziet zonder op de kleur te letten. */
  .zijbalk nav > .nav-knop { overflow: visible; padding-inline: 2px; }
  .zijbalk nav > .nav-knop[aria-current='page']::before {
    content: ''; position: absolute; top: calc(-1 * var(--r2) - 1px); left: 30%; right: 30%;
    height: 3px; border-radius: 0 0 3px 3px; background: var(--actie-vlak);
  }
  .zijbalk nav > .nav-knop span:not(.telling) { overflow: hidden; text-overflow: ellipsis; max-width: 100%; }

  /* In het venster "Meer" is het scherm waar je nu bent ook gemarkeerd. */
  .meer-raster .nav-knop { border: 1px solid var(--rand); background: var(--vlak); color: var(--tekst-zacht); }
  .meer-raster .nav-knop[aria-current='page'] {
    background: var(--actie-vlak); border-color: var(--actie-vlak); color: var(--actie-tekst);
  }
  .meer-raster .nav-knop span { white-space: normal; line-height: 1.2; }
}

/* Lange vaknamen breken af in plaats van uit de tegel te lopen. */
.vaktegel h3 { overflow-wrap: anywhere; hyphens: auto; }

/* Inloggen op een telefoon: de belofte kleiner, zodat het formulier meteen
   in beeld komt. */
@media (max-width: 520px) {
  .poort-nieuw .poort-zij { gap: var(--r3); padding-top: calc(var(--r3) + env(safe-area-inset-top, 0px)); }
  .poort-nieuw .poort-belofte h2 { font-size: 30px; margin-bottom: var(--r2); line-height: 1; }
  .poort-nieuw .poort-belofte p { display: none; }
  .poort-nieuw .poort-vak { padding-top: var(--r2); }
}