
@font-face{font-family:Inter;src:url("/assets/inter-variable.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
/* Figma: Werkvormen / overzicht and Werkfiche / respect (380:228–231). */
:root { --wf-surface:#f6f7f7; --wf-radius:16px; --wf-gap:12px; }
.workfiche,.workforms-overview { color:#102936; background:#fff; font-family:Inter,Arial,sans-serif; font-weight:400; }
.workfiche h1,.workforms-overview h1 { margin:0; font-size:clamp(36px,4.3vw,56px); line-height:1.2; font-weight:600; letter-spacing:-.035em; max-width:22ch; }
.workfiche h2,.workforms-overview h2 { font-size:clamp(28px,2.7vw,34px); line-height:1.24; font-weight:600; letter-spacing:-.025em; margin:0 0 24px; max-width:38ch; }
.workfiche h3,.workforms-overview h3 { font-size:22px; line-height:1.32; font-weight:600; letter-spacing:-.02em; margin:0 0 12px; }
.workfiche p,.workforms-overview p { margin:0 0 16px; max-width:80ch; }
.wf-hero { padding:64px 0; background:#fff; }
.wf-hero .container { display:flex; flex-direction:column; align-items:flex-start; gap:24px; }
.wf-hero .wf-label,.wf-hero .wf-facts,.wf-hero p:last-child { margin:0; }
.wf-label { font-size:12px; font-weight:600; color:#59656a; line-height:1.6; text-transform:uppercase; letter-spacing:.065em; }
.wf-back { display:inline-flex; align-items:center; gap:12px; font-size:14px; font-weight:600; text-decoration:none; min-height:32px; }
.wf-back:hover { text-decoration:underline; text-underline-offset:5px; }
.wf-back svg { width:20px; height:20px; }
.wf-facts { display:flex; flex-wrap:wrap; align-items:center; gap:14px; font-size:14px; line-height:1.5; color:#59656a; font-weight:600; }
.wf-actions { display:flex; flex-wrap:wrap; gap:12px; }
.wf-action { appearance:none; display:inline-flex; align-items:center; justify-content:center; gap:12px; padding:16px; min-height:56px; background:#fff; border:1px solid #dfdfd9; border-radius:16px; color:#102936; text-decoration:none; font:600 14px/20px Inter,Arial,sans-serif; cursor:pointer; transition:background .18s,border-color .18s,box-shadow .18s; }
.wf-action svg { width:24px; height:24px; flex:none; stroke:currentColor; }
.wf-action:hover { background:#f6f7f7; border-color:#102936; }
.wf-action--primary { color:#fff; background:#102936; border-color:#102936; }
.wf-action--primary:hover { color:#fff; background:#1b3946; }
.workfiche :is(a,button):focus-visible,.workforms-overview a:focus-visible { outline:3px solid #ad8248; outline-offset:4px; }
.wf-status { font-size:14px; margin:0!important; color:#59656a; }
.wf-status:empty { display:none; }
.wf-goal { max-width:920px; font-size:19px; line-height:1.6; color:#59656a; }
.wf-goal .wf-callout { padding:0; background:none; border:0; border-radius:0; margin:0; }
.wf-goal .wf-callout h3 { font-size:14px; line-height:1.5; margin-bottom:10px; color:#102936; }
.wf-goal .wf-goal-title { font-size:14px; line-height:1.5; font-weight:600; margin:0 0 10px; color:#102936; }
.wf-toc { padding-top:8px; max-width:950px; }
.wf-toc>div { display:flex; gap:8px 20px; flex-wrap:wrap; }
.wf-toc a { font-size:14px; font-weight:600; text-underline-offset:5px; text-decoration-color:#a8b2b6; padding:4px 0; }
.wf-toc a:hover { text-decoration-color:#102936; }
.wf-section { padding:64px 0; background:#fff; scroll-margin-top:106px; }
[data-workform-slot="sections"]>.wf-section:nth-child(even) { background:#f6f7f7; }
.wf-prose { font-size:16px; line-height:1.625; }
.wf-prose>p { color:#59656a; }
.wf-prose a { text-decoration:underline; text-underline-offset:4px; }
.wf-perspectives { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; margin-top:24px; }
.wf-perspective { background:#f6f7f7; border-radius:16px; padding:28px; }
.wf-perspective p:last-child { margin-bottom:0; }
.wf-perspective blockquote { border:0; padding:0; margin:20px 0; color:#59656a; font:400 16px/1.625 Inter,Arial,sans-serif; }
.wf-perspective blockquote em { font-style:normal; }
.wf-strengths { display:grid; gap:14px; margin:22px 0 0; padding:18px 0 0; border-top:1px solid #dfdfd9; }
.wf-strengths dt { font-size:12px; font-weight:600; line-height:1.6; letter-spacing:.065em; text-transform:uppercase; color:#59656a; }
.wf-strengths div:last-child dt { color:#8a6230; }
.wf-strengths dd { margin:2px 0 0; color:#102936; }
.wf-section--perspectieven .wf-perspectives { margin-bottom:24px; }
.wf-callout-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; margin-top:24px; }
.wf-callout-grid .wf-callout { margin:0; }
.wf-next { max-width:760px; }
.wf-next .wf-action { margin:8px 0 0; text-decoration:none; }
.wf-next-links { margin-top:24px; font-size:15px; }
.wf-next-links p { margin:0; }
.wf-callout { padding:24px; border-radius:16px; background:#f6f7f7; margin:0 0 24px; }
.wf-callout p { color:#59656a; }
.wf-callout p:last-child,.wf-callout ol:last-child { margin-bottom:0; }
.wf-callout h3 strong { font-weight:600; }
.wf-section:nth-child(even) .wf-callout { background:#fff; }
.wf-callout--emphasis { border-left:3px solid #ad8248; border-radius:0 16px 16px 0; }
.wf-prose ul,.wf-prose ol { padding-left:24px; max-width:80ch; margin:0 0 16px; }
.wf-prose li+li { margin-top:8px; }
.wf-step { padding:24px; border:1px solid #dfdfd9; border-radius:16px; margin:24px 0; background:#fff; }
.wf-step p:last-child,.wf-step ul:last-child,.wf-step ol:last-child { margin-bottom:0; }
.wf-step blockquote { margin:16px 0 0; border-left:2px solid #ad8248; padding:0 0 0 20px; color:#59656a; font-size:16px; }
.wf-step blockquote em { font-style:normal; }
.wf-overview-intro { font-size:19px; line-height:1.6; color:#59656a; max-width:850px; }
.wf-library,.wf-related { padding:64px 0; background:#f6f7f7; }
.wf-card-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
.wf-card { display:flex; flex-direction:column; gap:12px; border:1px solid #dfdfd9; border-radius:16px; background:#fff; padding:32px; color:#102936; text-decoration:none; transition:border-color .18s,box-shadow .18s; }
.wf-card-grid>.wf-card:last-child:nth-child(odd) { grid-column:1/-1; }
.wf-card:hover { border-color:#102936; box-shadow:0 3px 14px #1029360a; }
.wf-card-title { display:flex; align-items:flex-start; gap:16px; }
.wf-card-title h3 { flex:1; margin:0; }
.wf-card-title svg { flex:none; width:24px; height:24px; margin-top:2px; transition:transform .18s; }
.wf-card:hover .wf-card-title svg { transform:translateX(4px); }
.wf-card p { color:#59656a; font-size:16px; line-height:1.625; margin:0; }
.wf-card-hint { font-size:14px; font-weight:600; margin-top:auto; }
.wf-card-hint>span { margin:0 6px; }
.wf-use { background:#fff; padding:64px 0; }
.wf-use .wf-prose { margin-bottom:24px; }
.wf-print-brand,.wf-print-details { display:none; }
.wf-share-dialog { border:1px solid #dfdfd9; border-radius:16px; padding:28px; width:min(520px,calc(100% - 40px)); color:#102936; font-family:Inter,Arial,sans-serif; box-shadow:0 16px 80px #10293622; }
.wf-share-dialog::backdrop { background:#10293655; }
.wf-share-dialog h2 { font-size:24px; margin:0 0 12px; }
.wf-share-dialog label { display:block; font-size:14px; margin-bottom:6px; }
.wf-share-dialog input { box-sizing:border-box; width:100%; padding:12px; border:1px solid #59656a; border-radius:8px; font:inherit; }
.wf-share-dialog .wf-actions { margin-top:20px; }
@media (max-width:700px) {
  .wf-hero,.wf-section,.wf-library,.wf-related,.wf-use { padding:48px 0; }
  .wf-hero .container { gap:20px; }
  /* Pdf als hoofdknop; afdrukken en delen als compacte icoonknoppen ernaast. */
  .wf-hero .wf-actions { display:grid; grid-template-columns:minmax(0,1fr) 56px 56px; width:100%; gap:8px; }
  .wf-hero .wf-action:not(.wf-action--primary) { padding:0; }
  .wf-hero .wf-action:not(.wf-action--primary) span { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
  .wf-perspectives,.wf-card-grid,.wf-callout-grid { grid-template-columns:1fr; }
  .wf-perspective { padding:22px; }
  .wf-card { padding:24px; }
  .wf-goal,.wf-overview-intro { font-size:16px; }
  .wf-toc>div { gap:8px 16px; }
}
@media (prefers-reduced-motion:reduce) { .wf-action,.wf-card,.wf-card-title svg { transition:none; } }
@page { size:A4; margin:18mm 18mm 23mm; }
@media print {
  html,body { background:#fff!important; color:#102936!important; font-family:Inter,Arial,sans-serif; font-size:10.5pt; }
  .site-header,.site-footer,.skip,.wf-actions,.wf-status,.wf-toc,.wf-back,.wf-related,.wf-share-dialog { display:none!important; }
  .workfiche .container { width:100%; max-width:none; margin:0; }
  .wf-print-brand { display:flex; align-items:center; gap:12px; margin:0 0 18pt; font-size:11pt; }
  .wf-print-brand img { object-fit:contain; }
  .wf-print-brand>span { margin-left:auto; font-size:9pt; color:#59656a; }
  .workfiche h1 { font-size:26pt; line-height:1.15; max-width:none; }
  .workfiche h2 { font-size:16pt; margin:0 0 12pt; line-height:1.25; break-after:avoid; }
  .workfiche h3 { font-size:12pt; margin:0 0 6pt; break-after:avoid; }
  .wf-hero { padding:0 0 12pt; }
  .wf-hero .container { gap:9pt; }
  .wf-goal { font-size:10pt; color:#102936; }
  .wf-section { padding:16pt 0; background:#fff!important; }
  .wf-prose,.wf-perspective blockquote,.wf-step blockquote { font-size:10pt; line-height:1.35; }
  .wf-perspectives { display:block; margin-top:10pt; }
  .wf-perspective { display:inline-block; vertical-align:top; box-sizing:border-box; width:calc(50% - 6pt); margin:0 8pt 10pt 0; }
  .wf-perspective:nth-child(even) { margin-right:0; }
  .wf-perspective blockquote { margin:8pt 0; }
  .wf-strengths { margin-top:8pt; padding-top:6pt; gap:4pt; }
  .wf-callout-grid { display:block; margin-top:8pt; }
  .wf-section--vervolg { display:none; }
  .wf-perspective,.wf-callout,.wf-step { padding:10pt; background:#fff!important; border:1px solid #dce0e1; border-radius:0; page-break-inside:avoid; break-inside:avoid; box-shadow:none; }
  .wf-callout,.wf-step { margin:0 0 12pt; }
  .wf-section--oefening { break-before:page; }
  .wf-goal .wf-callout { padding:0; border:0; }
  .wf-label,.wf-facts { font-size:9pt; }
  .workfiche p { margin-bottom:8pt; max-width:none; }
  .wf-print-details { display:block; position:fixed; bottom:-15mm; left:0; right:0; border-top:1px solid #dce0e1; padding-top:5pt; font-size:7.5pt; line-height:1.45; color:#59656a; }
  .wf-prose a { color:#102936; }
}

