/* Klantportaal: gedeelde basis (ronde 47-49 met Gemini, 03-11-2026). Alleen structuur, ritme en toegankelijkheid.
   Kleur, letter, vormtaal en navigatie komen per merk uit thema-bwv.css of thema-aim.css: twee aparte omgevingen.
   Regels uit het conclaaf: geen kaart-in-kaart, geen pillen, geen emoji, geen decoratieve iconen, geen schaduwen;
   liever witruimte, lijnen en typografie. Minimaal 16px tekst en 44px aanraakdoelen. */

:root {
  --achter: #f6f6f4; --vlak: #fff; --tekst: #1d2433; --zacht: #545b69; --lijn: #dcdfe5;
  --merk: #1f2a5a; --merk-donker: #141c40; --merk-licht: #eef0f6; --accent: #c96a06; --accent-tekst: #9a4f05; --accent-licht: #fbf3ea;
  --goed: #1a6b3c; --let: #9a4f05; --fout: #a81c1c;
  --rond: 4px; --rond-knop: 4px; --font: system-ui, sans-serif;
  --sectiekop: var(--accent-tekst); --knop-bg: var(--merk); --knop-tekst: #fff; --knop-hover: var(--merk-donker);
}

* { box-sizing: border-box; }
html { font-size: 100%; -webkit-text-size-adjust: 100%; }
html.groot { font-size: 116%; }
body { margin: 0; font: 400 1rem/1.6 var(--font); color: var(--tekst); background: var(--achter); min-height: 100vh; font-variant-numeric: tabular-nums; }
h1 { font-size: 1.75rem; line-height: 1.2; font-weight: 700; margin: 0 0 8px; color: var(--merk); letter-spacing: -.01em; }
h2 { font-size: 1.25rem; line-height: 1.3; font-weight: 650; margin: 0 0 12px; color: var(--merk); }
h3 { font-size: 1.05rem; font-weight: 650; margin: 20px 0 8px; color: var(--merk); }
p { margin: 0 0 10px; }
a { color: var(--merk); text-decoration-color: var(--accent); text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.overslaan { position: absolute; left: 12px; top: -100px; z-index: 100; background: var(--vlak); padding: 10px 18px; font-weight: 600; }
.overslaan:focus { top: 12px; }
.zacht { color: var(--zacht); }
.klein { font-size: .9rem; }
.weg, .sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; }
.sectiekop, .label-boven { display: block; margin: 0 0 6px; font-size: .8rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--sectiekop); }

/* Kop: logo, organisatie, vestiging, uitloggen. Geen gekleurde balk, één dunne lijn. */
.kop { background: var(--vlak); border-bottom: 1px solid var(--lijn); position: sticky; top: 0; z-index: 30; }
.kop-binnen { display: flex; align-items: center; gap: 16px; min-height: 64px; padding: 8px 24px; max-width: 1180px; margin: 0 auto; }
.kop-logo { height: 30px; width: auto; display: block; }
.kop-org { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; line-height: 1.3; padding-left: 16px; border-left: 1px solid var(--lijn); }
.kop-org strong { font-weight: 600; color: var(--tekst); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kop-org span, .kop-sub { font-size: .85rem; color: var(--zacht); }
.vestiging-keuze { font: inherit; font-weight: 600; color: var(--tekst); min-height: 40px; max-width: 420px; padding: 4px 32px 4px 10px; border: 1px solid var(--lijn); border-radius: var(--rond); background: var(--vlak); }
.kop-uit { background: none !important; border: 0 !important; box-shadow: none !important; color: var(--zacht) !important; font-weight: 500 !important; padding: 0 4px !important; min-height: 44px; }
.kop-uit:hover { color: var(--merk) !important; text-decoration: underline; }
.kop-uit svg { display: none; }

/* Knoppen: primair, secundair, tekstlink. Geen pillen, geen schaduw. */
.knop { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: var(--rond-knop); border: 1px solid var(--knop-bg); background: var(--knop-bg); color: var(--knop-tekst); font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; }
.knop:hover { background: var(--knop-hover); border-color: var(--knop-hover); }
.knop-rand { background: transparent; color: var(--merk); border-color: var(--merk); }
.knop-rand:hover { background: var(--merk-licht); border-color: var(--merk); }
.knop-accent { background: var(--accent); border-color: var(--accent); color: #fff; }
.knop-klein { padding: 0 14px; font-size: .95rem; }
.knop[disabled] { opacity: .6; cursor: wait; }
.knop svg { display: none; }
.tekst-knop { background: none; border: 0; padding: 0 4px; min-height: 44px; font: inherit; font-weight: 600; color: var(--merk); text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; cursor: pointer; }
.knoppen { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 14px; }
.meer-link { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }

/* Indeling */
.raam { display: flex; max-width: 1180px; margin: 0 auto; }
.menu { flex: none; }
.menu svg { display: none; }
.inhoud { flex: 1; min-width: 0; padding: 32px 24px 80px; }
.inhoud:focus { outline: none; }
.laden { color: var(--zacht); padding: 30px 0; }
.blok { margin: 40px 0 0; }
.blok > h2, .blok h2 { margin-bottom: 14px; }
.groep-kop { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 10px 16px; }

/* Vlakken en lijsten: geen kaart-in-kaart. Een "kaart" is een sectie met een lijn erboven. */
.kaart { background: none; border: 0; border-top: 1px solid var(--lijn); padding: 24px 0 8px; margin: 0 0 8px; }
.traject-kop { border-top: 0; padding-top: 0; }
.inlog .kaart, dialog .kaart, .melding-info { background: var(--vlak); border: 1px solid var(--lijn); border-radius: var(--rond); padding: 24px; }
.lijst { border-top: 1px solid var(--lijn); }
.regel { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; padding: 14px 0; border-bottom: 1px solid var(--lijn); }
.regel-tekst { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.regel-titel { font-weight: 600; color: var(--tekst); }
.regel-sub { color: var(--zacht); font-size: .95rem; }
.regel-knoppen { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.leeg { padding: 18px 0; color: var(--zacht); margin: 0; }
.rechts { text-align: right; }

/* Datum als tekstkolom, geen kalendertegel */
.regel-datum { flex-wrap: nowrap; align-items: flex-start; }
.datum { flex: none; width: 52px; padding-top: 2px; line-height: 1.15; color: var(--zacht); font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; }
.datum b { display: block; font-size: 1.35rem; color: var(--merk); letter-spacing: 0; }
.datum span { display: block; }

/* Status als tekst, niet als gekleurde pil */
.chip, .badge { display: inline; padding: 0; background: none !important; border-radius: 0; font-size: .95rem; font-weight: 600; color: var(--zacht); }
.chip-geweest { color: var(--goed); }
.chip-geannuleerd { color: var(--fout); text-decoration: none; }
.chip-wijziging { color: var(--let); }
.badges { display: flex; flex-wrap: wrap; gap: 4px 0; margin: 8px 0 0; color: var(--zacht); }
.badges .badge + .badge::before { content: '·'; margin: 0 8px; color: var(--zacht); }
.badge-goed { color: var(--tekst); }
.badge-stil { color: var(--zacht); font-weight: 500; }
.initiaal { display: none; }
.trainer { display: inline; }

/* Volgende training: geen vlak, de datum als kop */
.volgende { margin: 32px 0 0; padding: 0 0 4px; }
.volgende-datum { font-size: 1.4rem; margin: 0 0 4px; }
.volgende-wat { font-weight: 600; margin: 0 0 2px; }
.volgende p { margin: 0 0 2px; }

/* Voortgang van een traject: tekst met een dunne balk */
.trajecten { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 0 40px; }
.traject { border-top: 1px solid var(--lijn); padding: 20px 0 16px; }
.traject h3 { margin: 0 0 8px; font-size: 1.1rem; }
.voortgang { margin: 6px 0 4px; }
.voortgang-kop { margin: 0 0 8px; }
.voortgang-balk { height: 4px; background: var(--lijn); border-radius: 2px; overflow: hidden; max-width: 520px; }
.voortgang-balk > span { display: block; height: 100%; background: var(--merk); }
.voortgang-onder { margin: 8px 0 0; font-size: .9rem; color: var(--zacht); }
.mededeling { border-left: 2px solid var(--accent); padding: 2px 0 2px 14px; margin: 14px 0 0; }
.afgerond { margin-top: 20px; }
.afgerond > summary, details > summary { cursor: pointer; font-weight: 600; min-height: 44px; display: flex; align-items: center; color: var(--merk); }

/* Voor jou: een lijst met een accentlijn, verder niets */
.voorjou { border-top: 2px solid var(--accent); }
.urgent .regel-titel { color: var(--fout); }

/* Kerncijfers: typografisch, geen tegels */
.cijfers { display: flex; flex-wrap: wrap; gap: 20px 56px; margin: 20px 0 8px; }
.cijfer { display: flex; flex-direction: column; color: var(--zacht); font-size: .95rem; max-width: 210px; }
.cijfer b { font-size: 2.25rem; line-height: 1.1; font-weight: 700; color: var(--merk); margin-bottom: 2px; }

/* Grafieken: geen kader, één kleur, dunne lijnen */
.grafieken { display: grid; grid-template-columns: 1fr; gap: 28px 56px; margin: 28px 0 0; }
@media (min-width: 900px) { .grafieken { grid-template-columns: 1fr 1fr; } }
.grafiek { margin: 28px 0 0; min-width: 0; }
.grafieken .grafiek { margin: 0; }
.grafiek figcaption { font-weight: 600; color: var(--tekst); margin: 0 0 10px; }
.grafiek-rol { overflow-x: auto; }
.grafiek svg { display: block; max-width: none; }
.grafiek-leeg { margin: 0; color: var(--zacht); font-size: .95rem; }
.g-staaf { fill: var(--merk); }
.g-lijn { fill: none; stroke: var(--merk); stroke-width: 2; }
.g-punt { fill: var(--merk); stroke: var(--achter); stroke-width: 2; }
.g-gat { fill: var(--lijn); opacity: .45; }
.g-raster { stroke: var(--lijn); stroke-width: 1; }
.g-gem { stroke: var(--accent); stroke-width: 1.5; stroke-dasharray: 4 4; }
.g-waarde { font: 600 12px var(--font); fill: var(--tekst); text-anchor: middle; paint-order: stroke; stroke: var(--achter); stroke-width: 3px; stroke-linejoin: round; }
.g-as { font: 400 11px var(--font); fill: var(--zacht); text-anchor: middle; }
.g-as-y { text-anchor: end; }
.g-uitleg { font-size: .9rem; color: var(--zacht); margin: 6px 0 0; display: flex; align-items: center; gap: 8px; }
.g-gem-teken { display: inline-block; width: 18px; border-top: 2px dashed var(--accent); }
.verdeling { display: flex; height: 10px; overflow: hidden; gap: 2px; border-radius: 2px; max-width: 640px; }
.verdeling span { font-size: 0; min-width: 3px; }
.v-ja { background: var(--merk); }
.v-beetje { background: color-mix(in srgb, var(--merk) 45%, var(--achter)); }
.v-nee { background: var(--lijn); }
.verdeling-legenda { display: flex; flex-wrap: wrap; gap: 4px 20px; font-size: .95rem; margin: 10px 0 0; }
.verdeling-legenda i { display: inline-block; width: 10px; height: 10px; margin-right: 8px; }
.als-tabel { margin: 16px 0 0; }
.als-tabel table, table.vestigingen { width: 100%; border-collapse: collapse; font-size: .95rem; }
.als-tabel th, .als-tabel td, table.vestigingen th, table.vestigingen td { text-align: left; padding: 10px 12px 10px 0; border-bottom: 1px solid var(--lijn); vertical-align: middle; }
.als-tabel th, table.vestigingen th { font-size: .78rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--zacht); }
.leerpunten { list-style: none; padding: 0; margin: 10px 0 0; }
.leerpunten li { padding: 10px 0; border-bottom: 1px solid var(--lijn); }
.leerpunten li::before { content: '“'; color: var(--accent); font-weight: 700; margin-right: 4px; }

/* Vestigingen van een koepel */
.tabel-kaart { border-top: 1px solid var(--lijn); }
.stand { font-weight: 600; font-size: .95rem; }
.stand::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 8px; background: var(--goed); vertical-align: 1px; }
.stand-goed { color: var(--goed); }
.stand-let { color: var(--let); }
.stand-let::before { background: var(--let); }
.stand-urgent { color: var(--fout); }
.stand-urgent::before { background: var(--fout); }

/* Downloads: bestandstype als tekst, filter als tekstknoppen */
.chips { display: flex; flex-wrap: wrap; gap: 4px 24px; margin: 20px 0 0; border-bottom: 1px solid var(--lijn); }
.filterchip { font: inherit; font-weight: 500; min-height: 44px; padding: 0; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; background: none; color: var(--zacht); cursor: pointer; }
.filterchip:hover { color: var(--merk); }
.filterchip[aria-pressed="true"] { color: var(--merk); font-weight: 650; border-bottom-color: var(--accent); }
#downloads { border-top: 0; }
.download { flex-wrap: nowrap; }
.bestand-icoon { flex: none; width: 44px; font-size: .75rem; letter-spacing: .06em; color: var(--zacht); }
.bestand-icoon svg { display: none; }

/* Deelnemers */
.bolletjes { display: inline-flex; gap: 4px; }
.bol { width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--merk); display: inline-block; }
.bol.aan { background: var(--merk); }
.legenda { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: .9rem; color: var(--zacht); margin: 4px 0 12px; }
.plak-lijst { max-height: 220px; overflow: auto; margin: 8px 0 0; padding-left: 20px; }

/* Vragen, hulp */
.vraag-tekst { margin: 6px 0 0; white-space: pre-wrap; }
.antwoord { margin: 10px 0 0; border-left: 2px solid var(--goed); padding: 2px 0 2px 14px; }
.hulp details { border-bottom: 1px solid var(--lijn); }
.hulp summary { padding: 12px 0; }
.hulp details p { margin: 0 0 14px; }

/* Contact onderaan */
.contact { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; border-top: 1px solid var(--lijn); padding-top: 24px; }
.contact p { margin: 0; flex: 1 1 260px; }

/* Welkom en uitleg */
.welkom { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 0 0 16px; margin: 0 0 24px; border-bottom: 1px solid var(--lijn); }
.welkom > span { flex: 1 1 300px; }
.welkom-weg { border: 0; background: none; font-size: 1.4rem; line-height: 1; cursor: pointer; color: var(--zacht); min-width: 44px; min-height: 44px; }
.uitleg-stappen { padding-left: 22px; }
.uitleg-stappen li { margin: 0 0 12px; }
.nazorg { border-top: 2px solid var(--accent); }
.spoed { margin-top: 16px; border-left: 2px solid var(--let); padding: 4px 0 4px 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.spoed strong { flex: 1 1 100%; }
.terug { display: inline-flex; align-items: center; min-height: 44px; margin: 0 0 8px; font-weight: 600; text-decoration: none; }
.filter { max-width: 320px; }

/* Formulieren en inloggen */
.inlog { max-width: 460px; margin: 48px auto; }
.veld { display: flex; flex-direction: column; gap: 6px; font-weight: 600; margin: 16px 0; }
.veld input, .veld textarea, .veld select { font: inherit; font-weight: 400; min-height: 48px; padding: 10px 12px; border: 1px solid #a9afbb; border-radius: var(--rond); background: var(--vlak); color: var(--tekst); }
.veld textarea { min-height: 140px; resize: vertical; }
.veld input:focus, .veld textarea:focus, .veld select:focus { border-color: var(--merk); outline: 2px solid var(--merk); outline-offset: 0; }
.code-veld { font-size: 1.6rem !important; letter-spacing: .4em; text-align: center; font-weight: 600 !important; }
.melding-fout { color: var(--fout); font-weight: 600; margin: 8px 0 0; }
.melding-info { margin: 12px 0; padding: 14px 16px; }

/* Venster, melding, meekijken */
dialog { border: 1px solid var(--lijn); border-radius: var(--rond); padding: 0; width: min(520px, 94vw); max-height: 92vh; background: var(--vlak); color: var(--tekst); }
dialog::backdrop { background: rgba(20, 25, 40, .45); }
.venster { padding: 24px; }
.meer-lijst { display: grid; border-top: 1px solid var(--lijn); }
.meer-lijst .knop { justify-content: flex-start; background: none; border: 0; border-bottom: 1px solid var(--lijn); border-radius: 0; color: var(--merk); min-height: 52px; padding: 0; font-weight: 500; }
.meer-lijst .knop:hover { background: none; text-decoration: underline; }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: var(--tekst); color: #fff; padding: 12px 18px; border-radius: var(--rond); font-weight: 500; display: none; z-index: 90; max-width: 92vw; align-items: center; gap: 14px; }
.toast.zichtbaar { display: flex; }
.toast button { background: none; color: #fff; border: 0; min-height: 40px; padding: 0 4px; font: inherit; font-weight: 700; text-decoration: underline; cursor: pointer; }
.meekijk { background: #fff4cc; color: #3d2f00; padding: 10px 24px; text-align: center; font-size: .95rem; border-bottom: 1px solid #e7d58a; position: sticky; top: 0; z-index: 60; }
.fab { display: none !important; }
body.alleen-kijken [data-toevoegen], body.alleen-kijken [data-weg], body.alleen-kijken [data-gestopt], body.alleen-kijken #vraag button[type=submit], body.alleen-kijken #meer-maand,
body.alleen-kijken #aanvraag button[type=submit], body.alleen-kijken [data-lijst], body.alleen-kijken #meer-agenda { display: none !important; }

/* Telefoon: onderbalk met vier knoppen en Meer */
.menu .alleen-klein { display: none; }
@media (max-width: 860px) {
  .kop-binnen { padding: 6px 14px; gap: 12px; min-height: 56px; }
  .kop-logo { height: 26px; }
  .kop-binnen { flex-wrap: wrap; }
  .kop-uit { margin-left: auto; }
  .kop-org { padding-left: 12px; }
  .kop-org:has(.vestiging-keuze) { order: 3; flex: 1 1 100%; border-left: 0; padding: 0 0 4px; }
  .kop-org:has(.vestiging-keuze) span { display: none; }
  .vestiging-keuze { max-width: 100%; width: 100%; }
  .menu { position: fixed; bottom: 0; left: 0; right: 0; top: auto; z-index: 40; display: flex !important; flex-direction: row !important; padding: 0 4px env(safe-area-inset-bottom) !important; background: var(--vlak) !important; border: 0 !important; border-top: 1px solid var(--lijn) !important; width: auto !important; margin: 0 !important; }
  .menu .alleen-groot { display: none !important; }
  .menu a, .menu .alleen-klein { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 60px; padding: 6px 2px !important; font: inherit; font-size: .72rem !important; font-weight: 500; color: var(--zacht); text-decoration: none; border: 0 !important; background: none !important; cursor: pointer; margin: 0 !important; }
  .menu svg { display: block; width: 22px; height: 22px; stroke-width: 1.5; }
  .menu a[aria-current="page"] { color: var(--merk); font-weight: 650; box-shadow: inset 0 2px 0 var(--accent) !important; }
  .inhoud { padding: 20px 16px 100px; }
  h1 { font-size: 1.5rem; }
  .trajecten { grid-template-columns: 1fr; }
  .cijfers { gap: 16px 32px; }
  .cijfer b { font-size: 1.9rem; }
  .regel-knoppen { width: 100%; }
  .regel-datum { flex-wrap: wrap; }
  .regel-datum .regel-tekst { flex: 1 1 calc(100% - 72px); }
  .download { flex-wrap: wrap; }
  .download .regel-tekst { flex: 1 1 calc(100% - 64px); }
  table.vestigingen thead { display: none; }
  table.vestigingen tr { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 12px 0; border-bottom: 1px solid var(--lijn); }
  table.vestigingen td { border: 0; padding: 0; }
  table.vestigingen td:nth-child(2)::before { content: 'Volgende training: '; color: var(--zacht); }
  table.vestigingen td.rechts { grid-row: 1 / span 3; grid-column: 2; align-self: center; }
}
@media print { .kop, .menu, .knop, .tekst-knop { display: none !important; } body { background: #fff; } }

/* Ronde 50: voorbereiding, terugblik, ervaring en tijdlijn */
.vink { display: flex; align-items: center; gap: 12px; min-height: 44px; cursor: pointer; }
.vink input { width: 20px; height: 20px; accent-color: var(--merk); flex: none; margin: 0; }
.voorbereiding { border: 0; padding: 16px 0 0; margin: 16px 0 0; border-top: 1px solid var(--lijn); }
.voorbereiding legend { padding: 0; margin-bottom: 4px; }
@media (min-width: 861px) { .filter { float: right; margin: 0 0 0 24px; } }
.voorbereiding .zacht { margin: 4px 0 0; }
.terugblik { margin: 10px 0 2px; padding-left: 14px; border-left: 2px solid var(--accent); color: var(--tekst); }
.terugblik .sectiekop { margin-bottom: 2px; }
.ervaring { border-top: 2px solid var(--accent); padding-top: 20px; }
.cijferkeuze { border: 0; padding: 0; margin: 8px 0 0; display: flex; flex-wrap: wrap; gap: 6px; }
.cijferkeuze legend { padding: 0; margin-bottom: 8px; font-weight: 600; width: 100%; }
.cijferkeuze label { position: relative; }
.cijferkeuze input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.cijferkeuze span { display: inline-grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--lijn); border-radius: var(--rond); background: var(--vlak); font-weight: 600; }
.cijferkeuze input:checked + span { background: var(--merk); border-color: var(--merk); color: #fff; }
.cijferkeuze input:focus-visible + span { outline: 3px solid var(--accent); outline-offset: 2px; }
.tijdlijn ol { list-style: none; margin: 8px 0 0; padding: 0 0 0 16px; border-left: 1px solid var(--lijn); }
.tijdlijn li { padding: 6px 0; }
.tijdlijn li .zacht { display: inline-block; min-width: 170px; }
details > summary { list-style: none; }
details > summary::-webkit-details-marker { display: none; }
details > summary::before { content: '+'; display: inline-block; width: 1.2em; font-weight: 700; color: var(--accent-tekst); }
details[open] > summary::before { content: '−'; }
.volgende-bel { margin: 12px 0 0 !important; font-weight: 600; }
/* Ronde 51: minder lijnen, meer witruimte tussen secties */
.kaart { border-top: 0; padding-top: 8px; }
.blok { margin-top: 48px; }
.voorbereiding { border-top: 0; padding-top: 8px; }