/* Verdiepingspagina's binnen de bestaande wereld van Ensemblo. */
.uitleg {
  --u-width: 1200px;
  --u-section: clamp(56px, 7vw, 96px);
  --u-h1: clamp(34px, 4.1vw, 55px);
  --u-h2: clamp(26px, 3vw, 36px);
  --u-gap: clamp(24px, 5vw, 64px);
  --u-ground: #f3f5fa;
  margin: 0; background: var(--u-ground); color: var(--ink);
  font-family: var(--font-sans); font-size: var(--fs-16); line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
.uitleg *, .uitleg-footer * { box-sizing: border-box; }
.uitleg [hidden] { display: none !important; }
.uitleg .u-wrap { max-width: var(--u-width); padding-inline: 24px; margin-inline: auto; }
.uitleg h1, .uitleg h2, .uitleg h3 { text-wrap: balance; line-height: 1.15; font-weight: 650; letter-spacing: -.03em; }
.uitleg h1 { font-size: var(--u-h1); margin: 0 0 24px; max-width: 22ch; }
.uitleg h2 { font-size: var(--u-h2); margin: 0 0 24px; }
.uitleg h3 { font-size: var(--fs-24); margin: 0 0 16px; }
.uitleg p { margin: 0 0 20px; max-width: 65ch; }
.uitleg a { color: var(--brand); text-underline-offset: 4px; }
.uitleg a:hover { text-decoration-thickness: 2px; }
.uitleg :focus-visible, .uitleg-footer :focus-visible { outline: 3px solid var(--brand); outline-offset: 4px; }
.uitleg img { max-width: 100%; height: auto; }
.uitleg button, .uitleg input { font: inherit; }
.uitleg button, .uitleg summary { cursor: pointer; }
.uitleg .u-skip { position: fixed; z-index: 99; left: 12px; top: -90px; padding: 12px 20px; background: var(--panel); }
.uitleg .u-skip:focus { top: 12px; }
.uitleg .breadcrumbs { padding-block: 24px; font-size: var(--fs-14); }
.uitleg .breadcrumbs ol { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 4px 12px; }
.uitleg .breadcrumbs li { display: flex; gap: 12px; align-items: center; }
.uitleg .breadcrumbs li + li:before { content: '/'; color: var(--muted); }
.uitleg .breadcrumbs a { display: inline-flex; align-items: center; min-height: 48px; }
.uitleg .u-hero { padding-block: 16px 56px; }
.uitleg .u-hero > h1 { grid-area: title; }
.uitleg .u-hero > .u-route { grid-area: route; }
.uitleg .u-hero > .u-lead { grid-area: lead; }
.uitleg .u-hero > .u-actions { grid-area: actions; }
.uitleg .u-hero > .u-reassurance { grid-area: reassurance; margin-top: 16px; color: var(--muted); font-size: var(--fs-14); }
.uitleg .u-lead { font-size: var(--fs-19); line-height: 1.6; max-width: 56ch; }
.uitleg .u-actions { display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: center; margin-top: 28px; }
.uitleg .u-button, .uitleg #knop1, .uitleg #knop2 { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 14px 22px; border: 1px solid transparent; border-radius: var(--r-md); background: var(--brand); color: var(--brand-ink); text-decoration: none; font-weight: 600; line-height: 1.4; text-align: center; }
.uitleg .u-actions > .u-secondary { display: inline-flex; min-height: 48px; align-items: center; }
.uitleg .u-button:hover, .uitleg #knop1:hover, .uitleg #knop2:hover { background: var(--brand-pressed, #1939c6); }
.uitleg .u-hero > .u-lead { margin-top: 24px; }
.uitleg .u-route { margin: 40px 0 0; padding-top: 24px; border-top: 1px solid var(--line-sterk); }
.uitleg .u-route-head { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.uitleg .u-route-head img { width: 76px; height: 76px; object-fit: cover; border-radius: 50%; }
.uitleg .u-route-head p { margin: 0; font-weight: 600; }
.uitleg .u-route ol { margin: 0; padding: 0; list-style: none; }
.uitleg .u-route li { position: relative; padding: 0 0 24px 36px; }
.uitleg .u-route li:before { position: absolute; left: 0; top: 7px; width: 12px; height: 12px; background: var(--brand); border-radius: 50%; content: ''; }
.uitleg .u-route li:first-child:before { background: var(--accent); }
.uitleg .u-route li:not(:last-child):after { position: absolute; content: ''; width: 1px; left: 6px; top: 24px; bottom: 0; background: var(--line-sterk); }
.uitleg .u-route strong, .uitleg .u-route span { display: block; }
.uitleg .u-route span { color: var(--muted); font-size: var(--fs-14); }
.uitleg .u-route figcaption { color: var(--muted); font-size: var(--fs-14); }
.uitleg .u-jump { position: static; top: auto; z-index: auto; backdrop-filter: none; background: transparent; display: flex; gap: 8px 28px; flex-wrap: wrap; border-block: 1px solid var(--line); padding-block: 12px; }
.uitleg .u-jump a { display: inline-flex; align-items: center; min-height: 48px; font-size: var(--fs-14); }
.uitleg .u-section { padding-block: var(--u-section); scroll-margin-top: 110px; }
.uitleg .u-section + .u-section { border-top: 1px solid var(--line); }
.uitleg .u-paper { background: var(--panel); }
.uitleg .u-context-copy { margin-bottom: 32px; }
.uitleg .u-context-copy > p:last-child { color: var(--muted); }
.uitleg .u-chart { margin: 0; }
.uitleg .u-chart h3 { font-size: var(--fs-24); }
.uitleg .u-chart .u-definition { font-size: var(--fs-14); color: var(--muted); }
.uitleg .u-bar-row { margin-top: 22px; }
.uitleg .u-bar-label { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 8px; font-size: var(--fs-14); }
.uitleg .u-bar-label strong { white-space: nowrap; font-size: var(--fs-19); font-variant-numeric: tabular-nums; font-weight: 650; }
.uitleg .u-bar-track { height: 18px; background: var(--panel-2); overflow: hidden; }
.uitleg .u-bar { display: block; height: 100%; width: var(--value); background: var(--brand); }
.uitleg .u-axis { display: flex; justify-content: space-between; color: var(--muted); font-size: var(--fs-13); margin-top: 12px; border-top: 1px solid var(--line); padding-top: 8px; }
.uitleg .u-chart figcaption { margin-top: 24px; font-size: var(--fs-14); }
.uitleg .u-chart figcaption p { margin-bottom: 12px; }
.uitleg .u-source { color: var(--muted); }
.uitleg .u-chart details { margin-top: 16px; }
.uitleg summary { min-height: 48px; padding-block: 12px; font-weight: 550; }
.uitleg .u-source-details { padding: 16px 0 0; }
.uitleg .u-source-details dt { font-weight: 600; }
.uitleg .u-source-details dd { margin: 0 0 16px; }
.uitleg .u-downloads { display: flex; flex-wrap: wrap; gap: 4px 24px; margin-top: 12px; }
.uitleg .u-downloads a { display: inline-flex; align-items: center; min-height: 48px; }
.uitleg main table { border-collapse: collapse; width: 100%; text-align: left; }
.uitleg main th, .uitleg main td { padding: 20px 20px 20px 0; vertical-align: top; border-bottom: 1px solid var(--line); }
.uitleg main th { font-weight: 600; }
.uitleg main thead { font-size: var(--fs-14); color: var(--muted); }
.uitleg .u-work-table caption { text-align: left; margin-bottom: 24px; color: var(--muted); }
.uitleg .u-work-table th:first-child { width: 24%; }
.uitleg .u-work-table td { width: 38%; }
.uitleg .u-mobile-label { display: none; }
.uitleg .u-example { margin-block: 32px 0; padding-block: 28px 0; border-top: 1px solid var(--line); }
.uitleg .u-example p { margin-bottom: 0; }
.uitleg .u-effect-grid { display: grid; gap: 36px; }
.uitleg .u-effect-grid h3 { margin-bottom: 16px; }
.uitleg .u-time-model { margin: 28px 0 0; padding: 24px; background: var(--panel-2); }
.uitleg .u-time-model dl { margin: 0; }
.uitleg .u-time-model div { padding-block: 16px; border-bottom: 1px solid var(--line); }
.uitleg .u-time-model div:last-child { border: 0; }
.uitleg .u-time-model dt { font-weight: 600; }
.uitleg .u-time-model dd { margin: 8px 0 0; color: var(--muted); }
.uitleg .u-time-model figcaption { font-size: var(--fs-14); color: var(--muted); margin-top: 16px; }
.uitleg .u-directory { margin: 0; padding: 0; list-style: none; }
.uitleg .u-directory > li { border-top: 1px solid var(--line); }
.uitleg .u-directory a { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px 24px; padding: 24px 0; color: var(--ink); text-decoration: none; }
.uitleg .u-directory a:after { content: ''; width: 12px; height: 12px; border-top: 2px solid var(--brand); border-right: 2px solid var(--brand); transform: rotate(45deg); grid-column: 2; grid-row: 1; margin-right: 6px; }
.uitleg .u-directory strong { font-size: var(--fs-24); font-weight: 600; letter-spacing: -.025em; }
.uitleg .u-directory span { grid-column: 1; color: var(--muted); max-width: 64ch; font-size: var(--fs-16); }
.uitleg .u-directory a:hover strong { color: var(--brand); text-decoration: underline; text-underline-offset: 5px; }
.uitleg .u-related { display: grid; gap: 12px; }
.uitleg .u-related a { display: flex; min-height: 56px; padding-block: 12px; border-bottom: 1px solid var(--line); align-items: center; font-size: var(--fs-19); }
.uitleg .u-faq { max-width: 800px; }
.uitleg .u-faq details { border-bottom: 1px solid var(--line); }
.uitleg .u-faq summary { padding-block: 20px; font-size: var(--fs-19); }
.uitleg .u-faq details p { padding-block: 4px 20px; margin: 0; }
.uitleg .u-request { background: var(--panel-2); }
.uitleg .u-request-grid { display: grid; gap: 32px; }
.uitleg .form-area { min-width: 0; background: var(--panel); padding: 24px; border: 1px solid var(--line); border-radius: var(--r-lg); }
.uitleg .form-area h2 { font-size: var(--fs-24); }
.uitleg .form-area label { display: block; font-weight: 550; margin: 20px 0 8px; }
.uitleg .form-area .u-field { display: block; width: 100%; min-height: 52px; border: 1px solid var(--line-sterk); border-radius: var(--r-sm); padding: 12px; background: var(--panel); color: var(--ink); }
.uitleg .form-area input::placeholder { color: var(--muted); opacity: 1; }
.uitleg .form-area .knoprij { margin-top: 24px; }
.uitleg .form-area button { width: 100%; }
.uitleg .form-area button:disabled { background: var(--muted); cursor: wait; }
.uitleg .form-area p { margin-top: 16px; }
.uitleg .form-reassurance, .uitleg .privacy-note { color: var(--muted); font-size: var(--fs-14); }
.uitleg .veldfout { color: var(--crit-tekst); margin-top: 8px; }
.uitleg .aanmelding-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.uitleg fieldset { border: 0; padding: 0; margin: 24px 0; }
.uitleg legend { font-weight: 600; padding: 0; }
.uitleg .keuzes { display: grid; gap: 8px; margin-top: 12px; }
.uitleg .keuzes label { margin: 0; display: flex; gap: 12px; align-items: center; border: 1px solid var(--line-sterk); border-radius: var(--r-sm); min-height: 52px; padding: 12px; cursor: pointer; }
.uitleg .keuzes label:has(:checked) { background: var(--brand-soft); border-color: var(--brand); }
.uitleg .keuzes label:has(:focus-visible) { outline: 3px solid var(--brand); outline-offset: 3px; }
.uitleg .keuzes input { accent-color: var(--brand); width: 20px; height: 20px; flex: 0 0 20px; margin: 0; }
.uitleg .overslaan { background: transparent; color: var(--brand); border: 0; min-height: 48px; text-decoration: underline; margin-top: 12px; }
.uitleg .icon { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; flex-shrink: 0; margin-left: 10px; }
.uitleg .u-request ul { padding-left: 20px; }
.uitleg-footer { display: block; width: 100%; max-width: none; margin: 0; background: var(--panel, #fff); color: var(--ink, #171a21); font-family: var(--font-sans, Inter, sans-serif); border-top: 1px solid var(--line, #dce1ea); padding: 48px 24px 24px; }
.u-entry { padding: 64px 24px; border-top: 1px solid var(--line); background: var(--panel); }
.u-entry > div { max-width: 1104px; margin-inline: auto; }
.u-entry h2 { max-width: 28ch; }
.u-entry nav { display: flex; flex-wrap: wrap; gap: 12px 32px; }
.u-entry nav a { display: flex; align-items: center; min-height: 48px; color: var(--brand); text-underline-offset: 4px; }
.uitleg-footer .uf-inner { max-width: 1152px; margin: auto; }
.uitleg-footer nav { position: static; z-index: auto; background: transparent; backdrop-filter: none; border: 0; }
.site-header nav { position: static; backdrop-filter: none; background: transparent; border: 0; }
.uitleg-footer .uf-columns { display: grid; gap: 32px; }
.uitleg-footer h2 { font-size: 16px; font-weight: 650; margin: 0 0 16px; line-height: 1.5; }
.uitleg-footer ul { padding: 0; margin: 0; list-style: none; }
.uitleg-footer a { color: inherit; text-decoration: none; display: flex; min-height: 48px; align-items: center; padding-block: 9px; font-size: 14px; line-height: 1.5; }
.uitleg-footer a:hover { color: var(--brand); text-decoration: underline; text-underline-offset: 4px; }
.uitleg-footer .uf-bottom { display: flex; gap: 12px 32px; flex-wrap: wrap; align-items: center; border-top: 1px solid var(--line); margin-top: 32px; padding-top: 24px; }
.uitleg-footer .uf-wordmark { font-size: 24px; font-weight: 700; letter-spacing: -.035em; }
.uitleg-footer small { font-size: 14px; color: var(--muted); }
@media (max-width: 599px) {
  .uitleg .u-work-table, .uitleg .u-work-table caption, .uitleg .u-work-table tbody, .uitleg .u-work-table tr, .uitleg .u-work-table td, .uitleg .u-work-table th { display: block; width: 100%; }
  .uitleg .u-work-table thead { position: absolute; width: 1px; height: 1px; }
  .uitleg .u-work-table thead th { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .uitleg .u-work-table tbody tr { border-top: 1px solid var(--line); padding: 24px 0; }
  .uitleg .u-work-table th, .uitleg .u-work-table td { border: 0; padding: 0 0 16px; }
  .uitleg .u-work-table tbody th:first-child { width: 100%; font-size: var(--fs-19); }
  .uitleg .u-mobile-label { display: block; font-size: var(--fs-14); color: var(--muted); margin-bottom: 6px; }
  .uitleg .form-area { padding: 20px; }
}
@media (max-width: 959px) {
  .uitleg .u-route { margin: 0 0 24px; padding: 0; border: 0; }
  .uitleg .u-route-head { margin-bottom: 16px; }
  .uitleg .u-route-head img { width: 40px; height: 40px; }
  .uitleg .u-route li { padding-left: 28px; padding-bottom: 12px; }
  .uitleg .u-route li:last-child { padding-bottom: 0; }
  .uitleg .u-route figcaption { margin-top: 12px; }
  .uitleg .u-actions { margin-top: 0; }
}
@media (min-width: 600px) {
  .uitleg .u-wrap { padding-inline: 40px; }
  .uitleg .u-related, .uitleg-footer .uf-columns { grid-template-columns: repeat(2, 1fr); gap: 12px 40px; }
  .uitleg-footer .uf-columns { gap: 32px 40px; }
  .uitleg-footer { padding-inline: 40px; }
  .uitleg .keuzes { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 960px) {
  .uitleg .u-wrap { padding-inline: 48px; }
  .uitleg .u-hero { display: grid; grid-template-columns: 1.2fr 1fr; grid-template-areas: 'title route' 'lead route' 'actions route' 'reassurance route'; gap: 0 var(--u-gap); align-items: start; padding-block: 24px 72px; }
  .uitleg .u-hero > .u-lead { margin-top: 0; }
  .uitleg .u-hero > .u-route { align-self: center; }
  .uitleg .u-hero > .u-actions { margin-top: 8px; }
  .uitleg .u-route { margin: 0; padding: 32px 0 8px 32px; border-top: 0; border-left: 1px solid var(--line-sterk); }
  .uitleg .u-context, .uitleg .u-request-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: var(--u-gap); }
  .uitleg .u-context-copy { margin: 0; }
  .uitleg .u-effect-grid { grid-template-columns: 1fr 1fr; gap: var(--u-gap); }
  .uitleg-footer .uf-columns { grid-template-columns: repeat(4, 1fr); }
  .uitleg-footer { padding-inline: 48px; }
}
@media (prefers-reduced-motion: no-preference) {
  .uitleg .u-route { animation: route-verschijnt 650ms cubic-bezier(.16,1,.3,1) both; }
  @keyframes route-verschijnt { from { clip-path: inset(0 0 12% 0); } to { clip-path: inset(0); } }
}
@media print { .uitleg .u-jump, .uitleg .u-request, .uitleg-footer { display: none; } .uitleg .u-section { padding-block: 24px; } }