/* Het rapport: dezelfde stijl op de site en in de PDF.
   De site laadt dit bestand naast style.css; de PDF-renderer zet het inline
   in een zelfstandig document (server/reporthtml.py). Geen stijlattributen:
   de site heeft style-src 'self' zonder 'unsafe-inline'.

   De huisstijl v9 (ontwerp v9 §1.2, T6): de tokens van de mockup v9
   (maak6.py), onder eigen namen (--r-*), licht en donker; style.css heeft
   dezelfde waarden op html.kb-thema (tests/test_huisstijl_v9.py houdt ze
   gelijk). --floor uit brand.css wordt nergens opnieuw gedefinieerd: de
   groene hoofdknop blijft #1F7A5C (J2), hier --r-accent. --r-floor is het
   salie van "beschermd", nooit een gevuld vlak. Donker volgt
   prefers-color-scheme op de rekentool; body.pdf dwingt licht af. Koppen in
   Source Serif 4, tekst en bedragen in Source Sans 3 met tabular-nums (de
   @font-face staat in style.css; de PDF krijgt ze ingebed). Geen tekst
   onder 12,5 px; de zinnen minstens 14 px en de kernzin, Let op, de plicht,
   de tips, de disclaimer en de slotzinnen 16,5 px (zelfcontrole 51). */

.rapport,body.pdf{
  --r-paper:#F7F5F0;--r-card:#FFFFFF;--r-vlak:#FBFAF6;--r-soft-tint:#EFEDE7;--r-hair:#ECE8E0;
  --r-grid:#E7E3DA;--r-line:#D8D2C6;--r-ink:#1F2A33;--r-soft:#56616B;--r-kop:#24394A;--r-link:#2B4F6E;
  --r-floor:#4F6A5E;--r-floor-tint:#E6EEE8;--r-warn:#85570F;--r-warn-tint:#F5EDDC;
  --r-warn-rand:#A8741C;--r-kern-rand:#8D949A;--r-lijn:#3F607C;--r-accent:#1F7A5C;
  --r-accent-hover:#18664C;--r-accent-ink:#FFFFFF;--r-kb-spoor:#D3D9DF;--r-kb-merk:#24394A;
  --r-balk:#24394A;--r-balk-ink:#F4F1EA;--r-focus:#1F5FBF;
  --r-serif:"Source Serif 4",Georgia,"Times New Roman",serif;
  --r-body:"Source Sans 3",system-ui,-apple-system,"Segoe UI",Roboto,"Liberation Sans",Arial,sans-serif;
}
@media (prefers-color-scheme:dark){
  .rapport{
    --r-paper:#151A1E;--r-card:#1C2227;--r-vlak:#192025;--r-soft-tint:#232A30;--r-hair:#283037;
    --r-grid:#2A3239;--r-line:#39424A;--r-ink:#E7E5E0;--r-soft:#A7AEB4;--r-kop:#C9D7E3;--r-link:#A9C4DD;
    --r-floor:#A3BFB0;--r-floor-tint:#1D3027;--r-warn:#E0B568;--r-warn-tint:#33291A;
    --r-warn-rand:#C99A4A;--r-kern-rand:#6E7880;--r-lijn:#93B3CF;--r-accent:#1F7A5C;
    --r-accent-hover:#268B69;--r-accent-ink:#FFFFFF;--r-kb-spoor:#3C4853;--r-kb-merk:#E7E5E0;
    --r-balk:#1A242D;--r-balk-ink:#E7E5E0;--r-focus:#8AB4F8;
    color-scheme:dark;
  }
}
/* De PDF is altijd licht, ook als de renderer donker zou vragen. */
body.pdf .rapport{
  --r-paper:#F7F5F0;--r-card:#FFFFFF;--r-vlak:#FBFAF6;--r-soft-tint:#EFEDE7;--r-hair:#ECE8E0;
  --r-grid:#E7E3DA;--r-line:#D8D2C6;--r-ink:#1F2A33;--r-soft:#56616B;--r-kop:#24394A;--r-link:#2B4F6E;
  --r-floor:#4F6A5E;--r-floor-tint:#E6EEE8;--r-warn:#85570F;--r-warn-tint:#F5EDDC;
  --r-warn-rand:#A8741C;--r-kern-rand:#8D949A;--r-lijn:#3F607C;--r-accent:#1F7A5C;
  --r-accent-hover:#18664C;--r-accent-ink:#FFFFFF;--r-kb-spoor:#D3D9DF;--r-kb-merk:#24394A;
  --r-balk:#24394A;--r-balk-ink:#F4F1EA;--r-focus:#1F5FBF;
  color-scheme:light;
}
.rapport{
  color:var(--r-ink);font-family:var(--r-body);font-size:16.5px;line-height:1.55;
  font-variant-numeric:tabular-nums;
  display:flex;flex-direction:column;gap:16px;
}
.rapport h2{font-family:var(--r-serif);font-size:26px;line-height:1.2;margin:0;font-weight:600;color:var(--r-kop);text-wrap:balance}
.rapport h3{font-family:var(--r-serif);font-size:21px;line-height:1.25;margin:0;font-weight:600;color:var(--r-kop);text-wrap:balance}
.rapport h4{font-size:14.5px;margin:0 0 6px;font-weight:600;color:var(--r-soft)}
.rapport a{color:var(--r-link);text-underline-offset:3px}
.rapport :where(a,button,summary):focus-visible{outline:3px solid var(--r-focus);outline-offset:3px}
.rapport p{margin:0}
.rapport ul{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:6px}
.rapport table{border-collapse:collapse;font-variant-numeric:tabular-nums}
.rapport .bedrag{white-space:nowrap}

.rapport .let-op{color:var(--r-warn)}

.rapport-meldingen{background:var(--r-card);border:1px solid var(--r-line);border-radius:8px;padding:12px 14px;display:flex;flex-direction:column;gap:8px}
.rapport-meldingen li{color:var(--r-ink)}
/* Bovenaan als de gekozen expiratie geen bruikbaar contract heeft en andere
   expiraties wel (FC-07): opvallend, met een streep in de waarschuwingskleur. */
.rapport-expiraties{background:var(--r-card);border:1px solid var(--r-line);border-left:4px solid var(--r-warn-rand);border-radius:8px;padding:12px 14px;display:flex;flex-direction:column;gap:6px}

/* ------------------------------------------------- bovenste helft (v9) --
   Template v9, fase T5a (docs/template/ontwerp-v9.md §1.1, rijen 1-8 en 12):
   samenvatting, bronstatus, het blok bovenaan, de kostenbalk, de legenda, het
   overzicht en de voet, met de opbouw van de mockup v9 (maak2.py, maak6.py).
   Alleen de opbouw en de afdrukregels; de tokens en lettertypen van de
   mockup staan bovenaan (T6). Geen tekst kleiner dan 12,5 px (ontwerp §1.2). Op een
   smal scherm stapelt het, maar niets wordt verborgen (I5, JR-113). */

/* De tekens (beschermd, Let op, uitleg, slot): inline SVG met alleen een
   klasse. Zonder maat werd zo'n SVG 300 bij 150 px; de verf staat hier,
   omdat de zoeksite geen stijlattribuut toelaat (BUG-012). */
.rapport .ico{display:inline-block;width:15px;height:15px;flex:none;vertical-align:-2px;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.rapport .ico-beschermd{stroke:var(--r-floor)}
.rapport .ico-beschermd rect{fill:var(--r-floor);stroke:none}
.rapport .ico-letop{stroke:var(--r-warn-rand)}
.rapport .ico-letop path{fill:var(--r-card)}
.rapport .ico-letop circle{fill:var(--r-warn-rand);stroke:none}
.rapport .ico-uitleg{stroke:var(--r-soft);stroke-width:1.5}
.rapport .ico-uitleg circle{fill:var(--r-card)}
.rapport .ico-uitleg circle:last-child{fill:var(--r-soft);stroke:none}
.rapport .ico-slot{stroke:var(--r-soft)}
.rapport .ico-slot rect{fill:var(--r-soft);stroke:none}
.rapport .ico-slot circle{fill:var(--r-card);stroke:none}

/* 1. Samenvatting: merk, titel, rapportnummer, de positiekaart, de vraag en
   de uitkomst van "optimaliseer voor mij" (K7). */
.r-sam{display:flex;flex-direction:column;gap:6px}
.r-sam .merk{font-family:var(--r-body);font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--r-soft)}
.r-sam .rid{font-family:var(--r-body);font-size:13.5px;color:var(--r-soft);overflow-wrap:anywhere}
.r-pos{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:8px 20px;background:var(--r-card);border:1px solid var(--r-line);border-radius:10px;padding:12px 16px}
/* V1: de positiekaart als lijst (dl.r-positie): korte labels boven hun
   waarde, de waarde van je hele positie groot, met haar label erna. */
.r-positie{margin:0}
.r-positie .pos-r{display:flex;flex-direction:column;gap:1px;min-width:0}
.r-positie dt{font-size:13.5px;color:var(--r-soft)}
.r-positie dd{margin:0;overflow-wrap:anywhere}
.r-positie .pos-groot{flex-direction:column-reverse;margin-left:auto;text-align:right}
.r-positie .pos-groot dt.pos-lbl{font-size:13.5px}
.pos-aantal{font-size:15px;color:var(--r-soft)}
.pos-rechts{text-align:right;margin-left:auto}
.pos-waarde{font-size:28px;font-weight:600;line-height:1.15;white-space:nowrap;font-variant-numeric:tabular-nums}
.pos-lbl{font-size:13.5px;color:var(--r-soft)}
.r-sam .vraag{font-size:16.5px}
/* De uitkomst en daaronder de definitie van de GB, elk een eigen alinea
   (AFM-X50). */
.r-sam .optimalisatie{display:flex;flex-direction:column;gap:6px}
/* De PDF-knop naast de titel (ontwerp v9 §1.1, rij 1; mockup v9 .r-pdfknop):
   alleen op het web en alleen betaald, uit het serverfragment. Op een
   telefoon loopt hij onder de titel door; hij is groot genoeg om aan te
   tikken. Bezig (`aria-busy`) zolang de download loopt. */
.r-sam-kop{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 14px}
.r-pdfknop{display:inline-flex;align-items:center;min-height:44px;padding:5px 14px;border:1.5px solid var(--r-kop);border-radius:6px;background:transparent;color:var(--r-kop);font:inherit;font-size:16px;font-weight:600;cursor:pointer}
.r-pdfknop:focus-visible{outline:3px solid var(--r-focus);outline-offset:3px}
.r-pdfknop[aria-busy="true"]{cursor:progress;opacity:.6}

/* 2. Bronstatus: rustig, de zinnen van de server letterlijk. */
.r-bron{display:flex;flex-direction:column;gap:3px;padding:12px 16px;background:var(--r-soft-tint);border-radius:10px;color:var(--r-soft);font-size:14.5px}
.r-bron h3{font-size:17px}
.r-bron .marktdata{display:flex;flex-direction:column;gap:3px}

/* 3. Het blok bovenaan (blok_eerste en de waarschuwing, punt 3): één rustig
   blok met de oker driehoek, niet kleiner dan het korps. De voet herhaalt de
   waarschuwing één keer, in dezelfde stijl (rij 12). */
.r-topblok,.r-voetwaarschuwing{display:flex;gap:10px;align-items:flex-start;margin:0;padding:10px 14px;background:var(--r-card);border:1px solid var(--r-line);border-radius:8px;line-height:1.55}
.r-topblok .ico,.r-voetwaarschuwing .ico{margin-top:4px}
.r-topblok strong{font-weight:600}
.rapport a.disc-link{color:inherit;text-decoration:underline;text-underline-offset:2px}

/* 4. De kostenbalk (§1.3): leisteen en inkt, zonder oordeel; geen salie en
   geen oker (JR-24). Het spoor, het midden en het streepje zijn SVG met
   alleen klassen: hun verf staat hier. Een balk zonder streepje is compact. */
.r-kostenbalk{background:var(--r-card);border:1px solid var(--r-line);border-radius:10px;padding:14px 16px;display:flex;flex-direction:column;gap:10px}
.r-kostenbalk.kb-compact{gap:6px;padding:12px 16px}
.kb-getallen{font-weight:600}
/* Begint de regel met de HV (toestand b), dan met een hoofdletter; de tekst
   zelf blijft letterlijk de catalogus (mockup v9). */
.kb-getallen::first-letter{text-transform:uppercase}
.kb-balk{display:flex;flex-direction:column;gap:6px;padding:4px 0}
.kb-spoorvak{position:relative;padding:0 16px}
.kb-svg{display:block;width:100%;height:22px;overflow:visible}
.kb-spoor{fill:var(--r-kb-spoor)}
.kb-midden{stroke:var(--r-soft);stroke-width:1.5;vector-effect:non-scaling-stroke}
.kb-streep{stroke:var(--r-kb-merk);stroke-width:5;vector-effect:non-scaling-stroke}
.kb-pijl{position:absolute;top:50%;transform:translateY(-50%);font-size:13.5px;line-height:1;color:var(--r-kb-merk)}
.kb-pijl-l{left:0}
.kb-pijl-r{right:0}
/* "gelijk" in dezelfde kleur als de labels aan de uiteinden (mockup v8). */
.kb-labels{display:grid;grid-template-columns:1fr auto 1fr;gap:4px 14px;padding:0 16px;font-size:14px;line-height:1.4;color:var(--r-soft)}
.kb-l{text-align:left}
.kb-m{text-align:center}
.kb-r{text-align:right}
.kb-bron{font-size:14.5px;color:var(--r-soft)}
@media (max-width:560px){
  .kb-labels{grid-template-columns:1fr 1fr;grid-template-areas:"m m" "l r"}
  .kb-m{grid-area:m}
  .kb-l{grid-area:l}
  .kb-r{grid-area:r}
}
/* "Meer uitleg" in de kostenbalk en (sinds T5b) op elke kaart: dicht op
   het scherm, open in de PDF. Daar is de summary een blok, zodat hij niet
   als laatste regel onderaan een pagina blijft staan (break-after geldt
   niet voor een inline doos). */
.rapport details.r-meer{border-top:1px solid var(--r-line);padding-top:8px}
.rapport details.r-meer > summary{cursor:pointer;display:inline-flex;align-items:center;gap:6px;font-weight:600;color:var(--r-ink)}
.rapport details.r-meer > summary:focus-visible{outline:3px solid var(--r-focus);outline-offset:3px}
.rapport details.r-meer > p{margin-top:6px}
body.pdf details.r-meer > summary{list-style:none;display:flex}
body.pdf details.r-meer > summary::-webkit-details-marker{display:none}

/* 7. De legenda op één rij, die op een smal scherm doorloopt. */
.r-legenda{display:flex;flex-wrap:wrap;align-items:center;gap:4px 16px;padding:6px 12px;background:var(--r-card);border:1px solid var(--r-line);border-radius:8px;font-size:14.5px}
.r-legenda .lg{display:inline-flex;align-items:center;gap:6px}

/* 8. Het overzicht: per strategie één rij. Links de naam en het eerste grote
   getal, in het midden de andere grote getallen met in groen waar de
   bescherming begint (.beschermd, JR-51), rechts Let op in oker, eronder
   klein de rest. Op een smal scherm één kolom. */
.r-ovz{display:flex;flex-direction:column;gap:10px}
.r-ovz .noot{font-size:14.5px;color:var(--r-soft)}
/* Het voorbehoud onder de kop (KL-X31), zoals p.intro van mockup v9. */
.r-ovz .intro{font-size:14.5px;color:var(--r-soft)}
.ov-rijen{display:flex;flex-direction:column;gap:12px}
.ov-rij{background:var(--r-card);border:1px solid var(--r-line);border-radius:10px;padding:14px 16px;display:flex;flex-direction:column;gap:10px}
.ov-boven{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr) minmax(0,1.15fr);gap:12px 20px;align-items:start}
.ov-a,.ov-b{display:flex;flex-direction:column;gap:8px}
.ov-b{border-left:1px solid var(--r-line);padding-left:18px}
.rapport .ov-naam{font-family:var(--r-serif);font-weight:600;color:var(--r-kop);font-size:19px;line-height:1.25}
.ov-nr{display:block;font-weight:400;font-family:var(--r-body);font-size:12.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--r-soft);font-weight:400}
.ov-sub{display:block;font-size:13.5px;font-weight:400;color:var(--r-soft)}
.ov-item{display:block;font-size:14.5px;line-height:1.4}
.ov-item .ov-lbl{font-weight:600;color:var(--r-soft)}
.ov-item .ov-lbl::after{content:": "}
.ov-item .vd,.ov-item .toel{display:inline}
.ov-item .toel{color:var(--r-soft)}
.ov-item .q{color:var(--r-soft)}
.vd{font-weight:600;font-variant-numeric:tabular-nums}
.vd-in{font-weight:600;white-space:nowrap}
/* De grote getallen: het label erboven, het getal groot, de toelichting
   eronder. */
.ov-a > .ov-item .ov-lbl,.ov-b > .ov-item .ov-lbl{display:block}
.ov-a > .ov-item .ov-lbl::after,.ov-b > .ov-item .ov-lbl::after{content:none}
.ov-a > .ov-item .vd,.ov-b > .ov-item .vd{display:block;font-size:24px;line-height:1.2}
.ov-a > .ov-item .toel,.ov-b > .ov-item .toel{display:block;font-size:14px}
.ov-groen{display:flex;flex-direction:column;gap:3px}
.ov-groen.beschermd .ov-lbl,.ov-groen.beschermd .vd,.ov-groen.beschermd .vd-in{color:var(--r-floor)}
.ov-beperk{background:var(--r-warn-tint);border-left:4px solid var(--r-warn-rand);border-radius:0 8px 8px 0;padding:8px 12px;display:flex;flex-direction:column;gap:3px}
.ov-beperk-kop{display:flex;align-items:center;gap:6px;font-weight:600}
.ov-beperk .ov-lbl{color:var(--r-ink)}
.ov-klein{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:3px 22px;border-top:1px solid var(--r-line);padding-top:7px}
.ov-leeg,.ov-slot{gap:6px}
.r-na{display:flex;flex-direction:column;gap:4px;color:var(--r-soft)}
.r-na b{color:var(--r-ink);font-weight:600}
.r-slotcel{display:flex;gap:6px;align-items:flex-start;color:var(--r-ink)}
.r-slotcel .ico{margin-top:3px}
@media (max-width:760px){
  body:not(.pdf) .ov-boven{grid-template-columns:minmax(0,1fr)}
  body:not(.pdf) .ov-b{border-left:0;padding-left:0;border-top:1px solid var(--r-line);padding-top:8px}
  body:not(.pdf) .ov-klein{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:560px){
  .ov-rij{padding:12px}
}

/* --------------------------------------------------- onderkant (v9) --
   Template v9, fase T5b (docs/template/ontwerp-v9.md §1.1, rijen 9-11, de
   tabel van de kaart, §1.4 en §1.5): het gedeelde blok, de kaarten, "Geen
   resultaat gevonden", de andere mogelijkheden of de teaser, en de knop
   naar het paneel, met de opbouw van de mockup v9 (maak2.py). Alleen de
   opbouw en de afdrukregels; de tokens en lettertypen staan bovenaan (T6). Geen
   tekst kleiner dan 12,5 px (ontwerp §1.2). Op een smal scherm stapelt
   het, maar niets wordt verborgen (I5, JR-113): de beperkingen van elke
   constructie (data-risico), de kolomkop en de bronregel van elke variant
   en elke knop met zijn betaalregel staan er ook op 360 px. Geen
   lettergrootte op de tekst in de grafiek: die staat één keer op de svg
   (T4). */

/* 9. Het gedeelde blok: zinnen die op elke open optiekaart gelijk zijn,
   één keer, met hun label en voor welke kaarten ze gelden. Oker langs een
   beperking, leisteen langs uitleg; twee kolommen op een breed scherm. */
.r-gedeeld{background:var(--r-card);border:1px solid var(--r-line);border-radius:10px;padding:14px 16px;display:flex;flex-direction:column;gap:6px}
.r-gedeeld .scope{color:var(--r-soft)}
.rapport .r-gedeeld ul{display:block;list-style:none;margin:4px 0 0;padding:0;columns:2;column-gap:24px}
.gd-item{display:flex;flex-direction:column;gap:2px;padding:8px 0 8px 12px;border-top:1px solid var(--r-hair);border-left:3px solid var(--r-line)}
.gd-item.letop{border-left-color:var(--r-warn-rand)}
.gd-kop{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:2px 10px}
.gd-label{display:inline-flex;align-items:center;gap:6px;font-weight:600}
.gd-tag{font-size:13.5px;color:var(--r-soft)}

/* 10. De kaarten (article.strategie.r-kaart). De kernzin en Let op even
   groot en even zwaar (mockup v9, A3): de kernzin neutraal met een
   leisteen rand, Let op op oker. */
.r-kaart{min-width:0}
.r-kern,.r-letop{margin:0;border-radius:0 10px 10px 0;padding:12px 16px;font-size:16.5px;font-weight:400;line-height:1.55;color:var(--r-ink)}
.r-kern{background:var(--r-soft-tint);border-left:4px solid var(--r-kern-rand)}
.r-letop{background:var(--r-warn-tint);border-left:4px solid var(--r-warn-rand);display:flex;flex-direction:column;gap:4px}
.r-letop-kop{display:flex;align-items:center;gap:7px;font-weight:600}
.rapport .r-letop ul{padding-left:18px;gap:5px}
/* De strook: waar de bescherming begint (groen, JR-51), stopt en het
   plafond (oker als ze iets begrenzen) en de looptijd; daaronder de kosten
   en de verliezen. Vier en drie kolommen, op een telefoon twee. */
.r-strook-k{border-top:1px solid var(--r-line);border-bottom:1px solid var(--r-line)}
.sk-rij{margin:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px 14px;padding:8px 0}
.sk-rij.twee{grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--r-hair)}
.sk-rij .kg{display:flex;flex-direction:column;gap:1px;min-width:0;font-size:14.5px;line-height:1.38}
.sk-rij dt{font-size:14px;font-weight:600;color:var(--r-soft)}
.sk-rij dd{margin:0}
.sk-rij .vd{display:block}
.sk-rij .toel,.sk-rij .q{font-size:14px;color:var(--r-soft)}
.kg.beschermd dt,.kg.beschermd .vd,.kg.beschermd .vd-in{color:var(--r-floor)}
.kg.beperkt dt,.kg.beperkt .vd{color:var(--r-warn)}
/* Grafiek en scenariotegels naast elkaar, met één onderschrift onder
   beide (X19); tot en met 760 px onder elkaar, met het onderschrift
   tussen grafiek en tegels. De brede of de smalle tekening: zie
   "svg.grafiek" hieronder. */
.r-raster{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);grid-template-areas:"g t" "o o";gap:10px 20px;align-items:start}
.rr-g{grid-area:g;min-width:0}
.rr-t{grid-area:t;min-width:0;display:flex;flex-direction:column;gap:8px}
.r-raster-onder{grid-area:o;font-size:14.5px;color:var(--r-soft)}
.r-raster .grafiek-figuur{margin:0}
.r-tegel{background:var(--r-card);border:1px solid var(--r-line);border-radius:8px;padding:8px 12px;min-width:0}
.tg-kop,.tg-lbl,.tg-klein{font-size:14px;color:var(--r-soft)}
.tg-kop b{color:var(--r-ink);font-weight:600}
.tg-groot{font-size:22px;font-weight:600;line-height:1.2;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
/* De kosten op één regel; een teken hoort bij zijn bedrag (KL-X18). */
.r-kosten{display:flex;flex-direction:column;gap:4px}
.r-kosten h4{font-size:14.5px;color:var(--r-soft);margin:0}
.r-kostenregel{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;font-size:16.5px}
.kr-bedrag{white-space:nowrap;font-weight:600;font-variant-numeric:tabular-nums}
.kr-op{color:var(--r-soft)}
.r-extra,.r-contract{border-top:1px solid var(--r-line);padding-top:10px;display:flex;flex-direction:column;gap:8px}
.r-extra h4,.r-contract-kop{font-size:14.5px;color:var(--r-soft);font-weight:600;margin:0}
/* Het contract: de opties (betaald met zoekregel en prijs per optie,
   gratis met hun slotzin), de waarschuwingen, het plichtkader en een
   afwikkeling die niet bevestigd is (.r-w) op oker, en de tips neutraal;
   de broker-helft van die afwikkeling is de eerste tip (OI:2498-2503). */
.r-poot{display:flex;flex-direction:column;gap:1px}
.r-poot .zoek{font-family:var(--r-body);font-size:16.5px;font-weight:600;overflow-wrap:anywhere}
.r-poot .prijs{font-size:14.5px;color:var(--r-soft)}
.r-prijs{color:var(--r-ink);font-weight:600}
.rapport .r-contract ul.let-op,.r-plicht,.r-w{margin:0;background:var(--r-warn-tint);border-left:4px solid var(--r-warn-rand);border-radius:0 10px 10px 0;padding:10px 14px;line-height:1.5}
.rapport .r-contract ul.let-op{padding-left:30px;gap:3px}
.rapport .r-contract ul.let-op li{color:var(--r-ink)}
.r-plicht{display:flex;flex-direction:column;gap:3px}
.r-plicht-kop,.r-tip-kop{display:flex;align-items:center;gap:7px;font-weight:600}
.r-tip{background:var(--r-card);border:1px solid var(--r-line);border-radius:10px;padding:10px 14px;line-height:1.5}
.rapport .r-tip ul{padding-left:18px;gap:3px}
.r-contract .noot{color:var(--r-soft)}
/* Een slotzin met het slot ervoor (gratis), op de kaart en in de teaser. */
.rapport p.slot{display:flex;gap:7px;align-items:flex-start;color:var(--r-ink)}
.rapport p.slot .ico{margin-top:3px}
/* De knop naar het paneel, als laatste, met de betaalregel eronder
   (§1.5). Op de site staat .btn uit brand.css er ook op; deze regels
   gaan voor. */
.r-actie{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:14px 16px;border:1px solid var(--r-line);border-radius:8px;background:var(--r-paper)}
.rapport .r-knop{margin:0}
.rapport .knop-betaal{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:12px 22px;border:1.5px solid var(--r-accent);border-radius:6px;background:var(--r-accent);color:var(--r-accent-ink);font:inherit;font-size:16px;font-weight:600;line-height:1.2;text-align:center;text-decoration:none;cursor:pointer}
.rapport .knop-betaal:hover{background:var(--r-accent-hover);border-color:var(--r-accent-hover)}
.rapport .knop-betaal:focus-visible{outline:3px solid var(--r-focus);outline-offset:3px}
.rapport .tekstlink{color:var(--r-link);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.rapport .tekstlink:focus-visible{outline:3px solid var(--r-focus);outline-offset:3px}
.rapport .betaal-regel{font-size:14.5px;color:var(--r-soft);font-style:normal}
/* "Meer uitleg" op de kaart: dicht op het scherm, open op papier; op een
   breed scherm in twee kolommen, met de scenariotabel over de hele
   breedte. */
.r-meer-inhoud{margin-top:10px;columns:2;column-gap:22px}
.meer-sec{display:flex;flex-direction:column;gap:5px;margin-bottom:10px}
.meer-sec:has(table.scenario){column-span:all}
/* Op papier één kolom, ook in het gedeelde blok: pdftotext en een
   schermlezer van de PDF lezen twee kolommen anders door elkaar dan de
   site ze toont. */
body.pdf .r-meer-inhoud,body.pdf .rapport .r-gedeeld ul{columns:auto}
.meer-sec h4{font-size:14px;color:var(--r-soft);text-transform:uppercase;letter-spacing:.04em;margin:0}
/* Een kaart zonder resultaat: het label en de reden, letterlijk (§1.4). */
.rapport .niet-beschikbaar strong{font-weight:600}
@media (max-width:760px){
  body:not(.pdf) .r-raster{grid-template-columns:minmax(0,1fr);grid-template-areas:"g" "o" "t"}
  body:not(.pdf) .r-meer-inhoud{columns:1}
  body:not(.pdf) .rapport .r-gedeeld ul{columns:1}
}
@media (max-width:640px){
  body:not(.pdf) .sk-rij,body:not(.pdf) .sk-rij.twee{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:560px){
  .r-gedeeld{padding:12px}
}

/* 11. De andere mogelijkheden: per soort een tabel met de varianten als
   kolommen (ontwerp §1.9b), de vraag één keer erboven, en per tabel de
   risicoregel van elke soort (V-34 A). Op een smal scherm schuift een
   tabel met meer varianten dan er passen binnen haar eigen kader
   (.tabel-scroll), met de rijnamen vast links; niets verborgen. Gratis de
   teaser met de slotzin en de knop; zonder resultaat het label en de
   reden (§1.4). */
.r-alt-vraag{background:var(--r-soft-tint);border-radius:8px;padding:8px 12px}
.r-alt-vraag b{font-weight:600}
.r-alt-vraag .num{font-weight:600;white-space:nowrap}
.r-alt-soort{background:var(--r-card);border:1px solid var(--r-line);border-radius:10px;padding:12px 14px;display:flex;flex-direction:column;gap:8px;min-width:0}
.r-alt-soort h4{font-size:14.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--r-ink);margin:0}
table.r-alt-tabel{width:100%;font-size:14.5px;line-height:1.4}
table.r-alt-tabel th,table.r-alt-tabel td{text-align:left;vertical-align:top;padding:6px 8px;border-bottom:1px solid var(--r-hair);overflow-wrap:break-word}
table.r-alt-tabel thead th{font-weight:400;vertical-align:bottom;border-bottom:1.5px solid var(--r-line)}
table.r-alt-tabel tbody th{font-weight:600;padding-left:0;width:22%}
table.r-alt-tabel tbody th .ico{margin-right:6px}
table.r-alt-tabel td p + p{margin-top:4px}
table.r-alt-tabel .vd{display:block}
table.r-alt-tabel .toel{color:var(--r-soft)}
.av-soort,.av-herkomst{display:block;font-size:14px;color:var(--r-soft)}
.av-kop{display:block;font-weight:600}
.alt-risico{display:flex;gap:7px;align-items:flex-start;margin:0}
.alt-risico .ico{margin-top:3px}
.r-geen b{font-weight:600}
@media (max-width:640px){
  body:not(.pdf) table.r-alt-tabel{width:auto;min-width:100%}
  body:not(.pdf) table.r-alt-tabel thead th[scope="col"],body:not(.pdf) table.r-alt-tabel td{min-width:11em}
  body:not(.pdf) table.r-alt-tabel thead th:first-child,body:not(.pdf) table.r-alt-tabel tbody th{position:sticky;left:0;z-index:1;background:var(--r-card);min-width:6.5em;max-width:7.5em;width:auto}
  .r-alt-soort{padding:10px}
}

/* V1 (5 november 2026): "Wat gebeurt er met je geld?" vóór het overzicht.
   De strategieën als kolommen, de koersen als regels; op een smal scherm
   schuift de tabel binnen haar eigen kader met de regelnamen vast links,
   zoals de tabel van de andere mogelijkheden; niets verborgen. Geen kleur
   op grond van een bedrag (AFM-A6): een verlies is nooit "beschermd". De
   regel bij koers nul (.vgl-uiterst) staat apart, na de gewone koersen, met
   dezelfde opmaak als de andere regels (David, 6-11-2026). */
.r-vgl{display:flex;flex-direction:column;gap:8px;background:var(--r-card);border:1px solid var(--r-line);border-radius:10px;padding:14px 16px;min-width:0}
.r-vgl .intro,.r-vgl .noot{font-size:14.5px;color:var(--r-soft)}
.r-vgl .vgl-uitgang{font-size:14.5px}
table.r-vgl-tabel{width:100%;font-size:14.5px;line-height:1.4}
table.r-vgl-tabel th,table.r-vgl-tabel td{text-align:left;vertical-align:top;padding:5px 8px;border-bottom:1px solid var(--r-hair);overflow-wrap:break-word}
table.r-vgl-tabel thead th{font-weight:600;vertical-align:bottom;border-bottom:1.5px solid var(--r-line);color:var(--r-kop)}
table.r-vgl-tabel thead .ov-nr,table.r-vgl-tabel thead .ov-sub{display:block;font-weight:400}
table.r-vgl-tabel tbody th{font-weight:600;color:var(--r-soft);padding-left:0}
table.r-vgl-tabel tr.vgl-groep th{padding-top:10px;color:var(--r-ink);font-size:13.5px;letter-spacing:.05em;text-transform:uppercase}
table.r-vgl-tabel tr.vgl-groep th,table.r-vgl-tabel tr.vgl-groep td{border-bottom:1.5px solid var(--r-line)}
table.r-vgl-tabel td.vgl-slot,table.r-vgl-tabel td.vgl-reden{vertical-align:middle;background:var(--r-vlak);border-left:1px solid var(--r-line);border-bottom:0}
table.r-vgl-tabel .q,table.r-vgl-tabel .toel{color:var(--r-soft)}
.rapport .r-vgl .tabel-scroll:focus-visible{outline:3px solid var(--r-focus);outline-offset:3px}
@media (max-width:640px){
  body:not(.pdf) table.r-vgl-tabel{width:auto;min-width:100%}
  body:not(.pdf) table.r-vgl-tabel thead th[scope="col"],body:not(.pdf) table.r-vgl-tabel td{min-width:9.5em}
  /* De vaste eerste kolom breed genoeg voor het langste woord van een label
     ("Transactiekosten"), en geen afbreken midden in een woord (David,
     6-11-2026); een lang label loopt over meer regels, op woordgrenzen. */
  body:not(.pdf) table.r-vgl-tabel thead th:first-child,body:not(.pdf) table.r-vgl-tabel tbody th{position:sticky;left:0;z-index:1;background:var(--r-card);min-width:8.6em;max-width:9.2em;width:auto;overflow-wrap:normal;word-break:normal;hyphens:manual}
  /* De reden- en slotcel lopen over alle regels: de tekst bovenaan, waar je
     binnenkomt als je opzij schuift (BZ-X4). */
  body:not(.pdf) table.r-vgl-tabel td.vgl-slot,body:not(.pdf) table.r-vgl-tabel td.vgl-reden{vertical-align:top}
  .r-vgl{padding:10px}
}

.strategieen{display:flex;flex-direction:column;gap:18px}
.strategie{background:var(--r-card);border:1px solid var(--r-line);border-radius:14px;padding:20px 18px;display:flex;flex-direction:column;gap:14px}
.strategie-kop{display:flex;flex-direction:column;gap:4px}
.strategie-nummer{font-family:var(--r-body);font-size:12.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--r-soft)}
.strategie h3 .sub{font-family:var(--r-body);font-weight:400;color:var(--r-soft);font-size:15px}
.niet-beschikbaar{color:var(--r-ink)}
/* Gevraagd, werkelijk en totaal onder de kernzin (FC-05): label links,
   waarde rechts; op een smal scherm onder elkaar. */
.niveaus{display:flex;flex-direction:column;gap:6px;font-size:14.5px}
.niveaus dl{margin:0;display:grid;grid-template-columns:max-content 1fr;gap:4px 12px}
.niveaus dt{font-weight:600;color:var(--r-soft)}
.niveaus dd{margin:0}
.niveaus .noot{font-size:14px;color:var(--r-soft)}
@media (max-width:560px){
  .niveaus dl{grid-template-columns:1fr;gap:0}
  .niveaus dd{margin-bottom:4px}
}

table.geld{width:100%;max-width:560px}
table.geld th{text-align:left;font-weight:400;padding:4px 12px 4px 0;vertical-align:top}
table.geld th small{display:block;font-size:13.5px;color:var(--r-soft)}
table.geld td{text-align:right;padding:4px 0;white-space:nowrap;vertical-align:top}
table.geld tr.totaal th,table.geld tr.totaal td{font-weight:600;border-top:1px solid var(--r-line);padding-top:6px}
.let-op li{color:var(--r-warn)}

.grafiek-figuur{margin:4px 0}
/* De grafiek in "Source Sans 3 Grafiek" (style.css): dezelfde letter met
   de regelhoogte waarmee T4 de labels heeft geplaatst. */
svg.grafiek{display:block;width:100%;max-width:640px;height:auto;font-family:"Source Sans 3 Grafiek",var(--r-body)}
/* Elke figuur heeft de grafiek twee keer: breed en smal (BR-3). Sinds T5b
   van het template v9 is dat de kaartgrafiek (reportchart.kaart): breed
   met viewBox 380, smal met 280, en tekst van 12,5 eenheden
   (reportchart.LETTER), dus minstens 12,5 px zolang de brede 380 px en de
   smalle 280 px breed is (ontwerp §1.2). Standaard de brede; tot en met
   700 px de smalle. Tot en met 760 px staat de grafiek over de hele
   kaart (.r-raster), daarboven in de linker kolom. Zo is de tekst: op
   360 px (smal, 302 px breed) 13,5 px; van 701 tot 760 px (breed, over de
   kaart, hooguit 480 px) 15,8 px; op 761 px (breed, kolom van
   (691 - 20) x 1,45/2,45 = 397 px) 13,1 px. De PDF (body.pdf) en afdrukken
   tonen altijd de brede. display:none, zodat een schermlezer de grafiek
   niet twee keer voorleest (BR-3). */
.r-raster svg.grafiek{max-width:480px}
svg.grafiek-smal{display:none}
@media (max-width:700px){
  body:not(.pdf) svg.grafiek:not(.grafiek-smal){display:none}
  body:not(.pdf) svg.grafiek-smal{display:block;width:100%;max-width:420px;height:auto}
}
body.pdf svg.grafiek-smal{display:none}
@media print{
  svg.grafiek-smal{display:none!important}
  svg.grafiek:not(.grafiek-smal){display:block!important}
}
/* Groen (--r-floor) staat in de grafiek alleen op .beschermd: het vlak, zijn
   staal in de vlakkenlegenda, en het label met het berekende bedrag als dat
   helemaal in zijn vlak staat (JR-51, AFM-X42). Een strike, het gedekte deel,
   de stip, de leider en de tekst van de legenda dragen geen
   beschermingswaarde en zijn neutraal; oker is een beperking of plicht (de
   stop, het gearceerde vlak en zijn staal). */
.g-vlak{fill:var(--r-vlak);stroke:var(--r-line)}
.g-raster,.g-rast{stroke:var(--r-grid);stroke-width:1}
.g-label{font-size:11px;fill:var(--r-soft)}
.g-astitel{font-size:11.5px;fill:var(--r-ink);font-weight:600}
.g-legenda{font-size:11.5px;fill:var(--r-ink)}
.g-nul{stroke:var(--r-ink);stroke-width:1;stroke-dasharray:2 3}
.g-nu{stroke:var(--r-soft);stroke-width:1;stroke-dasharray:4 3}
.g-strike{stroke:var(--r-soft);stroke-width:1;stroke-dasharray:1 3}
.g-stop{stroke:var(--r-warn);stroke-width:1.5;stroke-dasharray:5 3}
.g-stop-label{fill:var(--r-warn)}
.g-totaal{stroke:var(--r-ink);stroke-width:2.5;fill:none}
.g-gedekt{stroke:var(--r-soft);stroke-width:2;stroke-dasharray:6 4;fill:none}
/* De kaartgrafiek (template v9, reportchart.kaart). Geen font-size of font:
   de lettergrootte staat één keer op de svg, want de plaatsing van de labels
   rekent ermee (tests/test_grafiek_kaart.py bewaakt dat). Ook geen
   font-weight: de labels zijn gemeten in de gewone letter. De streep van
   .g-onbeschermd staat in de tekening (LIJNSTIJL), niet hier. De rand in de kaartkleur
   houdt een label leesbaar boven een vlak of arcering (KL-U16); 2 breed, dus
   een eenheid rond de letter, de marge die de plaatsing aanhoudt. */
.g-onbeschermd{stroke:var(--r-ink);stroke-width:2.5;fill:none}
.g-zone.beschermd,.g-staal.beschermd{fill:var(--r-floor);fill-opacity:.12}
.g-zone.beperkt,.g-staal.beperkt{fill:var(--r-warn);fill-opacity:.08}
.g-staal{stroke:var(--r-line);stroke-width:1}
.g-arc-lijn{stroke:var(--r-warn);stroke-width:1.4;stroke-opacity:.55}
.g-punt{fill:var(--r-ink);stroke:var(--r-card);stroke-width:1.5}
.g-leider{stroke:var(--r-soft);stroke-width:1}
.g-lbl{fill:var(--r-soft)}
.g-titel,.g-leg,.g-zone-lbl{fill:var(--r-ink)}
.g-zone-lbl.beschermd{fill:var(--r-floor)}
.g-stop-label .g-lbl{fill:var(--r-warn)}
.g-lbl,.g-zone-lbl text{paint-order:stroke;stroke:var(--r-card);stroke-width:2px;stroke-linejoin:round}

table.scenario{width:100%;font-size:14px;margin-top:4px}
table.scenario th{text-align:right;font-weight:600;padding:5px 8px;border-bottom:1px solid var(--r-line);color:var(--r-soft);font-size:13.5px;vertical-align:bottom}
table.scenario th:first-child,table.scenario td:first-child{text-align:left;padding-left:0}
table.scenario td{text-align:right;padding:4px 8px;border-bottom:1px solid var(--r-hair);white-space:nowrap}

.grenzen li,.zoekregels li{line-height:1.45}
.zoekregels li{font-family:var(--r-body);font-size:14.5px}

.rapport-alternatieven{display:flex;flex-direction:column;gap:10px}

.rapport-voet{display:flex;flex-direction:column;gap:10px;border-top:1px solid var(--r-line);padding-top:12px}
.rapport-voet .disclaimer{font-size:16.5px;color:var(--r-ink)}
.rapport-voet .versies{font-family:var(--r-body);font-size:13px;color:var(--r-soft);overflow-wrap:anywhere}
.sommetje{display:flex;flex-direction:column;gap:6px}

.tabel-scroll{overflow-x:auto}
.rapport .verborgen{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

@media (max-width:560px){
  .strategie{padding:14px 12px}
  table.geld td{white-space:normal}
  table.scenario{font-size:13px}
  table.scenario td,table.scenario th{padding:4px 4px}
}

/* ---------------------------------------------------------------- print --
   Voor de PDF (body.pdf) en voor wie de pagina zelf afdrukt. A4, lichte
   achtergrond, samenvatting en overzicht vooraan, elke strategie op een
   nieuwe pagina, en tabellen en grafieken nooit doormidden. De marges zet
   de renderer (page.pdf). */
@page{size:A4}
body.pdf{margin:0;background:#fff;text-rendering:geometricPrecision}
/* geometricPrecision: zonder hinting zet Chromium de letters op hun eigen
   breedte; met hinting las pdftotext (en wie uit de PDF kopieert) spaties
   midden in woorden ("opt ie", "ont vang"). De bovenkant van de letters
   van Source Sans 3 en Serif 4 reikt in de PDF tot boven hun regel, zo'n
   2 pt; zonder ruimte stond de eerste regel van elke pagina in de marge
   van 18 mm. Daarom 1,5 mm bovenaan, op elke pagina (clone: de ruimte
   herhaalt waar het rapport over een paginagrens loopt), en een ruimere
   regel voor de koppen. */
body.pdf .rapport{padding-top:1.5mm;-webkit-box-decoration-break:clone;box-decoration-break:clone}
body.pdf .rapport h2,body.pdf .rapport h3{line-height:1.4}
body.pdf .rapport{font-size:10.5pt;line-height:1.45;gap:10px}
body.pdf .rapport h2{font-size:16pt}
body.pdf .rapport h3{font-size:13pt}
body.pdf .rapport h4{font-size:10.5pt}
/* Elke kaart op een nieuwe pagina (ontwerp §1.8; mockup v9: "elk
   standaardresultaat begint op een nieuwe pagina"). */
body.pdf .strategie,body.pdf .r-kaart{border:0;padding:0;break-before:page;gap:9px}
body.pdf svg.grafiek{max-width:100%}
/* De kaart op A4 (mockup v9 .a4): de grafiek 108 mm breed, tekst 13,4 px
   (10 pt), de tegels ernaast. */
body.pdf .r-raster{grid-template-columns:108mm minmax(0,1fr);gap:3mm 5mm}
body.pdf table.scenario{font-size:9pt}
body.pdf .r-alt{break-before:page}
/* De onderkant op A4 (T5b), met de maten van de mockup v9 (.a4): de
   kernzin, Let op, de plicht en de tips in het korps van 10,5 pt, de
   getallen en labels kleiner, nooit onder 8 pt (ontwerp §1.8). */
body.pdf .r-gedeeld{padding:2.4mm 3.2mm;gap:1mm}
body.pdf .gd-item{padding:1.4mm 0 1.4mm 2.6mm}
body.pdf .gd-tag{font-size:8.5pt}
body.pdf .r-kern,body.pdf .r-letop{font-size:10.5pt;padding:2mm 3.2mm}
body.pdf .rapport .r-letop ul{gap:1.2mm;padding-left:4.5mm}
body.pdf .sk-rij{padding:1.6mm 0;gap:1mm 4mm}
body.pdf .sk-rij .kg{font-size:9pt}
body.pdf .sk-rij dt{font-size:8.5pt}
body.pdf .sk-rij .toel,body.pdf .sk-rij .q,body.pdf .r-raster-onder{font-size:8.5pt}
body.pdf .rr-t{gap:1.8mm}
body.pdf .r-tegel{padding:1.6mm 2.6mm;border-radius:5px}
body.pdf .tg-kop,body.pdf .tg-lbl,body.pdf .tg-klein{font-size:8.5pt}
body.pdf .tg-groot{font-size:13pt}
body.pdf .r-kosten h4,body.pdf .r-extra h4,body.pdf .r-contract-kop{font-size:9pt}
body.pdf .r-kostenregel{font-size:10pt;gap:1mm 2.4mm}
body.pdf .r-extra,body.pdf .r-contract{padding-top:2mm;gap:1.3mm}
body.pdf .r-poot .prijs{font-size:9.5pt}
body.pdf .r-plicht,body.pdf .r-w,body.pdf .r-tip,body.pdf .rapport .r-contract ul.let-op{font-size:10.5pt;padding-top:1.1mm;padding-bottom:1.3mm}
body.pdf .r-meer-inhoud{margin-top:2mm}
body.pdf .meer-sec{margin-bottom:2.4mm}
body.pdf .meer-sec h4{font-size:9pt}
body.pdf .r-alt-soort{padding:2.4mm 2.8mm;border-radius:6px}
body.pdf .r-alt-soort h4{font-size:9pt}
body.pdf .r-alt-vraag{font-size:9.5pt;padding:1.8mm 2.8mm}
body.pdf table.r-alt-tabel{font-size:9pt;line-height:1.32}
body.pdf .av-soort,body.pdf .av-herkomst{font-size:8.5pt}
/* Op papier zijn de kolommen van flexvakken gewone blokken, met dezelfde
   ruimte ertussen als marge. Chromium houdt break-after:avoid (een kop bij
   wat erop volgt) en break-inside:avoid alleen in de blokstroom; in een
   flexkolom bleef een kop als laatste regel onderaan een pagina staan, en
   wees een paginaverwijzing naar de pagina met alleen die kop (T8 #13). */
body.pdf .rapport,body.pdf .r-sam,body.pdf .r-bron,body.pdf .r-kostenbalk,body.pdf .r-vgl,body.pdf .r-ovz,
body.pdf .ov-rijen,body.pdf .ov-rij,body.pdf .strategie,body.pdf .r-gedeeld,body.pdf .r-letop,
body.pdf .r-kosten,body.pdf .r-extra,body.pdf .r-contract,body.pdf .r-plicht,body.pdf .r-poot,
body.pdf .rapport-voet,body.pdf .rapport-alternatieven,body.pdf .r-alt-soort,body.pdf .sommetje,
body.pdf .meer-sec,body.pdf .niveaus,body.pdf .rapport-meldingen,body.pdf .rapport-expiraties{display:block}
body.pdf .rapport > * + *{margin-top:10px}
body.pdf .strategie > * + *{margin-top:9px}
body.pdf .r-ovz > * + *,body.pdf .ov-rijen > * + *{margin-top:1.8mm}
body.pdf .r-vgl > * + *{margin-top:1.2mm}
body.pdf .ov-rij > * + *{margin-top:1.2mm}
body.pdf .r-sam > * + *,body.pdf .r-bron > * + *,body.pdf .r-kostenbalk > * + *,body.pdf .r-gedeeld > * + *,
body.pdf .r-kosten > * + *,body.pdf .r-extra > * + *,body.pdf .r-contract > * + *,body.pdf .r-plicht > * + *,
body.pdf .r-letop > * + *,body.pdf .rapport-voet > * + *,body.pdf .rapport-alternatieven > * + *,
body.pdf .r-alt-soort > * + *,body.pdf .sommetje > * + *,body.pdf .meer-sec > * + *,body.pdf .niveaus > * + *,
body.pdf .rapport-meldingen > * + *,body.pdf .rapport-expiraties > * + *{margin-top:1.3mm}
/* De voet begint waar zijn eerste regel staat: heel naar de volgende
   pagina als hij daar past (de verwijzing "volledige tekst op p. N"). */
.rapport .rapport-voet{break-inside:avoid}
/* De bovenste helft op A4, met de maten van de mockup v9 (.a4): het korps
   10,5 pt, het overzicht compacter, nooit onder 8 pt (ontwerp §1.8). */
body.pdf .r-pos{padding:2.4mm 3.2mm;border-radius:6px}
body.pdf .pos-aantal{font-size:10pt}
body.pdf .pos-waarde{font-size:18pt}
body.pdf .pos-lbl,body.pdf .r-sam .rid,body.pdf .r-sam .merk{font-size:8.5pt}
body.pdf .r-sam .vraag{font-size:10.5pt}
body.pdf .r-bron{font-size:9.5pt;padding:2mm 3mm}
body.pdf .r-bron h3{font-size:11pt}
body.pdf .r-topblok,body.pdf .r-voetwaarschuwing{font-size:10.5pt;padding:2mm 3mm}
body.pdf .r-kostenbalk{padding:2.4mm 3.2mm;gap:2mm}
body.pdf .kb-bron,body.pdf .kb-labels{font-size:8.5pt}
body.pdf .r-legenda{font-size:8.5pt;padding:1.4mm 2.6mm;gap:1mm 4mm}
/* Het overzicht op één pagina (T8 #5, AFM-X15): op A4 smaller en dichter
   dan op het scherm, met de beperkingen in de bredere derde kolom en de
   kleine regels in drie kolommen; nooit onder 8 pt. Vier rijen van het
   ING-bord zijn zo 950 px hoog, tegen 986 px voor een pagina. */
body.pdf .r-ovz .noot,body.pdf .r-ovz .intro{font-size:8.5pt;line-height:1.3}
body.pdf .ov-rij{padding:1.6mm 2.6mm;border-radius:6px}
body.pdf .ov-boven{grid-template-columns:minmax(0,.9fr) minmax(0,.8fr) minmax(0,1.5fr);gap:1mm 3mm}
body.pdf .ov-a,body.pdf .ov-b{gap:.8mm}
body.pdf .ov-b{padding-left:3mm}
body.pdf .rapport .ov-naam{font-size:10.5pt;line-height:1.15}
body.pdf .ov-naam .alt-link{font-family:var(--r-body);font-weight:400;font-size:8pt}
body.pdf .ov-nr{font-size:8pt}
body.pdf .ov-item{font-size:8pt;line-height:1.2}
body.pdf .ov-a > .ov-item .vd,body.pdf .ov-b > .ov-item .vd{font-size:12pt;line-height:1.15}
body.pdf .ov-a > .ov-item .ov-lbl,body.pdf .ov-b > .ov-item .ov-lbl,body.pdf .ov-a > .ov-item .toel,body.pdf .ov-b > .ov-item .toel{font-size:8pt}
body.pdf .ov-beperk{padding:1mm 2mm;gap:.4mm}
body.pdf .ov-klein{grid-template-columns:repeat(3,minmax(0,1fr));gap:.6mm 4mm;padding-top:1.2mm}
body.pdf .r-na,body.pdf .r-slotcel{font-size:9pt}
/* "Wat gebeurt er met je geld?" (V1) op A4: heel op één pagina, nooit
   onder 8 pt; het overzicht erna gaat heel naar de volgende pagina als het
   niet meer past (break-inside:avoid hieronder). */
body.pdf .r-vgl{padding:2.2mm 3mm;border-radius:6px}
body.pdf .r-vgl .intro,body.pdf .r-vgl .noot,body.pdf .r-vgl .vgl-uitgang{font-size:8pt;line-height:1.25}
body.pdf table.r-vgl-tabel{font-size:8.5pt;line-height:1.2}
body.pdf table.r-vgl-tabel th,body.pdf table.r-vgl-tabel td{padding:.45mm 1.4mm}
body.pdf table.r-vgl-tabel tr.vgl-groep th{font-size:8pt;padding-top:1mm}
body.pdf table.r-vgl-tabel thead th{font-size:8.5pt}

body.pdf .rapport-voet .disclaimer{font-size:10.5pt}
body.pdf .rapport-voet .versies{font-size:8pt}
body.pdf .niveaus,body.pdf table.geld{font-size:9.5pt}
body.pdf .niveaus .noot,body.pdf table.geld th small{font-size:8.5pt}
body.pdf .r-poot .zoek{font-size:10.5pt}
body.pdf .r-legenda,body.pdf .gd-tag,body.pdf .meer-sec h4{letter-spacing:0}
.rapport figure,.rapport table,.rapport .grenzen li{break-inside:avoid}
.rapport h3,.rapport h4{break-after:avoid}
/* Afbreken (C8). Een blok dat op één pagina past, gaat heel naar de
   volgende pagina in plaats van dat een staart van een paar regels alleen
   staat; een kop blijft bij wat erop volgt; een alinea laat aan geen van
   beide kanten van een paginagrens minder dan drie regels achter. "avoid"
   is een voorkeur (CSS Fragmentation 3): een blok dat langer is dan een
   pagina loopt gewoon door, en een tabel herhaalt dan haar kop. Zonder
   body.pdf, zodat zelf afdrukken van de site hetzelfde doet; op het scherm
   doen deze eigenschappen niets. */
.rapport .rapport-meldingen,.rapport .rapport-expiraties,.rapport .strategie-kop,.rapport .niet-beschikbaar,.rapport .sommetje,.rapport .niveaus{break-inside:avoid}
/* De bovenste helft van het template v9 (ontwerp §1.8): elk blok heel, en
   het overzicht heel op één pagina of op de volgende (AFM-X15), met elke rij
   heel als het overzicht langer is dan een pagina. Geen gedwongen
   paginabreuk: samenvatting en overzicht staan vooraan (mockup v9). */
.rapport .r-sam,.rapport .r-bron,.rapport .r-topblok,.rapport .r-kostenbalk,.rapport .r-legenda,.rapport .r-vgl,.rapport .r-ovz,.rapport .ov-rij,.rapport .r-voetwaarschuwing{break-inside:avoid}
/* De onderkant (T5b): elk deel van een kaart heel, en in het gedeelde
   blok, "Meer uitleg" en de andere mogelijkheden elk punt, elk deel en
   elke tabel; de kaart zelf, het contract, het gedeelde blok en "Meer
   uitleg" lopen door als ze langer zijn dan een pagina. Ook in de twee
   kolommen van "Meer uitleg" en het gedeelde blok op het scherm. */
.rapport .r-kern,.rapport .r-letop,.rapport .r-strook-k,.rapport .r-raster,.rapport .r-kosten,.rapport .r-extra,.rapport .r-poot,.rapport .r-plicht,.rapport .r-w,.rapport .r-tip,.rapport .r-actie,.rapport .gd-item,.rapport .meer-sec,.rapport .r-alt-vraag,.rapport .r-alt-soort,.rapport .alt-risico,.rapport .r-teaser{break-inside:avoid}
.rapport .r-contract-kop,.rapport .r-letop-kop,.rapport .r-plicht-kop,.rapport .r-tip-kop,.rapport .r-afw.r-w{break-after:avoid}
.rapport .strategie-kop,.rapport details.r-meer > summary,.rapport .meer-sec > h4{break-after:avoid}
.rapport p,.rapport li,.rapport dd{orphans:3;widows:3}
.rapport tr{break-inside:avoid}
.rapport thead{display:table-header-group}
@media print{
  .rapport details.r-meer > *{display:block}
}