/* Arbeidspool — arbeidspool.css. Design tokens: dark #091E19, lime #C6FF55, accent #1B6B4A, glow rgba(31,138,91,a), alert #E11D48. */
:root {
  /* Arbeidspool design tokens: change a colour here and the whole site follows. */
  --ap-ink: #091E19;
  --ap-ink-rgb: 9,30,25;
  --ap-lime: #C6FF55;
  --ap-lime-rgb: 198,255,85;
  --ap-green: #1B6B4A;
  --ap-glow-rgb: 31,138,91;
  --ap-alert: #E11D48;
  --ap-alert-rgb: 225,29,72;
  --ap-alert-ink: #B3123A;
  --ap-bg: #F8F8F8;
  --ap-white: #FFFFFF;
  --ap-white-rgb: 255,255,255;
  --ap-font: 'DM Sans', system-ui, sans-serif;
}
body { margin: 0; background: var(--ap-bg) }
html { scroll-behavior: smooth }
*, *::before, *::after { box-sizing: border-box }
a { color: var(--ap-green) } a:hover { color: var(--ap-ink) }
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible { outline: 2px solid var(--ap-green); outline-offset: 3px }
[id] { scroll-margin-top: 104px }

@keyframes ap-fade { from { opacity: 0; transform: translateY(14px) } to { opacity: 1; transform: none } }
@keyframes ap-rise { from { opacity: 0; transform: translateY(28px) } to { opacity: 1; transform: none } }
@keyframes nav-pull {
  0% { background-color: rgba(var(--ap-white-rgb),0); color: var(--ap-white); box-shadow: 0 0 0 rgba(var(--ap-ink-rgb),0) }
  40% { background-color: rgba(var(--ap-white-rgb),0.14); color: var(--ap-white); box-shadow: 0 0 0 rgba(var(--ap-ink-rgb),0) }
  62% { background-color: rgba(var(--ap-white-rgb),0.97); color: var(--ap-ink); box-shadow: 0 10px 34px rgba(var(--ap-ink-rgb),0.1) }
  100% { background-color: var(--ap-white); color: var(--ap-ink); box-shadow: 0 10px 34px rgba(var(--ap-ink-rgb),0.12) }
}
@keyframes tld-pull { 0%, 40% { color: var(--ap-lime) } 62%, 100% { color: var(--ap-green) } }

.in { animation: ap-fade 0.7s cubic-bezier(0.2,0.7,0.2,1) both }
.in.d1 { animation-delay: 0.08s } .in.d2 { animation-delay: 0.16s } .in.d3 { animation-delay: 0.24s }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .rv { animation: ap-rise linear both; animation-timeline: view(); animation-range: entry 0% entry 55% }
    .rv.d1 { animation-range: entry 8% entry 65% }
    .rv.d2 { animation-range: entry 16% entry 75% }
    .rv.d3 { animation-range: entry 24% entry 85% }
    .nav { animation: nav-pull linear both; animation-timeline: scroll(root); animation-range: 0px 170px }
    .nav .tld { animation: tld-pull linear both; animation-timeline: scroll(root); animation-range: 0px 170px }
  }
}
@media (prefers-reduced-motion: reduce) { .in, .sp, .pv, .pan { animation: none !important } html { scroll-behavior: auto } }

.wrap { max-width: 1280px; margin: 0 auto }
.h2 { margin: 0; font-size: clamp(32px, 3.4vw, 48px); line-height: 1.06; letter-spacing: -0.035em; font-weight: 700 }
.h2 em { font-style: italic }
.lead { margin: 16px 0 0; max-width: 580px; color: rgba(var(--ap-ink-rgb),0.68) }
.head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px 40px }
.eb { margin: 0; font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase }

.nav { position: sticky; top: 14px; z-index: 50; height: 64px; margin: 26px 40px 0; padding: 0 12px 0 24px; border-radius: 12px; display: flex; align-items: center; justify-content: space-between; gap: 24px; background-color: var(--ap-white); color: var(--ap-ink); box-shadow: 0 10px 34px rgba(var(--ap-ink-rgb),0.12); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px) }
.nav a, .nav a:hover { color: inherit; text-decoration: none }
.nav .tld { color: var(--ap-green) }
.nl { position: relative; opacity: 0.86; transition: opacity 0.2s ease }
.nl::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; background: currentColor; scale: 0 1; transform-origin: left center; transition: scale 0.25s ease }
.nl:hover { opacity: 1 } .nl:hover::after { scale: 1 1 }
.navphone { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid color-mix(in srgb, currentColor 26%, transparent); font-size: 14px; font-weight: 600 }
.nav .btn-g, .nav .btn-g:hover { color: var(--ap-ink) }
@media (max-width: 991px) { .navlinks { display: none !important } }
@media (max-width: 622px) { .navphone { display: none !important } .nav { margin-left: 24px; margin-right: 24px } }

.btn { display: inline-flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 18px 0 22px; border-radius: 999px; border: 1px solid transparent; font-family: inherit; font-size: 15px; font-weight: 600; line-height: 1; text-decoration: none; cursor: pointer; transition: translate 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease }
.btn:hover { translate: 0 -1px; box-shadow: 0 8px 22px rgba(var(--ap-ink-rgb),0.14) }
.btn .dot { width: 9px; height: 9px; border-radius: 999px; border: 2px solid currentColor; transition: scale 0.2s ease, background-color 0.2s ease }
.btn:hover .dot { scale: 1.35; background-color: currentColor }
.btn-g, .btn-g:hover { background: var(--ap-lime); color: var(--ap-ink) }
.btn-o, .btn-o:hover { background: var(--ap-white); border-color: rgba(var(--ap-ink-rgb),0.2); color: var(--ap-ink) }
.btn-o:hover { border-color: var(--ap-ink) }
.btn-w, .btn-w:hover { background: rgba(var(--ap-white-rgb),0.08); border-color: rgba(var(--ap-white-rgb),0.3); color: var(--ap-white) }
.btn-w:hover { border-color: var(--ap-white) }
.btn-lg { min-height: 54px; padding: 0 22px 0 26px; font-size: 16px }

.tick { flex: none; width: 22px; height: 22px; border-radius: 999px; background: var(--ap-lime); color: var(--ap-ink); display: grid; place-items: center }
.tick::after { content: ""; width: 9px; height: 5px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; rotate: -45deg; translate: 0 -1px }
.ck { display: flex; align-items: flex-start; gap: 12px }
.ck .tick { margin-top: 2px }
.it { display: flex; align-items: flex-start; gap: 16px; padding: 16px 0; border-bottom: 1px solid rgba(var(--ap-ink-rgb),0.08) }
.it:last-child { border-bottom: 0 }
.it .tick { margin-top: 1px; width: 26px; height: 26px }
.it strong { display: block; font-size: 17px; font-weight: 600 }
.it small { display: block; margin-top: 3px; font-size: 15px; line-height: 1.5; color: rgba(var(--ap-ink-rgb),0.68) }

.card { border-radius: 14px; transition: translate 0.25s ease, box-shadow 0.25s ease }
.card:hover { translate: 0 -3px; box-shadow: 0 16px 36px rgba(var(--ap-ink-rgb),0.1) }
.c-white { background: var(--ap-white); border: 1px solid rgba(var(--ap-ink-rgb),0.07) }
.c-grey { background: rgba(var(--ap-ink-rgb),0.05) }
.c-green { background: rgba(var(--ap-lime-rgb),0.32) }
.ar { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600 }
.ar::after { content: "→"; transition: translate 0.2s ease }
a:hover .ar::after, .ar:hover::after { translate: 4px 0 }

.fine { padding: 30px; border-radius: 14px; background: var(--ap-white); border: 1px solid rgba(var(--ap-alert-rgb),0.24) }
.fine .n { margin: 16px 0 0; font-size: clamp(40px, 4.2vw, 58px); line-height: 1; letter-spacing: -0.04em; font-weight: 700; color: var(--ap-alert) }
.fine .u { margin: 6px 0 0; font-size: 19px; font-style: italic; font-weight: 600 }
.fine .t { margin: 20px 0 0; font-size: 15px; color: rgba(var(--ap-ink-rgb),0.68) }
.res { padding: 20px 22px; border-radius: 12px; background: rgba(var(--ap-alert-rgb),0.06) }
.res p { margin: 0; font-size: 14px; color: rgba(var(--ap-ink-rgb),0.7) }
.res .n { margin: 8px 0 6px; font-size: clamp(30px, 2.8vw, 40px); line-height: 1; letter-spacing: -0.04em; font-weight: 700; color: var(--ap-alert) }
.range { flex: 1; min-width: 0; height: 44px; margin: 0; accent-color: var(--ap-alert); cursor: pointer }
.rb { flex: none; width: 46px; height: 46px; padding: 0; border-radius: 999px; border: 1px solid rgba(var(--ap-ink-rgb),0.18); background: var(--ap-white); color: var(--ap-ink); display: grid; place-items: center; font-family: inherit; font-size: 22px; line-height: 1; cursor: pointer; transition: border-color 0.2s ease, scale 0.15s ease }
.rb:hover { border-color: var(--ap-ink) } .rb:active { scale: 0.92 }

.ic { width: 48px; height: 48px; border-radius: 12px; background: rgba(var(--ap-glow-rgb),0.08); color: var(--ap-green); display: grid; place-items: center }
.feat h3 { margin: 20px 0 0; font-size: 20px; letter-spacing: -0.02em; font-weight: 700 }
.feat p { margin: 8px 0 0; font-size: 16px; color: rgba(var(--ap-ink-rgb),0.68) }

.switch { flex: none; width: 84px; height: 48px; padding: 0; border-radius: 999px; border: 1px solid rgba(var(--ap-white-rgb),0.34); background: rgba(var(--ap-white-rgb),0.1); cursor: pointer; display: flex; align-items: center; transition: background-color 0.3s ease }
.switch .knob { width: 38px; height: 38px; margin-left: 4px; border-radius: 999px; background: var(--ap-white); transition: translate 0.3s ease, background-color 0.3s ease }
.switch[aria-checked="true"] { background: var(--ap-lime); border-color: var(--ap-lime) }
.switch[aria-checked="true"] .knob { translate: 36px 0; background: var(--ap-ink) }
.node { flex: 0 1 190px; padding: 22px 18px; border-radius: 14px; text-align: center; background: rgba(var(--ap-white-rgb),0.06); border: 1px solid rgba(var(--ap-white-rgb),0.18) }
.node strong { display: block; font-size: 18px; font-weight: 700 }
.node small { display: block; margin-top: 4px; font-size: 14px; color: rgba(var(--ap-white-rgb),0.7) }
.node.hub { flex-basis: 220px; background: var(--ap-lime); border-color: var(--ap-lime); color: var(--ap-ink) }
.node.hub small { color: var(--ap-ink); font-weight: 600 }
.lk { padding: 14px 16px; border-radius: 12px; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; border: 1px solid rgba(var(--ap-white-rgb),0.16); background: rgba(var(--ap-white-rgb),0.05); transition: border-color 0.4s ease, background-color 0.4s ease }
.lk strong { font-size: 16px; font-weight: 700 }
.lk small { font-size: 13px; color: rgba(var(--ap-white-rgb),0.7) }
.lk .state { margin-top: 6px; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; background: rgba(255,51,85,0.22); color: #FFA3B4; transition: background-color 0.4s ease, color 0.4s ease }
.lk .on-ap { display: none }
.lk:nth-child(2), .lk:nth-child(2) .state { transition-delay: 0.04s } .lk:nth-child(3), .lk:nth-child(3) .state { transition-delay: 0.08s } .lk:nth-child(4), .lk:nth-child(4) .state { transition-delay: 0.12s } .lk:nth-child(5), .lk:nth-child(5) .state { transition-delay: 0.16s } .lk:nth-child(6), .lk:nth-child(6) .state { transition-delay: 0.2s } .lk:nth-child(7), .lk:nth-child(7) .state { transition-delay: 0.24s } .lk:nth-child(8), .lk:nth-child(8) .state { transition-delay: 0.28s } .lk:nth-child(9), .lk:nth-child(9) .state { transition-delay: 0.32s }
[data-mode="ap"] .lk { border-color: rgba(var(--ap-lime-rgb),0.5); background: rgba(var(--ap-lime-rgb),0.08) }
[data-mode="ap"] .lk .state { background: rgba(var(--ap-lime-rgb),0.2); color: var(--ap-lime) }
[data-mode="ap"] .lk .on-ap { display: inline }
[data-mode="ap"] .lk .on-zelf { display: none }
[data-mode="zelf"] .hub { display: none !important }
[data-mode="ap"] .hub { animation: ap-fade 0.4s ease both }
.fa { flex: none; font-size: 26px; line-height: 1; color: rgba(var(--ap-white-rgb),0.6) }
@media (max-width: 991px) { .fa { rotate: 90deg } }
.pan { animation: ap-fade 0.4s ease both }

.tab { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 18px 0 8px; border-radius: 999px; border: 1px solid rgba(var(--ap-ink-rgb),0.16); background: var(--ap-white); color: var(--ap-ink); font-family: inherit; font-size: 15px; font-weight: 600; cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease }
.tab .code { width: 32px; height: 32px; border-radius: 999px; background: rgba(var(--ap-ink-rgb),0.07); display: grid; place-items: center; font-size: 11px; font-weight: 700 }
.tab:hover { border-color: var(--ap-ink) }
.tab[aria-pressed="true"] { background: var(--ap-ink); color: var(--ap-white); border-color: var(--ap-ink) }
.tab[aria-pressed="true"] .code { background: var(--ap-lime); color: var(--ap-ink) }
.tab.s { min-height: 44px; padding: 0 18px }

.step { text-align: left; padding: 22px 24px; border-radius: 14px; background: rgba(var(--ap-white-rgb),0.05); border: 1px solid rgba(var(--ap-white-rgb),0.16); color: var(--ap-white); font-family: inherit; cursor: pointer; display: flex; flex-direction: column; gap: 12px; transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease }
.step .num { font-size: 40px; line-height: 1; letter-spacing: -0.05em; font-weight: 700; color: rgba(var(--ap-white-rgb),0.42); transition: color 0.25s ease }
.step b { font-size: 19px; line-height: 1.2; letter-spacing: -0.02em; font-weight: 700 }
.step:hover { border-color: rgba(var(--ap-white-rgb),0.55) }
.step[aria-pressed="true"] { background: var(--ap-white); color: var(--ap-ink); border-color: var(--ap-white) }
.step[aria-pressed="true"] .num { color: var(--ap-green) }
.stepfill { width: 25%; height: 3px; border-radius: 3px; background: var(--ap-lime); transition: width 0.5s cubic-bezier(0.2,0.7,0.2,1) }
[data-step="2"] .stepfill { width: 50% } [data-step="3"] .stepfill { width: 75% } [data-step="4"] .stepfill { width: 100% }
.sp { margin-top: 12px; border-radius: 14px; padding: clamp(24px, 3vw, 40px); background: rgba(var(--ap-white-rgb),0.06); border: 1px solid rgba(var(--ap-white-rgb),0.18); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 28px 40px; animation: ap-fade 0.4s ease both }
.sp p { margin: 10px 0 0; font-size: 17px; color: rgba(var(--ap-white-rgb),0.9) }
.sp .eb { margin: 0; font-size: 13px; color: rgba(var(--ap-white-rgb),0.62) }
.sp .eb.g { color: var(--ap-lime) }

.doc { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 0 12px 0 16px; border-radius: 12px; border: 1px solid rgba(var(--ap-ink-rgb),0.1); background: var(--ap-white); color: var(--ap-ink); font-family: inherit; font-size: 16px; text-align: left; cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease }
.doc:hover { border-color: var(--ap-ink) }
.doc[aria-pressed="true"] { background: var(--ap-ink); color: var(--ap-white); border-color: var(--ap-ink) }
.pill { flex: none; padding: 5px 12px; border-radius: 999px; background: rgba(var(--ap-lime-rgb),0.42); font-size: 13px; font-weight: 600; color: var(--ap-ink) }
.pill.b { background: rgba(var(--ap-glow-rgb),0.1); color: var(--ap-green) }
.doc[aria-pressed="true"] .pill { background: var(--ap-lime); color: var(--ap-ink) }
.pv { animation: ap-fade 0.35s ease both }
.pv h3, .pv h4 { margin: 8px 0 0; font-size: 21px; line-height: 1.2; letter-spacing: -0.02em; font-weight: 700 }
.pv p { margin: 8px 0 0; font-size: 15px; line-height: 1.5 }
.pv .eb { margin: 0; font-size: 12px; color: var(--ap-green) }
.pv .bars { margin: 16px 0 10px; display: flex; flex-direction: column; gap: 8px }
.pv .bars span { height: 8px; border-radius: 4px; background: rgba(var(--ap-ink-rgb),0.1) }

.art { display: flex; align-items: flex-end; height: 190px; padding: 20px; border-radius: 10px; font-size: 56px; line-height: 0.95; letter-spacing: -0.05em; font-weight: 700 }
.faq { border-radius: 12px; background: var(--ap-white); border: 1px solid rgba(var(--ap-ink-rgb),0.08); transition: border-color 0.25s ease }
.faq:hover, .faq[open] { border-color: rgba(var(--ap-ink-rgb),0.32) }
.faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 64px; padding: 12px 16px 12px 22px; font-size: 18px; font-weight: 600; letter-spacing: -0.01em }
.faq summary::-webkit-details-marker { display: none }
.faq summary::after { content: "+"; flex: none; width: 34px; height: 34px; border-radius: 999px; background: rgba(var(--ap-ink-rgb),0.06); display: grid; place-items: center; font-size: 22px; font-weight: 400; line-height: 1; transition: rotate 0.25s ease, background-color 0.25s ease }
.faq[open] summary::after { rotate: 45deg; background: var(--ap-lime) }
.faq p { margin: 0; padding: 0 22px 22px; max-width: 720px; font-size: 16px; color: rgba(var(--ap-ink-rgb),0.72) }

.pl { margin: 22px 0 10px; font-size: 15px; font-weight: 600 }
.chips { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px }
.chip { display: inline-flex; align-items: center; gap: 10px; min-height: 42px; padding: 0 16px 0 10px; border-radius: 999px; background: rgba(var(--ap-ink-rgb),0.05); font-size: 15px; font-weight: 600; animation: ap-fade 0.45s ease both }
.chip b { font-weight: 700; color: var(--ap-green) }
.chip:nth-child(2) { animation-delay: 0.07s } .chip:nth-child(3) { animation-delay: 0.14s } .chip:nth-child(4) { animation-delay: 0.21s } .chip:nth-child(5) { animation-delay: 0.28s } .chip:nth-child(6) { animation-delay: 0.35s }
.ba { margin: 18px 0 22px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: 10px }
.risk, .safe { padding: 16px 18px; border-radius: 12px; min-height: 104px }
.risk { background: rgba(var(--ap-alert-rgb),0.07) }
.safe { background: rgba(var(--ap-lime-rgb),0.32) }
.ba span { display: block; font-size: 13px; color: rgba(var(--ap-ink-rgb),0.68) }
.ba strong { display: block; margin: 4px 0 2px; font-size: clamp(24px, 2.2vw, 30px); line-height: 1.1; letter-spacing: -0.03em; font-weight: 700 }
.risk strong { color: var(--ap-alert) }

.insp { margin-top: 16px; padding: 18px 20px; border-radius: 12px; background: var(--ap-ink); color: var(--ap-white); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 28px }
.insp .q { margin: 8px 0 0; font-size: clamp(19px, 1.7vw, 23px); line-height: 1.25; letter-spacing: -0.02em; font-weight: 700; font-style: italic }
.insp .qt { margin: 4px 0 0; font-size: 15px; color: rgba(var(--ap-white-rgb),0.74) }

@keyframes pbar-in { from { opacity: 0; visibility: hidden; transform: translateY(20px) } to { opacity: 1; visibility: visible; transform: none } }
.pbar { position: sticky; bottom: 16px; z-index: 40; width: max-content; max-width: calc(100% - 32px); margin: 0 auto 28px; padding: 8px 8px 8px 22px; border-radius: 999px; background: var(--ap-ink); border: 1px solid rgba(var(--ap-white-rgb),0.22); color: var(--ap-white); display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 18px; font-size: 15px; box-shadow: 0 16px 40px rgba(var(--ap-ink-rgb),0.28) }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: scroll()) { .pbar { animation: pbar-in linear both; animation-timeline: scroll(root); animation-range: 520px 760px } }
}

.navlinks { align-self: stretch }
.has-dd { display: flex; align-items: center; height: 100% }
.has-dd > .nl { padding-right: 14px }
.has-dd > .nl::before { content: ""; position: absolute; right: 0; top: 50%; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; rotate: 45deg; translate: 0 -75% }
.panel { position: absolute; left: 0; right: 0; top: 100%; padding-top: 10px; opacity: 0; visibility: hidden; translate: 0 -6px; transition: opacity 0.2s ease, translate 0.2s ease, visibility 0.2s }
.has-dd:hover .panel, .has-dd:focus-within .panel { opacity: 1; visibility: visible; translate: 0 0 }
.panel-in { border-radius: 14px; background: var(--ap-white); color: var(--ap-ink); box-shadow: 0 24px 60px rgba(var(--ap-ink-rgb),0.16); border: 1px solid rgba(var(--ap-ink-rgb),0.06); padding: 22px; display: flex; flex-wrap: wrap; gap: 20px 32px }
.ddg { flex: 3 1 480px; min-width: 0 }
.ddg .eb { padding: 0 12px 10px; color: rgba(var(--ap-ink-rgb),0.56) }
.ddg div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 12px }
.ddi { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; transition: background-color 0.15s ease }
.ddi:hover { background: rgba(var(--ap-ink-rgb),0.05) }
.ddi .code { flex: none; width: 36px; height: 36px; border-radius: 999px; background: rgba(var(--ap-glow-rgb),0.08); color: var(--ap-green); display: grid; place-items: center; font-size: 11px; font-weight: 700 }
.ddi strong { display: block; font-size: 16px; font-weight: 600 }
.ddi small { display: block; font-size: 13px; color: rgba(var(--ap-ink-rgb),0.62) }
.ddside { flex: 1 1 230px; min-width: 0; border-radius: 12px; padding: 22px; background: var(--ap-ink); color: var(--ap-white); display: flex; flex-direction: column; align-items: flex-start; gap: 10px }
.ddside p { margin: 0; font-size: 14px; color: rgba(var(--ap-white-rgb),0.76) }
.ddside strong { font-size: 19px; line-height: 1.2; letter-spacing: -0.02em }

.burger { display: none; width: 44px; height: 44px; padding: 0; border-radius: 999px; border: 1px solid color-mix(in srgb, currentColor 26%, transparent); background: transparent; color: inherit; cursor: pointer; place-items: center; align-content: center; gap: 6px }
.burger span { display: block; width: 18px; height: 2px; border-radius: 2px; background: currentColor }
@media (max-width: 991px) { .burger { display: grid } }
@media (max-width: 478px) { .navlogin { display: none !important } }
@keyframes mm-in { from { opacity: 0; transform: scale(0.96) translateY(-8px) } to { opacity: 1; transform: none } }
.mm { position: fixed; inset: 8px; z-index: 100; border-radius: 16px; padding: 14px 20px 20px; display: flex; flex-direction: column; overflow-y: auto; color: var(--ap-white); background: radial-gradient(90% 60% at 0% 100%, rgba(var(--ap-glow-rgb),0.6) 0%, rgba(var(--ap-glow-rgb),0) 62%), var(--ap-ink); box-shadow: 0 30px 80px rgba(var(--ap-ink-rgb),0.4); animation: mm-in 0.3s cubic-bezier(0.2,0.7,0.2,1) both; transform-origin: top right }
.mm a, .mm a:hover { color: var(--ap-white); text-decoration: none }
.mm .btn-g, .mm .btn-g:hover { color: var(--ap-ink); justify-content: center }
.mm-x { width: 44px; height: 44px; padding: 0; border-radius: 999px; border: 1px solid rgba(var(--ap-white-rgb),0.26); background: transparent; color: var(--ap-white); font-family: inherit; font-size: 26px; line-height: 1; cursor: pointer; display: grid; place-items: center }
.mm-lands { margin-top: 10px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px }
.mm-land { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 12px 0 8px; border-radius: 12px; border: 1px solid rgba(var(--ap-white-rgb),0.18); background: rgba(var(--ap-white-rgb),0.06); font-size: 16px; font-weight: 600; animation: ap-fade 0.4s ease both }
.mm-land .code { width: 34px; height: 34px; border-radius: 999px; background: var(--ap-lime); color: var(--ap-ink); display: grid; place-items: center; font-size: 11px; font-weight: 700 }
.mm-links { list-style: none; margin: 18px 0 0; padding: 0 }
.mm-links li { animation: ap-fade 0.45s ease both }
.mm-links li:nth-child(2) { animation-delay: 0.05s } .mm-links li:nth-child(3) { animation-delay: 0.1s } .mm-links li:nth-child(4) { animation-delay: 0.15s } .mm-links li:nth-child(5) { animation-delay: 0.2s }
.mm-links a { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; padding: 8px 0; border-top: 1px solid rgba(var(--ap-white-rgb),0.12) }
.mm-links a::after { content: "→"; font-size: 20px; color: var(--ap-lime) }
.mm-links strong { display: block; font-size: 21px; line-height: 1.15; letter-spacing: -0.02em; font-weight: 600 }
.mm-links small { display: block; margin-top: 2px; font-size: 13px; color: rgba(var(--ap-white-rgb),0.66) }
.mm-foot { margin-top: auto; padding-top: 18px; display: flex; flex-direction: column; gap: 10px }
.mm-pill { flex: 1; display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 12px; border-radius: 999px; border: 1px solid rgba(var(--ap-white-rgb),0.26); font-size: 15px; font-weight: 600 }

.hero { margin: -76px 14px 0; border-radius: 16px; padding: clamp(150px, 13vw, 190px) clamp(20px, 4vw, 56px) clamp(64px, 6vw, 96px); color: var(--ap-white); background: radial-gradient(120% 90% at 108% -10%, rgba(var(--ap-glow-rgb),0.7) 0%, rgba(var(--ap-glow-rgb),0) 56%), radial-gradient(80% 90% at -10% 110%, rgba(var(--ap-lime-rgb),0.5) 0%, rgba(var(--ap-lime-rgb),0) 58%), var(--ap-ink) }
.hero h1 { margin: 20px 0 0; max-width: 900px; font-size: clamp(36px, 4.2vw, 60px); line-height: 1.04; letter-spacing: -0.04em; font-weight: 700 }
.hero h1 em { font-style: italic }
.hero .sub { margin: 22px 0 0; max-width: 660px; font-size: clamp(17px, 1.3vw, 19px); color: rgba(var(--ap-white-rgb),0.86) }
.bc { margin: 0; font-size: 14px; color: rgba(var(--ap-white-rgb),0.72) }
.bc a, .bc a:hover { color: rgba(var(--ap-white-rgb),0.72) }
.bc span { color: var(--ap-white) }
.by { margin: 22px 0 0; font-size: 14px; color: rgba(var(--ap-white-rgb),0.7) }
.kort { flex: 1 1 360px; min-width: 0; border-radius: 14px; padding: clamp(22px, 2.4vw, 32px); background: var(--ap-white); color: var(--ap-ink) }
.kort h2 { margin: 10px 0 0; font-size: 20px; line-height: 1.25; letter-spacing: -0.02em; font-weight: 700 }
.kort ul { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; font-size: 16px }
.kort dl { margin: 16px 0 0; display: grid; grid-template-columns: auto 1fr; gap: 10px 18px; font-size: 16px }
.kort dt { font-weight: 700 } .kort dd { margin: 0; color: rgba(var(--ap-ink-rgb),0.76) }
.sec { padding: clamp(64px, 7vw, 104px) clamp(16px, 3vw, 32px) }
.sec.t0 { padding-top: 0 }
.navy { margin: 0 14px; border-radius: 16px; padding: clamp(64px, 7vw, 104px) clamp(16px, 3vw, 32px); color: var(--ap-white); background: radial-gradient(80% 90% at 0% 100%, rgba(var(--ap-glow-rgb),0.55) 0%, rgba(var(--ap-glow-rgb),0) 60%), var(--ap-ink) }
.grid3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 16px }
.band { border-radius: 16px; padding: clamp(28px, 3.6vw, 48px); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 40px }
.band h2 { margin: 8px 0 0; font-size: clamp(28px, 2.8vw, 40px); line-height: 1.06; letter-spacing: -0.045em; font-weight: 700 }
.rel { display: flex; flex-direction: column; gap: 6px; min-height: 150px; padding: 24px; color: var(--ap-ink); text-decoration: none }
.rel:hover { color: var(--ap-ink) }
.rel strong { font-size: 20px; line-height: 1.2; letter-spacing: -0.02em; font-weight: 700 }
.rel small { font-size: 15px; color: rgba(var(--ap-ink-rgb),0.68) }
.rel .ar { margin-top: auto; padding-top: 14px }

.ob { border-radius: 16px; padding: clamp(24px, 3vw, 40px); display: flex; flex-wrap: wrap; gap: 24px 48px; transition: translate 0.25s ease, box-shadow 0.25s ease }
.ob:hover { translate: 0 -3px; box-shadow: 0 16px 36px rgba(var(--ap-ink-rgb),0.08) }
.ob .term { flex: 0 1 230px; min-width: 0; font-size: clamp(40px, 4.4vw, 60px); line-height: 0.95; letter-spacing: -0.05em; font-weight: 700; color: var(--ap-green) }
.ob .body { flex: 2 1 380px; min-width: 0 }
.ob h3 { margin: 0; font-size: clamp(21px, 1.9vw, 26px); line-height: 1.15; letter-spacing: -0.03em; font-weight: 700 }
.ob .body p { margin: 12px 0 0; font-size: 16px; color: rgba(var(--ap-ink-rgb),0.72) }
.ob .we { flex: 1 1 260px; min-width: 0; border-radius: 12px; padding: 20px 22px; background: rgba(var(--ap-lime-rgb),0.32) }
.ob .we p { margin: 8px 0 0; font-size: 16px }
.ob .we .eb { margin: 0; font-size: 12px }
.tl { position: relative; display: flex; gap: 22px; padding: 0 0 30px }
.tl:last-child { padding-bottom: 0 }
.tl::before { content: ""; position: absolute; left: 21px; top: 44px; bottom: 0; width: 2px; background: rgba(var(--ap-white-rgb),0.2) }
.tl:last-child::before { display: none }
.tl .nr { flex: none; width: 44px; height: 44px; border-radius: 999px; background: var(--ap-lime); color: var(--ap-ink); display: grid; place-items: center; font-size: 17px; font-weight: 700; position: relative }
.tl strong { display: block; padding-top: 6px; font-size: 20px; letter-spacing: -0.02em; font-weight: 700 }
.tl small { display: block; margin-top: 4px; font-size: 16px; color: rgba(var(--ap-white-rgb),0.76) }
.need { margin-top: 30px; border-radius: 14px; padding: 24px; background: var(--ap-white); color: var(--ap-ink) }
.need ul { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; font-size: 16px }

.prose { max-width: 760px }
.prose h2 { margin: 44px 0 0; font-size: clamp(24px, 2.4vw, 32px); line-height: 1.15; letter-spacing: -0.03em; font-weight: 700 }
.prose h2:first-child { margin-top: 0 }
.prose p, .prose li { font-size: 18px; line-height: 1.65; color: rgba(var(--ap-ink-rgb),0.8) }
.prose p { margin: 14px 0 0 }
.prose ul, .prose ol { margin: 14px 0 0; padding-left: 22px }
.prose li { margin-top: 6px }
.prose .faq { margin-top: 10px }
.prose .faq p { font-size: 16px; line-height: 1.55 }
.ans { border-radius: 14px; padding: 24px 26px; background: rgba(var(--ap-lime-rgb),0.32) }
.ans p { margin: 8px 0 0; font-size: 20px; line-height: 1.45; letter-spacing: -0.01em; font-weight: 500; color: var(--ap-ink) }
.side { flex: 1 1 300px; min-width: 0; position: sticky; top: 100px; border-radius: 16px; padding: 28px }
.side h2 { margin: 10px 0 0; font-size: 24px; line-height: 1.15; letter-spacing: -0.03em; font-weight: 700 }
.side ul { list-style: none; margin: 18px 0 22px; padding: 0; display: flex; flex-direction: column; gap: 12px; font-size: 16px }
.src { margin: 40px 0 0; padding-top: 20px; border-top: 1px solid rgba(var(--ap-ink-rgb),0.1); font-size: 14px; color: rgba(var(--ap-ink-rgb),0.62) }
.tblw { overflow-x: auto; border-radius: 14px; background: var(--ap-white); border: 1px solid rgba(var(--ap-ink-rgb),0.07) }
.tbl { width: 100%; min-width: 760px; border-collapse: collapse; font-size: 15px }
.tbl th, .tbl td { text-align: left; padding: 15px 18px; border-bottom: 1px solid rgba(var(--ap-ink-rgb),0.08); vertical-align: top }
.tbl thead th { font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(var(--ap-ink-rgb),0.6) }
.tbl tbody th { font-weight: 700 }
.tbl tr:last-child th, .tbl tr:last-child td { border-bottom: 0 }
.flt[data-f="fr"] .fi:not([data-l~="fr"]):not([data-l~="all"]), .flt[data-f="be"] .fi:not([data-l~="be"]):not([data-l~="all"]), .flt[data-f="lu"] .fi:not([data-l~="lu"]):not([data-l~="all"]), .flt[data-f="de"] .fi:not([data-l~="de"]):not([data-l~="all"]) { display: none !important }
.gt { margin: 0; padding: 22px 24px; border-radius: 14px }
.gt dt { font-size: 20px; letter-spacing: -0.02em; font-weight: 700 }
.gt dt small { margin-left: 8px; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; color: var(--ap-green) }
.gt dd { margin: 8px 0 0; font-size: 16px; color: rgba(var(--ap-ink-rgb),0.74) }
.person { padding: 24px; border-radius: 14px }
.person .ph { width: 64px; height: 64px; border-radius: 999px; background: rgba(var(--ap-ink-rgb),0.08) }

.foot a { color: rgba(var(--ap-white-rgb),0.78); text-decoration: none; transition: color 0.2s ease }
.foot a:hover { color: var(--ap-lime) }
.foot ul { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; font-size: 15px }
.fpill, .fpill:hover { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid rgba(var(--ap-white-rgb),0.24); color: var(--ap-white) !important; font-size: 15px; font-weight: 600 }
.fpill::after { content: ""; width: 7px; height: 7px; border-radius: 999px; background: var(--ap-lime) }

/* ==========================================================================
   WordPress / Unblock additions
   ========================================================================== */

body { font-family: 'DM Sans', system-ui, sans-serif; color: var(--ap-ink); font-size: 17px; line-height: 1.55; -webkit-font-smoothing: antialiased }
.wp-site-blocks { overflow-x: clip }
.wp-block-template-part { display: contents }
img, svg { max-width: 100% }
img { height: auto }
span[data-bind] { display: inline; margin: 0; font: inherit; color: inherit; letter-spacing: inherit }

/* WordPress flow-layout rules (:root :where(.is-layout-flow) > :first-child) must not reset the design margins. */
body .wp-site-blocks .hero { margin: -76px 14px 0 }
body .wp-site-blocks .navy { margin: 0 14px }
body .wp-site-blocks .pbar { margin: 0 auto 28px }

.skip-link { position: absolute; left: 16px; top: -80px; z-index: 300; padding: 12px 18px; border-radius: 999px; background: var(--ap-lime); color: var(--ap-ink); font-weight: 700; text-decoration: none; transition: top 0.2s ease }
.skip-link:focus { top: 12px; color: var(--ap-ink) }

.nav .logo { font-size: 22px; font-weight: 700; letter-spacing: -0.04em }
.nl[aria-current="page"] { opacity: 1 }
.nl[aria-current="page"]::after { scale: 1 1 }
.mm-links a[aria-current="page"] strong { color: var(--ap-lime) }

/* Mobile menu: closed until opened; shown in flow inside the editor. */
.mm:not(.is-open) { display: none }
html.mm-lock { overflow: hidden }
.editor-styles-wrapper .mm { display: flex; position: relative; inset: auto; margin: 16px; animation: none }

/* State switching (only with JavaScript; without it every panel shows). */
.js[data-land="fr"] [data-land-panel]:not([data-land-panel="fr"]),
.js[data-land="be"] [data-land-panel]:not([data-land-panel="be"]),
.js[data-land="lu"] [data-land-panel]:not([data-land-panel="lu"]),
.js[data-land="de"] [data-land-panel]:not([data-land-panel="de"]),
.js [data-mode="zelf"] [data-mode-panel="ap"],
.js [data-mode="ap"] [data-mode-panel="zelf"],
.js [data-step="1"] [data-step-panel]:not([data-step-panel="1"]),
.js [data-step="2"] [data-step-panel]:not([data-step-panel="2"]),
.js [data-step="3"] [data-step-panel]:not([data-step-panel="3"]),
.js [data-step="4"] [data-step-panel]:not([data-step-panel="4"]),
.js [data-doc="sipsi"] [data-doc-panel]:not([data-doc-panel="sipsi"]),
.js [data-doc="btp"] [data-doc-panel]:not([data-doc-panel="btp"]),
.js [data-doc="a1"] [data-doc-panel]:not([data-doc-panel="a1"]),
.js [data-doc="ppsps"] [data-doc-panel]:not([data-doc-panel="ppsps"]),
.js [data-doc="contract"] [data-doc-panel]:not([data-doc-panel="contract"]),
.js [data-doc="uren"] [data-doc-panel]:not([data-doc-panel="uren"]),
.js [data-doc]:not([data-doc="uren"]) [data-sim-done] { display: none }

/* Request form */
.fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 12px }
.fld { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 600 }
.fld.full { grid-column: 1 / -1 }
.inp { width: 100%; min-height: 48px; padding: 0 14px; border-radius: 10px; border: 1px solid rgba(var(--ap-ink-rgb),0.2); background: var(--ap-white); font-family: inherit; font-size: 16px; font-weight: 400; color: var(--ap-ink) }
textarea.inp { min-height: 116px; padding: 12px 14px; line-height: 1.5; resize: vertical }
.inp:focus-visible { outline: 2px solid var(--ap-green); outline-offset: 2px }
button.btn:disabled { opacity: 0.6; cursor: progress }
.form-status { margin: 16px 0 0; padding: 14px 18px; border-radius: 12px; font-size: 15px; font-weight: 600 }
.form-status:empty { display: none }
.form-status.ok { background: rgba(var(--ap-lime-rgb),0.32); color: var(--ap-ink) }
.form-status.err { background: rgba(var(--ap-alert-rgb),0.08); color: var(--ap-alert-ink) }
.form-note { margin: 12px 0 0; font-size: 13px; color: rgba(var(--ap-ink-rgb),0.6) }
.unbk-form-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden }

/* Article (single post) */
.prose .wp-block-post-content > :first-child { margin-top: 0 }
.prose .wp-block-post-content h2 { margin-top: 44px }
.prose .ans + .wp-block-post-content { margin-top: 36px }
.prose a { color: var(--ap-green) }
.prose strong { color: var(--ap-ink) }
.toc li a { color: var(--ap-ink); text-decoration: none; border-bottom: 1px solid rgba(var(--ap-ink-rgb),0.18) }
.toc li a:hover { border-color: var(--ap-ink) }
.author { margin-top: 32px; border-radius: 14px; padding: 22px; display: flex; align-items: center; gap: 18px }
.author .ph { flex: none; width: 64px; height: 64px; border-radius: 999px; background: rgba(var(--ap-ink-rgb),0.08) }
.author strong { display: block; font-size: 17px }
.author span span { display: block; font-size: 15px; color: rgba(var(--ap-ink-rgb),0.68) }

/* Archive / search / 404 */
.empty { padding: 28px; border-radius: 14px; font-size: 17px }
.legal .prose p { color: rgba(var(--ap-ink-rgb),0.8) }

/* Breakpoints: 1366 / 991 / 767 / 622 / 478 (same set as the Unblock editor). */
@media (max-width: 1366px) {
  .nav { margin-left: 32px; margin-right: 32px }
  .navlinks { gap: 22px !important }
}
@media (max-width: 991px) {
  .nav { margin-left: 24px; margin-right: 24px }
}
@media (max-width: 767px) {
  .foot { margin: 0 14px 14px !important }
  .pbar { padding: 6px 6px 6px 16px; gap: 6px 12px; font-size: 14px }
  .ob .term { flex-basis: 100% }
}
@media (max-width: 622px) {
  .nav { padding-left: 18px }
}
@media (max-width: 478px) {
  .nav { margin-left: 16px; margin-right: 16px }
  .btn-lg { min-height: 50px; padding: 0 18px 0 22px; font-size: 15px }
}

/* ==========================================================================
   v2: dynamic sections (begrippen, FAQ) and legal pages
   ========================================================================== */
.gt dt small { text-transform: uppercase }
.gt dt small[data-land="all"]::after { content: "Alle landen" }
.gt dt small[data-land="fr"]::after { content: "FR" }
.gt dt small[data-land="be"]::after { content: "BE" }
.gt dt small[data-land="lu"]::after { content: "LU" }
.gt dt small[data-land="de"]::after { content: "DE" }
.gt dd a[href=""], .gt dd a:not([href]) { display: none }
.legal .prose > * + * { margin-top: 14px }
.legal .prose strong { color: var(--ap-ink) }
.legal .prose ul, .legal .prose ol { padding-left: 22px }

/* 09-10-2026 feedback: monochrome logo, bright-blue primary buttons (same blue as the Feedback tab), four fine cards. */
:root { --ap-blue: #003CFB; --ap-blue-rgb: 0,60,251; --ap-blue-hover: #0030CC }
.tld, .nav .tld, .mm .tld, .foot .tld { color: inherit !important; animation: none !important }
.btn-g, .btn-g:hover, .nav .btn-g, .nav .btn-g:hover, .mm .btn-g, .mm .btn-g:hover { background: var(--ap-blue); color: var(--ap-white) }
.btn-g:hover, .nav .btn-g:hover, .mm .btn-g:hover { background: var(--ap-blue-hover) }
.btn-g, .btn-g:hover { border-color: rgba(var(--ap-white-rgb),0.45) }
.fines .fine .n { font-size: clamp(36px, 3.3vw, 48px) }

/* 09-10-2026 feedback: practice case (real ITM case) instead of the placeholder quote. */
.case { padding: 0; display: flex; flex-wrap: wrap; border-radius: 16px; overflow: hidden; background: var(--ap-white); border: 1px solid rgba(var(--ap-ink-rgb),0.07) }
.case-fig { flex: 1 1 320px; min-width: 0; padding: clamp(28px, 4vw, 48px); display: flex; flex-direction: column; justify-content: center; gap: 10px; background: rgba(var(--ap-alert-rgb),0.06) }
.case-fig .eb { color: var(--ap-alert-ink) }
.case-amt { margin: 6px 0 0; font-size: clamp(48px, 5.6vw, 76px); line-height: 1; letter-spacing: -0.05em; font-weight: 700; color: var(--ap-alert) }
.case-amt s { text-decoration: none; background: linear-gradient(currentColor, currentColor) no-repeat 0 56% / 100% 0.08em }
.case-lbl { margin: 0; font-size: 16px; color: rgba(var(--ap-ink-rgb),0.72) }
.case-tag { align-self: flex-start; margin: 8px 0 0; display: inline-flex; align-items: center; gap: 10px; padding: 7px 16px 7px 7px; border-radius: 999px; background: var(--ap-ink); color: var(--ap-white); font-size: 15px; font-weight: 700 }
.case-body { flex: 2 1 420px; min-width: 0; padding: clamp(28px, 4vw, 56px) }
.case-mark { display: block; color: var(--ap-green) }
.case-q { margin: 18px 0 0; max-width: 680px; font-size: clamp(21px, 2vw, 27px); line-height: 1.35; letter-spacing: -0.02em; font-weight: 500 }
.case-list { list-style: none; margin: 24px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 24px; font-size: 16px; font-weight: 600 }
.case-by { margin: 24px 0 0; font-size: 14px; color: rgba(var(--ap-ink-rgb),0.6) }
@keyframes case-strike { from { background-size: 0 0.08em } to { background-size: 100% 0.08em } }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) { .case-amt s { animation: case-strike linear both; animation-timeline: view(); animation-range: entry 60% cover 40% } }
}
.ans .ar { margin-top: 14px; color: var(--ap-ink) }

/* 09-10-2026: portal section, one online dossier with a before/after slider (synced block). */
.pt-grid { display: flex; flex-wrap: wrap; align-items: center; gap: 40px clamp(32px, 5vw, 72px) }
.pt-text { flex: 1 1 400px; min-width: 0 }
.pt-eb { color: var(--ap-green) }
.pt-text .h2 { margin-top: 14px }
.pt-list { list-style: none; margin: 18px 0 0; padding: 0 }
.pt-cta { margin-top: 26px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px }
.pt-cta .ar { color: var(--ap-ink) }
.pt-fig { flex: 1.15 1 460px; min-width: 0; margin: 0 }
.pt-cap { margin: 12px 0 0; font-size: 13px; text-align: center; color: rgba(var(--ap-ink-rgb),0.56) }
.cmp { --pos: 50%; position: relative; height: clamp(450px, 36vw, 520px); border-radius: 16px; overflow: hidden; border: 1px solid rgba(var(--ap-ink-rgb),0.1); box-shadow: 0 24px 60px rgba(var(--ap-ink-rgb),0.12); background: var(--ap-white); user-select: none }
.cmp-pane { position: absolute; inset: 0; margin: 0 }
.cmp-before { background: linear-gradient(rgba(var(--ap-ink-rgb),0.07), rgba(var(--ap-ink-rgb),0.07)), var(--ap-white) }
.cmp-tag { position: absolute; top: 14px; left: 14px; z-index: 2; margin: 0; padding: 5px 12px; border-radius: 999px; background: rgba(var(--ap-alert-rgb),0.12); color: var(--ap-alert-ink); font-size: 12px; font-weight: 700 }
.mess { position: absolute; margin: 0; max-width: 60%; padding: 10px 14px; border-radius: 12px; background: var(--ap-white); box-shadow: 0 8px 22px rgba(var(--ap-ink-rgb),0.1); font-size: 13px; line-height: 1.35; color: var(--ap-ink) }
.mess b { display: block; margin-bottom: 2px; font-size: 12px; font-weight: 600; color: rgba(var(--ap-ink-rgb),0.55) }
.mess.bub { border-radius: 16px 16px 16px 4px; background: rgba(var(--ap-lime-rgb),0.55) }
.mess.miss { background: rgba(var(--ap-alert-rgb),0.1); color: var(--ap-alert-ink); font-weight: 700; box-shadow: none }
.m1 { top: 14%; left: 5%; rotate: -3deg }
.m2 { top: 9%; right: 5%; rotate: 3deg }
.m3 { top: 50%; right: 7%; rotate: -2deg }
.m4 { top: 68%; left: 7%; rotate: 2deg }
.m5 { bottom: 6%; right: 5%; rotate: -2deg }
.file { position: absolute; margin: 0; display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 10px; background: var(--ap-white); border: 1px solid rgba(var(--ap-ink-rgb),0.12); font-size: 12px; font-weight: 600; color: var(--ap-ink); white-space: nowrap }
.file::before { content: ""; flex: none; width: 13px; height: 16px; border-radius: 3px; background: rgba(var(--ap-alert-rgb),0.7) }
.f1 { top: 34%; left: 8%; rotate: -4deg }
.f2 { top: 41%; left: 22%; rotate: 3deg }
.f3 { top: 49%; left: 10%; rotate: -1deg }
.cmp-after { clip-path: inset(0 0 0 var(--pos)); padding: 16px; background: var(--ap-bg) }
.app { height: 100%; border-radius: 12px; background: var(--ap-white); border: 1px solid rgba(var(--ap-ink-rgb),0.08); display: flex; flex-direction: column; overflow: hidden }
.app-bar { margin: 0; display: flex; align-items: center; gap: 6px; padding: 10px 12px; border-bottom: 1px solid rgba(var(--ap-ink-rgb),0.08); font-size: 12px; color: rgba(var(--ap-ink-rgb),0.6) }
.app-bar i { flex: none; width: 9px; height: 9px; border-radius: 999px; background: rgba(var(--ap-ink-rgb),0.14) }
.app-bar span { margin-left: 6px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 3px 10px; border-radius: 999px; background: rgba(var(--ap-ink-rgb),0.05) }
.app-bar b { flex: none; margin-left: auto; padding: 4px 10px; border-radius: 999px; background: var(--ap-ink); color: var(--ap-white); font-size: 11px }
.app-main { flex: 1; min-height: 0; padding: 16px; display: flex; flex-direction: column; gap: 12px }
.app-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px }
.app-head p { margin: 0 }
.app-head strong { display: block; font-size: 18px; letter-spacing: -0.02em }
.app-head small { display: block; font-size: 12px; color: rgba(var(--ap-ink-rgb),0.6) }
.app-ok { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px 4px 4px; border-radius: 999px; background: rgba(var(--ap-lime-rgb),0.45); font-size: 12px; font-weight: 700 }
.app-ok .tick { width: 20px; height: 20px }
.app-tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px }
.app-tiles li { padding: 10px 12px; border-radius: 10px; background: rgba(var(--ap-ink-rgb),0.04) }
.app-tiles small { display: block; font-size: 11px; color: rgba(var(--ap-ink-rgb),0.6) }
.app-tiles strong { display: block; margin-top: 2px; font-size: 14px }
.app-docs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column }
.app-docs li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 2px; border-bottom: 1px solid rgba(var(--ap-ink-rgb),0.07); font-size: 13px; font-weight: 600 }
.app-docs li:last-child { border-bottom: 0 }
.app-docs em { flex: none; padding: 3px 9px; border-radius: 999px; background: rgba(var(--ap-blue-rgb),0.1); color: var(--ap-blue); font-size: 11px; font-style: normal; font-weight: 700 }
.cmp-handle { position: absolute; top: 0; bottom: 0; left: var(--pos); z-index: 3; width: 2px; translate: -1px 0; background: var(--ap-white); box-shadow: 0 0 0 1px rgba(var(--ap-ink-rgb),0.12); pointer-events: none }
.cmp-handle span { position: absolute; top: 50%; left: 50%; width: 46px; height: 46px; translate: -50% -50%; border-radius: 999px; background: var(--ap-blue); box-shadow: 0 8px 22px rgba(var(--ap-blue-rgb),0.4); display: grid; place-items: center }
.cmp-handle span::before { content: "‹  ›"; white-space: pre; color: var(--ap-white); font-size: 20px; font-weight: 700; line-height: 1 }
.cmp-range { position: absolute; inset: 0; z-index: 4; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; -webkit-appearance: none; appearance: none }
.cmp:has(.cmp-range:focus-visible) .cmp-handle span { outline: 3px solid var(--ap-lime); outline-offset: 3px }
@keyframes cmp-hint { 0%, 100% { translate: -50% -50% } 50% { translate: calc(-50% + 10px) -50% } }
@media (prefers-reduced-motion: no-preference) { .cmp:not(.is-used) .cmp-handle span { animation: cmp-hint 1.4s ease-in-out 1s 3 } }
@media (max-width: 622px) { .m2 { top: 60%; right: 4% } .m4 { top: 76%; left: 5% } .m3, .m5 { display: none } }
@media (max-width: 478px) { .mess { max-width: 72%; font-size: 12px } .app-main { padding: 12px; gap: 10px } }
.cmp-before { z-index: 0 } .cmp-after { z-index: 1 }

/* 13-10-2026: blog. Archive (featured case, cards, filter per land) and article (key figure, lessons, sources). */
.chips { display: flex; flex-wrap: wrap; gap: 8px }
.bfeat { margin-top: 32px; display: flex; flex-wrap: wrap; border-radius: 16px; overflow: hidden; background: var(--ap-white); border: 1px solid rgba(var(--ap-ink-rgb),0.07); color: var(--ap-ink); text-decoration: none; transition: translate 0.25s ease, box-shadow 0.25s ease }
.bfeat:hover { color: var(--ap-ink); translate: 0 -3px; box-shadow: 0 16px 36px rgba(var(--ap-ink-rgb),0.1) }
.bfig { flex: 1 1 340px; min-width: 0; min-height: 300px; padding: clamp(28px, 3.6vw, 48px); display: flex; flex-direction: column; justify-content: flex-end; gap: 12px; color: var(--ap-white); background: radial-gradient(110% 90% at 100% 0%, rgba(var(--ap-alert-rgb),0.42) 0%, rgba(var(--ap-alert-rgb),0) 62%), var(--ap-ink) }
.bfig-n { margin: 0; font-size: clamp(52px, 5.6vw, 84px); line-height: 0.92; letter-spacing: -0.05em; font-weight: 700 }
.bfig-l { margin: 0; max-width: 320px; font-size: 16px; line-height: 1.4; color: rgba(var(--ap-white-rgb),0.78) }
.bfeat-body { flex: 1.5 1 420px; min-width: 0; padding: clamp(28px, 3.6vw, 48px); display: flex; flex-direction: column; align-items: flex-start }
.bfeat-t { margin: 18px 0 0; max-width: 640px; font-size: clamp(26px, 2.6vw, 36px); line-height: 1.1; letter-spacing: -0.035em; font-weight: 700 }
.bfeat-x { margin: 14px 0 0; max-width: 620px; font-size: 18px; line-height: 1.55; color: rgba(var(--ap-ink-rgb),0.72) }
.bfeat-body .ar { margin-top: auto; padding-top: 24px }
.bmeta { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-size: 14px; font-weight: 600; color: rgba(var(--ap-ink-rgb),0.62) }
.bchip { display: inline-flex; align-items: center; min-height: 26px; padding: 0 11px; border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; background: rgba(var(--ap-ink-rgb),0.07); color: var(--ap-ink) }
.bchip[data-soort="Praktijkzaak"] { background: rgba(var(--ap-alert-rgb),0.1); color: var(--ap-alert-ink) }
.bchip[data-soort="Rechtspraak"] { background: rgba(var(--ap-lime-rgb),0.5) }
.bchip[data-soort="Regelgeving"] { background: rgba(var(--ap-blue-rgb),0.1); color: var(--ap-blue) }
.bchip:empty { display: none }
.bland[data-land="all"]::after { content: "Europa" }
.bland[data-land="fr"]::after { content: "Frankrijk" }
.bland[data-land="be"]::after { content: "België" }
.bland[data-land="lu"]::after { content: "Luxemburg" }
.bland[data-land="de"]::after { content: "Duitsland" }
.bdate::before { content: "·"; margin-right: 12px }
.bgrid { margin-top: 16px; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 16px }
.bcard { display: flex; flex-direction: column; padding: 10px; background: var(--ap-white); border: 1px solid rgba(var(--ap-ink-rgb),0.07); color: var(--ap-ink); text-decoration: none }
.bcard:hover { color: var(--ap-ink) }
.bcard-fig { min-height: 168px; padding: 22px; border-radius: 10px; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; background: rgba(var(--ap-alert-rgb),0.06) }
.bcard-n { margin: 0; font-size: clamp(40px, 3.6vw, 54px); line-height: 0.95; letter-spacing: -0.05em; font-weight: 700; color: var(--ap-alert) }
.bcard-l { margin: 0; font-size: 14px; line-height: 1.4; color: rgba(var(--ap-ink-rgb),0.66) }
.bcard-body { flex: 1; padding: 18px 12px 14px; display: flex; flex-direction: column; align-items: flex-start }
.bcard-t { margin: 12px 0 0; font-size: 21px; line-height: 1.2; letter-spacing: -0.02em; font-weight: 700 }
.bcard-x { margin: 10px 0 0; font-size: 15px; line-height: 1.5; color: rgba(var(--ap-ink-rgb),0.68); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden }
.bcard .ar { margin-top: auto; padding-top: 18px }
.bfig:has(.bfig-n:empty), .bcard-fig:has(.bcard-n:empty), .bkern:has(.bkern-n:empty) { display: none }
.bband { color: var(--ap-white); background: radial-gradient(80% 140% at 100% 0%, rgba(var(--ap-alert-rgb),0.34) 0%, rgba(var(--ap-alert-rgb),0) 62%), var(--ap-ink) }
.bband .eb { color: var(--ap-lime) }
.bband-x { margin: 12px 0 0; max-width: 520px; font-size: 17px; color: rgba(var(--ap-white-rgb),0.8) }
.bhero .bmeta { margin-top: 22px; color: rgba(var(--ap-white-rgb),0.8) }
.bhero .bchip { background: rgba(var(--ap-white-rgb),0.14); color: var(--ap-white) }
.bhero .bchip[data-soort="Praktijkzaak"] { background: var(--ap-alert); color: var(--ap-white) }
.bhero h1 { margin-top: 14px }
.bwrap { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 48px 72px }
.bwrap > .prose { flex: 2 1 520px; min-width: 0 }
.bkern { margin-bottom: 16px; padding: 22px 26px; border-radius: 14px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; background: var(--ap-white); border: 1px solid rgba(var(--ap-alert-rgb),0.24) }
.prose .bkern-n { margin: 0; font-size: clamp(40px, 4.2vw, 58px); line-height: 1; letter-spacing: -0.04em; font-weight: 700; color: var(--ap-alert) }
.prose .bkern-l { margin: 0; font-size: 16px; line-height: 1.4; color: rgba(var(--ap-ink-rgb),0.7) }
.ans p.eb { margin: 0; font-size: 13px; letter-spacing: 0.08em; color: var(--ap-ink) }
.prose .les { margin-top: 40px; padding: 24px 28px 26px; border-radius: 14px; background: rgba(var(--ap-lime-rgb),0.32) }
.prose .les h3 { margin: 0; font-size: 20px; line-height: 1.2; letter-spacing: -0.02em; font-weight: 700 }
.prose .les ul { margin-top: 10px }
.prose .les li { font-size: 17px; color: var(--ap-ink) }
.bauthor { margin-top: 32px; padding: 22px 24px; border-radius: 14px }
.prose .bauthor p { margin: 0; font-size: 15px; line-height: 1.55 }
.bside .eb { color: var(--ap-green) }
.bside .toc { margin-bottom: 26px }
.side .bside-x { margin: 10px 0 0; font-size: 15px; color: rgba(var(--ap-ink-rgb),0.7) }
.bside .btn { margin-top: 18px }
@media (max-width: 767px) { .bfig { min-height: 220px } .bfeat-x { font-size: 16px } }
@media (max-width: 478px) { .bfeat-body, .bfig { padding: 24px } .bcard-fig { min-height: 140px } .bkern { padding: 20px } .prose .les { padding: 20px } }
.prose p.src { margin-top: 40px; font-size: 14px; line-height: 1.6; color: rgba(var(--ap-ink-rgb),0.62) }
.prose .les + p.src { margin-top: 28px }
@media (max-width: 991px) { .bside [data-toc-wrap] { display: none } }

/* 13-10-2026 feedback: Nederland in the blog filter; team card on over ons. */
.bland[data-land="nl"]::after { content: "Nederland" }
.flt[data-f="nl"] .fi:not([data-l~="nl"]):not([data-l~="all"]) { display: none !important }
.team1 { margin-top: 32px; display: grid; grid-template-columns: minmax(0, 820px); gap: 16px }
.person-lg { display: flex; align-items: center; gap: 24px; padding: clamp(24px, 3vw, 32px) }
.person-lg .ph { flex: none; width: 96px; height: 96px; display: grid; place-items: center; font-size: 30px; font-weight: 700; letter-spacing: -0.02em; color: var(--ap-ink); background: rgba(var(--ap-lime-rgb),0.5) }
.person-n { display: block; font-size: 21px; letter-spacing: -0.02em }
.person-f { display: block; margin-top: 2px; font-size: 15px; font-weight: 600; color: var(--ap-green) }
.person-x { margin: 10px 0 0; font-size: 16px; line-height: 1.55; color: rgba(var(--ap-ink-rgb),0.72) }
@media (max-width: 478px) { .person-lg { flex-direction: column; align-items: flex-start } }