/* ═══════════════════════════════════════════════════════════════
   orj-core · Artikelpagina's (v2.35.0, B-113 t/m B-122)
   Bouwt op orj-cta-system.css (tokens, knoppen, Trustpilot), orj-secties.css
   (vlakken, container, streep, tekstlink, microcopy) en over.css (kruimelpad).
   Maten komen van het canvas "ORJ · artikelpagina hero" (r15, 2026-09-26),
   gerekend met de Inter-bestanden; bindend in docs/ORJ-ARTIKEL-SYSTEM.md.
   Breekpunten §12: 1120 · 960 · 640. Pro-omgeving: kritieke eigenschappen
   op !important (les v1.0.2: overerving en gelijke specificiteit zijn hier
   onbetrouwbaar).
   ═══════════════════════════════════════════════════════════════ */

.orj-artikel, .orj-artikel * { box-sizing: border-box; }
.orj-artikel .orj-sec, .orj-artikel .orj-sec * { font-family: var(--orj-font) !important; }
/* B-233: de reset raakt geen ingebedde trechter (.orj-calc op de reken- en dienstpagina). Met 0-1-1 won hij van de losse klassen van
   calculator.css en vso-pagina.css (0-1-0) en wiste hij daar elke marge. :where() houdt de specificiteit voor de artikeltekst op 0-1-1. */
.orj-artikel :is(h1, h2, h3, p, ul, ol, details, summary):where(:not(.orj-calc *)) { margin: 0; }
.orj-artikel ul, .orj-artikel ol { padding: 0; list-style: none; }
.orj-artikel a { color: inherit; text-decoration: none; }
.orj-artikel details > summary { list-style: none; cursor: pointer; }
.orj-artikel details > summary::-webkit-details-marker { display: none; }
.orj-art-melding { padding: 16px 24px; background: #fff4ec; color: #7a2e0e; font-size: 15px; }

/* ═══ 1 · HERO (B-113 · B-114 · B-115 · B-117 · B-118 · B-125 · B-126) ═══
   Ladder (B-126, nabijheidsprincipe: tussen groepen minstens 2× de afstand
   binnen een groep): 44 → kruimelpad 20 → 32 → H1 (kaptop 103 onder de header,
   ongewijzigd: 44 + 20 + 32 = 96) → 16 → streep → 32 → intro → 40 → trigger 22
   → 10 → knop 68 → 18 → Trustpilot → 56 → zandrand → 40 → de rij "In het kort"
   + "Inhoud" (Trustpilot → kaarten 96 = L). Binnen de groepen ongewijzigd
   (streep 16, trigger 10, Trustpilot 18); tussen de groepen 32 · 32 · 40 (was
   20 · 24 · 24, verhouding ≤ 1,5 → team: "cramped"). Hero 486 → 518.
   Kolom 680 (padding-left 64). Het paneel van "Wat is er gewijzigd" zweeft
   over de body, dus deze hero clipt niet. Geen z-index op de sectie (B-125):
   de naadboog staat in de body en steekt omhoog in de hero; het paneel ligt
   toch boven de body omdat de auteurskaart zijn eigen stapelcontext is (z 1). */
.orj-ah { overflow: visible; }
.orj-ah .orj-wrap { padding: 44px 24px 56px; }
/* Boog linksboven (B-125): de booglijn van de homepage-juristsectie (viewBox 400,
   M80 0v120a80 80 0 0 1-80 80, lijn 16, ronde uiteinden), 360 op laptop; in #e5dccc,
   de haarlijn van de zandfamilie — zand-donker is als lijn op zand onzichtbaar.
   Nooit achter tekst: het been staat op 0,22 × maat van de linkerrand, de tekst op
   ≥ 117 vanaf 1320 (176 op 1440), 88–116 tussen 1120 en 1319, 56 onder 1120 → maten
   360 · 280 · 180 (been 79 · 62 · 40, minstens 16 vrij); onder 640 weg. */
.orj-ah-boog { position: absolute; left: 0; top: 0; width: 360px; height: 360px; pointer-events: none; }
@media (max-width: 1319px) { .orj-ah-boog { width: 280px; height: 280px; } }
/* Kruimelpad links uitgelijnd op elke breedte: over.css centreert .orj-kruimels onder
   960 voor de gecentreerde stapel van Over ons; de artikelhero stapelt links (§11f). */
.orj-artikel .orj-kruimels { justify-content: flex-start; min-width: 0; }
.orj-ah-in { position: relative; display: flex; align-items: stretch; justify-content: space-between; gap: 40px; }
.orj-ah-tekst { max-width: 744px; padding-left: 64px; position: relative; z-index: 1; align-self: flex-start; }
.orj-ah-kop { margin: 0 !important; font-size: clamp(30px, 12px + 1.65vw, 36px) !important; font-weight: 700 !important; letter-spacing: -.025em !important; line-height: 1.11 !important; color: var(--orj-ink) !important; text-wrap: balance; }
.orj-ah .orj-streep { margin: 16px 0 0; }
.orj-ah-lead { margin: 32px 0 0 !important; max-width: 620px; font-size: 20px !important; line-height: 28px !important; color: var(--orj-muted) !important; text-wrap: pretty; }
.orj-ah-acties { position: relative; margin-top: 40px; display: flex; flex-direction: column; align-items: flex-start; }
.orj-ah-trigger { margin: 0 0 10px !important; font-size: 15px !important; line-height: 22px !important; font-weight: 500 !important; color: #4b5563 !important; }
.orj-ah-tp { margin-top: 18px; }   /* B-077: bewijs hoort bij de knop, kleiner dan de 24 erboven */
.orj-ah-tp .orj-tp { --tp-h: 20px; }
.orj-ah-route { margin: 16px 0 0 !important; }
.orj-ah--geen .orj-ah-route { margin-top: 40px !important; }   /* B-126: de actiegroep krijgt 40, ook als hij alleen een tekstlink is */
/* De haak (B-118): één streek 1,4 in merkgroen op 55 %, van het begin van de regel
   naar de linkerkant van de knop; leeft in de kantlijn, dus geen extra witruimte. */
.orj-ah-hook { position: absolute; left: -50px; top: 0; width: 48px; height: 48px; color: var(--orj-green); opacity: .55; pointer-events: none; }
.orj-ah-hook svg { display: block; width: 100%; height: 100%; overflow: visible; }
.orj-ah-hook--compact { display: none; }

/* ═══ Auteurskaart (B-116) ═══════════════════════════════════════
   400 naast 680 (3 : 5); boven op de H1-regel (40 onder de kruimels), onder op
   de knopbodem: de rij rekt mee, 38 vrij onderaan (Trustpilot 20 + 18), de
   linkregel onderin. Raster van 4: padding 28, portret 64 (merkvorm 66 × 64),
   label 12 · naam 18/24 · functie 14/20; controleur label 11,5 + naam 15;
   datumregels 13,5/20 met 8 ertussen. */
.orj-ah-auteur { position: relative; z-index: 1; flex: 0 0 400px; width: 400px; margin: 40px 0 38px; align-self: stretch; display: flex; flex-direction: column; background: #fff; border: 1px solid #eadfcd; border-radius: 16px; padding: 28px; }
.orj-ah-au-kop { display: flex; align-items: center; gap: 16px; }
.orj-ah-au-portret { position: relative; flex: 0 0 66px; width: 66px; height: 64px; display: block; }
.orj-ah-au-portret svg { display: block; width: 100%; height: 100%; }
.orj-sec .orj-ah-au-portret img { display: block; width: 100% !important; height: 100% !important; object-fit: cover; border-radius: 0 !important; clip-path: url(#orj-vorm); }
.orj-ah-au-label, .orj-ah-kort-label, .orj-toc-label, .orj-art-praktijk-label, .orj-ah-log-titel, .orj-ah-au-mlabel { font-size: 12px !important; line-height: 16px !important; letter-spacing: .06em !important; text-transform: uppercase !important; font-weight: 600 !important; margin: 0 !important; }
.orj-ah-au-label, .orj-ah-kort-label, .orj-art-praktijk-label { color: var(--orj-green-dark) !important; }
.orj-toc-label, .orj-ah-log-titel, .orj-ah-au-mlabel { color: #4b5563 !important; }
.orj-ah-au-mlabel, .orj-ah-log-titel { font-size: 11.5px !important; }
.orj-ah-au-naam { display: block; margin-top: 4px; font-size: 18px !important; line-height: 24px !important; font-weight: 600 !important; color: var(--orj-ink) !important; }
.orj-ah-au-rol { margin: 0 !important; font-size: 14px !important; line-height: 20px !important; color: #4b5563 !important; white-space: nowrap; }
.orj-ah-au-meta { margin-top: 20px; padding-top: 20px; border-top: 1px solid #efe7d9; display: flex; flex-direction: column; gap: 8px; flex: 1 1 auto; font-size: 13.5px; line-height: 20px; color: #4b5563; }
.orj-ah-au-meta p { margin: 0 !important; font-size: 13.5px !important; line-height: 20px !important; color: #4b5563 !important; }
.orj-ah-au-mnaam { display: inline-block; font-size: 15px !important; line-height: 20px !important; font-weight: 600 !important; color: var(--orj-ink) !important; white-space: nowrap; }
.orj-ah-au-meta .orj-ah-au-mlabel + .orj-ah-au-mnaam { margin-top: -6px; }
.orj-ah-au-meta > .orj-ah-au-mnaam + .orj-ah-au-rij { margin-top: 4px !important; }
.orj-ah-au-rij { display: flex; flex-wrap: wrap; gap: 0 6px; }
.orj-ah-au-rij .orj-ah-au-mnaam { display: inline; font-size: 13.5px !important; white-space: normal; }
.orj-dot { color: #9ca3af; }
.orj-ah-au-naam:hover, .orj-ah-au-mnaam:hover { text-decoration: underline !important; text-underline-offset: 3px; }
.orj-ah-links { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 0 6px; margin-top: auto; padding-top: 12px; }
.orj-ah-link { color: var(--orj-green-dark) !important; font-weight: 500 !important; text-decoration: underline !important; text-underline-offset: 3px; text-decoration-color: rgba(27,110,82,.45); font-size: 13.5px; line-height: 20px; }
.orj-ah-link:hover { text-decoration-color: currentColor; }
.orj-ah-au-meta--compact { display: none; }
/* Wat is er gewijzigd (B-119): zwevend paneel onder de linkregel, kaartbreed, over de body heen. */
.orj-ah-log { display: inline-block; }
.orj-ah-log summary { display: inline-flex; align-items: center; gap: 4px; line-height: 20px; }
.orj-ah-log summary svg { transition: transform .2s ease; }
.orj-ah-log[open] summary svg { transform: rotate(180deg); }
.orj-ah-log[open] summary { color: var(--orj-ink) !important; text-decoration-color: var(--orj-ink); }
.orj-ah-log-inhoud { position: absolute; left: 0; top: calc(100% + 10px); width: 100%; padding: 16px 20px 18px; border: 1px solid #eadfcd; border-radius: 12px; background: #fff; box-shadow: var(--orj-schaduw-zwevend); z-index: 4; }
.orj-ah-log-lijst { margin-top: 10px !important; }
.orj-ah-log-lijst li { display: grid; grid-template-columns: 92px minmax(0, 1fr); column-gap: 12px; padding: 8px 0; border-top: 1px solid #efe7d9; font-size: 13.5px; line-height: 20px; color: #4b5563; }
.orj-ah-log-lijst li:first-child { border-top: 0; padding-top: 0; }
.orj-ah-log-lijst li:last-child { padding-bottom: 0; }
.orj-ah-log-lijst time { font-weight: 600; color: var(--orj-ink); white-space: nowrap; }
.orj-ah-log-voet { margin: 12px 0 0 !important; padding-top: 10px; border-top: 1px solid #efe7d9; font-size: 13px !important; line-height: 18px !important; color: var(--orj-muted) !important; }
.orj-ah-au-meer summary { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; font-size: 13.5px; line-height: 20px; font-weight: 500; color: var(--orj-green-dark); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(27,110,82,.45); }
.orj-ah-au-meer summary svg { transition: transform .2s ease; }
.orj-ah-au-meer[open] summary svg { transform: rotate(180deg); }
.orj-ah-au-meer > div { margin-top: 8px; display: flex; flex-direction: column; gap: 4px; }
.orj-ah-au-meer .orj-ah-links { margin-top: 4px; padding-top: 0; }

/* ═══ 2 · BODY (B-120 · B-121 · B-125) ═══════════════════════════
   Wit, 40 onder de herorand (B-125: 48 zand + 40 wit, was 72 + 40; B-124's
   overlap is vervangen). De secties zijn verbonden door wat er al is: de
   zijkolom is 400 en staat op dezelfde lijn als de auteurskaart (was 375, 25
   px naar rechts), en de naadboog loopt van de zandband onder de auteurskaart
   door de grens en duikt achter de Inhoud-kaart — de booglijn van de homepage
   die de naad oversteekt. Gemeten met de echte headerhoogte 73 (Chromium, na
   B-126): de kaart op 1366 × 650 op 629 → 21 px boven de vouw (kaartrand, geen
   label), op 1280 × 600 op 626 → 26 px ónder de vouw; B-125 had 597 en 594,
   v2.35.1 621 en 618. De ademruimte van B-126 kost de vouwcue op 1280 × 720 en
   verkleint hem op 1366 × 768 — bewuste keuze van het team. Tekstkolom 680 op de H1-lijn (64), zijkolom
   rechts, samen sticky. Alinea's 620 op 18/28 (±71 tekens), H2 28/34, H3 22/28. */
/* overflow: visible — .orj-sec zet overflow: hidden voor de bogen, maar een voorouder met
   overflow anders dan visible wordt het 'scrollvenster' van position: sticky, en dat venster
   scrollt nooit: de zijkolom stond stil (tweede oorzaak van de sticky-bug v2.35.0, gemeten).
   De body heeft geen boog, dus niets te clippen; body.orj-artikel-pagina clipt horizontaal. */
.orj-art { overflow: visible; }
/* Naadboog (B-125): dezelfde boog als linksboven, als CSS-randen (de uiteinden zijn nooit
   zichtbaar: het ene verlaat het scherm rechts, het andere duikt achter de Inhoud-kaart).
   Lijn 14, hartlijnstraal 73 (16 op 400 × 360, zoals de homepage). Hangt aan de container:
   het been staat 72 binnen de rechterkolom, de horizontaal begint 63 boven de grens (de
   zandband onder de auteurskaart is 86: knopbodem → 18 → Trustpilot 20 → 48). Ligt in de
   body vóór de kaarten, dus onder de kaarten en onder het logpaneel; de hero heeft geen
   z-index meer, dus het deel in de hero is zichtbaar. */
.orj-art-boog { position: absolute; top: -63px; right: -20px; width: calc(max(24px, (100vw - 1215px) / 2) + 99px); height: 200px; border-top: 14px solid #e5dccc; border-left: 14px solid #e5dccc; border-top-left-radius: 80px; pointer-events: none; }
.orj-art .orj-wrap { padding: 40px 24px 96px; }
/* Kolomraster (B-137, gerekend): inhoud 1215 = 64 + 680 + 71 + 400. De zijkolom is een vaste track van 400 op de
   rechterlijn (space-between), de tekstkolom minmax(0, 680): wordt de container smaller, dan krimpt de tekst en nooit
   de zijkolom, en de kolommen kunnen elkaar niet meer raken (v2.38.1 had 680px + minmax(0, 1fr) met een zijkolom van
   400 die uit zijn track van 375 stak: op 1120 tot 1191 lag hij óver de tekst, op 1192 tot 1262 was de gleuf 0 tot 71).
   column-gap 40 is de ondergrens; op 1215 is de gleuf 71, dus "96" stond er nooit. */
.orj-art-in { position: relative; display: grid; grid-template-columns: minmax(0, 680px) 400px; justify-content: space-between; column-gap: 40px; padding-left: 64px; align-items: start; }
.orj-art-tekst { min-width: 0; }
.orj-art-tekst p, .orj-art-tekst li { font-size: 18px !important; line-height: 28px !important; color: var(--orj-ink) !important; text-wrap: pretty; }
.orj-art-tekst p { margin: 0 !important; max-width: 620px; text-wrap: pretty; hyphens: manual; }
.orj-art-tekst p + p, .orj-art-tekst .orj-art-lijst + p, .orj-art-tekst p + .orj-art-lijst, .orj-art-tekst p + .orj-art-tabel-fig, .orj-art-tekst .orj-art-lijst + .orj-art-tabel-fig, .orj-art-tekst .orj-art-lijst + .orj-art-lijst { margin-top: 20px !important; }   /* B-137: alle blokparen op het alinearitme, ook lijst ↔ tabel */
.orj-art-h2 { margin: 0 !important; font-size: 28px !important; line-height: 34px !important; font-weight: 700 !important; letter-spacing: -.02em !important; color: var(--orj-ink) !important; text-wrap: balance; }
.orj-art-h2 + p, .orj-art-h2 + .orj-art-lijst, .orj-art-h2 + .orj-art-tabel-fig, .orj-art-h2 + .orj-art-faq-item { margin-top: 16px !important; }
.orj-art-h3 { margin: 32px 0 0 !important; font-size: 22px !important; line-height: 28px !important; font-weight: 600 !important; letter-spacing: -.01em !important; color: var(--orj-ink) !important; text-wrap: balance; }
.orj-art-h3 + p, .orj-art-h3 + .orj-art-lijst { margin-top: 8px !important; }
.orj-art-h3 + .orj-art-tabel-fig { margin-top: 12px !important; }   /* B-137: een raster vraagt iets meer lucht onder een kop dan een regel */
.orj-art-sectie { margin-top: 48px; scroll-margin-top: calc(var(--hdr-total-h, 73px) + 24px); }
.orj-art-tekst > .orj-art-sectie:first-child, .orj-ah-kort + .orj-art-sectie { margin-top: 40px; }
.orj-art-link { color: var(--orj-green-dark) !important; text-decoration: underline !important; text-underline-offset: 3px; }
.orj-art-link:hover { text-decoration-color: var(--orj-green); }
/* Focusring (§8, B-137): 2 px merkgroen op élk interactief element; kaartlinks krijgen de ring om de kaart. */
.orj-art-link:focus-visible, .orj-ah-kort li a:focus-visible, .orj-toc li a:focus-visible, .orj-ah-link:focus-visible, a.orj-ah-au-naam:focus-visible, .orj-ah-au-mnaam a:focus-visible { outline: 2px solid var(--orj-green); outline-offset: 2px; border-radius: 2px; }
.orj-art-ger-kaart:focus-within { outline: 2px solid var(--orj-green); outline-offset: 2px; }
.orj-art-ger-titel a:focus-visible { outline: none; }
/* Lijsten (B-157, v2.44.0). Stip in merkgroen op het hart van Inters eigen opsommingsteken: dat ligt 594 van 2048
   boven de basislijn, dus .5lh + .0737em min de halve stip (11px + .0737em waar lh ontbreekt). In Chromium nagemeten: top 11 stond
   0,75 hoog op 18/28 en 1,1 op 17/28; nu 0,25 en 0,1 ernaast (Chromium rondt de basislijn af op een hele pixel).
   Nummers in ink 600, tabelcijfers, rechts uitgelijnd op 7,5 van de tekst: "1." staat gelijk met de alinearand, de
   ruimte tot de tekst is bij 1 tot 9 gelijk en "10." hangt in de marge in plaats van tegen de tekst te lopen.
   Ruimte tussen de punten 8, of 14 zodra een punt de regel vult: de plugin schat dat per breekpunt (orj_art_lijst_ruimte). */
.orj-art-lijst { --orj-lijst-tussen: 8px; max-width: 620px; padding-left: 24px !important; margin: 0 !important; }
.orj-art-lijst li { position: relative; margin: 0 0 var(--orj-lijst-tussen) !important; padding: 0 !important; }
.orj-art-lijst li:last-child { margin-bottom: 0 !important; }
.orj-art-lijst--ruim-l { --orj-lijst-tussen: 14px; }
@media (min-width: 960px) and (max-width: 1279px) { .orj-art-lijst--ruim-l { --orj-lijst-tussen: 8px; } .orj-art-lijst--ruim-m { --orj-lijst-tussen: 14px; } }
ul.orj-art-lijst li::before { content: ""; position: absolute; left: -18px; top: calc(11px + .0737em); top: calc(.5lh - 3px + .0737em); width: 6px; height: 6px; border-radius: 50%; background: var(--orj-green); }
ol.orj-art-lijst { counter-reset: orj-art; }
ol.orj-art-lijst li { counter-increment: orj-art; }
ol.orj-art-lijst li::before { content: counter(orj-art) "."; position: absolute; right: calc(100% + 7.5px); top: 0; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--orj-ink); white-space: nowrap; }
/* Aanloopzin (B-157): een alinea op een dubbele punt direct boven de lijst hoort bij die lijst, 10 in plaats van 20
   (B-126: tussen groepen minstens twee keer de ruimte binnen een groep). */
.orj-art-tekst p.orj-art-aanloop + .orj-art-lijst { margin-top: 10px !important; }
/* Tabellen (B-160): figuur met onderschrift "Tabel n." onder de tabel (zoals figuren, B-143), haarlijnen, kop onderaan
   op de merkgroene lijn, eerste kolom als rijkop in 600, cijferkolommen rechts in tabelcijfers (Inters standaardcijfers
   zijn proportioneel: de 1 is 833 eenheden breed, de 0 1292; met tnum allemaal 1328). Gescheiden randen met spacing 0,
   zodat een vaste eerste kolom haar eigen lijnen meeneemt. Scrollvak 680 (kaartlijn); regio, naam en tabstop alleen
   bij overloop (artikel.js), dan staat de eerste kolom vast. Kritieke waarden met !important: het thema stijlt tabellen ook. */
.orj-art-tabel-fig { margin: 0 !important; max-width: 680px; }
.orj-art-tabel-fig figcaption { margin: 12px 0 0 !important; max-width: 620px; font-size: 14px !important; line-height: 20px !important; color: var(--orj-muted) !important; text-wrap: pretty; }
.orj-art-tabel-schuif { max-width: 680px; overflow-x: auto; }
.orj-art-tabel-schuif:focus-visible { outline: 2px solid var(--orj-green); outline-offset: 2px; }
.orj-art-tabel { width: 100%; border-collapse: separate !important; border-spacing: 0 !important; margin: 0 !important; }
.orj-art-tabel th { text-align: left; vertical-align: bottom; padding: 10px 16px 12px 0; font-size: 15px !important; line-height: 20px !important; font-weight: 600 !important; color: var(--orj-ink) !important; border-bottom: 2px solid var(--orj-green); }
.orj-art-tabel td { padding: 12px 16px 12px 0; font-size: 16px !important; line-height: 24px !important; color: var(--orj-ink) !important; border-bottom: 1px solid #e5e7eb; vertical-align: top; text-wrap: pretty; }   /* B-137: 16 tussen kolommen (was 12), kop onderaan uitgelijnd bij meerregelige koppen */
.orj-art-tabel tbody th[scope="row"] { text-align: left !important; vertical-align: top !important; padding: 12px 16px 12px 0 !important; font-size: 16px !important; line-height: 24px !important; font-weight: 600 !important; color: var(--orj-ink) !important; border-bottom: 1px solid #e5e7eb !important; text-wrap: pretty; background: #fff; }
.orj-art-tabel .is-getal { text-align: right !important; font-variant-numeric: tabular-nums; white-space: nowrap; }
.orj-art-tabel tr > .is-getal:last-child { padding-right: 0 !important; }
.orj-art-tabel-schuif.is-schuift tbody th[scope="row"], .orj-art-tabel-schuif.is-schuift thead th:first-child { position: sticky; left: 0; z-index: 1; background: #fff; box-shadow: inset -1px 0 0 #e5e7eb; }
.orj-art-tekst .orj-art-tabel-fig + .orj-art-tabel-fig { margin-top: 24px !important; }
/* In het kort (B-120): mint kaart, label 12, punten 16/24 met de systeemvink (24), basis 14 ertussen */
.orj-ah-kort { position: relative; background: var(--orj-mint); border: 1px solid transparent; border-radius: 16px; padding: 28px; min-height: var(--orj-art-rij-l, 0); display: flex; flex-direction: column; }
.orj-ah-kort ul { margin: 16px 0 0 !important; display: flex; flex-direction: column; justify-content: space-between; gap: 14px; flex: 1 1 auto; }
.orj-ah-kort li { margin: 0 !important; padding: 0 !important; }
.orj-ah-kort li a, .orj-ah-kort-vast { display: flex; align-items: flex-start; gap: 14px; font-size: 16px !important; line-height: 24px !important; color: var(--orj-ink) !important; }
.orj-ah-kort li a:hover span:last-child { text-decoration: underline; text-underline-offset: 3px; }
.orj-ah-kort strong { font-weight: 600; }
.orj-vink { flex: 0 0 24px; width: 24px; height: 24px; border-radius: 50%; background: var(--orj-green); color: #fff; display: inline-flex; align-items: center; justify-content: center; }
.orj-vink svg { width: 13px; height: 13px; }
/* Zijkolom: inhoudsopgave (wit, haarlijn) + calculatorkaart, samen sticky onder de header
   (B-120). Sticky heeft een ouder nodig die hoger is dan het element zelf; het grid heeft
   align-items: start, dus de aside moet zelf de rijhoogte pakken (align-self: stretch),
   anders is er niets om in te schuiven en staat de kolom stil (bug v2.35.0, gemeten:
   aside 472 = eigen inhoud, sticky zonder effect). Vangnet voor korte schermen: is de
   kolom hoger dan wat onder de header past, dan scrollt hij binnen zichzelf in plaats
   van de calculatorkaart uit beeld te houden. */
.orj-art-zij { min-width: 0; align-self: stretch; width: 400px; justify-self: end; }   /* B-125: 400 op de lijn van de auteurskaart (was 375 op een eigen lijn) */
.orj-art-zij-in { position: sticky; top: calc(var(--hdr-total-h, 73px) + 24px); max-height: calc(100vh - var(--hdr-total-h, 73px) - 48px); overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; }
.orj-toc { background: #fff; border: 1px solid #e5e7eb; border-radius: 16px; padding: 24px; min-height: var(--orj-art-rij-l, 0); }
.orj-toc--klap { display: none; }
/* Inhoudsopgave als stepper (B-128). Een rail van 1,5 px in de ringkleur verbindt de stippen; de
   vulling loopt in merkgroen van de eerste stip tot de actieve en verspringt per sectie. Trapsgewijs,
   nooit continu: de lijst is een volgorde, geen schaal (één segment is 32 px, een sectie 300 tot
   1500 px scrollen; een meelopende balk zou kruipen en schieten en belooft een verhouding die hij niet
   levert). Drie stipstanden: komt (grijze ring) · gelezen (groene ring, wit) · actief (gevuld groen met
   een ring van 3 in mint-donker: het "je bent hier" van een stepper). Vaste steek 32 (22 + 10, labels op
   nowrap), dus de vulling is rekenwerk in CSS: index × 32 vanaf het hart van de eerste stip (li 22,
   stip 7 op top 8 → hart 11,5; laatste hart 10,5 boven de lijstbodem). Overgang .25 s op de
   entrance-curve van de streep (NN/g 100–400 ms), uit onder reduced motion. Alleen in de open lijst;
   de uitklapper (< 960) houdt de stipstanden zonder rail. Linksignifier (NN/g, Wirecutter-test: links
   zonder kleur met alleen een hover-onderstreping werden niet gebruikt): vaste onderstreping in de
   ringkleur op 3 px, in de tekstkleur bij hover en focus, geen onderstreping op het actieve item (je
   bent er al). §2b blijft staan: geen green-dark als lijsttekst; de kleur zit in stip en rail. */
.orj-toc ol { margin: 12px 0 0 !important; position: relative; --orj-toc-actief: 0; }
.orj-toc--open ol::before, .orj-toc--open ol::after { content: ""; position: absolute; left: 4.75px; top: 11.5px; width: 1.5px; border-radius: 1px; pointer-events: none; }
.orj-toc--open ol::before { bottom: 10.5px; background: #c6d7cf; }
.orj-toc--open ol::after { height: calc(var(--orj-toc-actief) * 32px); background: var(--orj-green); transition: height .25s var(--orj-streep-curve); }
.orj-toc li { position: relative; padding: 0 0 0 20px !important; margin: 0 !important; font-size: 15px !important; line-height: 22px !important; color: #4b5563; }
.orj-toc li + li { margin-top: 10px !important; }
.orj-toc li::before { content: ""; position: absolute; left: 2px; top: 8px; width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid #c6d7cf; background: #fff; z-index: 1; transition: background-color .25s var(--orj-streep-curve), border-color .25s var(--orj-streep-curve), box-shadow .25s var(--orj-streep-curve); }
.orj-toc li.is-gelezen::before { border-color: var(--orj-green); }
.orj-toc li.is-actief { color: var(--orj-ink); font-weight: 600; }
.orj-toc li.is-actief::before { background: var(--orj-green); border-color: var(--orj-green); box-shadow: 0 0 0 3px var(--orj-mint-donker); }
.orj-toc li a { color: inherit !important; white-space: nowrap; text-decoration: underline !important; text-decoration-color: #c6d7cf; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.orj-toc li a:hover, .orj-toc li a:focus-visible { text-decoration-color: currentColor; }
.orj-toc li.is-actief a { text-decoration: none !important; }
.orj-zij-calc { margin-top: 24px; background: var(--orj-mint); border-radius: 16px; padding: 22px 24px; display: flex; align-items: center; gap: 16px; }
.orj-zij-calc svg { flex: 0 0 48px; display: block; }
.orj-zij-calc p { margin: 0 !important; font-size: 15px !important; line-height: 22px !important; font-weight: 600 !important; color: var(--orj-ink) !important; }
.orj-zij-calc .orj-tekstlink { font-size: 14px !important; line-height: 20px !important; margin-top: 4px; }
/* Inline-CTA (§7): één component; zand, brugkop 22/28, drie vinkjes, md-knop, microcopy */
.orj-art-inline { margin-top: 40px; max-width: 680px; background: var(--orj-zand); border: 1px solid #eadfcd; border-radius: 16px; padding: 28px; }
.orj-art-inline-kop { margin: 0 !important; font-size: 22px !important; line-height: 28px !important; font-weight: 700 !important; letter-spacing: -.01em !important; color: var(--orj-ink) !important; }
.orj-art-inline .orj-cta { margin-top: 20px; }
/* B-133: stijl zonder kaart. Op wit, zonder vlak of rand, op het sectieritme (48): kop 22/28 als vraag, één zin in de
   leestypografie (18/28 op 620), md-knop. Leest als een alinea van het artikel, niet als promoblok (NN/g). */
.orj-art-inline-zin { margin: 12px 0 0 !important; max-width: 620px; font-size: 18px !important; line-height: 28px !important; color: var(--orj-ink) !important; text-wrap: pretty; }
/* B-132: sectielink aan het einde van een sectie: de tekstlink met pijl (variant 4) op 17/28 in de tekstkolom, 20 onder
   de laatste alinea (het alinea-ritme), nooit een knop. */
.orj-art-sectielink { margin: 20px 0 0 !important; max-width: 620px; }
.orj-art-sectielink .orj-tekstlink { font-size: 17px !important; line-height: 28px !important; gap: 6px; }
/* B-134: calculatorkaart licht: haarlijn boven, grijze regel 15/500, tekstlink; geen mintvlak, geen spot. */
.orj-zij-calc--licht { background: none; border-radius: 0; border-top: 1px solid #e5e7eb; padding: 20px 0 0; margin-top: 20px; gap: 0; }
.orj-zij-calc--licht p { font-weight: 500 !important; color: #4b5563 !important; }
/* B-135: Trustpilot onder de slotknop, 18 zoals in de hero (B-077). */
.orj-art-slot-tp { margin-top: 18px; }
/* Afsluit-CTA (B-141, vervangt de mintkaart met spot en lg-knop van B-140): het zandkaart-component
   van de inline-CTA (.orj-art-inline: zand, haarlijn #eadfcd, radius 16, padding 28, 40 boven) mét
   de tekststijl-zin (12 onder de kop, 18/28, 620), de md-knop op 20 en de Trustpilot-regel op 18.
   Gemeten aan de oude kaart (screenshot DPR 2): 680 × 561 → nu ±260; alles op de kolomlijn van 680.
   Nooit lg in de body (§4: lg is de heromaat), nooit mint voor een actiekaart (B-136: zand = vraag,
   mint = informatie), nooit een spot in een witte cirkel (B-100). Responsief erft de kaart alles
   van .orj-art-inline (580 op tablet, 20 rondom en knop 100 % op de telefoon). */
.orj-art-inline--slot .orj-ah-tp { margin-top: 18px; }
.orj-art-inline--slot .orj-ah-tp .orj-tp { --tp-h: 20px; }
/* Figuurblokken (B-138, B-143, B-144): tijdlijn en keuzeschema als HTML in de lichte opmaak, op een mint kaart.
   Kleur codeert functie (§2b): mint = uitleg (kort antwoord, praktijkblok, calculatorkaart, figuren), zand = actie.
   ORJ-DNA (§6a): inklijn 2 px, precies één groen accent (rij met "groen"), geen oranje, geen beeld. Tekst 16/24 in
   ink met de kop 600 (DWP-onderzoek: secundair grijs voor figuurtekst kost leesbaarheid); het onderschrift staat
   14/20 muted BUITEN de kaart, want muted op mint haalt 4,3:1 (§2b: muted alleen op wit). Kaart radius 16, padding
   24/28 (kaartraster §19). Breedte = tekstkolom (620/580). 24 boven en onder (een figuur is een blok, geen alinea).
   Tijdlijn: een tijdlijn is geen voortgangsindicator (Carbon, USWDS), dus geen toestanden op de knopen: elke knoop
   is een inktring, alleen het accent is gevuld groen. Betekenis zit op de segmenten, die elke rij naar de vólgende
   rij tekent: neutraal grijs (tijd verstrijkt), groen naar het accent (de bedenktijd als periode), gestippeld in
   muted naar een "optie" (voorwaardelijk punt; #6b7280 = 4,8:1, WCAG 1.4.11). De laatste rij tekent niets: de rail
   eindigt op de laatste knoop (DWP: eindmarkering). Onder 640 stapelt de tijdlijn met de rail links (inspringing 32,
   knoop op de labelregel) en het schema in één kolom. Keuzeschema: witte takken op de kaart, het accent een tak
   met groene inklijn (zelfde accenttaal als de gevulde knoop); geen groen vlak met tekst (wit op groen = 3,45:1). */
.orj-art-figuur { margin: 24px 0 0 !important; max-width: 620px; }
.orj-art-tekst .orj-art-figuur + p, .orj-art-tekst .orj-art-figuur + .orj-art-lijst, .orj-art-tekst .orj-art-figuur + .orj-art-tabel-fig, .orj-art-tekst .orj-art-tabel-fig + p, .orj-art-tekst .orj-art-tabel-fig + .orj-art-lijst, .orj-art-tekst .orj-art-tabel-fig + .orj-art-figuur { margin-top: 24px !important; }
.orj-art-figuur figcaption { margin: 12px 0 0 !important; font-size: 14px !important; line-height: 20px !important; color: var(--orj-muted) !important; text-wrap: pretty; }
.orj-figuur-kaart { background: var(--orj-mint); border-radius: 16px; padding: 24px 28px; }
/* B-152 (v2.43.0): eigen beeld uit de lichte opmaak ("> beeld:"); vaste maat uit het bestand tegen CLS, radius 16 (kaarten), onderschrift als bij de figuren. */
.orj-sec .orj-art-beeld img { display: block; width: 100% !important; height: auto !important; border-radius: 16px; }
.orj-tijdlijn { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0 !important; padding: 0 !important; list-style: none; }
.orj-tijdlijn--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .orj-tijdlijn--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .orj-tijdlijn--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.orj-tijdlijn li { position: relative; margin: 0 !important; padding: 28px 0 0 !important; font-size: 16px !important; line-height: 24px !important; color: var(--orj-ink) !important; }
.orj-tijdlijn li::before { content: ""; position: absolute; left: 0; top: 0; width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 2px solid var(--orj-ink); box-sizing: border-box; }
.orj-tijdlijn li.is-groen::before { background: var(--orj-green); border-color: var(--orj-green); }
.orj-tijdlijn li::after { content: ""; position: absolute; left: 16px; top: 7px; width: 100%; height: 2px; background: #9ca3af; }   /* B-144: segment naar de volgende knoop (kolom + gleuf − knoop = 100 % van de rij) */
.orj-tijdlijn li.naar-groen::after { background: var(--orj-green); }
.orj-tijdlijn li.naar-optie::after { top: 6px; height: 0; background: none; border-top: 2px dashed var(--orj-muted); }
.orj-tijdlijn li:last-child::after { display: none; }
.orj-tl-dag { display: block; font-weight: 600; color: var(--orj-ink); }
/* Keuzeschema als verticale boom op elke breedte (B-170, voorstel A op canvas render r1). Wortelstip met de startzin
   (geen kader: dat las als knop), een inktstam naar beneden en een aftakking naar elke kaart; de stam eindigt bij de laatste
   tak. Inkt op mint haalt 15,9 : 1 (het oude grijs 2,3 : 1). Eén opmaak voor 2 tot 5 takken en elke schermbreedte; de takken
   krijgen de volle breedte, dus geen lange woorden meer die uit een smalle kolom steken (gemeten: 22 tot 99 px). */
.orj-boom-start { position: relative; display: flex; align-items: flex-start; gap: 12px; padding: 0; border: 0; border-radius: 0; background: none; font-size: 16px !important; line-height: 24px !important; font-weight: 600; color: var(--orj-ink); }
.orj-boom-start::before { content: ""; flex: none; width: 12px; height: 12px; margin-top: 6px; border-radius: 50%; background: var(--orj-ink); }
.orj-boom-start::after { content: ""; position: absolute; left: 5px; top: 18px; bottom: -12px; width: 2px; background: var(--orj-ink); }
.orj-boom-takken { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin: 12px 0 0 !important; padding: 0 0 0 36px !important; list-style: none; }
.orj-boom-takken li { position: relative; margin: 0 !important; padding: 16px 18px !important; background: #fff; border-radius: 12px; font-size: 16px !important; line-height: 24px !important; color: var(--orj-ink) !important; }
.orj-boom-takken li.is-groen { border: 2px solid var(--orj-green); padding: 14px 16px !important; }
.orj-art-boom .orj-boom-takken li { -webkit-hyphens: auto; hyphens: auto; }
.orj-art-boom .orj-boom-takken li::before { content: ""; position: absolute; left: -31px; top: 27px; width: 31px; height: 2px; background: var(--orj-ink); }   /* aftakking */
.orj-art-boom .orj-boom-takken li::after { content: ""; position: absolute; left: -31px; top: -12px; bottom: 0; width: 2px; background: var(--orj-ink); }   /* stam */
.orj-art-boom .orj-boom-takken li:first-child::after { top: 0; }
.orj-art-boom .orj-boom-takken li:last-child::after { bottom: auto; height: 41px; }
.orj-art-boom .orj-boom-takken li.is-groen::before { left: -33px; top: 25px; }
.orj-art-boom .orj-boom-takken li.is-groen::after { left: -33px; top: -14px; }
.orj-art-boom .orj-boom-takken li.is-groen:first-child::after { top: -2px; }
.orj-boom-takken strong { display: block; font-weight: 600; color: var(--orj-ink); margin-bottom: 4px; }
/* Uit onze praktijk (A3): mint kaart, tekst 17/28 in #4b5563 (nooit het gewone grijs op mint, §2b) */
.orj-art-praktijk { margin-top: 40px; max-width: 680px; background: var(--orj-mint); border-radius: 16px; padding: 28px; }   /* B-137: hoofdkolomkaarten 28 (was 24/28), §19 kaartraster */
.orj-art-praktijk p { margin: 12px 0 0 !important; font-size: 17px !important; line-height: 28px !important; color: #4b5563 !important; max-width: none; }
.orj-art-praktijk p:first-of-type { margin-top: 10px !important; }
/* FAQ open: vraag als H3, antwoord eronder, haarlijn tussen de items */
.orj-art-faq-item { padding: 20px 0; border-top: 1px solid #e5e7eb; max-width: 620px; }
.orj-art-faq-item:last-child { padding-bottom: 0; }   /* B-137: alleen lijnen tússen vragen; het slot volgt op 48 */
.orj-art-faq-item .orj-art-h3 { margin-top: 0 !important; font-size: 20px !important; line-height: 28px !important; }
.orj-art-faq-item p { font-size: 17px !important; line-height: 28px !important; }
.orj-art-h2 + .orj-art-faq-item { margin-top: 16px !important; border-top: 0; padding-top: 0; }   /* B-137: H2 → inhoud 16 zoals elke sectie (was 20 + lijn + 20 = 40) */
/* Slot: hoofdpunt, beslisregels met vinkjes, de laatste solid (lg) */
.orj-art-stappen { margin: 20px 0 0 !important; max-width: 620px; display: flex; flex-direction: column; gap: 10px; }
.orj-art-stappen li { display: flex; align-items: flex-start; gap: 14px; margin: 0 !important; padding: 0 !important; font-size: 17px !important; line-height: 26px !important; }
.orj-art-stappen .orj-vink { margin-top: 1px; }
.orj-art-slot-actie { margin: 28px 0 0 !important; }

/* ═══ 3 · GERELATEERD (B-122): drie crème kaarten, de titel is de link ═══ */
.orj-art-ger .orj-wrap { padding: 0 24px 96px; }
.orj-art-ger-kop { margin: 0 0 20px 64px !important; font-size: 28px !important; line-height: 34px !important; font-weight: 700 !important; letter-spacing: -.02em !important; color: var(--orj-ink) !important; }
.orj-art-ger-rij { margin: 0 0 0 64px !important; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.orj-art-ger-kaart { position: relative; margin: 0 !important; padding: 24px !important; background: var(--orj-paper); border-radius: 16px; display: flex; flex-direction: column; transition: background .2s ease; }
.orj-art-ger-kaart:hover { background: var(--orj-paper-donker); }
.orj-art-ger-titel { margin: 0 !important; font-size: 18px !important; line-height: 24px !important; font-weight: 700 !important; letter-spacing: -.01em !important; color: var(--orj-ink) !important; }
.orj-art-ger-titel a::after { content: ""; position: absolute; inset: 0; border-radius: 16px; }
.orj-art-ger-kaart p { margin: 10px 0 0 !important; font-size: 15px !important; line-height: 24px !important; color: #4b5563 !important; flex: 1 1 auto; }
.orj-art-ger-lees { margin-top: 16px; font-size: 14px !important; }

/* ═══ Breekpunten (§12: 1280 · 960 · 640 op deze pagina; B-137) ═══════════════════════
   De compacte laag (inspringing 32, tekst 580, zijkolom 332) geldt tot en met 1279, niet tot 1119: de volle laag
   (64 + 680 + 400) past pas vanaf een inhoud van 1144 + gleuf, dus vanaf 1263 met de gleuf van 71. §19 zei dat al
   ("1120 tot 1279: 332"), de CSS zat op 1119. Ook hier minmax op de tekstkolom, zodat 960 tot 1023 (inhoud 912 tot
   975, kleiner dan 32 + 580 + 48 + 332 = 992) de tekst laat krimpen in plaats van de zijkolom erover te schuiven. */
@media (max-width: 1279px) {
	.orj-ah-tekst { padding-left: 32px; max-width: 612px; }
	.orj-ah-in { gap: 32px; }
	.orj-ah-auteur { flex-basis: 332px; width: 332px; padding: 24px; }
	.orj-ah-hook { display: none; }
	.orj-ah-hook--compact { display: block; left: -34px; width: 28px; }
	.orj-art-in { grid-template-columns: minmax(0, 580px) 332px; column-gap: 32px; padding-left: 32px; }
	.orj-art-zij { width: 332px; }   /* B-125: de auteurskaart is hier 332 */
	.orj-ah-boog { width: 180px; height: 180px; }
	.orj-art-tekst p, .orj-art-lijst, .orj-art-faq-item, .orj-art-stappen, .orj-art-figuur { max-width: 580px; }
	.orj-ah-kort { padding: 24px; min-height: var(--orj-art-rij-m, 0); }
	.orj-toc { min-height: var(--orj-art-rij-m, 0); }
	.orj-art-inline, .orj-art-praktijk { max-width: 580px; }
	.orj-art-sectielink, .orj-art-inline-zin { max-width: 580px; }
	.orj-art-ger-kop, .orj-art-ger-rij { margin-left: 32px !important; }
	.orj-art-h2 { font-size: 26px !important; line-height: 32px !important; }
}
/* < 960: gestapeld, links uitgelijnd (leesinhoud, §11f); de inspringing van 32 blijft
   zodat de haak in een kantlijn van 64 staat (B-118); de auteurskaart wordt één brede
   kaart in twee kolommen; de zijkolom komt in de stroom ná het korte antwoord. */
@media (max-width: 959px) {
	.orj-ah .orj-wrap { padding: 44px 32px 56px; }   /* B-126: 56 onder de auteurskaart */
	.orj-ah-in { display: block; }
	.orj-ah-tekst { max-width: none; padding-left: 32px; }
	.orj-ah-lead { max-width: 620px; }
	.orj-ah-hook { display: block; left: -50px; width: 48px; }
	.orj-ah-hook--compact { display: none; }
	.orj-ah-auteur { width: 100%; flex-basis: auto; margin: 32px 0 0; align-self: auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 32px; align-items: start; padding: 24px 28px; }
	.orj-ah-au-meta { margin-top: 0; padding-top: 0; border-top: 0; border-left: 1px solid #efe7d9; padding-left: 28px; }
	.orj-ah-links { margin-top: 0; padding-top: 8px; }
	.orj-ah-log-inhoud { position: static; width: auto; margin: 8px 0 4px; padding: 12px 14px; border-radius: 10px; box-shadow: none; background: var(--orj-zand); }
	.orj-art .orj-wrap { padding: 40px 32px 72px; }
	.orj-art-in { display: flex; flex-direction: column; padding-left: 0; }
	.orj-art-tekst { display: contents; }
	.orj-ah-kort { order: 0; min-height: 0; }
	.orj-art-zij { order: 1; margin-top: 32px; width: auto; justify-self: auto; }
	.orj-art-boog { display: none; }   /* B-125: gestapeld geen naadboog (de rechterkolom bestaat niet meer) */
	.orj-art-zij-in { position: static; max-height: none; overflow: visible; }
	.orj-art-sectie, .orj-art-inline, .orj-art-praktijk { order: 2; }
	.orj-art-sectie { max-width: 100%; }   /* B-159: gestapeld is .orj-art-in een flexkolom met align-items start; een sectie kreeg dan de minimale breedte van haar tabel (403 op 393, gemeten in Chromium) en de pagina liep over. Zo scrolt de tabel in zijn eigen vak. */
	.orj-art-tekst > .orj-art-sectie:first-child, .orj-ah-kort + .orj-art-sectie { margin-top: 48px; }
	.orj-art-tekst p, .orj-art-lijst, .orj-art-faq-item, .orj-art-stappen, .orj-art-inline, .orj-art-praktijk, .orj-art-sectielink, .orj-art-inline-zin, .orj-art-figuur { max-width: 620px; }
	.orj-toc { min-height: 0; padding: 0; border-radius: 12px; }
	.orj-toc--open { display: none; }
	.orj-toc--klap { display: block; }
	.orj-toc--klap summary { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; font-size: 15px !important; font-weight: 600 !important; color: var(--orj-ink) !important; }
	.orj-toc--klap ol { margin: 0 !important; padding: 0 18px 16px !important; }
	.orj-zij-calc { display: none; }
	.orj-art-ger-kop, .orj-art-ger-rij { margin-left: 0 !important; }
	.orj-art-ger-rij { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.orj-art-ger-kaart:last-child:nth-child(odd) { grid-column: 1 / -1; }   /* B-137: drie kaarten in twee kolommen = geen halve rij (B-111-regel) */
	.orj-art-ger .orj-wrap { padding: 0 32px 72px; }
}
/* < 640: telefoon (B-045-maten waar ze gelden): H1 32/38, intro 18/28, knop vol 56/16,
   Trustpilot 24 eronder in twee rijen, compacte auteurskaart, geen haak. */
@media (max-width: 639px) {
	.orj-ah .orj-wrap { padding: 32px 24px 48px; }   /* B-126: 32 + kruimels 20 + 24 = 76, dezelfde kaptop als vóór (40 + 20 + 16) */
	.orj-ah-boog { display: none; }   /* B-125: de tekst staat op 24 van de rand, een boog van 180 zou erachter komen */
	.orj-ah-tekst { padding-left: 0; }
	.orj-kruimels { margin-bottom: 24px; }
	.orj-ah-kop { font-size: 32px !important; line-height: 38px !important; }
	.orj-ah-lead { margin-top: 24px !important; font-size: 18px !important; line-height: 28px !important; }
	.orj-ah-acties { margin-top: 32px; }   /* B-126: telefoon 24 · 24 · 32 */
	.orj-ah-hook, .orj-ah-hook--compact { display: none; }
	.orj-ah-acties { align-items: stretch; }
	.orj-ah-acties .orj-cta--lg { width: 100%; }
	.orj-ah-trigger { margin-bottom: 12px !important; }
	.orj-ah-tp { margin-top: 24px; display: flex; justify-content: center; }
	.orj-ah-tp .orj-tp { --tp-h: 17.5px; }
	.orj-ah-auteur { display: block; margin-top: 28px; padding: 18px 18px 16px; border-radius: 12px; }
	.orj-ah-au-kop { gap: 14px; }
	.orj-ah-au-portret { flex-basis: 58px; width: 58px; height: 56px; }
	.orj-ah-au-naam { font-size: 16px !important; line-height: 20px !important; }
	.orj-ah-au-rol { font-size: 13.5px !important; line-height: 18px !important; }
	.orj-ah-au-meta { border-left: 0; padding-left: 0; margin-top: 14px; padding-top: 14px; border-top: 1px solid #efe7d9; gap: 4px; }
	.orj-ah-au-meta--vol { display: none; }
	.orj-ah-au-meta--compact { display: flex; }
	.orj-ah-au-mnaam { white-space: normal; }
	.orj-ah-log-lijst li { grid-template-columns: 84px minmax(0, 1fr); }
	.orj-art .orj-wrap { padding: 40px 24px 64px; }
	.orj-art-h2 { font-size: 24px !important; line-height: 30px !important; }
	.orj-art-h3 { font-size: 20px !important; line-height: 26px !important; }
	.orj-art-tekst p, .orj-art-tekst li { font-size: 17px !important; line-height: 28px !important; }
	.orj-art-tekst p { hyphens: auto; -webkit-hyphens: auto; hyphenate-limit-chars: 10 4 4; }
	.orj-art-tekst p.orj-art-aanloop + .orj-art-lijst { margin-top: 9px !important; }   /* B-157: de helft van 18 */
	.orj-art-lijst--ruim-l, .orj-art-lijst--ruim-m { --orj-lijst-tussen: 8px; }
	.orj-art-lijst--ruim-s { --orj-lijst-tussen: 14px; }
	.orj-art-tekst p + p, .orj-art-tekst .orj-art-lijst + p, .orj-art-tekst p + .orj-art-lijst, .orj-art-tekst p + .orj-art-tabel-fig, .orj-art-tekst .orj-art-lijst + .orj-art-tabel-fig { margin-top: 18px !important; }   /* B-137: was alleen p + p */
	/* B-161: een teksttabel (drie of meer kolommen, niet alleen cijfers) wordt per rij een blok: rijkop als titel, per
	   kenmerk het kolomlabel uit data-kop. Het label komt uit CSS, dus niet in de celtekst die zoekmachines lezen, en met
	   alt-tekst "" niet in de voorleesstem (de kolomkoppen blijven de echte koppen). Zelfde HTML; de tabelrollen blijven
	   (Chromium, Gecko en WebKit sinds Safari 17; gemeten in Chromium). Een cijfertabel blijft een tabel en schuift in
	   zijn vak met vaste eerste kolom (B-160). Cellen breken af zoals alinea's (B-121). */
	.orj-art-tabel th, .orj-art-tabel td { hyphens: auto; -webkit-hyphens: auto; hyphenate-limit-chars: 10 4 4; }
	.orj-art-tabel .is-getal { hyphens: manual; -webkit-hyphens: manual; }
	.orj-art-tabel--stapel, .orj-art-tabel--stapel tbody, .orj-art-tabel--stapel tr { display: block; }
	.orj-art-tabel--stapel { position: relative; }
	.orj-art-tabel--stapel thead { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
	.orj-art-tabel--stapel tbody { border-top: 2px solid var(--orj-green); }
	.orj-art-tabel--stapel tr { padding: 14px 0 16px; border-bottom: 1px solid #e5e7eb; }
	.orj-art-tabel--stapel tbody th[scope="row"], .orj-art-tabel--stapel td { display: block; padding: 0 !important; border: 0 !important; position: static; box-shadow: none; }
	.orj-art-tabel--stapel td { margin-top: 8px; }
	.orj-art-tabel--stapel td::before { content: attr(data-kop); content: attr(data-kop) / ""; display: block; margin-bottom: 2px; font-size: 14px; line-height: 20px; font-weight: 500; color: var(--orj-muted); }
	.orj-art-tabel--stapel .is-getal { text-align: left !important; white-space: normal; }
	.orj-art-sectie { margin-top: 40px; }
	.orj-ah-kort { padding: 20px; border-radius: 12px; }
	.orj-ah-kort ul { margin-top: 14px !important; gap: 12px; }
	.orj-ah-kort li a, .orj-ah-kort-vast { gap: 12px; }
	.orj-art-zij { margin-top: 24px; }
	.orj-art-inline, .orj-art-praktijk { padding: 20px; border-radius: 12px; }   /* B-137: kaarten op de telefoon 20 rondom, zoals het korte antwoord */
	.orj-figuur-kaart { padding: 20px; border-radius: 12px; }   /* B-144: kaarten op de telefoon 20 rondom (B-137) */
	.orj-tijdlijn, .orj-tijdlijn--2, .orj-tijdlijn--4, .orj-tijdlijn--5 { grid-template-columns: minmax(0, 1fr); gap: 24px; padding-left: 32px !important; }   /* B-138/B-144: gestapeld met rail links, knoop op de labelregel */
	.orj-tijdlijn li { padding: 0 !important; }
	.orj-tijdlijn li::before { left: -32px; top: 4px; }
	.orj-tijdlijn li::after { left: -25px; top: 20px; bottom: -28px; width: 2px; height: auto; }   /* B-144: segment van knoop naar knoop, ook hier eindigt de rail op de laatste */
	.orj-tijdlijn li.naar-optie::after { top: 20px; width: 0; height: auto; border-top: 0; border-left: 2px dashed var(--orj-muted); }
	.orj-art-inline .orj-cta { width: 100%; }
	.orj-art-slot-actie .orj-cta { width: 100%; }
	.orj-art-ger .orj-wrap { padding: 0 24px 64px; }
	.orj-art-ger-kop { font-size: 24px !important; line-height: 30px !important; }
	.orj-art-ger-rij { grid-template-columns: minmax(0, 1fr); gap: 16px; }
}
@media (prefers-reduced-motion: reduce) {
	.orj-ah-log summary svg, .orj-ah-au-meer summary svg, .orj-art-ger-kaart { transition: none !important; }
	.orj-toc--open ol::after, .orj-toc li::before { transition: none !important; }   /* B-128: stipvulling en rail springen dan direct */
}

/* ── 4 · Delen (B-127) ──────────────────────────────────────────────
   Eén stil bedieningselement (13,5/500 ink, share-icoon 16, hover-onderstreping zoals de
   topbar-links: kleur markeert geen link meer), als native <details>. Paneel = kaart 224
   (haarlijn #e5e7eb op wit, radius 12, --orj-schaduw-zwevend) met rijen 15/500, radius 8,
   mint-hover — het dropdown- en logpaneelpatroon (v1.7.0, B-119). Plek 1: rechts in de koprij
   van de Inhoud-kaart (sticky mee vanaf 960; paneel rechts uitgelijnd, over de lijst). Plek 2:
   voetregel onder het slot: haarlijn, 40 boven, 20 onder de lijn (paneel links uitgelijnd).
   Onder 960: de koprij bestaat niet (uitklapper), dus Delen staat rechts in de Inhoud-rij op
   14/22 met een tikoppervlak van 46 via padding (beeld ongewijzigd). Nooit oranje, nooit een
   logorij, nooit vóór de slotknop. Zonder JS: het paneel klapt native open; "Kopieer link"
   heeft JS nodig en verdwijnt zonder (html zonder .orj-js, header.js zet die klasse). */
.orj-toc-kop { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 20px; }
.orj-deel { position: relative; display: inline-flex; vertical-align: top; line-height: 20px; margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; }   /* inline-flex + 20: de koprij wordt exact 20 (orj_art_hoogtes rekent 70 + 32n) */
.orj-deel-knop { display: inline-flex; align-items: center; gap: 6px; margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; cursor: pointer; list-style: none; font-family: 'Inter', sans-serif !important; font-size: 13.5px !important; line-height: 20px !important; font-weight: 500 !important; color: var(--orj-ink) !important; text-decoration: none; text-underline-offset: 3px; box-shadow: none !important; -webkit-tap-highlight-color: transparent; }
.orj-deel-knop::-webkit-details-marker, .orj-deel-knop::marker { display: none; content: ""; }
.orj-deel-knop:hover, .orj-deel[open] .orj-deel-knop { text-decoration: underline; }
.orj-deel-knop:focus-visible { outline: 2px solid var(--orj-green); outline-offset: 2px; border-radius: 4px; }
.orj-deel-ico { flex: 0 0 auto; display: block; color: var(--orj-ink); }
.orj-deel-paneel { position: absolute; right: 0; top: calc(100% + 8px); width: 224px; padding: 6px; background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; box-shadow: var(--orj-schaduw-zwevend); z-index: 6; }
.orj-deel--voet .orj-deel-paneel { right: auto; left: 0; }
.orj-deel-item { display: flex; align-items: center; gap: 12px; width: 100%; margin: 0 !important; padding: 10px 12px !important; border: 0 !important; border-radius: 8px; background: none !important; cursor: pointer; text-align: left; font-family: 'Inter', sans-serif !important; font-size: 15px !important; line-height: 22px !important; font-weight: 500 !important; color: var(--orj-ink) !important; text-decoration: none !important; box-shadow: none !important; transition: background .15s ease; }
.orj-deel-item:hover, .orj-deel-item:focus-visible { background: var(--orj-mint) !important; outline: none; }
.orj-deel-ok { display: inline-flex; align-items: center; gap: 12px; color: var(--orj-green-dark); }
.orj-deel-ok[hidden] { display: none; }
.orj-deel-item.is-ok > .orj-deel-ico, .orj-deel-item.is-ok > span:not(.orj-deel-ok) { display: none; }
html:not(.orj-js) [data-orj-kopieer] { display: none; }
.orj-toc-vak { display: none; }
.orj-art-deel { margin: 40px 0 0 !important; padding-top: 20px; border-top: 1px solid #e5e7eb; max-width: 680px; display: flex; align-items: center; }
.orj-art-deel .orj-deel-knop { font-size: 14px !important; }
@media (max-width: 1279px) {   /* B-137: dezelfde compacte laag als de tekstkolom */
	.orj-art-deel { max-width: 580px; }
}
@media (max-width: 959px) {
	.orj-toc-vak { display: block; position: relative; }
	.orj-toc--klap summary { justify-content: flex-start; gap: 6px; padding-right: 110px; }
	.orj-toc-vak > .orj-deel { position: absolute; right: 18px; top: 14px; }
	.orj-toc-vak > .orj-deel .orj-deel-knop { font-size: 14px !important; line-height: 22px !important; padding: 12px 0 !important; margin: -12px 0 !important; }   /* tikoppervlak 46, beeld ongewijzigd */
	.orj-art-deel { order: 3; align-self: stretch; max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
	.orj-deel-item { transition: none; }
}

/* B-159 (bijvangst van de meettest): op 320 liep een H2 met "vaststellingsovereenkomst" 22 px buiten beeld (bestond al,
   los van tabellen; WCAG 1.4.10 vraagt geen zijwaarts scrollen op 320). Alleen onder 360 breken koppen af; op 360 en
   breder past het woord op een eigen regel en blijft de kop zoals goedgekeurd. overflow-wrap is het vangnet. */
@media (max-width: 359px) {
	.orj-art-h2, .orj-art-h3 { hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }
}

/* B-168: een schuivend tabelvak vervaagt aan de rechterrand, zodat geen half bedrag scherp in beeld staat ("€ 4.50" las als
   een ander bedrag, gemeten op 393); aan het eind (artikel.js zet is-eind) is de vervaging weg. */
.orj-art-tabel-schuif.is-schuift:not(.is-eind) { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent); }

/* B-170: heel smal scherm (≤ 359, zoals 320): minder inspringing en binnenruimte, zodat ook "arbeidsovereenkomst" (163 px) in de tak past */
@media (max-width: 359px) {
	.orj-boom-takken { padding-left: 28px !important; }
	.orj-boom-takken li { padding: 14px !important; }
	.orj-boom-takken li.is-groen { padding: 12px !important; }
	.orj-art-boom .orj-boom-takken li::before { left: -23px; top: 25px; width: 23px; }
	.orj-art-boom .orj-boom-takken li::after { left: -23px; }
	.orj-art-boom .orj-boom-takken li:last-child::after { height: 39px; }
	.orj-art-boom .orj-boom-takken li.is-groen::before { left: -25px; top: 23px; }
	.orj-art-boom .orj-boom-takken li.is-groen::after { left: -25px; }
}

/* B-171: de onzichtbare dubbele punt in figuurrijen staat inline, zodat tekstextractie "Dag 14: Einde bedenktijd …" leest in plaats
   van de dubbele punt op een eigen regel (gemeten in 2.45.0: innerText "Dag 0⏎:⏎Jullie …"). Visueel verandert niets: 1 px breed met
   -1 px marge, weggeknipt. */
.orj-tl-dag .orj-sr, .orj-boom-takken strong .orj-sr { position: static !important; display: inline-block !important; width: 1px !important; height: 1px !important; margin: 0 -1px 0 0 !important; padding: 0 !important; overflow: hidden !important; clip-path: inset(50%) !important; white-space: nowrap !important; }
/* B-171: vangnet voor lange samenstellingen in smalle figuurkolommen: afbreken waar de browser het kan, anders breken binnen de kaart */
.orj-tijdlijn li, .orj-boom-takken li { overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; }

/* ═══ Beeldblok in de huisstijl (B-172) ═══════════════════════════════════
   Document: mintkaart zoals elke figuur (mint = uitleg, B-144), papier met haarlijn en binnenhoek 4 (16 − 24 < 0),
   "Bekijk op ware grootte" in ink, onderschrift "Figuur n." buiten de kaart.
   Jurist: het vaste portret in de merkvorm (clipPath #orj-vorm, zoals de auteurskaart), naast naam en functie; 180 × 175,
   telefoon 112 × 109. Geen schaduw, geen oranje, geen groen accent in beelden. */
.orj-sec .orj-art-beeld.is-document img { border-radius: 4px !important; box-shadow: 0 0 0 1px rgba(17, 24, 39, .10); background: #fff; }
.orj-beeld-groot, .orj-beeld-meer { display: inline-flex; align-items: center; gap: 8px; font-size: 14px !important; line-height: 20px !important; font-weight: 600 !important; color: var(--orj-ink) !important; text-decoration: none !important; }
.orj-beeld-groot { margin-top: 14px; }
.orj-beeld-groot:hover span, .orj-beeld-meer:hover { text-decoration: underline !important; text-underline-offset: 3px; }
.orj-beeld-groot:focus-visible, .orj-beeld-meer:focus-visible { outline: 2px solid var(--orj-green); outline-offset: 2px; border-radius: 4px; }
.orj-art-beeld.is-portret { display: flex; align-items: center; gap: 28px; }
.orj-beeld-portret { position: relative; flex: 0 0 180px; width: 180px; height: 175px; }
.orj-sec .orj-art-beeld.is-portret img { width: 100% !important; height: 100% !important; object-fit: cover; border-radius: 0 !important; clip-path: url(#orj-vorm); }
.orj-beeld-portret > svg { display: block; width: 100%; height: 100%; }
.orj-art-beeld.is-portret figcaption { display: flex; flex-direction: column; gap: 2px; margin: 0 !important; font-size: 15px !important; line-height: 22px !important; color: #4b5563 !important; }
.orj-art-beeld.is-portret figcaption strong { font-size: 17px; line-height: 24px; font-weight: 600; color: var(--orj-ink); }
.orj-beeld-meer { margin-top: 8px; }
@media (max-width: 639px) {
	.orj-art-beeld.is-portret { gap: 18px; }
	.orj-beeld-portret { flex-basis: 112px; width: 112px; height: 109px; }
}

/* ═══ CTA-blok in de tekst (B-173) ═══════════════════════════════════════
   Drie doelen, één bouw. Zand = actie (VSO-check, oranje knop), mint = hulpmiddel (calculator), wit met haarlijn =
   persoonlijk (contact, jurist in de merkvorm); de twee laatste met de witte knop: de oranje headerknop staat op
   artikelpagina's altijd in beeld (B-131). Tekst op leesformaat, zodat het blok als inhoud leest (NN/g banner blindness).
   De regel onder de knop: 13/18, gewicht 500, #4b5563, 12 onder de knop, links op de lijn van kop, zin en knop, ook op de
   telefoon (team), nooit breder dan de knop bij de standaardteksten. De selectors met p winnen van .orj-art-tekst p. */
.orj-art-tekst .orj-art-ctablok, .orj-art-ctablok { display: flex; gap: 24px; align-items: flex-start; margin: 40px 0 !important; max-width: 680px; padding: 28px; border-radius: 16px; box-sizing: border-box; }
.orj-art-ctablok--calc { background: var(--orj-mint); }
.orj-art-ctablok--vso { background: var(--orj-zand); border: 1px solid #eadfcd; }
.orj-art-ctablok--contact { background: #fff; border: 1px solid #e5e7eb; }
.orj-ctb-beeld { flex: 0 0 64px; width: 64px; }
.orj-ctb-beeld > svg { display: block; width: 64px; height: 64px; }
.orj-ctb-portret { position: relative; height: 62px; }
.orj-ctb-portret > svg:not(.orj-vorm-def) { height: 62px; }
.orj-sec .orj-ctb-portret img, .orj-ctb-portret img { display: block; width: 64px !important; height: 62px !important; object-fit: cover; border-radius: 0 !important; clip-path: url(#orj-vorm); }
.orj-ctb-tekst { min-width: 0; flex: 1 1 auto; }
.orj-art-ctablok p.orj-ctb-kop { margin: 0 !important; max-width: 520px; font-size: 18px !important; line-height: 28px !important; font-weight: 700 !important; letter-spacing: -.01em !important; color: var(--orj-ink) !important; text-wrap: balance; }
.orj-art-ctablok p.orj-ctb-zin { margin: 4px 0 0 !important; max-width: 520px; font-size: 18px !important; line-height: 28px !important; font-weight: 400 !important; color: var(--orj-ink) !important; text-wrap: pretty; }
.orj-ctb-actie { display: inline-flex; flex-direction: column; align-items: flex-start; max-width: 100%; margin-top: 20px; }
.orj-art-ctablok .orj-ctb-actie .orj-ctb-onder { display: flex; align-items: center; gap: 8px; max-width: 100%; margin: 12px 0 0 !important; font-size: 13px !important; line-height: 18px !important; font-weight: 500 !important; color: #4b5563 !important; }
.orj-ctb-stip { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--orj-green); }
.orj-ctb-onder.is-dicht .orj-ctb-stip { background: #9ca3af; }
@media (max-width: 639px) {
	.orj-art-tekst .orj-art-ctablok, .orj-art-ctablok { flex-direction: column; gap: 14px; padding: 20px; }
	.orj-ctb-beeld { flex-basis: auto; width: 48px; }
	.orj-ctb-beeld > svg { width: 48px; height: 48px; }
	.orj-ctb-portret, .orj-ctb-portret > svg:not(.orj-vorm-def) { height: 47px; }
	.orj-sec .orj-ctb-portret img, .orj-ctb-portret img { width: 48px !important; height: 47px !important; }
	.orj-art-ctablok p.orj-ctb-kop, .orj-art-ctablok p.orj-ctb-zin { font-size: 17px !important; }
	.orj-ctb-actie { display: flex; align-items: stretch; }
	.orj-ctb-actie .orj-cta { width: 100%; justify-content: center; box-sizing: border-box; }
	.orj-art-ctablok .orj-ctb-actie .orj-ctb-onder { align-self: flex-start; }   /* team: ook op de telefoon links onder de knop */
}
/* WCAG 1.4.10 (reflow op 320 px): een lang knoplabel ("Bereken je transitievergoeding") past daar niet op één regel; dan mag het
   over twee regels, gecentreerd, en blijft de knop minstens 48 hoog. Gemeten: zonder deze regel werd de pagina op 320 breder (348). */
@media (max-width: 379px) {
	.orj-ctb-actie .orj-cta { height: auto !important; min-height: 48px; padding-top: 13px !important; padding-bottom: 13px !important; white-space: normal !important; line-height: 22px !important; text-align: center; }
}