:root { color-scheme: light; font-family: system-ui, sans-serif; color: #20251f; }
        body { margin: 0; background: #f4f6f2; line-height: 1.5; }
        main { width: min(92%, 44rem); margin: 2rem auto; padding: 1.5rem; background: white; border-radius: .5rem; box-shadow: 0 2px 12px #0001; }
        h1 { line-height: 1.2; }
        .field { margin-block: 1rem; }
        label { display: block; font-weight: 650; margin-bottom: .25rem; }
        input:not([type="checkbox"]), textarea, select { box-sizing: border-box; width: 100%; max-width: 32rem; padding: .65rem; border: 1px solid #788276; border-radius: .25rem; font: inherit; }
        ul { padding-left: 1.25rem; }
        .errorlist { color: #a21b1b; }
        .privacy { padding: 1rem; background: #edf3e9; border-left: .25rem solid #52704b; }
        button { padding: .7rem 1.1rem; color: white; background: #365b36; border: 0; border-radius: .25rem; font: inherit; cursor: pointer; }
        @media (max-width: 35rem) { main { width: auto; margin: 0; min-height: 100vh; border-radius: 0; padding: 1rem; } }
        main { box-sizing: border-box; width: min(96%, 64rem); }
        nav, .acties { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem; }
        nav { padding-bottom: 1rem; border-bottom: 1px solid #ddd; }
        a { color: #365b36; }
        .button { display: inline-block; padding: .7rem 1.1rem; color: white; background: #365b36; border-radius: .25rem; }
        .totalen { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 1rem; }
        .totalen section { padding: 1rem; background: #edf3e9; border-radius: .5rem; }
        .totalen h2 { font-size: 1rem; margin-top: 0; }
        .totalen strong { font-size: 2rem; }
        .table-scroll { overflow-x: auto; margin-top: 1rem; }
        table { border-collapse: collapse; width: 100%; text-align: left; }
        th, td { padding: .7rem; border-bottom: 1px solid #ddd; }
        td:first-child { white-space: nowrap; }
        .filters { display: flex; flex-wrap: wrap; gap: .8rem; align-items: end; }
        .filters .field { flex: 1 1 10rem; margin: 0; }

:root { color: #203d39; background: #f3f6f3; }
body { background: #f3f6f3; }
main { width: min(94%, 76rem); margin: 1.5rem auto; padding: clamp(1rem, 3vw, 3rem); }
nav { gap: .5rem 1.2rem; font-size: .95rem; }
nav a { padding-block: .5rem; }
.beheer-nav { gap: .4rem; }
.beheer-nav__link { display: inline-block; padding: .5rem .75rem; border-radius: .35rem; background: transparent; color: #365b36; font-weight: 600; text-decoration: none; }
.beheer-nav__link:hover { background: #edf3e9; }
.beheer-nav__link--active, .beheer-nav__link--active:hover { background: #365b36; color: #fff; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, [tabindex]:focus-visible { outline: 3px solid #b36720; outline-offset: 4px; }
h1 { font-size: clamp(2rem, 4vw, 3.5rem); letter-spacing: -.035em; max-width: 22ch; }
h2 { letter-spacing: -.02em; }
p { max-width: 76ch; }
.hero { padding-block: clamp(2rem, 5vw, 5rem); }
.eyebrow { text-transform: uppercase; letter-spacing: .12em; font-size: .8rem; font-weight: 700; color: #55746b; }
.intro { font-size: 1.2rem; color: #46615b; }
.feature-grid, .visual-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
.panel { padding: clamp(1rem, 2vw, 2rem); border: 1px solid #d9e3dd; border-radius: .8rem; margin-block: 1.5rem; min-width: 0; }
.feature-grid .panel, .visual-grid .panel { margin-block: 0; }
.kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-block: 1.5rem 2.5rem; }
.kpis section { border: 1px solid #d9e3dd; background: #f0f5f1; }
.kpis section:first-child { background: #203f36; color: white; }
.kpis strong { font-variant-numeric: tabular-nums; font-size: clamp(2rem, 4vw, 3rem); }
.chart-frame { height: 320px; position: relative; margin-block: 1.5rem; }
.chart-frame[hidden] { display: none; }
.map-layout { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 2rem; align-items: center; }
.netherlands-map { width: 100%; max-height: 540px; display: block; }
.province { stroke: white; stroke-width: 2.5; stroke-linejoin: round; fill: #f0f1ef; }
.province:hover, .province:focus { stroke: #203d39; stroke-width: 3; }
.map-label { fill: #183e33; font: bold 11px system-ui; pointer-events: none; paint-order: stroke; stroke: white; stroke-width: 3px; }
.legend { display: flex; gap: .8rem; align-items: center; flex-wrap: wrap; }
.legend[hidden] { display: none; }
.legend-scale { width: 10rem; height: .8rem; border-radius: 1rem; background: linear-gradient(to right, #b4cfbe, #235b43); }
.legend-zero-swatch { display: inline-block; width: 1rem; height: .8rem; margin-right: .4rem; vertical-align: middle; background: #f0f1ef; border: 1px solid #d9e3dd; border-radius: .2rem; }
.map-note { color: #52645d; font-size: .85rem; font-weight: 400; margin-block: .6rem; }
#kaart-detail { color: #203d39; margin-block: 1.5rem; }
.period { padding: 1rem; background: #edf3e9; border-radius: .4rem; }
footer { margin-top: 3rem; border-top: 1px solid #d9e3dd; padding-top: 1rem; font-size: .9rem; color: #46615b; }
@media (max-width: 48rem) { .feature-grid, .visual-grid, .map-layout { grid-template-columns: 1fr; } .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 35rem) { main { width: 100%; margin: 0; } .kpis { gap: .6rem; } .kpis h2 { font-size: .9rem; } .chart-frame { height: 300px; } th, td { padding: .55rem .35rem; } }

/* Compacte account- en authenticatieformulieren. */
.helptext { display: block; color: #52645d; font-size: .85rem; margin-block: .4rem; }
.checkbox-label { display: flex; align-items: flex-start; gap: .65rem; font-weight: 500; }
.checkbox-label input[type="checkbox"] { flex: 0 0 auto; width: 1.15rem; height: 1.15rem; margin: .2rem 0 0; }
.opleidingen { border: 1px solid #d9e3dd; border-radius: .5rem; padding: 1rem; margin-block: 1.2rem; min-width: 0; }
.opleidingen legend { font-size: 1.2rem; font-weight: 700; padding-inline: .35rem; }
.opleiding-row { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(9rem, .7fr) minmax(0, 1fr); gap: 1rem; align-items: center; padding-block: .7rem; border-bottom: 1px solid #e2e8e4; }
.opleiding-row:last-child { border-bottom: 0; }
.opleiding-row .field { margin: 0; min-width: 0; }
.opleiding-row .field label { font-size: .85rem; }
.password-input { display: flex; gap: .5rem; align-items: stretch; max-width: 40rem; }
.password-input input { min-width: 0; flex: 1; }
.password-toggle { flex-shrink: 0; background: #edf3e9; color: #203d39; font-size: .85rem; }
.password-toggle[hidden] { display: none; }
.password-field .helptext, .password-field .errorlist { clear: both; max-width: 40rem; }
.account-start h1 { font-size: 2rem; margin-block: .5rem; }
.account-heading { margin-block: 1.5rem 2rem; }
.account-subtitle { font-size: 1rem; color: #526052; margin: 0; }
.account-intro { max-width: 65ch; line-height: 1.6; margin-bottom: 1.5rem; }
.account-registraties { margin-top: 2rem; }
.account-start > h2 { font-size: 1.2rem; }
.account-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; }
.account-kpis section { padding: .7rem; }
.account-kpis h2 { font-size: .85rem; margin-bottom: .25rem; }
.account-kpis strong { font-size: 1.6rem; }
.secondary-action { background: #edf3e9; color: #203d39; }
.primary-action { font-weight: 700; }
@media (max-width: 40rem) {
    .opleiding-row { grid-template-columns: 1fr; gap: .5rem; }
    .password-input { flex-wrap: wrap; }
    .password-input input { flex-basis: 100%; }
    .password-toggle { min-height: 2.75rem; }
}

.test-badge { display: inline-block; padding: .1rem .4rem; border-radius: .25rem; background: #edf3e9; color: #52645d; font-size: .85rem; }

.messages { display: grid; gap: .75rem; margin-block: 1.25rem 1.5rem; }
.message { display: flex; align-items: flex-start; gap: .75rem; padding: 1rem 1.25rem; border: 1px solid #b7cdd8; border-left: .3rem solid #37677d; border-radius: .65rem; background: #edf4f7; color: #234c60; min-width: 0; }
.message--success { background: #edf5ef; border-color: #bdd4c4; border-left-color: #39704b; color: #254d34; }
.message--warning { background: #faf4e6; border-color: #ddcea8; border-left-color: #916c23; color: #654b1c; }
.message--error { background: #f9eeec; border-color: #dfc1bc; border-left-color: #a24e43; color: #793b33; }
.message-icon { flex: 0 0 1.5rem; font-size: 1.25rem; line-height: 1.3; text-align: center; font-weight: 700; }
.message-content { min-width: 0; overflow-wrap: anywhere; }
.message-title { display: block; font-weight: 700; }
.message-content p { margin: .2rem 0 0; max-width: none; font-weight: 500; }
@media (max-width: 35rem) {
    .message { padding: .85rem; gap: .6rem; }
}

.aanvraagkaart { padding: 1rem 1.25rem; margin-block: 1rem; overflow-wrap: anywhere; }
.aanvraagkaart-kop, .aanvraagkaart-voet { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem 1.5rem; }
.aanvraagkaart h2 { margin: 0; font-size: 1.1rem; }
.aanvraagkaart time { flex-shrink: 0; color: #52645d; font-size: .85rem; }
.aanvraagkaart p { margin: .25rem 0; }
.aanvraagkaart-opleidingen { list-style: none; padding: 0; margin: .35rem 0; }
.aanvraagkaart-opleidingen li + li { margin-top: .35rem; }
.aanvraagkaart-opleidingen li p { color: #52645d; font-size: .9rem; }
.aanvraagkaart-voet { align-items: center; }
.aanvraagkaart-voet .button { flex-shrink: 0; margin-left: auto; }
.aanvraagdetail { min-width: 0; overflow-wrap: anywhere; }
.aanvraagdetail .panel { padding: 1rem 1.25rem; margin-block: 1rem; }
.aanvraagdetail h1 { margin-block: .5rem 1rem; }
.aanvraagdetail h2 { font-size: 1.2rem; margin-block: 1rem .5rem; }
.aanvraagdetail .panel h2 { margin-top: 0; }
.aanvraagdetail .panel p { margin-block: .5rem; }
.aanvraagdetail-gegevens { display: grid; grid-template-columns: minmax(140px, 190px) minmax(0, 1fr); gap: .4rem 1rem; margin: 0; }
.aanvraagdetail-gegevens dt { font-weight: 600; color: #52645d; }
.aanvraagdetail-gegevens dd { margin: 0; min-width: 0; }
.aanvraagdetail-opleidingen .aanvraagdetail-gegevens + .aanvraagdetail-gegevens { margin-top: .8rem; padding-top: .8rem; border-top: 1px solid #d9e3dd; }
@media (max-width: 35rem) {
    .aanvraagdetail-gegevens { grid-template-columns: minmax(0, 1fr); gap: .15rem; }
    .aanvraagdetail-gegevens dd + dt { margin-top: .6rem; }
}
@media (max-width: 40rem) {
    .aanvraagkaart-kop, .aanvraagkaart-voet { flex-direction: column; align-items: flex-start; }
    .aanvraagkaart-voet .button { margin: .35rem 0 0; }
}

/* Publieke API-documentatie: alleen binnen deze pagina. */
.api-documentatie { max-width: 62rem; margin-inline: auto; overflow-wrap: anywhere; }
.api-documentatie h1 { font-size: clamp(2rem, 4vw, 3rem); }
.api-documentatie header { margin-block: 2rem; }
.api-documentatie .api-inhoud { margin-block: 1.5rem; padding: 1rem; border: 1px solid #d9e3dd; border-radius: .5rem; background: #f0f5f1; }
.api-documentatie .api-sectie { margin-block: 2.5rem; padding-top: .5rem; border-top: 1px solid #d9e3dd; }
.api-documentatie h2, .api-documentatie h3 { scroll-margin-top: 1rem; }
.api-documentatie h3 { margin-top: 1.5rem; }
.api-documentatie pre { max-width: 100%; box-sizing: border-box; overflow-x: auto; padding: 1rem; border: 1px solid #d9e3dd; border-radius: .5rem; background: #f3f6f3; font-size: .9rem; line-height: 1.6; }
.api-documentatie code { font-family: ui-monospace, Consolas, monospace; }
.api-documentatie caption { text-align: left; font-weight: 600; margin-bottom: .5rem; }
.api-documentatie th, .api-documentatie td { vertical-align: top; }
.api-documentatie .api-velden dt { margin-top: 1rem; font-weight: 650; }
.api-documentatie .api-velden dd { margin: .25rem 0 0; max-width: 76ch; }
.api-documentatie .api-codes { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: .5rem 1.5rem; }
.api-documentatie .api-codes > div { display: flex; gap: .6rem; }
.api-documentatie .api-codes dt { font-weight: 650; min-width: 2rem; }
.api-documentatie .api-codes dd { margin: 0; }
.api-documentatie .privacy { border-radius: .4rem; margin-block: 1.5rem; }
.api-documentatie .privacy h3 { margin-top: 0; }