/* ═══════════════════════════════════════════════════════════════
   ORJ Calculator: B-079 (flow), B-081 (uitkomst), B-082 (rekenscherm),
   B-084 (hoeken). Laadt ná orj-cta-system.css en orj-secties.css.
   Schaal: 8/12/16 tussen blokken, letters 13 · 14 · 16 · 22/26 · 44/56.
   Breekpunten op de containerbreedte: 640 (twee kolommen in velden,
   twee kolommen tegels) en 960 (zijkolom naast de kaart).
   Het Pro-thema blijft actief (regel 7): lettertype, box-sizing en
   knopresets zijn hier afgedwongen. Niets in dit bestand mag
   meetgedrag van header.js beïnvloeden (de focusstand staat in header.css).
   ═══════════════════════════════════════════════════════════════ */

.orj-calc { --r: var(--orj-radius, 8px); --rk: 16px; --rv: 10px; --lijn: #e5dccc; --haar: #f0ebe1; --fout: #b42318;
	container: orjcalc / inline-size; font-family: var(--orj-font, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif) !important;
	color: var(--orj-ink); font-size: 16px; line-height: 1.5; background: var(--orj-zand); padding: 0; -webkit-font-smoothing: antialiased;
	/* B-085: het vlak loopt van rand tot rand (zelfde truc als .orj-sec in orj-secties.css, zonder die klasse: die zet
	   p-marges op 0 en wint van onze hint) en vult het scherm onder de header, zoals de referentie; op de uitkomst groeit het mee. */
	width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); position: relative;
	min-height: calc(100vh - var(--hdr-total-h, 73px)); min-height: calc(100svh - var(--hdr-total-h, 73px)); }
.orj-calc *, .orj-calc *::before, .orj-calc *::after { box-sizing: border-box !important; font-family: inherit !important; }
:where(.orj-calc) button, :where(.orj-calc) input { font: inherit; margin: 0; }
.orj-calc button, .orj-calc .orj-calc-tegel, .orj-calc .orj-cta, .orj-calc .orj-calc-seg button { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
:where(.orj-calc) p { margin: 0; }
:where(.orj-calc) h1, :where(.orj-calc) h2, :where(.orj-calc) h3, :where(.orj-calc) h4 { margin: 0; padding: 0; text-transform: none !important; letter-spacing: normal; }   /* h1: de kop van scherm 1 op de rekenpagina (B-232) */
/* B-094: de paginakop is een verborgen h1 (Google en schermlezers), de schermen blijven h2; op het scherm kost hij 0 px.
   B-232: op de reken- en dienstpagina van de kennisbank is de kop van scherm 1 zelf de H1 (.orj-calc-kop op een h1); de sr-h1 valt dan weg. */
.orj-calc-sr { position: absolute !important; width: 1px; height: 1px; margin: 0; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.orj-calc .orj-cta { border-radius: var(--r) !important; }   /* B-093: --r = het systeemtoken (8); kaart 16, vlakken 10 (geneste hoek) */
.orj-calc .orj-cta .orj-arrow svg { width: 18px; height: 18px; }   /* het systeem maat de pijl via width/height op de svg; onze svg's dragen die niet */
.orj-calc-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
.orj-calc-noscript { font-size: 15px; color: var(--orj-muted); margin: 8px 0 0; }
html.orj-js .orj-calc-noscript { display: none; }
html:not(.orj-js) .orj-calc-stand, html:not(.orj-js) .orj-calc-fasen { display: none !important; }

/* ── raster: kaart + zijkolom ── */
.orj-calc-wrap { max-width: 692px; margin: 0 auto; padding: 16px 16px 24px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-items: start; }
.orj-calc-wrap > * { min-width: 0; }
@container orjcalc (min-width: 640px) { .orj-calc-wrap { padding: 24px 24px 32px; max-width: 708px; } }
@container orjcalc (min-width: 960px) { .orj-calc-wrap { padding: 20px 24px; } .orj-calc-wrap--zij { max-width: 1072px; grid-template-columns: 660px 316px; gap: 48px; } .orj-calc-zij { gap: 16px; } }
.orj-calc-zij { display: grid; gap: 12px; }
.orj-calc-zk { background: #fff; border: 1px solid var(--lijn); border-radius: var(--rk); padding: 20px 24px; }
.orj-calc-zk--tp { display: flex; justify-content: center; }
.orj-calc-zk h3 { font-size: 15px; font-weight: 600; margin: 0 0 12px; }
.orj-calc-zk ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; font-size: 14px; }
.orj-calc-zk li { display: flex; gap: 8px; align-items: flex-start; line-height: 1.4; }
.orj-calc-zk li .orj-calc-ring { width: 18px; height: 18px; border: 0; background: var(--orj-mint); color: var(--orj-green); margin-top: 1px; }
.orj-calc-zk li .orj-calc-ring svg { opacity: 1; width: 11px; height: 11px; }
/* ── B-087 · social proof zoals de referentie: Trustpilot gestapeld, logo's grijs en even zwaar ── */
.orj-calc-zk--tp { display: flex; justify-content: center; padding: 22px 24px; }
.orj-calc-zk--trustbox { padding: 16px; }
.orj-calc-tp { display: flex; flex-direction: column; align-items: center; gap: 10px; text-decoration: none !important; color: var(--orj-ink); }
.orj-calc-tp-logo { height: 26px; width: auto; display: block; }
.orj-calc-tp-naam { display: inline-flex; align-items: center; gap: 5px; font-size: 20px; font-weight: 700; letter-spacing: -.01em; color: #191919; }
.orj-calc-tp-naam svg { width: 22px; height: 22px; }
.orj-calc-tp-sterren { display: block; height: 28px; }
.orj-calc-tp-sterren img, .orj-calc-tp-sterren svg { height: 28px; width: auto; display: block; }
.orj-calc-tp-score { font-size: 14px; color: #191919; }
.orj-calc-tp-score b { font-weight: 700; }
.orj-calc-tp-aantal { text-decoration: underline; text-underline-offset: 2px; margin-left: 4px; }
.orj-calc-tp:hover .orj-calc-tp-aantal { text-decoration: none; }
.orj-calc-zk--bekend h3 { text-align: center; margin-bottom: 16px; }
.orj-calc-bekend { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 16px 20px; align-items: center; justify-items: center; }
.orj-calc-bekend li { display: flex; align-items: center; justify-content: center; width: 100%; height: 36px; }
.orj-calc-bekend li a { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; text-decoration: none !important; }
.orj-calc-bekend img { max-width: 120px; max-height: 32px; width: auto; height: auto; display: block; filter: grayscale(1); opacity: .62; transition: opacity .2s; }   /* alle merken even grijs en even zwaar */
.orj-calc-bekend li:hover img { opacity: .85; }
.orj-calc-bekend span { font-size: 15px; font-weight: 600; color: #9aa1ad; letter-spacing: -.01em; white-space: nowrap; line-height: 1.2; }
@container orjcalc (min-width: 420px) { .orj-calc-bekend { grid-template-columns: repeat(4, 1fr); gap: 12px; } }
@container orjcalc (min-width: 960px) { .orj-calc-zk--tp { padding: 28px 24px; } .orj-calc-tp { gap: 12px; } .orj-calc-tp-logo { height: 30px; } .orj-calc-tp-sterren, .orj-calc-tp-sterren img, .orj-calc-tp-sterren svg { height: 32px; } .orj-calc-zk--bekend { padding: 24px 28px 28px; } .orj-calc-bekend { grid-template-columns: 1fr 1fr; gap: 22px 24px; } .orj-calc-bekend li { height: 40px; } .orj-calc-bekend img { max-width: 128px; max-height: 36px; } .orj-calc-bekend span { font-size: 16px; } }

/* ── kaart ── */
.orj-calc-kaart { position: relative; background: #fff; border: 1px solid var(--lijn); border-radius: var(--rk); padding: 20px 20px 24px; }
@container orjcalc (min-width: 640px) { .orj-calc-kaart { padding: 24px 40px 28px; } }
.orj-calc-stand { display: none; }
.orj-calc-stand.is-aan { display: block; }

/* ── fasen: genummerde markers in de merkvorm (B-079, r2.1/r4.7) ── */
.orj-calc-fasen { --bol: 24px; --gap: 5px; position: relative; display: grid; grid-template-columns: repeat(4, 1fr); margin: 0 0 20px; padding: 0; list-style: none; }
.orj-calc-fase { display: flex; flex-direction: column; align-items: center; gap: 6px; position: relative; z-index: 1; min-width: 0; }
.orj-calc-bol { position: relative; width: calc(var(--bol) + 2px); height: calc(var(--bol) + 2px); display: flex; align-items: center; justify-content: center; color: var(--orj-muted); font-size: 12px; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; }
.orj-calc-bol .orj-calc-vorm { position: absolute; inset: 0; width: 100%; height: 100%; fill: #fff; stroke: #c6d7cf; stroke-width: 4px; stroke-linejoin: round; overflow: visible; clip-path: url(#orj-calc-vorm-clip); }
.orj-calc-bol .orj-calc-halo { display: none; position: absolute; left: 50%; top: 50%; width: calc(100% + 8px); height: calc(100% + 8px); transform: translate(-50%, -50%); fill: var(--orj-mint); }
.orj-calc-bol i { position: relative; z-index: 1; font-style: normal; transform: translateY(-.5px); }
.orj-calc-bol .orj-calc-fvink { display: none; position: relative; z-index: 1; width: 12px; height: 12px; color: #fff; }
.orj-calc-lbl { font-size: 12px; font-weight: 500; color: var(--orj-muted); line-height: 1.2; white-space: nowrap; letter-spacing: -.005em; }
.orj-calc-fase.is-actief .orj-calc-vorm, .orj-calc-fase.is-klaar .orj-calc-vorm { fill: var(--orj-green); stroke: none; }
.orj-calc-fase.is-actief .orj-calc-bol, .orj-calc-fase.is-klaar .orj-calc-bol { color: #fff; }
.orj-calc-fase.is-actief .orj-calc-halo { display: block; }
.orj-calc-fase.is-actief .orj-calc-lbl { color: var(--orj-green-dark); font-weight: 600; }
.orj-calc-fase.is-klaar .orj-calc-lbl { color: var(--orj-ink); }
.orj-calc-fase.is-klaar .orj-calc-bol i { display: none; }
.orj-calc-fase.is-klaar .orj-calc-fvink { display: block; }
.orj-calc-lijn { position: absolute; top: calc(var(--bol) / 2); height: 2px; border-radius: 1px; background: var(--orj-mint-donker); width: calc(25% - var(--bol) - 2 * var(--gap)); z-index: 0; }
.orj-calc-lijn--0 { left: calc(12.5% + var(--bol) / 2 + var(--gap)); }
.orj-calc-lijn--1 { left: calc(37.5% + var(--bol) / 2 + var(--gap)); }
.orj-calc-lijn--2 { left: calc(62.5% + var(--bol) / 2 + var(--gap)); }
.orj-calc-lijn.is-klaar { background: var(--orj-green); }
@container orjcalc (max-width: 359.98px) { .orj-calc-fase:not(.is-actief) .orj-calc-lbl { visibility: hidden; } }
/* B-090: op mobiel geen balk op rekenscherm en uitkomst (vouwbudget); op desktop blijft hij, afgerond met vier vinkjes. */
@container orjcalc (max-width: 959.98px) { .orj-calc-fasen--eind { display: none; } }
@container orjcalc (min-width: 640px) { .orj-calc-fasen { --bol: 26px; --gap: 6px; margin-bottom: 26px; } .orj-calc-fase { gap: 8px; } .orj-calc-bol { font-size: 13px; } .orj-calc-bol .orj-calc-fvink { width: 13px; height: 13px; } .orj-calc-lbl { font-size: 13px; } }
/* ── B-085 · desktop: de fasen boven de kaart, over kaart én zijkolom, labels boven de bolletjes (referentie) ──
   De <ol> blijft in de kaart (mobiel ongewijzigd) en wordt vanaf 960 absoluut boven de kaart gezet; de wrap
   reserveert 76 px (label 13 + 8 + bol 28 + 27 lucht). De lijnen zijn hier flex-items tussen de fasen. */
@container orjcalc (min-width: 960px) {
	.orj-calc-wrap { padding-top: 96px; }
	.orj-calc-kaart { position: relative; }
	.orj-calc-fasen { --bol: 24px; --gap: 0px; position: absolute; left: 0; top: -76px; width: calc(100% + var(--zij-extra, 0px)); margin: 0; display: flex; align-items: flex-end; justify-content: space-between; }
	.orj-calc-fase { flex-direction: column-reverse; gap: 10px; }
	.orj-calc-lijn { position: static; left: auto; width: auto; flex: 1 1 auto; margin: 0 16px calc((var(--bol) + 2px) / 2 - 1px); height: 2px; }
	.orj-calc-lbl { font-size: 15px; }
	.orj-calc-fase.is-actief .orj-calc-lbl { color: var(--orj-green-dark); }
	.orj-calc-wrap--zij { --zij-extra: 364px; }   /* gap 48 + zijkolom 316 */
}

/* ── kop · streep · hint (vast ritme, r2.3) ── */
.orj-calc-kop { font-size: 22px !important; font-weight: 600 !important; letter-spacing: -.015em !important; line-height: 1.2 !important; color: var(--orj-ink) !important; margin: 0 !important; padding: 0 !important; text-transform: none !important; }   /* B-232: ook als h1 (Pro zet op h1 eigen marges en kapitalen; gelijke specificiteit is hier niet te vertrouwen) */
.orj-calc-kop:focus { outline: none; }
@container orjcalc (min-width: 640px) { .orj-calc-kop { font-size: 26px !important; letter-spacing: -.02em !important; } }
@container orjcalc (max-width: 359.98px) { .orj-calc-kop { font-size: 19px !important; } .orj-calc-sub { font-size: 15px; } }
.orj-calc-streep { display: block; width: 44px; height: 5px; border-radius: 3px; background: var(--orj-green); margin: 12px 0 14px; }
.orj-calc-sub { font-size: 16px; color: var(--orj-muted); margin: -8px 0 14px; line-height: 1.45; }

/* ── velden ── */
.orj-calc-veld { margin-bottom: 16px; }
.orj-calc-veld--vink { margin-top: 4px; margin-bottom: 0; display: grid; gap: 6px; }   /* de knoppenrij brengt zelf zijn 18 px mee (padding), dus geen ondermarge die in flex niet meer samenvalt */
.orj-calc-dubbel + .orj-calc-veld--vink { margin-top: -4px; }
/* B-089: de uitleg bij "nog niet bekend" heeft altijd zijn ruimte (twee regels mobiel, één desktop), dus aanvinken verschuift niets. */
.orj-calc-fictief { min-height: 56px; padding: 8px 12px; border-radius: var(--rv); background: var(--orj-mint); font-size: 14px; line-height: 1.4; color: var(--orj-ink); visibility: hidden; display: flex; align-items: center; }
.orj-calc-fictief.is-aan { visibility: visible; }
.orj-calc-fictief b { font-weight: 600; }
@container orjcalc (min-width: 640px) { .orj-calc-fictief { min-height: 44px; padding: 8px 14px; } }
/* B-091: ook op mobiel alle invoerschermen even hoog (459 = scherm 1 op 390 plus speling voor iOS-afronding); de knop staat dan
   op elk scherm op dezelfde plek. Het hoogste scherm past binnen 660, dus alle schermen passen. */
@container orjcalc (max-width: 959.98px) {
	.orj-calc-stand.is-aan:not(.orj-calc-stand--uitkomst) { display: flex; flex-direction: column; min-height: var(--calc-stand-h-m, 459px); }
	.orj-calc-stand:not(.orj-calc-stand--uitkomst) .orj-calc-acties { margin-top: auto; padding-top: 18px; }
}
.orj-calc-lb { display: block; font-size: 16px; font-weight: 600; margin-bottom: 8px; line-height: 1.35; color: var(--orj-ink); }
.orj-calc-lb--licht { font-weight: 500; }
.orj-calc .orj-invoer { display: block; width: 100%; min-width: 0; height: 48px; margin: 0; padding: 0 14px; background: #fff; color: var(--orj-ink); border: 1px solid #c6d7cf; border-radius: var(--r) !important; font-size: 16px !important; line-height: 1; box-shadow: none; appearance: none; -webkit-appearance: none; transition: border-color .15s ease; }
.orj-calc .orj-invoer::placeholder { color: #9ca3af; }
.orj-calc .orj-invoer:hover { border-color: #9dbfb1; }
.orj-calc .orj-invoer:focus, .orj-calc .orj-invoer:focus-visible { outline: 2px solid var(--orj-green); outline-offset: 2px; border-color: var(--orj-green); }
.orj-calc .orj-invoer:disabled { background: #f3f4f6; color: #9ca3af; }
.orj-calc .orj-invoer--smal { max-width: 160px; }
/* B-092: datums zijn tekstvelden dd-mm-jjjj (GOV.UK-patroon), geen native kiezer: identiek op elk toestel. */
.orj-calc .orj-calc-datum { font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.orj-calc input:focus { scroll-margin-top: 96px; }
.orj-calc-euro { position: relative; }
.orj-calc-euro .orj-invoer { padding-left: 36px !important; font-size: 18px !important; font-weight: 500; }
.orj-calc-euro::before { content: '€'; position: absolute; left: 14px; top: 0; height: 48px; display: flex; align-items: center; font-weight: 600; color: var(--orj-muted); pointer-events: none; font-size: 17px; }
.orj-calc-hint { font-size: 14px; color: var(--orj-muted); margin-top: 8px; line-height: 1.45; }
.orj-calc-fout { display: none; font-size: 14px; color: var(--fout); margin-top: 8px; font-weight: 500; }
.orj-calc-fout.is-aan { display: block; }
.orj-calc-dubbel { display: grid; gap: 16px; }
@container orjcalc (min-width: 640px) { .orj-calc-dubbel { grid-template-columns: 1fr 1fr; gap: 20px; } }
.orj-calc-vink { display: flex; align-items: center; gap: 12px; min-height: 40px; cursor: pointer; font-size: 16px; line-height: 1.35; padding: 2px 0; margin: 0; font-weight: 400; }
.orj-calc-vink input { width: 20px; height: 20px; margin: 0; accent-color: var(--orj-green); flex-shrink: 0; cursor: pointer; appearance: auto; -webkit-appearance: checkbox; }
.orj-calc-vink input:focus-visible { outline: 2px solid var(--orj-green); outline-offset: 2px; }
.orj-calc-onthul { display: none; margin-top: 8px; grid-template-columns: minmax(0, 1fr) 150px; gap: 0 12px; align-items: center; }
.orj-calc-onthul.is-aan { display: grid; }
.orj-calc-onthul .orj-calc-lb--licht { font-size: 14px; margin: 0; color: var(--orj-ink); line-height: 1.35; }
.orj-calc-onthul .orj-calc-fout { grid-column: 1 / -1; }
@container orjcalc (min-width: 640px) { .orj-calc-onthul { grid-template-columns: minmax(0, 1fr) 200px; } }

/* ── keuzetegels (md-hoogte 48, B-079) ── */
.orj-calc-tegels { display: grid; gap: 8px; }
@container orjcalc (min-width: 640px) { .orj-calc-tegels { grid-template-columns: 1fr 1fr; gap: 12px; } }
.orj-calc-tegel { display: flex; align-items: center; gap: 14px; min-height: 48px; padding: 6px 16px; background: #fff; border: 1px solid #c6d7cf; border-radius: var(--r); font-size: 16px; font-weight: 500; color: var(--orj-ink); text-align: left; cursor: pointer; transition: border-color .15s, background .15s; line-height: 1.3; box-shadow: none; text-transform: none !important; letter-spacing: normal; }
.orj-calc-tegel:hover { border-color: #9dbfb1; }
.orj-calc-tegel:active { background: var(--orj-mint); }
.orj-calc-tegel:focus-visible { outline: 2px solid var(--orj-green); outline-offset: 2px; }
.orj-calc-ring { width: 20px; height: 20px; border-radius: 50%; border: 2px solid #b9cfc5; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; color: #fff; transition: background .15s, border-color .15s; }
.orj-calc-tegel[role="checkbox"] .orj-calc-ring { border-radius: 5px; }
.orj-calc-ring svg { width: 12px; height: 12px; opacity: 0; }
.orj-calc-tegel[aria-checked="true"] { border-color: var(--orj-green); background: var(--orj-mint); }
.orj-calc-tegel[aria-checked="true"] .orj-calc-ring { background: var(--orj-green); border-color: var(--orj-green); }
.orj-calc-tegel[aria-checked="true"] .orj-calc-ring svg { opacity: 1; }
.orj-calc-tegel small { display: block; font-weight: 400; color: var(--orj-muted); font-size: 14px; }

/* ── knoppenrij: één primair, Terug als tekst eronder (GOV.UK/Material, r2.2) ── */
.orj-calc-acties { margin-top: 18px; display: grid; gap: 6px; justify-items: center; }
.orj-calc-acties .orj-cta { width: 100%; }
.orj-calc-terug { color: var(--orj-muted); font-weight: 500; font-size: 14px; background: none !important; border: 0 !important; padding: 0 8px; min-height: 44px; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; border-radius: 6px; box-shadow: none !important; text-transform: none !important; }
.orj-calc-terug:hover { color: var(--orj-ink); text-decoration: underline; text-underline-offset: 3px; }
.orj-calc-terug:focus-visible { outline: 2px solid var(--orj-green); outline-offset: 2px; }
.orj-calc-terug[hidden] { display: none; }
.orj-calc-micro { font-size: 13px; color: var(--orj-muted); text-align: center; line-height: 1.45; margin: 0; }
.orj-calc-micro a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
@container orjcalc (min-width: 640px) { .orj-calc-acties { grid-template-columns: 1fr auto; justify-items: stretch; align-items: center; gap: 16px; } .orj-calc-acties .orj-cta { width: auto; min-width: 200px; grid-column: 2; grid-row: 1; justify-self: end; } .orj-calc-acties .orj-calc-terug { grid-column: 1; grid-row: 1; justify-self: start; margin-left: -8px; } .orj-calc-acties--micro .orj-calc-micro { grid-column: 1 / -1; grid-row: 2; text-align: right; } }
@media (prefers-reduced-motion: reduce) { .orj-calc * { transition: none !important; } }

/* ── rekenscherm (B-082) ── */
.orj-calc-reken { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 10px; }
.orj-calc-rk { display: grid; grid-template-columns: 24px 1fr; gap: 0 12px; align-items: center; min-height: 32px; font-size: 15px; color: var(--orj-muted); transition: color .2s; }
.orj-calc-rk .orj-calc-bol { grid-row: 1 / 3; align-self: start; margin-top: 1px; width: 24px; height: 24px; }
.orj-calc-rk-u { grid-column: 2; font-weight: 600; color: var(--orj-ink); font-variant-numeric: tabular-nums; font-size: 14px; line-height: 1.3; min-height: 1.3em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0; transition: opacity .25s; }
.orj-calc-rk.is-actief { color: var(--orj-ink); }
.orj-calc-rk.is-actief .orj-calc-vorm, .orj-calc-rk.is-klaar .orj-calc-vorm { fill: var(--orj-green); stroke: none; }
.orj-calc-rk.is-actief .orj-calc-bol, .orj-calc-rk.is-klaar .orj-calc-bol { color: #fff; }
.orj-calc-rk.is-actief .orj-calc-halo { display: block; }
.orj-calc-rk.is-klaar { color: var(--orj-ink); }
.orj-calc-rk.is-klaar .orj-calc-bol i { display: none; }
.orj-calc-rk.is-klaar .orj-calc-fvink { display: block; }
.orj-calc-rk.is-klaar .orj-calc-rk-u { opacity: 1; }
.orj-calc-rk.is-zoekt .orj-calc-rk-u { opacity: 1; color: var(--orj-muted); font-weight: 500; }
.orj-calc-rk.is-zoekt .orj-calc-rk-u::after { content: ''; display: inline-block; width: 1.2em; text-align: left; animation: orj-calc-puntjes 1.2s steps(4, end) infinite; }
@keyframes orj-calc-puntjes { 0% { content: ''; } 25% { content: '.'; } 50% { content: '..'; } 75% { content: '...'; } }
@media (prefers-reduced-motion: reduce) { .orj-calc-rk.is-zoekt .orj-calc-rk-u::after { animation: none; content: '...'; } }
@container orjcalc (min-width: 640px) { .orj-calc-rk { grid-template-columns: 26px 1fr auto; font-size: 16px; min-height: 34px; } .orj-calc-rk .orj-calc-bol { width: 26px; height: 26px; font-size: 13px; grid-row: auto; align-self: center; margin-top: 0; } .orj-calc-rk-u { grid-column: 3; text-align: right; font-size: 15px; } .orj-calc-reken { gap: 12px; } }

/* ── uitkomst, laag 1 (B-081: één getal, bijschrift boven, duiding onder) ── */
.orj-calc-cap { font-size: 13px; font-weight: 500; color: var(--orj-muted); margin: 0 0 4px; line-height: 1.3; display: block; }
.orj-calc-hero { font-size: 44px !important; font-weight: 700 !important; line-height: 1.05 !important; margin: 0 !important; font-variant-numeric: tabular-nums; letter-spacing: -.03em !important; color: var(--orj-ink); }
.orj-calc-cap2 { font-size: 14px; color: var(--orj-muted); margin: 8px 0 0; line-height: 1.4; }
.orj-calc-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--lijn); }
.orj-calc-stat { display: grid; gap: 2px; }
.orj-calc-stat .orj-calc-cap { margin: 0; }
.orj-calc-val { font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -.01em; display: flex; align-items: center; gap: 5px; line-height: 1.3; }
.orj-calc-val svg { width: 15px; height: 15px; color: var(--orj-green); flex-shrink: 0; }
.orj-calc-vraag { font-size: 16px; font-weight: 600; margin: 20px 0 6px; line-height: 1.35; }
.orj-calc-seg { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid #c6d7cf; border-radius: var(--r); overflow: hidden; width: 100%; }
.orj-calc-seg button { height: 48px; background: #fff !important; border: 0 !important; font-size: 16px; font-weight: 500; color: var(--orj-ink) !important; cursor: pointer; border-radius: 0 !important; box-shadow: none !important; text-transform: none !important; }
.orj-calc-seg button + button { border-left: 1px solid #c6d7cf !important; }
.orj-calc-seg button[aria-checked="true"] { background: var(--orj-mint) !important; color: var(--orj-green-dark) !important; font-weight: 600; }
.orj-calc-seg button:focus-visible { outline: 2px solid var(--orj-green); outline-offset: -3px; }
.orj-calc-cta { margin-top: 12px; display: grid; gap: 8px; }
.orj-calc-cta .orj-cta { width: 100%; }
.orj-calc-cta .orj-cta[hidden] { display: none !important; }
.orj-calc-cta .orj-calc-micro { margin-top: 2px; grid-column: 1 / -1; white-space: nowrap; }
@container orjcalc (max-width: 359.98px) { .orj-calc-cta .orj-calc-micro { font-size: 12px; } }
.orj-calc .orj-cta--ghost[aria-expanded="true"] { background: var(--orj-mint); border-color: var(--orj-mint-donker); }
.orj-calc-bod { display: none; margin-top: 12px; }
.orj-calc-bod.is-aan { display: block; }
.orj-calc-bod-uit { font-size: 14px; line-height: 1.45; margin: 8px 0 0; }
.orj-calc-bod-uit:empty { display: none; }
.orj-calc-bod-rij { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--haar); }
.orj-calc-bod-rij span:first-child { color: var(--orj-muted); }
.orj-calc-bod-rij b { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.orj-calc-bod-rij.is-laag b { color: var(--orj-cta-text); }
.orj-calc-bod-oordeel { margin: 8px 0 0; font-size: 14px; line-height: 1.45; }
.orj-calc-bod-oordeel b { font-weight: 600; }
.orj-calc-letop { font-size: 14px; line-height: 1.45; margin: 12px 0 0; }
.orj-calc-letop[hidden] { display: none; }
.orj-calc-letop b { font-weight: 600; }
.orj-calc-lead { font-size: 17px !important; font-weight: 600; line-height: 1.35; margin-bottom: 10px !important; }
.orj-calc-cta--een { margin-top: 16px; }
.orj-calc-slot { text-align: center; margin: 16px 0 0; }
@container orjcalc (min-width: 640px) { .orj-calc-hero { font-size: 56px !important; } .orj-calc-cap { font-size: 14px; } .orj-calc-cap2 { font-size: 15px; } .orj-calc-hero-wrap { display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: start; } .orj-calc-stats { grid-template-columns: 1fr; gap: 14px; margin: 0 0 4px; padding: 0 0 0 24px; border-top: 0; border-left: 1px solid var(--lijn); min-width: 170px; } .orj-calc-val { font-size: 20px; } .orj-calc-vraag { margin-top: 24px; } .orj-calc-cta { margin-top: 16px; grid-template-columns: 1fr 1fr; gap: 12px; } .orj-calc-cta--een, .orj-calc-cta.is-een { grid-template-columns: 1fr; } .orj-calc-letop { font-size: 15px; margin-top: 14px; } }

/* ── uitkomst, laag 2: gegroepeerde lijsten (r4.1/r4.2) ── */
.orj-calc-laag2 { margin-top: 16px; }
.orj-calc-l2s { padding-top: 20px; margin-top: 20px; border-top: 1px solid var(--lijn); }
.orj-calc-l2s--slot { display: grid; gap: 12px; justify-items: start; }
.orj-calc-sk { font-size: 17px !important; font-weight: 600 !important; letter-spacing: -.01em; margin: 0 0 12px !important; line-height: 1.3 !important; color: var(--orj-ink) !important; }
.orj-calc-body { font-size: 15px; margin: 0 0 12px; line-height: 1.55; }
.orj-calc-body:last-child { margin-bottom: 0; }
.orj-calc-grp { margin-bottom: 16px; }
.orj-calc-grp:last-of-type { margin-bottom: 0; }
.orj-calc-grp-cap { font-size: 13px; font-weight: 600; color: var(--orj-muted); margin: 0 0 4px; line-height: 1.3; }
.orj-calc-rij { display: grid; grid-template-columns: 1fr auto; gap: 2px 16px; font-size: 14px; padding: 8px 0; border-bottom: 1px solid var(--haar); align-items: baseline; }
.orj-calc-rij:last-child { border-bottom: 0; }
.orj-calc-rij .rl { grid-column: 1; grid-row: 1; color: var(--orj-muted); }
.orj-calc-rij .rv { grid-column: 2; grid-row: 1; font-weight: 500; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; font-size: 15px; }
.orj-calc-rij .rs { grid-column: 1 / -1; grid-row: 2; font-size: 13px; color: var(--orj-muted); line-height: 1.4; }
.orj-calc-rij.is-tot { border-top: 1px solid #d1d5db; margin-top: 2px; padding-top: 10px; }
.orj-calc-rij.is-tot .rl { color: var(--orj-ink); font-weight: 600; }
.orj-calc-rij.is-tot .rv { font-weight: 600; font-size: 16px; }
.orj-calc-rij.is-tot .rs { display: none; }
.orj-calc-disclaimer { margin: 16px 0 0; padding: 14px 16px; background: var(--orj-zand); border-radius: var(--rv); }
.orj-calc-disclaimer h4 { font-size: 15px !important; font-weight: 600 !important; margin: 0 0 6px !important; line-height: 1.3 !important; }
.orj-calc-disclaimer p { font-size: 14px; line-height: 1.5; }
.orj-calc-verg { border-top: 1px solid var(--haar); }
.orj-calc-verg-kop { display: none; }
.orj-calc-vr { display: grid; grid-template-columns: 1fr; gap: 6px; padding: 12px 0; border-bottom: 1px solid var(--haar); }
.orj-calc-vr .vl { font-weight: 600; font-size: 15px; line-height: 1.3; }
.orj-calc-vr .vs, .orj-calc-vr .vh { display: grid; grid-template-columns: 18px 1fr; gap: 8px; align-items: start; font-size: 14px; line-height: 1.45; }
.orj-calc-vr .vs { color: var(--orj-muted); }
.orj-calc-vr .vs svg, .orj-calc-vr .vh svg { width: 18px; height: 18px; margin-top: 1px; }
.orj-calc-vr .vs svg { color: #9ca3af; }
.orj-calc-vr .vh svg { color: var(--orj-green); }
.orj-calc-vr .vh strong { font-weight: 600; font-variant-numeric: tabular-nums; }
.orj-calc-vr .vh em { font-style: normal; color: var(--orj-muted); }
.orj-calc-mail { display: grid; grid-template-columns: 18px 1fr; gap: 8px; font-size: 14px; color: var(--orj-muted); margin: 0; line-height: 1.45; align-items: start; }
.orj-calc-mail svg { width: 18px; height: 18px; margin-top: 1px; }
.orj-calc-mail b { font-weight: 500; color: var(--orj-ink); }
.orj-calc .orj-tekstlink.orj-calc-opnieuw { background: none !important; border: 0 !important; padding: 0; cursor: pointer; font-size: 15px; box-shadow: none !important; text-transform: none !important; }
@container orjcalc (min-width: 640px) {
	.orj-calc-laag2 { margin-top: 20px; } .orj-calc-l2s { padding-top: 24px; margin-top: 24px; } .orj-calc-sk { font-size: 18px !important; }
	.orj-calc-rij { grid-template-columns: 150px 1fr auto; gap: 0 20px; padding: 9px 0; font-size: 15px; } .orj-calc-rij .rv { grid-column: 3; font-size: 16px; } .orj-calc-rij .rs { grid-column: 2; grid-row: 1; text-align: left; font-size: 14px; line-height: 1.45; align-self: baseline; } .orj-calc-rij.is-tot .rs { display: block; } .orj-calc-rij.is-tot .rv { font-size: 17px; }
	.orj-calc-disclaimer { padding: 16px 20px; margin-top: 20px; } .orj-calc-disclaimer h4 { font-size: 16px !important; } .orj-calc-disclaimer p { font-size: 15px; }
	.orj-calc-verg { border-top: 0; } .orj-calc-verg-kop { display: grid; grid-template-columns: 150px .8fr 1.3fr; gap: 20px; padding: 0 0 8px; font-size: 13px; font-weight: 600; color: var(--orj-muted); border-bottom: 1px solid #d1d5db; } .orj-calc-vr { grid-template-columns: 150px .8fr 1.3fr; gap: 20px; padding: 12px 0; align-items: start; }
}

/* ═══ B-086 · Desktop ruimer, geen footer ═══
   Vanaf 960: kaart 40/48, kop 28, hint 17, velden en tegels 56 (lg), knop 56/16, marges 24/28. De kaart mag op
   desktop hoger zijn dan een laptopscherm van 640 (team); mobiel houdt de één-scherm-regel van B-079.
   De calculatorpagina is een trechter: de eigen footer wordt niet gerenderd (orj-footer.php) en een eventuele
   Pro-footer blijft uit beeld. */
html.orj-calc-pagina:not(.orj-reken-pagina) .orj-ftr, html.orj-calc-pagina:not(.orj-reken-pagina) .x-colophon, html.orj-calc-pagina:not(.orj-reken-pagina) footer.x-colophon { display: none !important; }   /* B-186: de rekenpagina met tekst houdt zijn footer */
/* Het vlak is 100vw breed (inclusief de breedte van de scrollbalk) en steekt dus horizontaal uit; op home en over-ons
   knipt orj-secties.css dat af met overflow-x: clip op body. Hier hetzelfde: clip maakt van body geen scrollcontainer
   (hidden zou dat wél doen en dan tekent body een eigen verticale scrollbalk naast die van het venster). */
html.orj-calc-pagina body { overflow-x: clip; }
@container orjcalc (min-width: 960px) {
	.orj-calc-wrap { padding-top: 112px; padding-bottom: 48px; }
	.orj-calc-fasen { top: -84px; --bol: 26px; }
	.orj-calc-lbl { font-size: 15px; }
	.orj-calc-kaart { padding: 40px 48px 44px; }
	.orj-calc-kop { font-size: 28px !important; }
	.orj-calc-streep { margin: 14px 0 18px; }
	.orj-calc-sub { font-size: 17px; margin: -8px 0 22px; }
	.orj-calc-veld { margin-bottom: 22px; }
	.orj-calc-lb { margin-bottom: 10px; }
	.orj-calc .orj-invoer { height: 56px; min-height: 56px; }
	.orj-calc-euro::before { height: 56px; }
	.orj-calc-vink { min-height: 44px; }
	.orj-calc-tegels { gap: 14px; }
	.orj-calc-tegel { min-height: 56px; padding: 8px 18px; }
	.orj-calc-onthul { margin-top: 12px; }
	.orj-calc-acties { margin-top: 28px; }
	.orj-calc .orj-cta { height: 56px; font-size: 16px; padding: 0 24px; }
	.orj-calc-acties .orj-cta { min-width: 220px; }
	.orj-calc-reken { gap: 16px; }
	.orj-calc-rk { min-height: 36px; }
	.orj-calc-hero { font-size: 60px !important; }
	.orj-calc-cap2 { margin-top: 10px; }
	.orj-calc-vraag { margin-top: 28px; margin-bottom: 8px; }
	.orj-calc-seg button { height: 52px; }
	.orj-calc-cta { margin-top: 18px; gap: 14px; }
	.orj-calc-cta .orj-calc-micro { margin-top: 4px; }
	.orj-calc-laag2 { margin-top: 24px; }
	.orj-calc-l2s { padding-top: 28px; margin-top: 28px; }
	.orj-calc-zk { padding: 24px 28px; }
	.orj-calc-zij { gap: 20px; }
	/* B-089: elk invoerscherm even hoog als het hoogste, knoppenrij onderaan; de uitkomst is langer en doet niet mee. */
	.orj-calc-stand.is-aan:not(.orj-calc-stand--uitkomst) { display: flex; flex-direction: column; min-height: var(--calc-stand-h, 415px); }   /* 415 = het hoogste invoerscherm (dienstverband met de gereserveerde uitleg) op de desktopschaal */
	.orj-calc-stand:not(.orj-calc-stand--uitkomst) .orj-calc-acties { margin-top: auto; padding-top: 28px; }
}