/* ===========================================================================
   Retrieva — basis en componenten
   Alleen tokens uit tokens.css. Geen losse kleuren.
   =========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

/* Componenten hieronder zetten `display`, en dat wint het van het
   hidden-attribuut. Deze regel zorgt dat verbergen altijd verbergen blijft. */
[hidden] { display: none !important; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--grond);
  color: var(--tekst);
  font-family: var(--font-body);
  font-size: var(--tekst-m);
  line-height: var(--regel-normaal);
  -webkit-font-smoothing: antialiased;
  transition: background-color var(--rustig), color var(--rustig);
}

h1, h2, h3, h4 {
  font-family: var(--font-kop);
  font-weight: 600;
  line-height: var(--regel-strak);
  letter-spacing: -.02em;
  margin: 0;
}
h1 { font-size: var(--tekst-2xl); }
h2 { font-size: var(--tekst-xl); }
h3 { font-size: var(--tekst-l); }
h4 { font-size: var(--tekst-m); }

p { margin: 0; }
a { color: var(--tekst); text-underline-offset: 3px; }
a:hover { color: var(--actie-lijn); }

/* Getallen staan in de hele app in dezelfde stijl: koplettertype met
   tabellarische cijfers, zodat kolommen recht onder elkaar lopen. */
.cijfer {
  font-family: var(--font-kop);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
  letter-spacing: -.01em;
}

.dof   { color: var(--tekst-dof); }
.zacht { color: var(--tekst-zacht); }
.klein { font-size: var(--tekst-s); }
.mini  { font-size: var(--tekst-xs); line-height: var(--regel-normaal); }

.etiket {
  font-size: var(--tekst-xs);
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--tekst-dof);
  font-weight: 500;
}

:focus-visible {
  outline: 2px solid var(--actie-lijn);
  outline-offset: 2px;
  border-radius: var(--rond-s);
}

/* Alleen zichtbaar voor schermlezers */
.enkel-voorlezen {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

.overslaan {
  position: absolute; left: var(--r3); top: -60px; z-index: var(--laag-melding);
  background: var(--actie-vlak); color: var(--actie-tekst);
  padding: var(--r2) var(--r4); border-radius: var(--rond-m); font-weight: 600;
  transition: top var(--snel);
}
.overslaan:focus { top: var(--r3); }

/* ============================== de schil ================================== */

#schil { min-height: 100vh; }

.app-raster {
  display: grid;
  grid-template-columns: 244px minmax(0, 1fr);
  min-height: 100vh;
}

.zijbalk {
  background: var(--zijbalk);
  color: #C6D0DC;
  padding: var(--r5) var(--r3) var(--r4);
  display: flex;
  flex-direction: column;
  gap: var(--r1);
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.merk {
  display: flex; align-items: center; gap: var(--r3);
  padding: 0 var(--r2) var(--r5);
  color: #FFFFFF;
}
.merk img { width: 28px; height: 28px; display: block; }
.merk b {
  font-family: var(--font-kop); font-size: var(--tekst-xl);
  font-weight: 700; letter-spacing: -.035em;
}

.zijbalk nav { display: flex; flex-direction: column; gap: 2px; }
.zijbalk nav > .nav-meer { display: none; }
/* "Meer": kleiner en rustiger dan de vijf hoofdknoppen. */
.nav-groep { display: flex; flex-direction: column; gap: 1px; margin-top: var(--r4); padding-top: var(--r3); border-top: 1px solid rgba(255, 255, 255, .07); }
.nav-kopje { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--dof, #8C93AE); padding: 0 14px 6px; }
.nav-knop.klein { min-height: 34px; font-size: 13px; opacity: .85; }
.nav-knop.klein[aria-current='page'] { opacity: 1; }
.zijbalk-onder .nav-knop.klein { opacity: .75; }

.nav-knop {
  display: flex; align-items: center; gap: var(--r3);
  width: 100%; padding: 9px var(--r3);
  background: none; border: 0; border-radius: var(--rond-m);
  color: #A7B4C4; font: inherit; font-size: var(--tekst-s);
  text-align: left; cursor: pointer; text-decoration: none;
  transition: background var(--snel), color var(--snel);
}
.nav-knop svg { flex: 0 0 18px; }
.nav-knop:hover { background: rgba(255, 255, 255, .07); color: #FFFFFF; }
.nav-knop[aria-current='page'] {
  background: var(--actie-vlak); color: var(--actie-tekst); font-weight: 600;
}
.nav-knop .telling {
  margin-left: auto; font-size: var(--tekst-xs);
  font-variant-numeric: tabular-nums; opacity: .8;
}
.nav-knop[aria-current='page'] .telling { opacity: .7; }

.zijbalk-onder {
  margin-top: auto; padding-top: var(--r4);
  border-top: 1px solid rgba(255, 255, 255, .12);
  display: flex; flex-direction: column; gap: var(--r2);
}
.zijbalk-wie { padding: 0 var(--r2); }
.zijbalk-wie b { color: #FFFFFF; font-weight: 600; display: block; font-size: var(--tekst-s); }
.zijbalk-wie span { font-size: var(--tekst-xs); color: #7C8CA0; }

.hoofd { padding: var(--r6) var(--r7) var(--r8); max-width: 1180px; width: 100%; }

.paginakop {
  display: flex; align-items: flex-start; gap: var(--r4);
  flex-wrap: wrap; margin-bottom: var(--r5);
}
.paginakop .rechts { margin-left: auto; display: flex; gap: var(--r2); flex-wrap: wrap; }
.paginakop p { color: var(--tekst-zacht); font-size: var(--tekst-s); margin-top: 3px; }

/* ================================ knoppen ================================= */

.knop {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--r2);
  padding: 10px var(--r4); min-height: 40px;
  border: 1px solid transparent; border-radius: var(--rond-m);
  background: var(--actie-vlak); color: var(--actie-tekst);
  font: inherit; font-size: var(--tekst-s); font-weight: 600;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background var(--snel), border-color var(--snel), transform var(--snel);
}
.knop:hover { background: var(--actie-hover); color: var(--actie-tekst); }
.knop:active { transform: translateY(1px); }
.knop[disabled], .knop[aria-disabled='true'] { opacity: .45; cursor: not-allowed; transform: none; }

.knop.stil {
  background: var(--vlak); color: var(--tekst); border-color: var(--rand);
  font-weight: 500;
}
.knop.stil:hover { background: var(--vlak-hover); border-color: var(--rand-sterk); }

.knop.kaal {
  background: none; color: var(--tekst-zacht); border-color: transparent; font-weight: 500;
}
.knop.kaal:hover { background: var(--vlak-hover); color: var(--tekst); }

.knop.gevaar { background: var(--fout-vlak); color: var(--fout); border-color: var(--fout); }
.knop.gevaar:hover { background: var(--fout); color: var(--grond); }

.knop.groot { min-height: 48px; padding: 13px var(--r5); font-size: var(--tekst-m); }
.knop.klein { min-height: 32px; padding: 5px var(--r3); font-size: var(--tekst-xs); }
.knop.breed { width: 100%; }

/* Een knop die aan het werk is: de tekst blijft staan, er komt een ring bij. */
.knop[data-bezig] { pointer-events: none; opacity: .8; }
.knop[data-bezig]::before {
  content: ''; width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid currentColor; border-top-color: transparent;
  animation: draai .7s linear infinite;
}
@keyframes draai { to { transform: rotate(360deg); } }

/* ================================= kaarten ================================ */

.kaart {
  background: var(--vlak);
  border: var(--rand-breedte) solid var(--rand);
  border-radius: var(--rond-l);
  padding: var(--r5);
  box-shadow: var(--schaduw-s);
}
.kaart + .kaart { margin-top: var(--r4); }
.kaart > h2, .kaart > h3 { margin-bottom: var(--r3); }
.kaart.klikbaar { cursor: pointer; text-align: left; width: 100%; font: inherit; color: inherit;
  transition: border-color var(--snel), transform var(--snel), box-shadow var(--snel); }
.kaart.klikbaar:hover { border-color: var(--rand-sterk); transform: translateY(-2px); box-shadow: var(--schaduw-m); }

.kaart-kop { display: flex; align-items: baseline; gap: var(--r3); margin-bottom: var(--r3); flex-wrap: wrap; }
.kaart-kop .rechts {
  margin-left: auto; display: flex; gap: var(--r2);
  flex-wrap: wrap; max-width: 100%;
}

.rooster { display: grid; gap: var(--r4); }
.rooster.k2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.rooster.k3 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.rooster.k4 { grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); }

/* Tegels houden hun eigen maat. Met auto-fit zou één vak zich over de hele
   breedte uitrekken, en dan is het geen tegel meer maar een balk. */
.rooster.tegels { grid-template-columns: repeat(auto-fill, minmax(240px, 280px)); }

.stapel { display: flex; flex-direction: column; gap: var(--r4); }
.rij { display: flex; align-items: center; gap: var(--r3); flex-wrap: wrap; }

/* ============================== kerncijfers =============================== */

.kerncijfer {
  background: var(--vlak); border: var(--rand-breedte) solid var(--rand);
  border-radius: var(--rond-l); padding: var(--r4) var(--r4) var(--r3);
}
.kerncijfer b { display: block; font-size: var(--tekst-2xl); font-weight: 600; }
.kerncijfer span { display: block; margin-top: 2px; }

/* ============================== formulieren =============================== */

.veld { display: flex; flex-direction: column; gap: 5px; }
.veld > label { font-size: var(--tekst-xs); text-transform: uppercase;
  letter-spacing: .09em; color: var(--tekst-dof); font-weight: 500; }
.veld .hulp { font-size: var(--tekst-s); color: var(--tekst-dof); }

input[type='text'], input[type='email'], input[type='password'], input[type='number'],
input[type='date'], input[type='time'], input[type='search'], select, textarea {
  width: 100%; padding: 10px var(--r3); min-height: 40px;
  background: var(--vlak-diep); color: var(--tekst);
  border: 1px solid var(--rand-sterk); border-radius: var(--rond-m);
  font: inherit; font-size: var(--tekst-m);
  transition: border-color var(--snel), background var(--snel);
}
input:hover:not([disabled]), select:hover, textarea:hover { border-color: var(--rand-sterk); }
input:focus, select:focus, textarea:focus { border-color: var(--actie-lijn); }
input::placeholder, textarea::placeholder { color: var(--tekst-dof); }
textarea { min-height: 110px; resize: vertical; line-height: var(--regel-normaal); }
input[type='color'] { padding: 3px; height: 40px; cursor: pointer; }
select {
  appearance: none; cursor: pointer; min-height: 44px;
  padding: 10px 42px 10px 14px; font-weight: 500;
  color-scheme: inherit;
  background-color: var(--vlak);
  border-color: var(--rand-sterk);
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 18px) 18px, calc(100% - 13px) 18px;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
select:hover:not(:disabled) { background-color: var(--vlak-hover); }
select:disabled { cursor: not-allowed; opacity: .72; }
select option {
  background-color: var(--vlak);
  color: var(--tekst);
}
select option:checked {
  background-color: var(--actie-zacht);
  color: var(--tekst);
}

.aankruis { display: flex; align-items: flex-start; gap: var(--r2); cursor: pointer; font-size: var(--tekst-s); }
.aankruis input { width: auto; min-height: 0; margin-top: 3px; accent-color: var(--actie-lijn); }

fieldset { border: 0; padding: 0; margin: 0; }
legend { padding: 0; }

/* ============================ berichten ================================== */

.bericht {
  display: flex; gap: var(--r3); align-items: flex-start;
  padding: var(--r3) var(--r4); border-radius: var(--rond-m);
  border-left: 3px solid var(--rand-sterk); background: var(--vlak-diep);
  font-size: var(--tekst-s);
}
.bericht svg { flex: 0 0 18px; margin-top: 1px; }
.bericht b { font-weight: 600; }
.bericht.goed  { background: var(--goed-vlak);  border-left-color: var(--goed);  color: var(--tekst); }
.bericht.fout  { background: var(--fout-vlak);  border-left-color: var(--fout);  color: var(--tekst); }
.bericht.let   { background: var(--amber-vlak); border-left-color: var(--amber); color: var(--tekst); }
.bericht.uitleg{ background: var(--koel-vlak);  border-left-color: var(--koel);  color: var(--tekst); }
.bericht.goed svg  { color: var(--goed); }
.bericht.fout svg  { color: var(--fout); }
.bericht.let svg   { color: var(--amber); }
.bericht.uitleg svg{ color: var(--koel); }

/* ============================== meldingen ================================= */

#meldingen {
  position: fixed; right: var(--r4); bottom: var(--r4); z-index: var(--laag-melding);
  display: flex; flex-direction: column; gap: var(--r2); max-width: 360px;
}
.melding {
  display: flex; gap: var(--r3); align-items: flex-start;
  background: var(--vlak); color: var(--tekst);
  border: 1px solid var(--rand); border-left: 3px solid var(--rand-sterk);
  border-radius: var(--rond-m); padding: var(--r3) var(--r4);
  font-size: var(--tekst-s); box-shadow: var(--schaduw-m);
  animation: meldingIn var(--rustig) ease-out;
}
.melding.goed { border-left-color: var(--goed); }
.melding.fout { border-left-color: var(--fout); }
.melding.let  { border-left-color: var(--amber); }
.melding svg { flex: 0 0 18px; margin-top: 1px; }
.melding.goed svg { color: var(--goed); }
.melding.fout svg { color: var(--fout); }
.melding.let svg  { color: var(--amber); }
.melding .weg {
  margin-left: auto; background: none; border: 0; color: var(--tekst-dof);
  cursor: pointer; font: inherit; padding: 0 2px; line-height: 1;
}
.melding.gaat-weg { opacity: 0; transform: translateY(8px); transition: all var(--rustig); }
@keyframes meldingIn { from { opacity: 0; transform: translateY(10px); } }

/* ================================ modal =================================== */

.modal-grond {
  position: fixed; inset: 0; z-index: var(--laag-overlay);
  /* Dik genoeg dat je niet meer leest wat eronder staat. */
  background: var(--overlay); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  display: grid; place-items: start center; padding: 8vh var(--r4) var(--r4);
  overflow-y: auto;
}
/* Schermvullend oefenen: dekkend, over de zijbalk heen, niets eronder te zien. */
.modal-grond.volledig { background: var(--grond); backdrop-filter: none; padding: 0; place-items: stretch; }
.modal-grond.volledig .modal {
  width: 100% !important; max-width: none; min-height: 100vh; min-height: 100dvh; border: 0; border-radius: 0;
  display: flex; flex-direction: column;
  padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px);
}
.modal-grond.volledig .modal-lijf { flex: 1; width: min(760px, 100%); margin: 0 auto; display: flex; flex-direction: column; }
.modal-grond.volledig .flitskaart { flex: 1; display: flex; }
.modal-grond.volledig .flitskaart-in { flex: 1; min-height: max(280px, 45vh); }
.modal-grond.volledig .flitskaart-vlak h2 { font-size: clamp(1.4rem, 3.2vw, 2.1rem); }

.modal {
  background: var(--vlak); border: 1px solid var(--rand);
  border-radius: var(--rond-l); box-shadow: var(--schaduw-l);
  width: min(620px, 100%); animation: modalIn var(--rustig) ease-out;
}
.modal-kop {
  display: flex; align-items: center; gap: var(--r3);
  padding: var(--r4) var(--r5); border-bottom: 1px solid var(--rand);
}
.modal-kop .sluit { margin-left: auto; }
.modal-lijf { padding: var(--r5); display: flex; flex-direction: column; gap: var(--r4); }
.modal-voet {
  display: flex; gap: var(--r2); justify-content: flex-end;
  padding: var(--r4) var(--r5); border-top: 1px solid var(--rand); flex-wrap: wrap;
}
@keyframes modalIn { from { opacity: 0; transform: translateY(-10px) scale(.99); } }

/* ============================= niveaubalk ================================= */
/* De vijf moeilijkheidsniveaus. Overal in de app dezelfde weergave. */

.niveaubalk { display: inline-flex; gap: 2px; align-items: flex-end; height: 16px; vertical-align: -3px; }
.niveaubalk i { display: block; width: 4px; border-radius: 1px; background: var(--niveau-leeg); }
.niveaubalk i:nth-child(1) { height: 6px; }
.niveaubalk i:nth-child(2) { height: 8px; }
.niveaubalk i:nth-child(3) { height: 11px; }
.niveaubalk i:nth-child(4) { height: 13px; }
.niveaubalk i:nth-child(5) { height: 16px; }
.niveaubalk i.vol { background: var(--niveau-vol); }
.niveau-naam { font-size: var(--tekst-xs); color: var(--tekst-dof); margin-left: 6px; }

/* ================================= chips ================================== */

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px var(--r3); border-radius: var(--rond-vol);
  border: 1px solid var(--rand); background: var(--vlak);
  color: var(--tekst-zacht); font: inherit; font-size: var(--tekst-s);
  cursor: pointer; transition: all var(--snel);
}
.chip:hover { border-color: var(--rand-sterk); color: var(--tekst); }
.chip[aria-pressed='true'] {
  background: var(--actie-zacht); border-color: var(--actie-lijn); color: var(--tekst);
}
.chip.stempel { cursor: default; }

/* Een vak heeft een eigen kleur; die komt overal terug via --vakkleur. */
.vakstip {
  width: 10px; height: 10px; border-radius: 3px; flex: 0 0 10px;
  background: var(--vakkleur, var(--rand-sterk));
}

/* ================================ tabellen ================================ */

table { width: 100%; border-collapse: collapse; font-size: var(--tekst-s); }
th {
  text-align: left; font-size: var(--tekst-xs); text-transform: uppercase;
  letter-spacing: .09em; color: var(--tekst-dof); font-weight: 500;
  border-bottom: 1px solid var(--rand); padding: var(--r2) var(--r2);
}
td { padding: var(--r3) var(--r2); border-bottom: 1px solid var(--rand); vertical-align: top; }
tbody tr:last-child td { border-bottom: 0; }

/* ============================ voortgangsbalk ============================== */

.voortgang { height: 5px; background: var(--rand); border-radius: var(--rond-vol); overflow: hidden; }
.voortgang > div { height: 100%; background: var(--actie-vlak); border-radius: inherit;
  transition: width var(--rustig); }

/* ============================== lege staat ================================ */

.leeg-blok {
  display: flex; flex-direction: column; align-items: center; gap: var(--r3);
  padding: var(--r7) var(--r5); text-align: center; color: var(--tekst-zacht);
}
.leeg-blok svg { color: var(--tekst-dof); }
.leeg-blok h3 { color: var(--tekst); }
.leeg-blok p { max-width: 42ch; font-size: var(--tekst-s); text-wrap: pretty; }

/* ============================== laadstaat ================================= */

.skelet {
  background: linear-gradient(90deg, var(--vlak-diep) 25%, var(--vlak-hover) 50%, var(--vlak-diep) 75%);
  background-size: 200% 100%; animation: schuif 1.3s linear infinite;
  border-radius: var(--rond-m);
}
@keyframes schuif { to { background-position: -200% 0; } }
.skelet-regel { height: 13px; margin-bottom: var(--r2); }

.laden-midden { display: flex; align-items: center; justify-content: center; gap: var(--r3);
  padding: var(--r7); color: var(--tekst-dof); font-size: var(--tekst-s); }
.tol { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--rand-sterk);
  border-top-color: var(--actie-lijn); animation: draai .7s linear infinite; }

/* ============================== inloggen ================================== */

.poort { min-height: 100vh; display: grid; grid-template-columns: 1.1fr 1fr; }

.poort-zij {
  position: relative; overflow: hidden;
  background: var(--zijbalk); color: #E4EBF2;
  padding: var(--r7) clamp(var(--r6), 6vw, 96px);
  display: flex; flex-direction: column; justify-content: space-between; gap: var(--r6);
}
.poort-zij .merk { padding-bottom: 0; }
.poort-belofte h2 {
  font-size: clamp(32px, 3.4vw, 46px); color: #FFFFFF; margin-bottom: var(--r3);
  max-width: 14ch; text-wrap: balance;
}
.poort-belofte p { color: #A7B4C4; max-width: 44ch; text-wrap: pretty; font-size: var(--tekst-l); }
.poort-belofte { max-width: 600px; }

.poort-sporen {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--r4) var(--r5); margin-top: var(--r6);
}
.poort-spoor { display: flex; gap: var(--r3); align-items: flex-start; }
.poort-spoor svg { flex: 0 0 20px; color: var(--actie-vlak); margin-top: 2px; }
.poort-spoor b { color: #FFFFFF; display: block; font-size: var(--tekst-m); font-weight: 600; margin-bottom: 2px; }
.poort-spoor span { color: #8B9AAD; font-size: var(--tekst-s); }

.poort-vak {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  padding: var(--r4) var(--r5);
  background: var(--grond);
}
/* Een fijn stippenraster dat naar de randen toe wegvalt. Rustig, en het
   geeft het formulier iets om op te staan. */
.poort-vak::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(color-mix(in srgb, var(--tekst) 10%, transparent) 1px, transparent 1.5px);
  background-size: 24px 24px;
  -webkit-mask-image: radial-gradient(ellipse 70% 65% at 50% 50%, #000 30%, transparent 100%);
  mask-image: radial-gradient(ellipse 70% 65% at 50% 50%, #000 30%, transparent 100%);
}
.poort-form { position: relative; }
.poort-terug { display: none; }
.poort-form {
  width: min(440px, 100%); display: flex; flex-direction: column; gap: var(--r3);
  background: var(--vlak); border: 1px solid var(--rand); border-radius: 16px;
  padding: var(--r5) var(--r6); box-shadow: var(--schaduw-m);
}
.poort-proef {
  display: flex; flex-wrap: wrap; gap: 6px 12px; justify-content: center;
  font-size: var(--tekst-xs); color: var(--tekst-dof);
}
.poort-proef span { display: inline-flex; align-items: center; gap: 5px; }
.poort-proef span::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--goed); }
.poort-wissel { text-align: center; font-size: var(--tekst-s); color: var(--tekst-zacht); }
.poort-wissel button {
  background: none; border: 0; padding: 0; font: inherit; font-weight: 600;
  color: var(--tekst); cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px;
}


.tabs { display: flex; gap: 2px; padding: 4px; background: var(--vlak-diep);
  border: 1px solid var(--rand); border-radius: var(--rond-m); }
.tabs button {
  flex: 1; padding: 8px var(--r3); border: 0; border-radius: var(--rond-s);
  background: none; color: var(--tekst-zacht); font: inherit; font-size: var(--tekst-s);
  font-weight: 500; cursor: pointer; transition: all var(--snel);
}
.tabs button:hover { color: var(--tekst); }
.tabs button[aria-selected='true'] { background: var(--vlak); color: var(--tekst); box-shadow: var(--schaduw-s); }

/* Doorgaan met Google of Apple. */
.sociaal-rij { display: flex; flex-direction: column; gap: var(--r2); }
.sociaal-knop {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 11px var(--r4); border-radius: var(--rond-m);
  border: 1px solid var(--rand-sterk); background: var(--vlak-diep);
  color: var(--tekst); font: inherit; font-size: var(--tekst-s); font-weight: 600;
  text-decoration: none; cursor: pointer;
  transition: border-color var(--snel), background var(--snel);
}
.sociaal-knop:hover { border-color: var(--tekst-dof); background: var(--vlak); }
.sociaal-logo { display: inline-flex; width: 18px; height: 18px; flex: none; }
.sociaal-logo svg { width: 100%; height: 100%; }

.scheiding { display: flex; align-items: center; gap: var(--r3); color: var(--tekst-dof);
  font-size: var(--tekst-xs); text-transform: uppercase; letter-spacing: .09em; }
.scheiding::before, .scheiding::after { content: ''; flex: 1; height: 1px; background: var(--rand); }

.knop.google {
  background: var(--vlak); color: var(--tekst); border-color: var(--rand-sterk);
  font-weight: 500;
}
.knop.google:hover { background: var(--vlak-hover); }

/* ============================== vaktegels ================================= */

.vaktegel {
  position: relative; background: var(--vlak);
  border: var(--rand-breedte) solid var(--rand); border-radius: var(--rond-l);
  overflow: hidden; box-shadow: var(--schaduw-s);
  transition: transform var(--snel), border-color var(--snel), box-shadow var(--snel);
}
.vaktegel:hover { transform: translateY(-2px); border-color: var(--rand-sterk); box-shadow: var(--schaduw-m); }
.vaktegel-knop {
  display: block; width: 100%; padding: 0; border: 0; background: none;
  text-align: left; font: inherit; color: inherit; cursor: pointer;
}
.vaktegel-bewerk {
  position: absolute; top: 10px; right: 10px;
  width: 30px; height: 30px; display: grid; place-items: center;
  border: 0; border-radius: var(--rond-s); cursor: pointer;
  background: rgba(10, 14, 20, .55); color: #FFFFFF;
  opacity: 0; transition: opacity var(--snel), background var(--snel);
}
.vaktegel:hover .vaktegel-bewerk,
.vaktegel-bewerk:focus-visible { opacity: 1; }
.vaktegel-bewerk:hover { background: rgba(10, 14, 20, .8); }
@media (hover: none) { .vaktegel-bewerk { opacity: 1; } }

/* =============================== markdown ================================= */

.md { font-size: var(--tekst-m); line-height: var(--regel-ruim); }
.md > :first-child { margin-top: 0; }
.md-alinea { margin: 0 0 var(--r3); text-wrap: pretty; }
.md-lijst { margin: 0 0 var(--r3); padding-left: 22px; }
.md-lijst li { margin-bottom: 4px; }
.md-citaat {
  margin: 0 0 var(--r3); padding: var(--r2) var(--r4);
  border-left: 3px solid var(--rand-sterk); color: var(--tekst-zacht);
}
.md-streep { border: 0; border-top: 1px solid var(--rand); margin: var(--r4) 0; }
.md-code {
  background: var(--vlak-diep); border: 1px solid var(--rand); border-radius: var(--rond-m);
  padding: var(--r3) var(--r4); overflow-x: auto; margin: 0 0 var(--r3);
  font-size: var(--tekst-s); line-height: 1.6;
}
.md-inline {
  background: var(--vlak-diep); border: 1px solid var(--rand); border-radius: 4px;
  padding: 1px 5px; font-size: .92em;
}

/* ========================= afbeeldingen bij vragen ======================== */

.vraagmedia {
  border: 1px solid var(--rand); border-radius: var(--rond-m);
  padding: var(--r4); background: var(--vlak-diep); margin-bottom: var(--r4);
}
.vraagmedia svg { max-width: 100%; height: auto; color: var(--tekst); display: block; margin: 0 auto; }
.vraagmedia img { max-width: 100%; height: auto; border-radius: var(--rond-s); display: block; margin: 0 auto; }
.vraagmedia figcaption { font-size: var(--tekst-xs); color: var(--tekst-dof); margin-top: var(--r2); text-align: center; }

/* =========================== instellingen opties ========================== */

.optie-lijst {
  display: flex;
  flex-direction: column;
  gap: var(--r2);
}

.optie-rij {
  display: flex;
  align-items: flex-start;
  gap: var(--r3);
  padding: var(--r4);
  background: var(--vlak-diep);
  border: 1px solid var(--rand);
  border-radius: var(--rond-m);
  cursor: pointer;
  transition: border-color var(--snel), background var(--snel);
}

.optie-rij:hover {
  border-color: var(--rand-sterk);
  background: var(--vlak-hover);
}

.optie-rij-invoer {
  flex: 0 0 auto;
  margin-top: 1px;
}

.optie-rij-invoer input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--actie-lijn);
  cursor: pointer;
  margin: 0;
}

.optie-rij-tekst {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.optie-rij-titel {
  font-weight: 600;
  color: var(--tekst);
  font-size: var(--tekst-s);
}

.optie-rij-uitleg {
  font-size: var(--tekst-xs);
  color: var(--tekst-zacht);
  line-height: var(--regel-normaal);
}

/* ============================== responsief ================================ */

@media (max-width: 960px) {
  .optie-rij { padding: var(--r3); }
  .poort { grid-template-columns: 1fr; min-height: auto; }
  .poort-zij { padding: var(--r5) var(--r5) var(--r5); gap: var(--r4); justify-content: flex-start; }
  /* Op een telefoon gaat het om het formulier: alleen het logo erboven,
     zodat registreren (bijna) zonder scrollen past. */
  .poort-belofte { display: none; }
  .poort-zij { padding: var(--r3) var(--r4) 0; }
  .poort-form { gap: var(--r3); padding: var(--r4); }
  .poort-form .veld label { margin-bottom: 2px; }
  .poort-form input:not([type=checkbox]) { min-height: 42px; }
  .poort-sporen { display: none; }
  .poort-zij > p.mini { display: none; }
  .poort-vak { padding: var(--r3) var(--r3) var(--r5); align-items: flex-start; flex-direction: column; }
  .poort-form { margin-inline: auto; }
  .poort-terug { display: block; margin: var(--r4) auto 0; text-align: center; }
}

@media (max-width: 860px) {
  .app-raster { grid-template-columns: 1fr; }

  /* Op een telefoon hoort de navigatie onderaan, binnen duimbereik. */
  .zijbalk {
    position: fixed; bottom: 0; left: 0; right: 0; top: auto;
    height: auto; padding: var(--r2) var(--r2) calc(var(--r2) + env(safe-area-inset-bottom));
    flex-direction: row; z-index: var(--laag-plakkerig);
    border-top: 1px solid rgba(255, 255, 255, .12);
    gap: var(--r1);
  }
  .zijbalk .merk, .zijbalk-onder { display: none; }
  /* Vijf knoppen die het scherm vullen: de eerste vier uit het menu en
     "Meer" voor de rest. Niets om te schuiven. */
  .zijbalk nav { flex-direction: row; gap: var(--r1); width: 100%; }
  .zijbalk nav > .nav-knop { flex: 1 1 0; min-width: 0; }
  .zijbalk nav > .nav-knop:nth-child(n+5):not(.nav-meer) { display: none; }
  .zijbalk nav > .nav-groep { display: none; }
  .zijbalk nav > .nav-meer { display: flex; }
  .nav-meer-ico { display: inline-flex; }
  .meer-raster { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--r2); }
  .meer-raster .nav-knop { min-height: 64px; }
  /* Het venster schuift van onderen in, over de balk heen; de onderste rij
     moet boven die balk blijven. */
  .meer-raster { padding-bottom: calc(var(--r8) + 40px); }
  .nav-knop {
    flex-direction: column; gap: 3px; padding: 7px var(--r3);
    font-size: 10.5px; min-width: 62px; text-align: center; white-space: nowrap;
    min-height: 48px; justify-content: center;
  }
  .nav-knop .telling { margin: 0; position: absolute; top: 4px; right: 10px; }
  .nav-knop { position: relative; }

  .mobiele-kop {
    display: flex; align-items: center; gap: var(--r3);
    padding: var(--r3) var(--r4); background: var(--zijbalk); color: #FFFFFF;
    position: sticky; top: 0; z-index: var(--laag-plakkerig);
  }
  .hoofd { padding: var(--r4) var(--r4) calc(var(--r8) + 40px); }
  .paginakop { margin-bottom: var(--r4); }
  /* Twee kerncijfers naast elkaar past prima op een telefoon; auto-fit zou er
     door de minimumbreedte één van maken. */
  .rooster.k4, .rooster.k3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--r3); }
  .rooster.tegels { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--r3); }
  .kerncijfer { padding: var(--r3); }
  .kerncijfer b { font-size: var(--tekst-xl); }

  /* Aantekeningen en planning zijn op een telefoon één kolom; de weekweergave
     schuift horizontaal zodat een dag leesbaar blijft. */
  .aantekeningen-raster { grid-template-columns: 1fr !important; }
  .aantekeningen-raster .kaart > div[style*="grid-template-columns: 1fr 1fr"] { grid-template-columns: 1fr !important; }
  .notitiepaneel { grid-template-columns: 1fr !important; }
  h1 { font-size: var(--tekst-xl); }
  .kaart { padding: var(--r4); border-radius: var(--rond-m); }
  #meldingen { left: var(--r3); right: var(--r3); bottom: calc(72px + env(safe-area-inset-bottom)); max-width: none; }
  .modal-grond { padding: var(--r4) 0 0; place-items: end center; }
  .modal { border-radius: var(--rond-l) var(--rond-l) 0 0; }
}

@media (min-width: 861px) { .mobiele-kop { display: none; } }

/* =========================== foto of bestand ============================== */
/* Het veld uit components/bestandsveld.js: twee knoppen en daaronder wat je
   gekozen hebt. Het echte invoerveld blijft verborgen. */

.bestandsveld { display: flex; flex-direction: column; gap: var(--r3); }

.bestandslijst { display: flex; flex-direction: column; gap: var(--r2); }

.bestandsregel {
  display: flex; align-items: center; gap: var(--r2);
  background: var(--vlak-diep); border: 1px solid var(--rand);
  border-radius: var(--rond-m); padding: var(--r2) var(--r3);
  font-size: var(--tekst-s);
}
.bestandsregel > svg { color: var(--tekst-dof); flex: none; }
.bestandsregel .naam {
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bestandsregel .maat {
  color: var(--tekst-dof); font-variant-numeric: tabular-nums; flex: none;
}
.bestandsregel .wegknop {
  flex: none; display: grid; place-items: center;
  width: 26px; height: 26px; padding: 0;
  background: none; border: 0; border-radius: var(--rond-s);
  color: var(--tekst-dof); cursor: pointer;
}
.bestandsregel .wegknop:hover { background: var(--vlak-hover); color: var(--fout); }

/* ================================ bijles ================================== */
/* Een gesprek over één opgave. De beurten staan onder elkaar; die van jou
   rechts uitgelijnd en met een vlak eronder, die van Retrieva vol breed —
   want daar staat de uitleg in en die moet lezen als tekst, niet als chat. */

.bijles-gesprek { display: flex; flex-direction: column; gap: var(--r4); }

.beurt { display: flex; flex-direction: column; gap: var(--r2); max-width: 100%; }
.beurt .wie {
  font-size: var(--tekst-xs); letter-spacing: .08em; text-transform: uppercase;
  color: var(--tekst-dof); font-family: var(--font-kop);
}
.beurt.van-jou { align-self: flex-end; align-items: flex-end; max-width: min(560px, 88%); }
.beurt.van-jou .tekst {
  background: var(--actie-zacht); border: 1px solid var(--rand);
  border-radius: var(--rond-l); padding: var(--r3) var(--r4);
}
.beurt.van-app .tekst { line-height: var(--regel-ruim); }
.beurt .tekst > *:first-child { margin-top: 0; }
.beurt .tekst > *:last-child { margin-bottom: 0; }

.beurt .bijlagen { display: flex; gap: var(--r2); flex-wrap: wrap; }
.beurt .bijlagen img {
  width: 108px; height: 108px; object-fit: cover;
  border-radius: var(--rond-m); border: 1px solid var(--rand);
}

/* De invoerbalk om door te vragen. Staat in een eigen kaart, dus er hoeft geen
   scheidingslijn boven — die zou als een losse streep in het niets hangen. */
.bijles-invoer {
  display: flex; gap: var(--r2); align-items: flex-end;
}
.bijles-invoer textarea { min-height: 52px; resize: vertical; }
.bijles-invoer .knop { flex: none; }

.samenvatting-chat {
  display: flex; flex-direction: column; gap: var(--r3);
  margin-top: var(--r6); padding-top: var(--r5);
  border-top: 1px solid var(--rand);
}
.samenvatting-chat h3,
.samenvatting-chat p { margin: 0; }

@media (max-width: 620px) {
  .samenvatting-resultaat .kaart-kop .rechts {
    width: 100%; margin-left: 0;
  }
  .samenvatting-chat .bijles-invoer { flex-direction: column; align-items: stretch; }
  .samenvatting-chat .bijles-invoer .knop { width: 100%; }
}

/* ================================ camera ================================== */
/* Het live camerabeeld uit components/camera.js. Het beeld vult de breedte en
   houdt zijn verhouding; daaronder de foto's die je al gemaakt hebt. */

.camera { display: flex; flex-direction: column; gap: var(--r4); }

.camera-beeld {
  position: relative;
  background: #000000;
  border-radius: var(--rond-m);
  overflow: hidden;
  aspect-ratio: 4 / 3;
}
.camera-beeld video {
  width: 100%; height: 100%; object-fit: contain; display: block;
}

.camera-strook { display: flex; gap: var(--r2); flex-wrap: wrap; }
.camera-mini { position: relative; }
.camera-mini img {
  width: 74px; height: 74px; object-fit: cover;
  border-radius: var(--rond-s); border: 1px solid var(--rand); display: block;
}
.camera-mini .wegknop {
  position: absolute; top: -6px; right: -6px;
  width: 22px; height: 22px; padding: 0;
  display: grid; place-items: center;
  background: var(--vlak); color: var(--tekst-zacht);
  border: 1px solid var(--rand); border-radius: var(--rond-vol); cursor: pointer;
}
.camera-mini .wegknop:hover { color: var(--fout); border-color: var(--fout); }

.camera-knoppen { display: flex; gap: var(--r2); flex-wrap: wrap; align-items: center; }
.camera-knoppen .knop:first-child { flex: 1 1 auto; }

/* ============================= wat ik zie ================================= */
/* De onderdelen die uit een foto gelezen zijn. Elk onderdeel is een blokje met
   de opgavetekst en daaronder de knoppen om er iets mee te doen. */

.gezien { display: flex; flex-direction: column; gap: var(--r3); }

.onderdeel {
  border: 1px solid var(--rand); border-radius: var(--rond-m);
  background: var(--vlak-diep); padding: var(--r4);
  display: flex; flex-direction: column; gap: var(--r3);
}
.onderdeel.twijfel { border-left: 3px solid var(--amber); }

.onderdeel-kop { display: flex; align-items: baseline; gap: var(--r3); flex-wrap: wrap; }
.onderdeel-nummer {
  font-family: var(--font-kop); font-weight: 700; font-size: var(--tekst-m);
  color: var(--actie-vlak); flex: none;
}
.onderdeel-tekst { flex: 1; min-width: 0; }
.onderdeel-waarschuwing { font-size: var(--tekst-s); color: var(--amber); }
.onderdeel-knoppen { display: flex; gap: var(--r2); flex-wrap: wrap; }

.gezien-samenvatting {
  display: flex; gap: var(--r3); align-items: flex-start;
  padding-bottom: var(--r3); border-bottom: 1px solid var(--rand);
}

/* ================================ kalender ================================ */
/* Week- en maandweergave van de planning.
   Stond eerst helemaal in inline stijlen in planning.js; dat leest slecht en
   je kunt er niet fatsoenlijk op reageren met media queries. */

.kalender-week {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: var(--r2);
}

.kaldag {
  display: flex; flex-direction: column; gap: 5px;
  min-height: 168px; padding: var(--r2);
  border: 1px solid var(--rand); border-radius: var(--rond-m);
  background: var(--vlak-diep);
}
.kaldag.weekend { background: transparent; }
.kaldag.vandaag { border-color: var(--actie-lijn); background: var(--actie-zacht); }

.kaldag-kop {
  display: flex; align-items: baseline; gap: 6px;
  padding: 2px 4px 4px; border: 0; background: none; cursor: pointer;
  font: inherit; text-align: left; border-radius: var(--rond-s);
}
.kaldag-kop:hover { background: var(--vlak-hover); }
.kaldag-naam {
  font-size: var(--tekst-xs); text-transform: uppercase; letter-spacing: .09em;
  color: var(--tekst-dof); font-weight: 600;
}
.kaldag-nummer {
  font-family: var(--font-kop); font-size: var(--tekst-l); font-weight: 600;
  color: var(--tekst); font-variant-numeric: tabular-nums; line-height: 1;
}
.kaldag.vandaag .kaldag-nummer { color: var(--actie-vlak); }

.kaldag-lijst { display: flex; flex-direction: column; gap: 4px; }
.kaldag-toevoegen {
  display: flex; align-items: center; justify-content: center; gap: 5px;
  min-height: 30px; padding: 4px 6px;
  border: 1px dashed var(--rand); border-radius: var(--rond-s);
  background: transparent; color: var(--tekst-dof); font: inherit;
  font-size: var(--tekst-xs); cursor: pointer;
  transition: border-color var(--snel), color var(--snel), background var(--snel);
}
.kaldag-toevoegen:hover { border-color: var(--actie-lijn); color: var(--actie-vlak); background: var(--actie-zacht); }

/* Een lege dag krijgt een plusvlak in plaats van niets: dan zie je dat je er
   op kunt klikken zonder dat er een knop staat te schreeuwen. */
.kaldag-leeg {
  flex: 1; min-height: 40px; border: 1px dashed var(--rand); border-radius: var(--rond-s);
  background: none; color: var(--tekst-dof); cursor: pointer;
  display: grid; place-items: center; opacity: 0; transition: opacity var(--snel);
}
.kaldag:hover .kaldag-leeg, .kaldag-leeg:focus-visible { opacity: 1; }

/* ------------------------------------------------------------ los onderdeel */

.kalitem {
  display: flex; flex-direction: column; gap: 1px;
  border: 0; border-left: 3px solid var(--soortkleur, var(--rand));
  border-radius: var(--rond-s); background: var(--vlak);
  padding: 5px 7px; cursor: pointer; text-align: left;
  font: inherit; font-size: var(--tekst-s); color: var(--tekst);
  transition: background var(--snel);
}
.kalitem:hover { background: var(--vlak-hover); }
.kalitem.klaar { color: var(--tekst-dof); text-decoration: line-through; }
.kalitem-tijd {
  font-size: var(--tekst-xs); color: var(--tekst-dof);
  font-variant-numeric: tabular-nums;
}
/* Twee regels en dan afkappen, in plaats van clippen midden in een woord.
   Een titel als "Samenvatting maken" moet leesbaar blijven in een smalle kolom. */
.kalitem-titel {
  line-height: 1.35;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden; overflow-wrap: anywhere;
}

/* ------------------------------------------------------------------- maand */

.kalender-maand {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px;
}
.kalkop {
  text-align: center; padding-bottom: var(--r2);
  font-size: var(--tekst-xs); text-transform: uppercase; letter-spacing: .09em;
  color: var(--tekst-dof); font-weight: 600;
}

.kalvak {
  display: flex; flex-direction: column; gap: 3px; align-items: stretch;
  min-height: 104px; padding: 6px;
  border: 1px solid var(--rand); border-radius: var(--rond-s);
  background: var(--vlak-diep); cursor: pointer;
  font: inherit; text-align: left; color: var(--tekst);
  transition: background var(--snel), border-color var(--snel);
}
.kalvak:hover { background: var(--vlak-hover); border-color: var(--rand-sterk); }
.kalvak.weekend { background: transparent; }
.kalvak.buiten { opacity: .38; }
.kalvak.vandaag { border-color: var(--actie-lijn); background: var(--actie-zacht); }

.kalvak-nummer {
  font-family: var(--font-kop); font-size: var(--tekst-s); font-weight: 600;
  color: var(--tekst-zacht); font-variant-numeric: tabular-nums;
  align-self: flex-start; padding: 1px 2px;
}
.kalvak.vandaag .kalvak-nummer {
  color: var(--actie-tekst); background: var(--actie-vlak);
  border-radius: var(--rond-vol); min-width: 21px; text-align: center;
}

/* Een streepje in de kleur van de soort, met leesbare tekst ernaast. Een vlak
   in de volle kleur met de achtergrondkleur als letter leest slecht op klein
   formaat, zeker bij amber en lime. */
.kalvak-item {
  font-size: var(--tekst-xs); line-height: 1.4;
  padding-left: 7px; border-left: 3px solid var(--soortkleur, var(--rand));
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--tekst-zacht);
}
.kalvak-item.klaar { text-decoration: line-through; color: var(--tekst-dof); }
.kalvak-meer { font-size: var(--tekst-xs); color: var(--tekst-dof); padding-left: 10px; }

/* --------------------------------------------------------------- op mobiel */
/* Zeven kolommen naast elkaar is op een telefoon onleesbaar. De week wordt een
   lijst van dagen onder elkaar; de maand blijft een raster maar schuift. */

@media (max-width: 720px) {
  .kalender-week { grid-template-columns: 1fr; gap: var(--r2); }
  .kaldag { min-height: 0; flex-direction: row; align-items: flex-start; gap: var(--r3); }
  .kaldag-kop { flex: 0 0 74px; flex-direction: column; gap: 0; align-items: flex-start; }
  .kaldag-lijst { flex: 1; }
  .kaldag-leeg { opacity: 1; flex: 1; min-height: 34px; }

  .kalender-maand {
    grid-template-columns: repeat(7, minmax(46px, 1fr));
    overflow-x: auto; padding-bottom: var(--r2);
  }
  .kalvak { min-height: 74px; }
  .kalvak-item { font-size: 10px; padding-left: 5px; border-left-width: 2px; }
}

/* ============================== afdrukken ================================= */

@media print {
  .zijbalk, .mobiele-kop, #meldingen, .modal-grond, .knop, .overslaan { display: none !important; }
  .app-raster { display: block; }
  .hoofd { padding: 0; max-width: none; }
  body { background: #FFFFFF; color: #000000; }
  .kaart { border: 1px solid #CCCCCC; box-shadow: none; break-inside: avoid; }
}

/* De taalkiezer op het inlogscherm: rechtsboven in het formulierveld, klein
   en stil. Wie hem nodig heeft ziet hem; wie hem niet nodig heeft niet. */
.poort-kop { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--r3); }
.poort-akkoord { display: flex; flex-direction: column; gap: var(--r2); font-size: var(--tekst-s); }
.poort-akkoord a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* ========================= acties per onderwerp =========================== */
/* De knoppen onder een onderwerp in Voortgang: samenvatting, oefenen, toets,
   flashcards. Op een telefoon lopen ze door naar de volgende regel. */

.onderwerp-acties {
  display: flex; gap: var(--r2); flex-wrap: wrap;
  margin-top: var(--r3);
}

.samenvatting {
  border: 1px solid var(--rand); border-radius: var(--rond-m);
  background: var(--vlak-diep); padding: var(--r4);
  min-width: 0; max-width: 100%; overflow-wrap: anywhere;
}
.samenvatting .md { font-size: var(--tekst-s); line-height: var(--regel-ruim); }
.samenvatting .md pre,
.samenvatting .md table { max-width: 100%; overflow-x: auto; }
.samenvatting .md > *:first-child { margin-top: 0; }
.samenvatting .md > *:last-child { margin-bottom: 0; }

/* ===================== huiswerk in één keer uitwerken ===================== */
/* De knop boven de losse opgaven, en de uitwerking die eruit komt. */

.bulkacties {
  display: flex; gap: var(--r3); align-items: center; flex-wrap: wrap;
  margin-top: var(--r4); padding: var(--r4);
  background: var(--actie-zacht); border-radius: var(--rond-m);
  border: 1px solid color-mix(in srgb, var(--actie-vlak) 30%, transparent);
}
.bulkacties .mini { flex: 1 1 220px; }

.uitwerkingen { display: flex; flex-direction: column; gap: var(--r4); margin-top: var(--r4); }

.uitwerking {
  border: 1px solid var(--rand); border-radius: var(--rond-m);
  background: var(--vlak-diep); padding: var(--r4);
}
.uitwerking-kop { display: flex; gap: var(--r3); align-items: baseline; margin-bottom: var(--r3); }

.uitwerking ol.stappen {
  margin: 0 0 var(--r3); padding-left: var(--r5);
  display: flex; flex-direction: column; gap: var(--r2);
  font-size: var(--tekst-s); color: var(--tekst-zacht);
}
.uitwerking-antwoord {
  margin: 0; padding-top: var(--r3); border-top: 1px solid var(--rand);
  font-size: var(--tekst-s);
}

/* ============================== bibliotheek =============================== */
/* Alles wat je gemaakt hebt, gegroepeerd per maand. */

.bibliotheek { display: flex; flex-direction: column; gap: var(--r6); }
.biblio-maand { display: flex; flex-direction: column; gap: var(--r3); }
.biblio-kop {
  font-size: var(--tekst-s); text-transform: uppercase; letter-spacing: .09em;
  color: var(--tekst-dof); font-weight: 600; margin: 0;
}
.biblio-rijen { display: flex; flex-direction: column; gap: var(--r2); }

.biblio-rij {
  display: flex; align-items: center; gap: var(--r3);
  padding: var(--r3) var(--r4);
  border: 1px solid var(--rand); border-left: 3px solid var(--soortkleur, var(--rand));
  border-radius: var(--rond-m); background: var(--vlak);
  text-decoration: none; color: inherit;
  transition: background var(--snel), border-color var(--snel);
}
.biblio-rij:hover { background: var(--vlak-hover); border-color: var(--rand-sterk); }
.biblio-ico { color: var(--soortkleur, var(--tekst-dof)); display: inline-flex; flex: none; }
.biblio-tekst { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.biblio-tekst b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.biblio-soort {
  flex: none; font-size: var(--tekst-xs); color: var(--tekst-dof);
  border: 1px solid var(--rand); border-radius: var(--rond-vol); padding: 2px 9px;
}
@media (max-width: 620px) { .biblio-soort { display: none; } }

/* ============================ afwerking (sep 2026) ======================== */
/* Dezelfde hand als het inlogscherm: ronde hoeken van 16px, een fijn
   stippenraster dat naar beneden wegvalt, en schermen die zacht opkomen. */

.kaart, .kerncijfer, .vaktegel { border-radius: 16px; }
@media (max-width: 860px) { .kaart { border-radius: 14px; } }
.kaart.klikbaar { border-radius: var(--rond-m); }

/* De kolom naast de zijbalk. */
.hoofd-kolom { position: relative; min-width: 0; }
.hoofd-kolom::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 460px; pointer-events: none;
  background-image: radial-gradient(color-mix(in srgb, var(--tekst) 9%, transparent) 1px, transparent 1.5px);
  background-size: 24px 24px;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, transparent 100%);
}
.hoofd { position: relative; }

@media (prefers-reduced-motion: no-preference) {
  .hoofd > * { animation: schermIn .28s cubic-bezier(.2, .7, .3, 1) both; }
  .hoofd > * + * { animation-delay: .04s; }
}
@keyframes schermIn { from { opacity: 0; transform: translateY(6px); } }

/* ---- zijbalk ---- */

.zijbalk nav .nav-knop[aria-current='page'] {
  box-shadow: 0 8px 20px -10px var(--actie-vlak);
}

.zijbalk-wie {
  display: grid; grid-template-columns: 34px minmax(0, 1fr);
  column-gap: var(--r3); align-items: center; padding: 0 var(--r2);
}
.avatar {
  grid-row: 1 / 3; width: 34px; height: 34px; border-radius: var(--rond-vol);
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--actie-vlak), #7C5CFF);
  color: #FFFFFF; font-family: var(--font-kop); font-weight: 700; font-size: 12.5px;
  letter-spacing: .02em;
}
.zijbalk-wie b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zijbalk-ai {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--tekst-xs); color: #7C8CA0; text-decoration: none;
}
.zijbalk-ai::before {
  content: ""; width: 7px; height: 7px; border-radius: var(--rond-vol);
  background: #7C8CA0;
}
.zijbalk-ai.aan::before { background: var(--goed); box-shadow: 0 0 0 3px color-mix(in srgb, var(--goed) 25%, transparent); }
.zijbalk-ai:hover { color: #FFFFFF; }

/* ---- kerncijfers: iets meer lucht en een kleine accentlijn ---- */

.kerncijfer { position: relative; overflow: hidden; padding: var(--r4) var(--r5) var(--r4); }
.kerncijfer::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: color-mix(in srgb, var(--actie-vlak) 60%, transparent);
  border-radius: 0 2px 2px 0;
}

/* ---- snel aan de slag (startscherm) ---- */

.snelacties {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--r3);
}
.snelactie {
  display: flex; align-items: center; gap: var(--r3);
  padding: var(--r3) var(--r4);
  background: var(--vlak); border: 1px solid var(--rand); border-radius: 14px;
  text-decoration: none; color: inherit; min-width: 0;
  transition: border-color var(--snel), transform var(--snel), background var(--snel);
}
.snelactie:hover {
  border-color: var(--rand-sterk); background: var(--vlak-hover);
  transform: translateY(-1px); color: inherit;
}
.snelactie-ico {
  flex: none; width: 38px; height: 38px; border-radius: 11px;
  display: grid; place-items: center;
  background: var(--actie-zacht); color: var(--actie-lijn);
}
.snelactie-ico.koel { background: var(--koel-vlak); color: var(--koel); }
.snelactie-ico.geel { background: var(--amber-vlak); color: var(--amber); }
.snelactie-ico.goed { background: var(--goed-vlak); color: var(--goed); }
.snelactie-tekst { display: flex; flex-direction: column; min-width: 0; }
.snelactie-tekst b { font-family: var(--font-kop); font-size: var(--tekst-s); font-weight: 600; }
.snelactie-tekst span {
  font-size: var(--tekst-xs); color: var(--tekst-dof);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
@media (max-width: 860px) {
  .snelacties { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .snelactie { padding: var(--r3); gap: var(--r2); }
  .snelactie-ico { width: 32px; height: 32px; border-radius: 9px; }
}

/* ---- antwoordopties in een oefenronde ---- */

.optie-knop {
  display: flex; gap: var(--r3); align-items: baseline; width: 100%;
  text-align: left; padding: 13px var(--r4);
  background: var(--vlak-diep); border: 1px solid var(--rand); border-radius: var(--rond-m);
  color: var(--tekst); font: inherit; cursor: pointer;
  transition: border-color var(--snel), background var(--snel), transform var(--snel);
}
.optie-knop:hover:not([disabled]) { border-color: var(--actie-lijn); background: var(--vlak-hover); }
.optie-knop:active:not([disabled]) { transform: scale(.995); }
.optie-knop[disabled] { cursor: default; }
.optie-letter {
  flex: none; width: 24px; height: 24px; border-radius: var(--rond-s);
  display: inline-grid; place-items: center; align-self: center;
  background: var(--vlak); border: 1px solid var(--rand);
  font-size: var(--tekst-xs); font-weight: 600; color: var(--tekst-zacht);
}
.optie-knop:hover:not([disabled]) .optie-letter { border-color: var(--actie-lijn); color: var(--tekst); }

/* ---- knopgroep: een paar knoppen als één bediening ---- */

.knopgroep {
  display: inline-flex; align-items: stretch;
  border: 1px solid var(--rand); border-radius: var(--rond-m);
  background: var(--vlak); overflow: hidden;
}
.knopgroep .knop {
  border: 0; border-radius: 0; min-height: 32px; padding: 5px var(--r3);
  background: transparent; color: var(--tekst); font-size: var(--tekst-xs); font-weight: 500;
}
.knopgroep .knop + .knop { border-left: 1px solid var(--rand); }
.knopgroep .knop:hover { background: var(--vlak-hover); color: var(--tekst); }

/* ---- planning: wat eraan komt ---- */

.komend { display: flex; flex-direction: column; }
.komend-rij {
  display: grid; grid-template-columns: 22px 118px minmax(0, 1fr) auto auto;
  gap: var(--r3); align-items: center;
  padding: var(--r3) 0; border-bottom: 1px solid var(--rand);
}
.komend-rij:last-child { border-bottom: 0; padding-bottom: 0; }
.komend-rij:first-child { padding-top: 0; }
.komend-rij input[type='checkbox'] { width: auto; min-height: 0; margin: 0; accent-color: var(--actie-lijn); }
.komend-datum { display: flex; flex-direction: column; font-size: var(--tekst-s); line-height: 1.3; }
.komend-titel { min-width: 0; }
.komend-titel b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.komend-titel.klaar b { text-decoration: line-through; color: var(--tekst-dof); }
.soortstip { flex: none; width: 8px; height: 8px; border-radius: 2px; background: var(--soortkleur, var(--rand)); }
.komend-min { white-space: nowrap; }
@media (max-width: 640px) {
  .komend-rij { grid-template-columns: 22px minmax(0, 1fr) auto; row-gap: 4px; }
  .komend-datum { grid-column: 2; grid-row: 1; flex-direction: row; gap: 8px; align-items: baseline; }
  .komend-titel { grid-column: 2; grid-row: 2; }
  .komend-min { grid-column: 3; grid-row: 1; }
  .komend-rij .knop { grid-column: 3; grid-row: 2; }
}

/* ---- vragenbank per niveau: op een telefoon zonder de uitleg ---- */

@media (max-width: 600px) { .niveau-uitleg { display: none; } }

/* ---- flashcard die echt omdraait ---- */

.flitskaart { perspective: 1200px; margin-top: var(--r3); cursor: pointer; outline: none; }
.flitskaart:focus-visible .flitskaart-vlak.voor { outline: 2px solid var(--actie-lijn); outline-offset: 2px; }
.flitskaart-in {
  position: relative; min-height: 220px;
  transition: transform .55s cubic-bezier(.2, .7, .3, 1);
  transform-style: preserve-3d;
}
.flitskaart.om { cursor: default; }
.flitskaart.om .flitskaart-in { transform: rotateY(180deg); }
.flitskaart-vlak {
  position: absolute; inset: 0;
  display: grid; place-items: center; text-align: center;
  padding: var(--r5); overflow: auto;
  border: 1px solid var(--rand); border-radius: 16px; background: var(--vlak-diep);
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
  transition: border-color var(--snel);
}
.flitskaart:not(.om):hover .flitskaart-vlak.voor { border-color: var(--rand-sterk); }
.flitskaart-vlak.achter {
  transform: rotateY(180deg);
  background: var(--vlak); border-color: var(--actie-lijn);
  box-shadow: 0 20px 40px -24px var(--actie-vlak);
}
@media (prefers-reduced-motion: reduce) { .flitskaart-in { transition: none; } }

.oordelen {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--r2); margin-top: var(--r4);
}
.oordelen .oordeel { padding: var(--r3); text-align: center; }
.oordelen .oordeel b { font-family: var(--font-kop); }

/* ------------------------------ zijbalk: wie ----------------------------- */
/* Alleen avatar en naam; de hele rij is een link naar je account. */
.zijbalk-wie {
  grid-template-rows: auto; align-items: center;
  text-decoration: none; color: inherit; border-radius: var(--rond-m);
  padding: var(--r2); margin: 0 calc(var(--r2) * -1) 0 0;
  transition: background var(--snel);
}
.zijbalk-wie:hover { background: rgba(255, 255, 255, .07); color: inherit; }
.zijbalk-wie .avatar { grid-row: auto; }

/* ------------------------------ vragenbank ------------------------------- */

.bank-filters {
  display: flex; gap: var(--r2); flex-wrap: wrap; align-items: center;
  margin-bottom: var(--r3);
}
.bank-filters input[type='search'] { flex: 1 1 200px; max-width: 320px; }
.bank-filters select { flex: 0 1 auto; width: auto; max-width: 260px; }
.bank-filters .knop { margin-left: auto; }

.vraaglijst { display: flex; flex-direction: column; }
.vraagrij {
  display: grid; grid-template-columns: 40px minmax(0, 1fr) auto;
  gap: var(--r3); align-items: center;
  padding: var(--r3) 0; border-bottom: 1px solid var(--rand);
}
.vraagrij:last-child { border-bottom: 0; padding-bottom: 0; }
.vraagrij-tekst { min-width: 0; text-wrap: pretty; }
.vraagrij-acties { display: flex; gap: 4px; flex: none; }
@media (max-width: 600px) {
  .vraagrij { grid-template-columns: 40px minmax(0, 1fr); row-gap: 4px; }
  .vraagrij-acties { grid-column: 2; }
  .bank-filters .knop { margin-left: 0; }
  .bank-filters input[type='search'] { max-width: none; flex-basis: 100%; }
}

/* ------------------------- wachtwoord op het inlogscherm ------------------ */

.ww-veld { position: relative; }
.ww-veld input { padding-right: 44px; }
.ww-toon {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 30px; height: 30px; display: grid; place-items: center;
  border: 0; border-radius: var(--rond-s); background: none; color: var(--tekst-dof);
  cursor: pointer;
}
.ww-toon:hover { background: var(--vlak-hover); color: var(--tekst); }
.hulp.caps { color: var(--amber); }

.sterkte { display: flex; align-items: center; gap: var(--r3); }
.sterkte-balk { display: flex; gap: 4px; flex: 1 1 auto; }
.sterkte-balk i { flex: 1; height: 4px; border-radius: 2px; background: var(--rand); transition: background var(--snel); }
.sterkte[data-graad='1'] i:nth-child(-n+1) { background: var(--fout); }
.sterkte[data-graad='2'] i:nth-child(-n+2) { background: var(--amber); }
.sterkte[data-graad='3'] i:nth-child(-n+3) { background: var(--koel); }
.sterkte[data-graad='4'] i { background: var(--goed); }
.sterkte-tekst { flex: none; font-size: var(--tekst-xs); color: var(--tekst-dof); min-width: 44px; text-align: right; }

/* ---------------------------- onboarding ---------------------------------- */

/* Iets wat de meeste mensen niet nodig hebben, achter één klik. */
details.inklap > summary { cursor: pointer; font-weight: 600; list-style: none; display: flex; align-items: center; gap: 8px; }
details.inklap > summary::-webkit-details-marker { display: none; }
details.inklap > summary::before { content: '+'; display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--rand-sterk, var(--rand)); font-size: 14px; line-height: 1; }
details.inklap[open] > summary::before { content: '−'; }
/* "Meer" bij een toets: een klein uitklapmenu met de minder vaak gebruikte acties. */
details.acties-meer { position: relative; }
details.acties-meer > summary { list-style: none; cursor: pointer; }
details.acties-meer > summary::-webkit-details-marker { display: none; }
.acties-meer-lijst {
  position: absolute; z-index: 20; top: calc(100% + 6px); left: 0;
  display: flex; flex-direction: column; align-items: stretch; gap: 4px; min-width: 200px;
  padding: var(--r2); background: var(--vlak); border: 1px solid var(--rand); border-radius: var(--rond-m);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .35);
}
.acties-meer-lijst > * { justify-content: flex-start; }
details.meer-manieren > summary { font-weight: 500; color: var(--tekst-zacht, inherit); padding: var(--r3) 0; }

/* De ene kaart bovenaan het startscherm met de ene knop die ertoe doet. */
.volgende-stap {
  border-color: color-mix(in srgb, var(--actie-vlak) 45%, var(--rand));
  background: linear-gradient(135deg, var(--actie-zacht), var(--vlak) 60%);
  padding: var(--r6);
}
.volgende-stap h2 { font-size: var(--tekst-2xl, 1.6rem); margin-top: var(--r2); text-wrap: pretty; }
@media (max-width: 860px) { .volgende-stap { padding: var(--r5); } .volgende-stap h2 { font-size: var(--tekst-xl); } }

.onboarding {
  position: relative; overflow: hidden;
  border-color: color-mix(in srgb, var(--actie-vlak) 45%, var(--rand));
  background: linear-gradient(135deg, var(--actie-zacht), var(--vlak) 55%);
  padding: var(--r6);
}
.onboarding h2 { font-size: var(--tekst-2xl); margin: var(--r2) 0 var(--r2); max-width: 22ch; text-wrap: balance; }
.onboarding > p { max-width: 58ch; }
.onboarding-stappen {
  list-style: none; margin: var(--r4) 0 0; padding: 0;
  display: flex; flex-direction: column; gap: var(--r2);
}
.onboarding-stappen li { display: flex; align-items: center; gap: var(--r3); font-size: var(--tekst-s); color: var(--tekst-zacht); }
.onboarding-stappen li i {
  flex: none; width: 24px; height: 24px; border-radius: var(--rond-vol);
  display: grid; place-items: center; font-style: normal;
  font-family: var(--font-kop); font-weight: 700; font-size: 12px;
  background: var(--vlak); border: 1px solid var(--rand-sterk); color: var(--tekst-zacht);
}
.onboarding-stappen li.klaar i { background: var(--goed-vlak); border-color: var(--goed); color: var(--goed); }
.onboarding-stappen li.nu { color: var(--tekst); font-weight: 600; }
.onboarding-stappen li.nu i { background: var(--actie-vlak); border-color: var(--actie-vlak); color: var(--actie-tekst); }
@media (max-width: 860px) { .onboarding { padding: var(--r5); } .onboarding h2 { font-size: var(--tekst-xl); } }

/* ---------------------------- meldingen met actie ------------------------- */

.melding-actie {
  margin-left: auto; flex: none;
  background: none; border: 1px solid var(--rand-sterk); border-radius: var(--rond-s);
  color: var(--tekst); font: inherit; font-size: var(--tekst-xs); font-weight: 600;
  padding: 4px 9px; cursor: pointer; white-space: nowrap;
}
.melding-actie:hover { background: var(--vlak-hover); border-color: var(--actie-lijn); }
.melding.met-actie .weg { margin-left: 0; }

/* ---------------------------- zoeken in de bibliotheek -------------------- */

.zoekbalk { position: relative; margin-bottom: var(--r4); }
.zoekbalk input { padding-left: 40px; min-height: 46px; font-size: var(--tekst-m); }
.zoekbalk > svg { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--tekst-dof); pointer-events: none; }
.zoek-groep { margin-bottom: var(--r5); }
.zoek-groep .biblio-kop { margin-bottom: var(--r2); }
.biblio-tekst .fragment { font-size: var(--tekst-xs); color: var(--tekst-dof); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------------------------- herinneringen ------------------------------- */

.voorbeeldmail {
  white-space: pre-wrap; font-size: var(--tekst-s); line-height: var(--regel-ruim);
  background: var(--vlak-diep); border: 1px solid var(--rand); border-radius: var(--rond-m);
  padding: var(--r4); color: var(--tekst-zacht);
}
.voorbeeldmail b { display: block; color: var(--tekst); margin-bottom: var(--r2); }

/* --------------------------- schema in een aantekening -------------------- */
/* Een ```svg-blok wordt een tekening. Hij vult de breedte en past zich aan het
   thema aan: de lijnen staan op currentColor. */

.md-schema {
  margin: var(--r4) 0;
  padding: var(--r4);
  background: var(--vlak-diep);
  border: 1px solid var(--rand);
  border-radius: var(--rond-m);
  color: var(--tekst);
  overflow-x: auto;
}
.md-schema svg { width: 100%; height: auto; max-height: 60vh; display: block; }
.samenvatting .md-schema { background: var(--vlak); }

/* ------------------- uitleg van het model in een bericht ------------------ */
/* De uitleg komt als Markdown binnen: koppen, lijstjes, **vet**. Binnen een
   bericht moet dat niet als een los document ogen, dus geen extra ruimte boven
   en onder en dezelfde tekstgrootte als de rest van het bericht. */

.bericht .md,
.md-in-bericht {
  font-size: inherit;
  line-height: var(--regel-normaal);
}
.bericht .md > *:first-child { margin-top: 0; }
.bericht .md > *:last-child { margin-bottom: 0; }
.bericht .md h2, .bericht .md h3, .bericht .md h4 {
  font-size: var(--tekst-m);
  margin: var(--r3) 0 var(--r2);
}
.bericht .md > h2:first-child, .bericht .md > h3:first-child, .bericht .md > h4:first-child { margin-top: 0; }
.bericht .md-alinea { margin-bottom: var(--r2); }
.bericht .md-lijst { margin-bottom: var(--r2); padding-left: 20px; }
.bericht .md-lijst li { margin-bottom: 2px; }
.bericht .md-code { font-size: var(--tekst-xs); }

/* ---------------------------------------------------------------- voorlezen
   Het knopje dat een vraag of stuk uitleg hardop voorleest. Het hoort erbij te
   staan zonder de aandacht te trekken: pas als je ernaar zoekt, zie je het. */

.metluister { position: relative; padding-right: 40px; }

.luister {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid var(--rand);
  border-radius: 999px;
  background: var(--vlak);
  color: var(--tekst-zacht);
  cursor: pointer;
  transition: color .15s, border-color .15s, background .15s;
}

h2.metluister > .luister,
.bericht.metluister > .luister {
  position: absolute;
  top: 10px;
  right: 10px;
}

h2.metluister > .luister { top: 2px; right: 0; }

.luister:hover { color: var(--tekst); border-color: var(--rand-sterk); }
.luister:focus-visible { outline: 2px solid var(--actie-vlak); outline-offset: 2px; }

/* Terwijl hij praat: rustig laten pulseren, zodat je ziet waar het geluid
   vandaan komt als er meerdere blokken op het scherm staan. */
.luister.bezig {
  color: var(--actie-vlak);
  border-color: var(--actie-vlak);
  animation: luisterklop 1.6s ease-in-out infinite;
}

@keyframes luisterklop {
  0%, 100% { box-shadow: 0 0 0 0 rgb(79 99 255 / .35); }
  50%      { box-shadow: 0 0 0 5px rgb(79 99 255 / 0); }
}

@media (prefers-reduced-motion: reduce) {
  .luister.bezig { animation: none; }
}

/* --------------------------------------------------------------- onderhoud
   Het scherm als de app even dicht is. Rustig, gecentreerd, en met precies
   evenveel tekst als je nodig hebt om weg te lopen zonder zorgen. */

.onderhoud {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: var(--r6);
}

.onderhoud-kaart {
  max-width: 460px;
  text-align: center;
  background: var(--vlak);
  border: 1px solid var(--rand);
  border-radius: var(--rond-l);
  padding: var(--r7) var(--r6);
}

.onderhoud-kaart h1 {
  font-size: var(--tekst-xl);
  margin: var(--r4) 0 var(--r3);
  text-wrap: balance;
}

.onderhoud-tekst { color: var(--tekst-zacht); margin-bottom: var(--r3); }

.onderhoud-tijd {
  display: inline-block;
  margin-bottom: var(--r4);
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--vlak-diep);
  border: 1px solid var(--rand);
  font-size: var(--tekst-s);
}


/* ------------------------------------------------------------ aankondiging
   Een bericht van de beheerder, bovenin. Opvallend genoeg om te lezen, niet
   zo schreeuwerig dat je het meteen wegklikt zonder te lezen. */

.aankondiging {
  display: flex;
  gap: var(--r3);
  align-items: flex-start;
  background: var(--actie-zacht);
  border: 1px solid var(--rand-sterk);
  border-left: 3px solid var(--actie-vlak);
  border-radius: var(--rond-m);
  padding: var(--r3) var(--r4);
  margin: 0 0 var(--r4);
  font-size: var(--tekst-s);
  line-height: var(--regel-normaal);
}

.aankondiging > div { flex: 1 1 auto; white-space: pre-line; }

.aankondiging > button {
  flex: 0 0 auto;
  background: none;
  border: 0;
  color: var(--tekst-dof);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
}

.aankondiging > button:hover { color: var(--tekst); }

/* De link "Wachtwoord vergeten?" onder het inlogformulier. */
.poort-vergeten { text-align: center; margin: var(--r2) 0 0; }
.poort-vergeten button {
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--tekst-dof); font: inherit; font-size: var(--tekst-s); text-decoration: underline;
}
.poort-vergeten button:hover { color: var(--tekst); }


/* ------------------------------------------------------------- abonnement
   De regel onder je naam in de zijbalk, en het scherm als het voorbij is. */

.abo-regel {
  display: block;
  font-size: var(--tekst-xs);
  color: var(--tekst-dof);
  font-weight: 400;
  margin-top: 1px;
}
.abo-regel.let { color: var(--amber); }

.aankondiging.abo { border-left-color: var(--amber); background: var(--amber-vlak); }
.aankondiging.abo a { color: inherit; font-weight: 600; }

.verlopen-prijzen {
  display: grid;
  gap: var(--r2);
  margin-top: var(--r4);
}
.verlopen-prijs {
  display: flex;
  justify-content: space-between;
  background: var(--vlak-diep);
  border: 1px solid var(--rand);
  border-radius: var(--rond-m);
  padding: 10px 14px;
}


/* De keuzes bij "Je abonnement": één regel per plan, klikbaar als er een
   betaallink is. */
.abo-keuzes { display: grid; gap: var(--r2); }
.abo-keuze {
  display: flex; justify-content: space-between; align-items: center; gap: var(--r3);
  background: var(--vlak-diep); border: 1px solid var(--rand); border-radius: var(--rond-m);
  padding: 10px 14px; color: inherit; text-decoration: none;
}
a.abo-keuze:hover { border-color: var(--actie-lijn); background: var(--vlak-hover); }
.abo-regel { text-decoration: none; }
.abo-regel:hover { color: var(--tekst); text-decoration: underline; }


/* ---------------------------------------------------------------- plannen
   De prijskaarten. Twee naast elkaar, het jaar als aanrader met de besparing
   erop. Klikken op een kaart is kiezen. */

.plannen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: var(--r3);
  margin-top: var(--r3);
}

.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--vlak-diep);
  border: 1px solid var(--rand);
  border-radius: var(--rond-l);
  padding: var(--r4) var(--r4) var(--r3);
}

.plan.aanrader { border-color: var(--actie-lijn); background: var(--actie-zacht); }
.plan.huidig { outline: 2px solid var(--goed); outline-offset: -2px; }

.plan-bespaar {
  position: absolute;
  top: -10px;
  right: var(--r3);
  background: var(--goed);
  color: #06210F;
  font-size: var(--tekst-xs);
  font-weight: 700;
  padding: 2px 10px;
  border-radius: var(--rond-vol);
}

.plan-naam { font-weight: 600; }
.plan-naam .zacht { font-weight: 400; font-size: var(--tekst-s); }
.plan-prijs { font-family: var(--font-kop); font-size: var(--tekst-2xl); line-height: 1.1; }
.plan-regel { margin: 0 0 var(--r2); font-size: var(--tekst-xs); color: var(--tekst-zacht); flex: 1 1 auto; }
.plan .knop { justify-content: center; }


/* Verwijderen in de bibliotheek: pas zichtbaar als je over de rij gaat. */
.biblio-rij { position: relative; }
.biblio-rij .biblio-weg {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; margin-left: 6px; border: 0; border-radius: var(--rond-m, 8px);
  background: transparent; color: var(--tekst-dof); cursor: pointer; opacity: 0; transition: opacity .15s, background .15s;
}
.biblio-rij:hover .biblio-weg, .biblio-rij:focus-within .biblio-weg, .biblio-weg:focus-visible { opacity: 1; }
.biblio-weg:hover { background: var(--fout-vlak); color: var(--fout); }
@media (hover: none) { .biblio-rij .biblio-weg { opacity: 1; } }


/* Op het inlogscherm: het plan dat je op de beginpagina koos. */
.poort-gekozen {
  display: flex; gap: 12px; align-items: center; justify-content: space-between;
  padding: 12px 14px; margin-bottom: 14px; border-radius: var(--rond-m, 10px);
  border: 1px solid var(--actie-lijn); background: var(--actie-vlak, rgba(91,108,255,.12));
}
.poort-gekozen .klein { color: var(--tekst-zacht); margin-top: 2px; }
.poort-gekozen .knop.kaal { flex: 0 0 auto; }

/* Markdown: tabellen, geneste en afvinkbare lijstjes (components/markdown.js). */
.md-tabel { overflow-x: auto; margin: 0 0 var(--r3); }
.md-tabel table { border-collapse: collapse; width: 100%; font-size: var(--tekst-s); }
.md-tabel th, .md-tabel td { border: 1px solid var(--rand); padding: 6px 10px; text-align: left; vertical-align: top; }
.md-tabel th { background: var(--vlak-diep); font-weight: 600; }
.md-lijst .md-lijst { margin: 4px 0 0; }
.md-vink { list-style: none; display: flex; gap: 8px; align-items: baseline; margin-left: -20px; }
.md-vakje {
  flex: 0 0 auto; width: 15px; height: 15px; border: 1.5px solid var(--rand-sterk); border-radius: 4px;
  display: inline-flex; align-items: center; justify-content: center; font-size: 11px; line-height: 1;
  color: var(--goed); transform: translateY(2px);
}

/* --------------------------------------------------------- planning, extra */
/* Wat je bij een afspraak opschrijft, staat ook in het kaartje: één regel,
   afgekapt. Het hele verhaal zie je als je hem opent. */
.kaldag-tijd { margin-left: auto; font-size: var(--tekst-xs); color: var(--tekst-dof); font-variant-numeric: tabular-nums; }
.kalitem-omschrijving, .kalitem-vak {
  font-size: var(--tekst-xs); color: var(--tekst-zacht); line-height: 1.35;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.kalitem-vak { color: var(--tekst-dof); }
.kalitem.klaar .kalitem-omschrijving { text-decoration: line-through; }
.komend-omschrijving {
  font-size: var(--tekst-xs); color: var(--tekst-zacht); margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.doorgestreept { text-decoration: line-through; color: var(--tekst-dof); }

.planlijst { display: flex; flex-direction: column; gap: var(--r4); }
.planlijst-dag { display: flex; flex-direction: column; gap: var(--r2); }
.planlijst-dag + .planlijst-dag { border-top: 1px solid var(--rand); padding-top: var(--r4); }
.planlijst-dag.vandaag .planlijst-datum b { color: var(--actie-vlak); }
.planlijst-datum { display: flex; gap: var(--r2); align-items: baseline; text-transform: capitalize; }
.planlijst-item { display: flex; gap: var(--r3); align-items: flex-start; }
.planlijst-item input[type='checkbox'] { width: auto; min-height: 0; margin: 4px 0 0; accent-color: var(--actie-lijn); }
.planlijst-inhoud {
  flex: 1 1 auto; min-width: 0; text-align: left; border: 0; background: none; padding: 0;
  font: inherit; color: var(--tekst); cursor: pointer; display: flex; flex-direction: column; gap: 2px;
}
.planlijst-inhoud:hover b { text-decoration: underline; text-underline-offset: 3px; }
.planlijst-omschrijving { margin-top: var(--r2); padding: var(--r2) var(--r3); border-left: 2px solid var(--rand); }
.planlijst-omschrijving .md { font-size: var(--tekst-s); }
.planlijst-omschrijving .md-alinea:last-child, .planlijst-omschrijving .md-lijst:last-child { margin-bottom: 0; }

.detailregels { display: flex; flex-direction: column; gap: var(--r2); }
.detailregel { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: var(--r3); align-items: baseline; }

.aftel {
  display: flex; gap: var(--r3); align-items: center; text-align: left; width: 100%;
  border: 1px solid var(--rand); border-radius: var(--rond-m); background: var(--vlak);
  padding: var(--r2) var(--r3); font: inherit; color: var(--tekst); cursor: pointer;
}
.aftel:hover { background: var(--vlak-hover); }
.aftel-dagen {
  flex: 0 0 52px; display: flex; flex-direction: column; align-items: center; line-height: 1.1;
  border-left: 3px solid var(--soortkleur, var(--rand)); padding-left: 6px;
}
.aftel-dagen b { font-size: var(--tekst-l); }

/* Een knop die eruitziet als een link, midden in een zin. */
.linkknop {
  background: none; border: 0; padding: 0; font: inherit; color: var(--actie-vlak);
  cursor: pointer; text-decoration: underline; text-underline-offset: 3px;
}
.terugkomst { margin-top: var(--r2); }

/* Taalkiezer: vlaggen als tegels (components/taalkiezer.js). */
.taaltegels { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--r2); }
.taaltegels.klein { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.taaltegel {
  display: flex; align-items: center; gap: var(--r3); text-align: left;
  border: 1px solid var(--rand); border-radius: var(--rond-m); background: var(--vlak);
  padding: var(--r3); font: inherit; color: var(--tekst); cursor: pointer;
  transition: border-color var(--snel), background var(--snel);
}
.taaltegels.klein .taaltegel {
  min-width: 0; min-height: 62px; flex-direction: column; justify-content: center;
  gap: 5px; padding: 6px 2px; text-align: center; font-size: 11px;
}
.taaltegels.klein .taaltegel-tekst { align-items: center; width: 100%; white-space: nowrap; }
.taaltegels.klein .taaltegel-vlag { width: 24px; height: 16px; }
.taaltegels[aria-busy='true'] .taaltegel { opacity: .65; cursor: progress; }
.taaltegel:hover { border-color: var(--rand-sterk); background: var(--vlak-hover); }
.taaltegel[aria-checked='true'] { border-color: var(--actie-lijn); background: var(--actie-zacht); box-shadow: inset 0 0 0 1px var(--actie-lijn); }
.taaltegel[data-bezig] { opacity: .6; cursor: progress; }
.taaltegel-vlag { flex: 0 0 auto; width: 30px; height: 20px; border-radius: 3px; box-shadow: 0 0 0 1px rgba(0,0,0,.12); }
.taaltegel-tekst { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.taaltegel-tekst b { font-weight: 600; }
.poort-talen { margin: var(--r2) 0 var(--r4); }

@media (max-width: 380px) {
  .taaltegels.klein { grid-template-columns: repeat(5, minmax(48px, 1fr)); overflow-x: auto; padding-bottom: 3px; }
  .taaltegels.klein .taaltegel { padding-inline: 1px; }
  .taaltegels.klein .taaltegel-tekst b { font-size: 10px; letter-spacing: -.03em; }
}

/* Door AI gemaakte foto bij een vraag (lib/beeld.js). */
.ai-foto img { width: 100%; max-height: 360px; object-fit: cover; border-radius: var(--rond-m); display: block; }
.ai-foto figcaption { font-size: var(--tekst-xs); color: var(--tekst-dof); margin-top: 4px; }
.foto-wacht {
  display: flex; align-items: center; justify-content: center; gap: var(--r2);
  aspect-ratio: 3 / 2; max-height: 220px; width: 100%; margin-bottom: var(--r3);
  border: 1px dashed var(--rand); border-radius: var(--rond-m); background: var(--vlak-diep);
}

/* ===================== inlogscherm in de website-stijl =================== */

.poort-nieuw {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  grid-template-columns: minmax(0, 1fr) minmax(440px, .92fr);
  background: var(--grond);
}

.poort-nieuw::before,
.poort-nieuw::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.poort-nieuw::before {
  inset: -12%;
  background:
    radial-gradient(ellipse 42% 42% at 22% 24%, color-mix(in srgb, var(--actie-vlak) 38%, transparent), transparent 72%),
    radial-gradient(ellipse 34% 36% at 54% 62%, color-mix(in srgb, var(--geel) 18%, transparent), transparent 72%);
  filter: blur(34px);
}

.poort-nieuw::after {
  background-image:
    linear-gradient(color-mix(in srgb, var(--tekst) 5%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--tekst) 5%, transparent) 1px, transparent 1px);
  background-size: 58px 58px;
  -webkit-mask-image: radial-gradient(ellipse 76% 78% at 40% 44%, #000 22%, transparent 100%);
  mask-image: radial-gradient(ellipse 76% 78% at 40% 44%, #000 22%, transparent 100%);
}

.poort-nieuw > * { position: relative; z-index: 1; }

.poort-nieuw .poort-zij {
  background: transparent;
  color: var(--tekst);
  padding: clamp(var(--r5), 6vw, 96px);
}

.poort-nieuw .poort-vak {
  background: transparent;
  border-left: 1px solid color-mix(in srgb, var(--rand) 76%, transparent);
}

.poort-nieuw .poort-vak::before { display: none; }

.poort-nieuw .poort-form {
  width: min(470px, 100%);
  border-color: color-mix(in srgb, var(--rand) 88%, transparent);
  border-radius: 24px;
  padding: clamp(var(--r5), 3vw, 36px);
  background: color-mix(in srgb, var(--vlak) 94%, transparent);
  box-shadow: var(--schaduw-l), 0 0 0 1px rgba(255, 255, 255, .025) inset;
  backdrop-filter: blur(16px);
}

.poort-nieuw .poort-belofte { max-width: 620px; }

.poort-nieuw .poort-belofte h2 {
  max-width: none;
  margin-bottom: var(--r5);
  font-size: clamp(46px, 6vw, 82px);
  line-height: .96;
  letter-spacing: -.055em;
}

.poort-regel { display: block; }

.poort-nieuw .poort-accent {
  position: relative;
  width: max-content;
  color: var(--geel);
  /* Ruimte voor de streep: de regels staan zo dicht op elkaar dat hij anders
     in "Scoor het." zakt, in elke taal. */
  margin-bottom: .16em;
}

.poort-nieuw .poort-accent::after {
  content: "";
  position: absolute;
  right: -2%;
  bottom: -.1em;
  left: -2%;
  height: .07em;
  border-radius: var(--rond-vol);
  background: currentColor;
  transform: rotate(-1.5deg);
}

.poort-nieuw .poort-belofte p {
  max-width: 52ch;
  color: var(--tekst-zacht);
  font-size: var(--tekst-l);
}

.poort-nieuw .poort-sporen {
  gap: var(--r3);
  margin-top: var(--r5);
}

.poort-nieuw .poort-spoor {
  min-width: 0;
  gap: var(--r2);
  padding: var(--r3);
  border: 1px solid color-mix(in srgb, var(--rand) 86%, transparent);
  border-radius: var(--rond-l);
  background: color-mix(in srgb, var(--vlak) 68%, transparent);
}

.poort-nieuw .poort-spoor svg { color: var(--actie-lijn); }
.poort-nieuw .poort-spoor b { color: var(--tekst); }
.poort-nieuw .poort-spoor span { color: var(--tekst-zacht); }

.poort-nieuw .tabs button[aria-selected='true'] {
  background: var(--actie-vlak);
  color: var(--actie-tekst);
  box-shadow: none;
}

.poort-nieuw .poort-form .knop {
  border-radius: var(--rond-l);
}

.poort-nieuw .poort-form > .knop.breed {
  box-shadow: 0 12px 36px -18px color-mix(in srgb, var(--actie-vlak) 90%, transparent);
}

.poort-nieuw .poort-home-link,
.poort-nieuw .poort-home-link a {
  color: var(--tekst-dof);
}

.poort-nieuw .poort-home-link a { text-decoration: none; }
.poort-nieuw .poort-home-link a:hover { color: var(--tekst); }

@media (max-width: 960px) {
  .poort-nieuw { grid-template-columns: 1fr; }

  .poort-nieuw .poort-zij {
    gap: var(--r4);
    padding: var(--r4) var(--r4) var(--r2);
  }

  .poort-nieuw .poort-belofte { display: block; }
  .poort-nieuw .poort-belofte h2 { max-width: 100%; font-size: clamp(38px, 9vw, 58px); }
  .poort-nieuw .poort-belofte p { max-width: 58ch; font-size: var(--tekst-s); }
  .poort-nieuw .poort-sporen { display: none; }

  .poort-nieuw .poort-vak {
    align-items: flex-start;
    border-top: 1px solid color-mix(in srgb, var(--rand) 76%, transparent);
    border-left: 0;
    padding: var(--r3) var(--r4) var(--r5);
  }
}

@media (max-width: 520px) {
  .poort-nieuw .poort-zij { padding: var(--r4) var(--r4) var(--r2); }
  .poort-nieuw .poort-belofte h2 { font-size: clamp(36px, 10vw, 48px); }
  .poort-nieuw .poort-form { border-radius: 20px; padding: var(--r4); }
  .poort-nieuw .poort-vak { padding-inline: var(--r3); }
}

/* ---- toets voorbereiden ---- */

.formulier { display: flex; flex-direction: column; gap: var(--r4); }
.rij.velden { gap: var(--r4); align-items: flex-start; }

.lijstkaart { padding: var(--r2); }
.voorbereiding-regel {
  display: flex; align-items: center; gap: var(--r3);
  padding: var(--r3); border-radius: var(--rond-m);
  text-decoration: none; color: inherit;
  transition: background var(--snel);
}
.voorbereiding-regel + .voorbereiding-regel { border-top: 1px solid var(--rand); }
.voorbereiding-regel:hover { background: var(--vlak-hover); color: inherit; }
.voorbereiding-regel > svg { color: var(--tekst-dof); flex: none; }
.voorbereiding-regel-tekst { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.voorbereiding-regel-tekst b { font-weight: 600; }
.voorbereiding-regel-tekst span { font-size: var(--tekst-xs); color: var(--tekst-dof); }

.maak-opties { display: flex; flex-direction: column; gap: var(--r2); }
.maak-optie {
  display: flex; align-items: center; gap: var(--r3);
  padding: var(--r3) var(--r4);
  border: 1px solid var(--rand); border-radius: var(--rond-m);
  background: var(--vlak-diep); cursor: pointer;
  transition: border-color var(--snel), background var(--snel);
}
.maak-optie:hover { border-color: var(--rand-sterk); }
.maak-optie:has(input[type='checkbox']:checked) { border-color: var(--actie-lijn); background: var(--actie-zacht); }
.maak-optie.uit { opacity: .55; cursor: not-allowed; }
.maak-optie > input[type='checkbox'] { width: 18px; height: 18px; flex: none; accent-color: var(--actie-lijn); }
.maak-optie-ico {
  flex: none; width: 34px; height: 34px; border-radius: 10px;
  display: grid; place-items: center;
  background: var(--koel-vlak); color: var(--koel);
}
.maak-optie-tekst { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.maak-optie-tekst b { font-weight: 600; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.maak-optie-tekst > span { font-size: var(--tekst-xs); color: var(--tekst-dof); }
.maak-optie-extra { display: flex; align-items: center; gap: var(--r2); flex: none; }
.maak-optie-extra select { max-width: 200px; }
.klein-veld { display: inline-flex; align-items: center; gap: 6px; }
.klein-veld input { width: 68px; }
.klein-veld small { color: var(--tekst-dof); font-size: var(--tekst-xs); }
.label-aanbevolen, .label-klaar {
  font-size: 11px; font-weight: 600; letter-spacing: .02em;
  padding: 2px 8px; border-radius: var(--rond-vol);
}
.label-aanbevolen { background: var(--actie-zacht); color: var(--actie-lijn); }
.label-klaar { background: var(--goed-vlak); color: var(--goed); }

.materiaal-kaart { border-color: var(--actie-lijn); }
.materiaal-lijst { display: flex; flex-direction: column; gap: var(--r2); }
.materiaal {
  display: flex; align-items: center; gap: var(--r3);
  padding: var(--r3); border-radius: var(--rond-m); background: var(--vlak-diep);
}
.materiaal.mislukt .maak-optie-ico { background: var(--fout-vlak); color: var(--fout); }
.materiaal-tekst { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.materiaal-tekst b { font-weight: 600; }
.materiaal-tekst span { font-size: var(--tekst-xs); color: var(--tekst-dof); }
.materiaal-acties { display: flex; flex-wrap: wrap; gap: var(--r2); justify-content: flex-end; }

@media (max-width: 640px) {
  .maak-optie { flex-wrap: wrap; }
  .maak-optie-extra { width: 100%; padding-left: calc(18px + 34px + 2 * var(--r3)); }
  .maak-optie-extra select { flex: 1 1 auto; max-width: none; min-width: 0; }
  .materiaal { flex-wrap: wrap; }
  .materiaal-acties { width: 100%; justify-content: flex-start; }
}

/* ---- cito ---- */

.cito-kaart { border-color: var(--amber); }
.label-cito {
  font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: var(--rond-vol);
  background: var(--amber-vlak); color: var(--amber);
}