/* Belasting Redder — één stylesheet, geen externe afhankelijkheden.

   Ontwerpuitgangspunten (nieuwe look, september 2026 — zie NIEUWELOOKRONDE-2026-09.md en
   design-system/belasting-redder/MASTER.md):

   1. VIER KLEUREN, ELK MET EEN BAAN, plus de bedragkleuren. Zonder die afspraak zijn het
      binnen drie ronden weer acht kleuren, dus staat ze hier en niet in iemands hoofd:

        PAPIER is wit en is het vlak van alles wat je moet lezen: de kaarten, de tabellen,
        de vakken achter de vragen. Daaronder ligt de GROND, een warm gebroken wit — de
        pagina zelf. Dat verschil is klein met opzet: het is een rustpunt, geen kleur.

        DENNENGROEN (--structuur) is de dragende donkere kleur. Het is een TEKST- en
        STRUCTUURkleur: h1 en h2, opschriften, tekst op een salievlak, de rand van een
        gekozen stand, en als vlak alleen de voet plus "hier ben je" (de stap waar je
        staat, een opengeklapte uitleg). Het is niet de klikkleur.

        SALIE (--vlak) is UITSLUITEND een vlak en NOOIT tekst: het uitwerkingsvlak, de
        tabelkop, het stapnummer, een gekozen stand. Wat erop staat is dennengroen of inkt.

        BOEI-ORANJE (--accent) is alles wat je kunt aanklikken, en verder niets: links,
        gevulde knoppen, het beeldmerk in de kop (dat is zelf de link naar de start).
        Een omlijnde knop of pil (menu, filter, ja/nee, "op deze pagina") heeft
        dennengroene tekst met een rand: daar zegt de vorm al dat je erop kunt drukken,
        en zo blijft er per scherm één oranje ding dat de volgende stap is. Het is
        de kleur van een reddingsboei — en met opzet GEEN blauw: de Belastingdienst en de
        Rijksoverheid zijn blauw, en deze site draagt op elke pagina de regel dat hij niet
        officieel is. Groen met oranje leest als hulp van buiten, niet als afzender van je
        aanslag.

      Groen (--bedrag) en wijnrood (--negatief) bestaan alleen als tekstkleur bij een
      bedrag. Het wijnrood ligt met opzet ver van het oranje, zodat "bijbetalen" nooit op
      een link lijkt.

   2. Betekenis draagt op woorden, niet op kleur. Een voorbehoud, een bronconflict, een
      waarschuwing en een aanname delen één patroon — een hairline links, een klein teken
      en een expliciet opschrift — en zijn te onderscheiden aan dat opschrift. Dat werkt
      ook zwart-wit en voor wie kleuren niet ziet.
   3. Rust boven versiering. Een kader alleen waar het echt iets scheidt; schaduw alleen
      onder wat je kunt aanraken of wat boven de pagina zweeft.
   4. Leesbaar voor wie slecht ziet. De basismaat staat in rem, zodat een grotere
      letterinstelling van de browser meeloopt; lopende tekst is nooit kleiner dan 16 px,
      een raakvlak nooit kleiner dan 44 × 44 px, en elke focus is een dikke donkere rand
      met een witte rand ertussen — zichtbaar op wit, op salie en op oranje.
   5. Geen eigen lettertype: § 11 van controleer-uitlevering.js belooft dat de pagina
      gebruikt wat je apparaat al heeft. Koppen staan in een schreefletter uit het systeem
      (Charter op Apple-apparaten, Sitka of Cambria op Windows, Noto Serif op Android) —
      rustig, briefachtig, en duidelijk geen overheidsletter; lopende tekst en bedragen in
      de schreefloze systeemletter. */

:root {
  /* ------------------------------------------------------------ laag 1: primitieven
     Ruwe waarden, zonder betekenis. Alleen de semantische laag hieronder verwijst ernaar. */
  --wit: #ffffff;
  --zand-50: #f6f5f0;   /* de grond */
  --zand-100: #eeece4;
  --zand-200: #e2ded3;
  --zand-300: #c9c3b4;
  --grijsgroen-500: #838a85; /* rand van een invoerveld: 3,5:1 op wit (WCAG 1.4.11) */
  --grijsgroen-600: #5b625e; /* 6,3:1 op wit, 5,7:1 op de grond, 5,3:1 op salie */
  --grijsgroen-700: #454c48; /* 8,8:1 op wit */
  --grijsgroen-900: #1b1f1d; /* 16,7:1 op wit */
  --groen-50: #eef5f0;
  --groen-100: #e2eee6;
  --groen-200: #bfd8c8;
  --groen-600: #146b3a;      /* 6,6:1 op wit */
  --groen-700: #2f5a49;
  --groen-900: #143a2c;      /* 12,6:1 op wit */
  --groen-op-900: #c8ddd0;   /* 8,8:1 op groen-900 */
  --oranje-700: #b3440b;     /* 5,6:1 op wit, 5,1:1 op de grond, wit erop 5,6:1 */
  --oranje-800: #8a3208;     /* wit erop 8,3:1 */
  --wijn-50: #fcf0f3;        /* het vlak van een uitkomst "bijbetalen"; wijn-700 erop 7,0:1 */
  --wijn-200: #efc3cf;       /* de rand van dat vlak */
  --wijn-700: #a3123a;       /* 7,8:1 op wit */
  /* De beleving van september 2026 (BELEVINGRONDE-2026-09.md): een tweede groen voor het
     verloop in de kop van de voorpagina en de belastingbalken, zon-amber als decor en voor de
     kortingen, en een diepere salie voor wat al is ingehouden. */
  --groen-800: #1b4a38;      /* 10,1:1 op wit — een balk van de grafiek, en het verloop van de
                                hero: wit erop 10,1:1, zon erop 5,5:1 */
  --salie-600: #5e8c74;      /* 3,8:1 op wit — een balk: al ingehouden */
  --amber-700: #a86a0f;      /* 4,4:1 op wit — een balk: kortingen */
  --zon-400: #f2b63d;        /* decor, en een vlak met inkt erop (10:1) */

  --font-tekst: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, "Liberation Sans", sans-serif;
  --font-kop: Charter, "Bitstream Charter", "Sitka Text", Cambria, "Noto Serif", Georgia, serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* De ruimtetrap. Elke marge, opvulling en tussenruimte in dit blad is een van deze stappen
     (§ 19 bewaakt dat er geen losse rem-waarde meer tussen staat); 0 is een haarbreed extra,
     voor een regel die net los moet van de vorige. */
  --ruimte-0: 0.125rem;
  --ruimte-1: 0.25rem;
  --ruimte-2: 0.5rem;
  --ruimte-3: 0.75rem;
  --ruimte-4: 1rem;
  --ruimte-5: 1.5rem;
  --ruimte-6: 2rem;
  --ruimte-7: 3rem;
  --ruimte-8: 4rem;

  /* De lettertrap: zeven stappen, en geen enkele lettermaat in dit blad staat erbuiten (§ 19).
     De drie grootste lopen mee met de breedte van het scherm, zodat een kop op een telefoon
     niet schreeuwt en op een groot scherm niet verdwijnt. Kleiner dan xs bestaat niet. */
  --tekst-xs: 0.8rem;   /* opschriften in kapitalen, kleine bijschriften */
  --tekst-s: 0.9rem;    /* bijschrift, tweede tekst, tabelnoot */
  --tekst-m: 1rem;      /* lopende tekst */
  --tekst-l: 1.15rem;   /* lead, h3, een kop in een kaart */
  --tekst-xl: clamp(1.25rem, 1.1rem + 0.6vw, 1.45rem);   /* h2 */
  --tekst-2xl: clamp(1.75rem, 1.35rem + 1.6vw, 2.35rem); /* h1, een kopbedrag */
  --tekst-3xl: clamp(2.1rem, 1.3rem + 3.2vw, 3.3rem);    /* de kop van de voorpagina */

  /* Drie gewichten: gewoon, half en vet. De systeemletters kennen er niet meer; een 450 of
     een 650 viel per apparaat naar een van deze drie terug, en dus overal anders. */

  /* ------------------------------------------------------------ laag 2: semantiek
     Wat een kleur of maat BETEKENT. De hele stylesheet gebruikt alleen deze namen. */

  /* inkt — tekst op wit en op de grond */
  --inkt: var(--grijsgroen-900);
  --inkt-zacht: var(--grijsgroen-700);
  --inkt-licht: var(--grijsgroen-600);

  /* papier — het vlak van alles wat je leest; de grond eronder */
  --papier: var(--wit);
  --papier-zacht: var(--zand-50);  /* de pagina achter de kaarten */
  --papier-vlak: var(--zand-100);  /* een zweefstand, een codefragment */

  /* lijnen — warm, zodat een hairline niet grijs-koud afsteekt */
  --lijn: var(--zand-200);
  --lijn-sterk: var(--zand-300);
  --veldrand: var(--grijsgroen-500);

  /* dennengroen — dragend: koppen, opschriften, de voet, tekst op salie */
  --structuur: var(--groen-900);
  --structuur-lijn: var(--groen-700);  /* scheidingen BINNEN het groene vlak */
  --op-diep: var(--wit);               /* tekst op dennengroen — 12,6:1 */
  --op-diep-zacht: var(--groen-op-900);/* secundaire tekst op dennengroen — 8,8:1 */

  /* salie — uitsluitend vlak, nooit tekst */
  --vlak: var(--groen-100);
  --vlak-zacht: var(--groen-50);
  --vlak-lijn: var(--groen-200);

  /* boei-oranje — het enige dat je kunt aanklikken */
  --accent: var(--oranje-700);
  --accent-diep: var(--oranje-800);   /* de zweef- en drukstand */
  --focus: var(--groen-900);

  /* bedragen — uitsluitend als tekstkleur */
  --bedrag: var(--groen-600);
  --negatief: var(--wijn-700);

  /* Eén noot-vorm voor elke mededeling, voorbehoud, aanname of hulptekst: een hairline links
     in salie, zonder vlak. Alleen de rekenwaarschuwing ("dit getal klopt niet") is zwaarder. */
  --noot-rand: 3px solid var(--vlak-lijn);
  --noot-rand-zwaar: 4px solid var(--structuur);

  /* de beleving: het verloop van de hero, de zon, en de vijf balkkleuren van de grafieken.
     Een balk draagt zijn betekenis ook in woorden (label, plus of min) — de kleur helpt alleen
     het oog. Elk haalt 3:1 tegen wit en tegen salie (§ 19). */
  --hero-van: var(--groen-900);
  --hero-tot: var(--groen-800);
  --zon: var(--zon-400);
  --grafiek-heffing: var(--groen-800);
  --grafiek-korting: var(--amber-700);
  --grafiek-ingehouden: var(--salie-600);
  --grafiek-bij: var(--negatief);
  --grafiek-terug: var(--bedrag);
  /* de uitkomst in "In één oogopslag": een licht vlak in de richting van het eindbedrag, met een
     rand uit dezelfde familie. Erop staat inkt en het bedrag in --negatief of --bedrag (§ 19). */
  --uitkomst-bij: var(--wijn-50);
  --uitkomst-bij-lijn: var(--wijn-200);
  --uitkomst-terug: var(--groen-50);
  --uitkomst-terug-lijn: var(--groen-200);
  /* het ronde pictogram op een kaart (wit teken erop): dezelfde tint als het bedrag ernaast */
  --uitkomst-bij-teken: var(--wijn-700);
  --uitkomst-terug-teken: var(--groen-600);

  /* beweging: één uitloop voor wat aankomt, één veer voor wat je aanraakt. Bij minder
     beweging staat alles stil (de regel onder :root). */
  --uit: cubic-bezier(0.22, 1, 0.36, 1);
  --veer: cubic-bezier(0.34, 1.56, 0.64, 1);
  --schaduw-til: 0 4px 10px rgba(27, 31, 29, 0.06), 0 14px 32px rgba(27, 31, 29, 0.12);

  --radius: 12px;
  --radius-klein: 8px;
  --schaduw: 0 1px 2px rgba(27, 31, 29, 0.05), 0 1px 3px rgba(27, 31, 29, 0.06);
  --schaduw-hoog: 0 10px 30px rgba(27, 31, 29, 0.12);

  --maxbreed: 62rem;
  --leesbreed: 38rem; /* ~70 tekens lopende tekst */

  /* ------------------------------------------------------------ laag 3: componenten */
  --knop-achter: var(--accent);
  --knop-achter-zweef: var(--accent-diep);
  --knop-tekst: var(--wit);
  --knop-hoogte: 48px;
  --knopklein-hoogte: 44px;
  --veld-hoogte: 48px;
  --kaart-rand: var(--lijn);
  --kaart-binnen: 1.5rem;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* De basismaat staat op de WORTEL en in procenten, zodat elke rem-maat in dit blad meeloopt —
   ook de kleine opschriften — en een grotere letterinstelling van de browser gewoon werkt.
   Een mediaquery in rem rekent met de standaardmaat van de browser, niet met deze, dus de
   breekpunten verschuiven hierdoor niet. */
html {
  -webkit-text-size-adjust: 100%;
  color-scheme: light;
  font-size: 106.25%; /* 17 px bij de standaardinstelling */
}
@media (min-width: 48rem) {
  html { font-size: 112.5%; } /* 18 px op een groter scherm */
}

body {
  margin: 0;
  font-family: var(--font-tekst);
  font-size: var(--tekst-m);
  line-height: 1.6;
  color: var(--inkt);
  background: var(--papier-zacht);
  -webkit-font-smoothing: antialiased;
}

/* Wie minder beweging wil, krijgt geen enkele overgang: ook geen draaiend pijltje. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

img { max-width: 100%; }

/* Nederlands zit vol lange samenstellingen ("nabestaandenoverbruggingspensioen").
   Zonder dit loopt zo'n woord op een smal scherm uit zijn kader. */
body { overflow-wrap: break-word; }
@media (max-width: 34rem) {
  p, li, dd, dt, td, th, summary, h1, h2, h3 { hyphens: auto; }
}

[hidden] { display: none !important; }

a {
  color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}
a:hover { color: var(--accent-diep); text-decoration-thickness: 2px; }

/* Zichtbare toetsenbordfocus, overal dezelfde: een dikke dennengroene rand met een witte
   rand ertussen. Het donkergroen haalt 12,6:1 op wit en 11,5:1 op de grond, en het wit
   ertussen houdt hem zichtbaar tegen een oranje knop of een salievlak. */
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--papier);
  border-radius: 4px;
}
/* Behalve op het dennengroene vlak: daar zou de rand in de grond verdwijnen. Wit haalt er
   12,6:1. */
.voet :focus-visible { outline-color: var(--op-diep); box-shadow: none; }

code {
  font-family: var(--font-mono);
  font-size: var(--tekst-s);
  background: var(--papier-vlak);
  border-radius: 4px;
  padding: 0.05em 0.35em;
}

/* Tekst die alleen een schermlezer hoort: kolomnamen die op het scherm uit de
   opmaak blijken maar in de voorleesvolgorde zouden ontbreken. */
.alleenlezer {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip {
  position: absolute;
  left: -9999px;
}
.skip:focus {
  left: 1rem;
  top: 1rem;
  z-index: 100;
  font-weight: 700;
  color: var(--structuur);
  background: var(--papier);
  padding: var(--ruimte-2) var(--ruimte-4);
  border-radius: var(--radius-klein);
  box-shadow: var(--schaduw);
}

/* =========================================================================
   Noot — het gedeelde patroon voor alles wat vroeger een kleurvlak was:
   voorbehoud, bronconflict, let op, aannames, ontbrekende gegevens,
   waarschuwing, adviseursadvies. Geen vulling, één hairline, een opschrift.
   ========================================================================= */

.voorbehoud,
.conflict,
.adviesletop,
.aonzeker,
.aversom,
.p-letop,
.p-conflict,
p.waarschuwing,
.toolwaarschuwing,
.aannames,
.rekenwaarschuwing,
.invoerletop,
.opbouw,
.kanook,
.kansvoorbehoud,
.ontbreekt,
.nogtevullen,
.adviseur,
.invoercontrole,
.onbekendcontrole,
.stapfout,
.veldfout,
.getalfout,
.herstelmelding,
.hervat,
.eindkader {
  border: none;
  background: none;
  border-left: var(--noot-rand);
  border-radius: 0;
  padding: var(--ruimte-0) 0 var(--ruimte-0) var(--ruimte-4);
  margin: var(--ruimte-4) 0;
  font-size: var(--tekst-m);
  color: var(--inkt-zacht);
  max-width: calc(var(--leesbreed) + 1rem);
}

.voorbehoud > :is(h2, h3, h4),
.conflict > h4,
.adviesletop > h5,
.p-letop > h4,
.p-conflict > h4,
.aannames > h3,
.rekenwaarschuwing > h3,
.invoerletop > h3,
.opbouw > h4,
.kanook > h4,
.kansvoorbehoud > h4,
.ontbreekt > h3,
.nogtevullen > h3,
.invoercontrole > h3,
.onbekendcontrole > h3,
.stapfout > h3,
.veldfout > .veldfoutkop,
.getalfout > .getalfoutkop {
  display: flex;
  align-items: baseline;
  gap: var(--ruimte-2);
  font-family: var(--font-tekst);
  font-size: var(--tekst-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--structuur);
  margin: 0 0 var(--ruimte-1);
}

/* Het tekentje voor het opschrift: monochroom, in de tekstkleur, en nooit de
   enige drager van betekenis — het opschrift ernaast zegt het ook. */
.voorbehoud > :is(h2, h3, h4)::before,
.conflict > h4::before,
.adviesletop > h5::before,
.p-letop > h4::before,
.p-conflict > h4::before,
.aannames > h3::before,
.rekenwaarschuwing > h3::before,
.invoerletop > h3::before,
.opbouw > h4::before,
.kanook > h4::before,
.kansvoorbehoud > h4::before,
.ontbreekt > h3::before,
.nogtevullen > h3::before,
.invoercontrole > h3::before,
.onbekendcontrole > h3::before,
.stapfout > h3::before,
.veldfout > .veldfoutkop::before,
.getalfout > .getalfoutkop::before {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25em;
  height: 1.25em;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-size: var(--tekst-m);
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
  transform: translateY(0.1em);
}
.voorbehoud > :is(h2, h3, h4)::before { content: "?"; }
.conflict > h4::before,
.p-conflict > h4::before { content: "\2260"; } /* ≠ — de bronnen zeggen niet hetzelfde */
.adviesletop > h5::before,
.p-letop > h4::before,
.ontbreekt > h3::before,
.rekenwaarschuwing > h3::before,
.invoercontrole > h3::before,
.stapfout > h3::before,
.veldfout > .veldfoutkop::before,
.getalfout > .getalfoutkop::before { content: "!"; }
/* ? — hier is niet geschat en niet gerekend: hier ontbreekt een gegeven omdat de bezoeker het
   niet kende. Deelt het teken met het voorbehoud, want dat is precies wat het is. */
.onbekendcontrole > h3::before { content: "?"; }
.aannames > h3::before { content: "\2248"; } /* ≈ — hier is geschat */
/* ? — dit is een vraag aan de bezoeker en geen mededeling dat het fout is. Deelt het teken
   met het voorbehoud en met het blok "weet ik niet", want het is dezelfde soort noot: hier
   staat iets waar de tool geen zekerheid over heeft. Een uitroepteken zou beweren dat het
   getal fout is, en dat weet de tool niet — de bezoeker heeft de papieren. */
.invoerletop > h3::before { content: "?"; }
.invoerletop { color: var(--inkt); }
.invoerletop ul { margin: var(--ruimte-1) 0 0; padding-left: var(--ruimte-4); }
.invoerletop li { margin-bottom: var(--ruimte-2); }
.letopintro { margin: 0 0 var(--ruimte-2); color: var(--inkt-zacht); }
/* Σ — dit is een optelsom, en hier staat welke. Geen nieuwe kleurfamilie, alleen een teken. */
.opbouw > h4::before { content: "\03A3"; }
/* + — dit komt er misschien nog bij. Bewust géén eigen kleur: het verschil met een besparing
   die je al hebt, draagt op het opschrift en op de woorden, niet op een vlak. */
.kansvoorbehoud > h4::before,
.kanook > h4::before { content: "+"; }
/* … — hier hoort iets te staan dat er nog niet is. Geen fout en geen aanname: een lege plek
   die zichzelf aanwijst. Gebruikt bij de afzendergegevens op de pagina Over deze site. */
.nogtevullen > h3::before { content: "\2026"; }

.voorbehoud p:last-child,
.conflict p:last-child,
.kansvoorbehoud p:last-child,
.aannames p:last-child,
.ontbreekt p:last-child,
.nogtevullen p:last-child,
.rekenwaarschuwing p:last-child,
.adviseur p:last-child { margin-bottom: 0; }

/* Een waarschuwing dat de UITKOMST niet klopt is zwaarder dan een aanname, maar krijgt geen
   eigen kleurfamilie: hij deelt het noot-patroon en zet alleen de hairline en de tekst voluit.
   Het opschrift draagt de betekenis, niet de opmaak. */
.rekenwaarschuwing {
  border-left: var(--noot-rand-zwaar);
  color: var(--inkt);
  font-size: var(--tekst-m);
}
.rekenwaarschuwing > h3 { margin-bottom: var(--ruimte-2); }

.conflictbron { margin: var(--ruimte-2) 0 0; padding-left: var(--ruimte-4); font-size: var(--tekst-s); }

/* De opbouw van het kopbedrag: hoort bij het bedrag erboven, dus hij staat er strak tegenaan
   en deelt het noot-patroon. Wat buiten het totaal viel, blijft leesbaar en met bedrag. */
.opbouw { margin: calc(-1 * var(--ruimte-4)) 0 var(--ruimte-6); }
.opbouwkop { margin-bottom: var(--ruimte-1); }
.opbouwlijst { margin: var(--ruimte-1) 0 0; padding-left: var(--ruimte-4); }
.opbouwlijst li { margin-bottom: var(--ruimte-2); max-width: none; }
.opbouwbedrag { font-weight: 700; color: var(--bedrag); font-variant-numeric: tabular-nums; }

/* Kan ook, als … — wat een voorwaarde vraagt, direct onder het kopbedrag en er niet in. Het
   noot-patroon met het teken +, zoals een kans: het komt er misschien bij, en de voorwaarde
   staat in woorden bij elk punt. Geen totaal, dus ook geen vet bedrag dat optellen uitlokt. */
.kanook { margin: 0 0 var(--ruimte-6); }
.kanookintro { margin: 0 0 var(--ruimte-2); }
.kanooklijst { margin: var(--ruimte-1) 0 0; padding-left: var(--ruimte-4); }
.kanooklijst li { margin-bottom: var(--ruimte-2); max-width: none; }
.kanooktitel { font-weight: 600; color: var(--inkt); }
.kanookbedrag { color: var(--bedrag); font-variant-numeric: tabular-nums; white-space: nowrap; }
.kanookals { display: block; font-size: var(--tekst-s); }

/* --------------------------------------------------------------- kop en nav */

/* De kop is de ankerplaats van het menupaneel: dat hangt aan de volle breedte hiervan en
   niet aan de knop, zodat het nooit half buiten beeld kan vallen. */
.kop {
  position: relative;
  z-index: 50;
  background: var(--papier);
  border-bottom: 1px solid var(--lijn);
}

.kopbinnen {
  max-width: var(--maxbreed);
  margin: 0 auto;
  padding: var(--ruimte-4) var(--ruimte-5) var(--ruimte-3);
  display: flex;
  align-items: center;
  gap: var(--ruimte-3) var(--ruimte-5);
  flex-wrap: wrap;
}

.merk { flex: 1 1 16rem; min-width: 0; }


.merknaam {
  display: inline-flex;
  align-items: center;
  gap: var(--ruimte-2);
  min-height: 44px;
  font-family: var(--font-kop);
  font-size: var(--tekst-xl);
  font-weight: 700;
  color: var(--structuur);
  text-decoration: none;
  letter-spacing: -0.01em;
}
.merknaam:hover { color: var(--structuur); }

/* Het beeldmerk is het enige gekleurde ding in de merkregel; de naam blijft inkt. Zijn maat
   staat in em, dus hij loopt mee met de tekstgrootte en met de zoom van de browser. Hij mag
   nooit krimpen: op een smal scherm perst flex anders het beeldmerk plat in plaats van de
   naam te laten afbreken. */
.merkmerk {
  flex: 0 0 auto;
  width: 1.2em;
  height: 1.2em;
  color: var(--accent);
}
/* Bij het zweven wordt de boei donkerder, net als elke andere link. */
.merknaam:hover .merkmerk { color: var(--accent-diep); }

.ondertitel {
  margin: 0;
  font-size: var(--tekst-xs);
  line-height: 1.45;
  color: var(--inkt-licht);
}

/* Mag krimpen en afbreken. Stond hij op flex: 0 0 auto, dan werd hij zo breed als zijn
   inhoud en liep de kop op een telefoon negen pixels buiten beeld — waarna Chrome de hele
   pagina iets uitzoomt en elke meting scheef staat. */
.kopacties {
  flex: 0 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--ruimte-3);
  flex-wrap: wrap;
}
/* Op een telefoon staat de merknaam met de ondertitel op zijn eigen regel en staan de
   rekentoolknop en de menuknop daaronder. Laat je ze om dezelfde regel vechten, dan wordt de
   merknaam tot een kolom van drie letters geperst. */
@media (max-width: 34rem) {
  .merk { flex: 0 0 100%; }
  .kopacties { width: 100%; justify-content: flex-start; flex-wrap: nowrap; }
  .kopacties .navtool { flex: 1 1 auto; align-items: center; }
}


/* De rekentool: het enige gevulde vlak in de kop, en het enige dat naast de menuknop blijft
   staan. Dat is de eerste van de vijf maatregelen die opvangen dat de navigatie achter een
   knop zit — de belangrijkste bestemming van de site staat er dus nog steeds gewoon.
   Zet er geen derde ding naast: de kop draagt de merknaam, de rekentool en de menuknop. */
.navtool {
  flex: 0 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* Zodat de "hier ben je"-streep onder het wóórd staat en niet over de hele knop loopt. */
  align-items: flex-start;
  gap: var(--ruimte-0);
  min-height: var(--knop-hoogte);
  padding: var(--ruimte-2) var(--ruimte-4);
  background: var(--knop-achter);
  color: var(--knop-tekst);
  text-decoration: none;
  border-radius: var(--radius-klein);
  box-shadow: var(--schaduw);
}
.navtool:hover { background: var(--knop-achter-zweef); color: var(--knop-tekst); }
.navtoollabel { font-weight: 700; font-size: var(--tekst-m); line-height: 1.2; }
.navtoolhint { font-size: var(--tekst-xs); line-height: 1.25; }
.navtool[aria-current="page"] .navtoollabel {
  box-shadow: inset 0 -2px 0 rgba(255, 255, 255, 0.75);
  padding-bottom: 1px;
}
/* Op een telefoon staat de knop naast de menuknop op één regel en is er geen plaats voor
   het zinnetje eronder. Het oranje vlak met de woorden "Aanslag inlezen" doet daar het werk. */
@media (max-width: 26rem) {
  .navtoolhint { display: none; }
}

/* =========================================================================
   Het hoofdmenu — één klikmenu achter het drie-strepen-teken

   Er is precies één manier om het te openen: klikken of tikken. Zweven doet
   niets meer, en daarmee vervalt ook de uitzonderingsregel die zweven en
   klikken uit elkaar moest houden.

   Wat de opmaak hier moet leveren:
     - een raakvlak van minstens 44 px voor elke rij, ook de `›`-rijen en de
       Terug-rijen;
     - één paneel dat over de pagina valt, nooit hoger wordt dan het scherm en
       binnen zichzelf scrollt — en dat nooit buiten beeld kan vallen, want het
       hangt aan de volle breedte van de kop en niet aan de knop van 90 px;
     - dezelfde lagen op elk scherm, maar anders ingedeeld: breed blijft de
       eerste kolom staan en klapt de tweede laag ernaast open, smal vervangt
       elke laag de vorige met een Terug-rij erboven;
     - zichtbaar waar je bent zonder dat kleur de enige drager is: de rij van
       het onderdeel waarin je zit krijgt vet én een streepje ervoor, plus
       aria-current voor een schermlezer.

   De toestand komt uit app.js als drie klassen — `vlakopen` (tweede laag aan),
   `paneelbreed` (die laag is de brede Naslag-laag) en `subactief`/`subopen`
   (derde laag aan). Wélke laag je dan te zien krijgt, staat hieronder en niet
   in javascript: een mediaquery in javascript is precies de fout die je pas op
   een laptop met een aanraakscherm merkt.
   ========================================================================= */

.hoofdnav {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
}

/* ---- de knop ---- */

.menuknop {
  font: inherit;
  font-size: var(--tekst-s);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: var(--ruimte-2);
  min-height: var(--knop-hoogte);
  padding: var(--ruimte-2) var(--ruimte-4);
  background: var(--papier);
  border: 1px solid var(--veldrand);
  border-radius: var(--radius-klein);
  color: var(--structuur);
  cursor: pointer;
  white-space: nowrap;
}
.menuknop:hover { border-color: var(--structuur); background: var(--vlak-zacht); }
.menuknop[aria-expanded="true"] { border-color: var(--structuur); background: var(--vlak); }

/* Het teken zelf: drie streepjes die bij het openen een kruis worden. Getekend met
   randen in de tekstkleur, dus geen lettertype-afhankelijk teken en geen tweede kleur.
   Het woord "Menu" ernaast draagt de betekenis — het teken alleen is voor een deel van
   de bezoekers een raadsel. */
.menustrepen {
  position: relative;
  flex: 0 0 auto;
  display: block;
  width: 18px;
  height: 14px;
}
.menustrepen span {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: currentColor;
  border-radius: 1px;
  transition: transform 0.13s ease, opacity 0.13s ease;
}
.menustrepen span:nth-child(1) { top: 0; }
.menustrepen span:nth-child(2) { top: 6px; }
.menustrepen span:nth-child(3) { top: 12px; }
.menuknop[aria-expanded="true"] .menustrepen span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.menuknop[aria-expanded="true"] .menustrepen span:nth-child(2) { opacity: 0; }
.menuknop[aria-expanded="true"] .menustrepen span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (prefers-reduced-motion: reduce) {
  .menustrepen span { transition: none; }
}

/* ---- het paneel ---- */

/* De houder hangt aan de kop en niet aan de knop. Dat is het verschil met de vorige
   ronde, waarin een paneel van 40 rem aan een kop van 60 px hing en bij een venster
   van rond de 750 px buiten beeld viel. */
.menuhouder {
  position: absolute;
  top: calc(100% + 1px);
  left: 0;
  right: 0;
  z-index: 60;
}

.menupaneel {
  background: var(--papier);
  border-top: 1px solid var(--lijn);
  border-bottom: 1px solid var(--lijn);
  box-shadow: 0 8px 24px rgba(27, 31, 29, 0.09);
  padding: var(--ruimte-3) var(--ruimte-5) var(--ruimte-4);
  max-height: min(78vh, 42rem);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.menupaneel[hidden] { display: none; }

.menuniveau1 {
  list-style: none;
  margin: 0;
  padding: 0;
}
.menuniveau1 li { max-width: none; }

.menurij {
  font: inherit;
  display: flex;
  align-items: center;
  gap: var(--ruimte-3);
  width: 100%;
  min-height: 52px;
  padding: var(--ruimte-2) var(--ruimte-2);
  background: none;
  border: none;
  border-left: 3px solid transparent;
  border-radius: 0 var(--radius-klein) var(--radius-klein) 0;
  color: var(--inkt);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.menurij:hover { background: var(--papier-vlak); }
.menurij[aria-expanded="true"] { background: var(--vlak); }
/* Waar je bent: vet én een streepje ervoor, niet alleen een kleur. */
.menurij[aria-current] {
  border-left-color: var(--accent);
  color: var(--structuur);
}
.menurij[aria-current] .menurijlabel { font-weight: 700; }

.menurijtekst {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--ruimte-0);
}
.menurijlabel { font-weight: 700; font-size: var(--tekst-m); line-height: 1.25; }
.menurijbij { font-size: var(--tekst-xs); color: var(--inkt-licht); line-height: 1.35; }

/* Eén teken voor alle drie de richtingen: → gaat ergens heen, › opent een laag,
   ‹ gaat er weer uit. Ze zijn decoratie — het opschrift en aria-expanded zeggen het al. */
.menuteken {
  flex: 0 0 auto;
  font-size: var(--tekst-l);
  line-height: 1;
  color: var(--inkt-licht);
}

/* ---- laag 2: het onderdeel ---- */

.menuvlak { min-width: 0; }
.menuvlak[hidden] { display: none; }

.menuterug {
  font: inherit;
  font-size: var(--tekst-s);
  display: flex;
  align-items: center;
  gap: var(--ruimte-2);
  width: 100%;
  min-height: 44px;
  padding: var(--ruimte-2) var(--ruimte-2);
  margin: 0 0 var(--ruimte-2);
  background: none;
  border: none;
  border-bottom: 1px solid var(--lijn);
  border-radius: 0;
  color: var(--inkt-zacht);
  text-align: left;
  cursor: pointer;
}
.menuterug:hover { color: var(--structuur); }
.menuterugsub { display: none; }

.menuvlakhint {
  margin: 0 0 var(--ruimte-3);
  font-size: var(--tekst-xs);
  color: var(--inkt-licht);
  max-width: 34rem;
}

.menugroepen {
  list-style: none;
  margin: 0;
  padding: 0;
}
.menugroep { max-width: none; margin-bottom: var(--ruimte-2); }
.menugroep:last-child { margin-bottom: 0; }
.menugroepplat { margin: 0; }

.menugroeprij {
  display: flex;
  align-items: stretch;
  gap: var(--ruimte-1);
}

.menugroepkop {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: var(--ruimte-2);
  padding: var(--ruimte-2) var(--ruimte-1);
  color: var(--inkt);
  text-decoration: none;
  font-weight: 700;
  font-size: var(--tekst-s);
}
.menugroepkop:hover { color: var(--structuur); }
.menugroepicoon { flex: 0 0 auto; width: 1.15rem; height: 1.15rem; color: var(--structuur); }
.menugroeplabel { min-width: 0; }
.menutel {
  flex: 0 0 auto;
  font-size: var(--tekst-xs);
  font-weight: 600;
  color: var(--inkt-licht);
}
.menutel::before { content: "· "; }

/* De knop die de derde laag opent. Breed bestaat hij niet: daar staan de onderwerpen
   al open, en een knop die niets doet hoort niet in de tabvolgorde te blijven hangen. */
.menusubknop {
  flex: 0 0 auto;
  width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  border-radius: var(--radius-klein);
  color: var(--inkt-licht);
  cursor: pointer;
}
.menusubknop:hover { color: var(--inkt); background: var(--papier-vlak); }

/* ---- laag 3: de onderwerpen onder één ingang ---- */

.menusub {
  list-style: none;
  margin: 0;
  padding: 0 0 var(--ruimte-1) var(--ruimte-4);
  border-left: 1px solid var(--lijn);
  display: none; /* smal: dicht tot de derde laag open gaat */
}
.menusub li { max-width: none; }
.menusub a {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 44px;
  padding: var(--ruimte-1) var(--ruimte-2) var(--ruimte-1) var(--ruimte-2);
  margin-left: calc(-1 * var(--ruimte-2));
  font-size: var(--tekst-s);
  color: var(--inkt-zacht);
  text-decoration: none;
  border-left: 2px solid transparent;
}
.menusub a:hover { color: var(--structuur); background: var(--papier-vlak); }
.menusub a[aria-current="page"] {
  color: var(--structuur);
  font-weight: 700;
  border-left-color: var(--accent);
}
.menusublabel { line-height: 1.3; }
.menusubbij { font-size: var(--tekst-xs); color: var(--inkt-licht); line-height: 1.3; }

/* Een platte laag (Wat vaak misgaat, Verantwoording) heeft niets om nog een keer onder
   te verdelen: die lijst staat altijd open, ook smal. */
.menusub.menusubplat {
  display: block;
  border-left: none;
  padding-left: 0;
}
.menusubplat a { margin-left: 0; padding-left: var(--ruimte-2); }

/* De ontsnapping, in beide breedtes zichtbaar. */
.menuuitweg {
  margin: var(--ruimte-4) 0 0;
  padding-top: var(--ruimte-2);
  border-top: 1px solid var(--lijn);
  font-size: var(--tekst-s);
  max-width: none;
}
/* Ook deze regel is een raakvlak van 44 px hoog. Een link in lopende tekst is zeventien
   pixels hoog en dat is met een duim niet te raken. */
.menuuitweg a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-right: var(--ruimte-2);
}

/* ---- smal: elke laag vervangt de vorige ---- */

@media (max-width: 51.999rem) {
  .menupaneel.vlakopen .menuniveau1 { display: none; }

  .menuvlak.subactief > .menuterug,
  .menuvlak.subactief > .menuvlakhint { display: none; }
  .menuvlak.subactief .menugroep:not(.subopen) { display: none; }

  .menugroep.subopen > .menuterugsub { display: flex; }
  .menugroep.subopen .menusubknop { display: none; }
  .menugroep.subopen > .menusub { display: block; }
}

/* ---- breed: de eerste kolom blijft staan, de laag klapt ernaast open ---- */

@media (min-width: 52rem) {
  .menuhouder {
    max-width: var(--maxbreed);
    margin: 0 auto;
    padding: 0 var(--ruimte-5);
    height: 0;
  }
  .menupaneel {
    position: absolute;
    top: 0;
    right: 1.25rem;
    width: min(23rem, calc(100vw - 2.5rem));
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    padding: var(--ruimte-4) var(--ruimte-4) var(--ruimte-4);
    border: 1px solid var(--lijn);
    border-radius: var(--radius);
    box-shadow: 0 2px 4px rgba(27, 31, 29, 0.05), 0 8px 24px rgba(27, 31, 29, 0.09);
    max-height: min(84vh, 44rem);
  }
  /* Zodra er een laag naast staat, is er meer breedte nodig — en bij Naslag met zijn
     zevenentwintig onderwerpen meer dan bij de twee platte lagen. Nooit breder dan het
     venster: dat is wat de min() hier bewaakt. */
  .menupaneel.vlakopen { width: min(40rem, calc(100vw - 2.5rem)); }
  .menupaneel.vlakopen.paneelbreed { width: min(58rem, calc(100vw - 2.5rem)); }

  .menuniveau1 { flex: 0 0 15.5rem; width: 15.5rem; }
  .menupaneel.vlakopen .menuvlak {
    flex: 1 1 0;
    min-width: 0;
    margin-left: var(--ruimte-4);
    padding-left: var(--ruimte-4);
    border-left: 1px solid var(--lijn);
  }
  .menuuitweg { flex: 0 0 100%; }

  .menurij { min-height: 0; padding: var(--ruimte-2) var(--ruimte-2); }
  .menuterug { display: none; }

  /* Twee kolommen die zichzelf uitbalanceren in plaats van een raster: met een raster
     hangt onder de kortste ingang een gat zo hoog als het verschil met de langste. */
  .menuvlakbreed .menugroepen { columns: 2; column-gap: var(--ruimte-5); }
  .menuvlakbreed .menugroep {
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    margin-bottom: var(--ruimte-4);
  }
  .menusubknop { display: none; }
  .menusub { display: block; }
  .menusub a { min-height: 0; padding-top: var(--ruimte-0); padding-bottom: var(--ruimte-0); }
  .menugroepkop { min-height: 0; padding: var(--ruimte-1) var(--ruimte-1); }
  .menusubplat a { min-height: 0; padding-top: var(--ruimte-1); padding-bottom: var(--ruimte-1); }
}
/* ------------------------------------------------------------------ inhoud */

main {
  max-width: var(--maxbreed);
  margin: 0 auto;
  padding: var(--ruimte-6) var(--ruimte-5) var(--ruimte-8);
}
/* Op een telefoon is elke pixel breedte leesruimte: een goot van 16 px, niet meer. */
@media (max-width: 34rem) {
  main { padding: var(--ruimte-5) var(--ruimte-4) var(--ruimte-7); }
  .kopbinnen { padding-left: var(--ruimte-4); padding-right: var(--ruimte-4); }
}

/* h1 en h2 dragen het dennengroen, in de schreefletter. Dat is de plek waar de donkere kleur
   zijn werk doet zonder een vlak te hoeven vullen: de koppen zetten de kolom neer en de lopende
   tekst blijft inkt. h3 en lager staan in de gewone letter en blijven inkt — anders wordt de
   hele pagina groen en briefpapier tegelijk. */
h1 {
  font-family: var(--font-kop);
  color: var(--structuur);
  font-size: var(--tekst-2xl);
  line-height: 1.15;
  letter-spacing: -0.012em;
  font-weight: 700;
  margin: 0 0 var(--ruimte-3);
  text-wrap: balance;
}
h2 {
  font-family: var(--font-kop);
  color: var(--structuur);
  font-size: var(--tekst-xl);
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: -0.005em;
  margin: var(--ruimte-6) 0 var(--ruimte-2);
  text-wrap: balance;
}
h3 {
  font-size: var(--tekst-l);
  line-height: 1.35;
  font-weight: 700;
  margin: var(--ruimte-5) 0 var(--ruimte-2);
}
h4 {
  font-size: var(--tekst-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--inkt-licht);
  margin: 0 0 var(--ruimte-1);
}

p { max-width: var(--leesbreed); }
li { max-width: var(--leesbreed); }
td p, th p, .tabelwrap p { max-width: none; }

.lead {
  font-size: var(--tekst-l);
  color: var(--inkt-zacht);
  max-width: var(--leesbreed);
}
.heronder { font-size: var(--tekst-s); color: var(--inkt-licht); }
/* Het kruimelpad: waar ben ik, zonder het menu open te hoeven doen. Een echte lijst, zodat
   een schermlezer de diepte hoort, en de laatste stap draagt aria-current="page". */
.kruimel { font-size: var(--tekst-s); color: var(--inkt-licht); margin: 0 0 var(--ruimte-3); }
.kruimel ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 var(--ruimte-0);
}
.kruimel li { max-width: none; }
.kruimel li + li::before {
  content: "›";
  padding: 0 var(--ruimte-2);
  color: var(--inkt-licht);
}
.kruimel [aria-current="page"] { color: var(--inkt-zacht); }

/* De paginakop is gewoon tekst op het papier: geen kader om een titel heen. */
.hero,
.paginakop {
  background: none;
  border: none;
  padding: 0;
  margin-bottom: var(--ruimte-6);
}

.blok { margin-bottom: var(--ruimte-6); }
.blokintro { color: var(--inkt-zacht); max-width: var(--leesbreed); }

.uitleg {
  background: var(--papier);
  border: 1px solid var(--kaart-rand);
  border-radius: var(--radius);
  box-shadow: var(--schaduw);
  padding: var(--kaart-binnen);
}
.uitleg h2:first-child { margin-top: 0; }

.tweekolom {
  display: grid;
  gap: var(--ruimte-5);
  grid-template-columns: 1fr;
}
@media (min-width: 46rem) {
  .tweekolom { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

/* ---------------------------------------------------------------- ingangen */

.ingangen {
  display: grid;
  gap: var(--ruimte-4);
  grid-template-columns: 1fr;
}
@media (min-width: 40rem) {
  .ingangen { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

.ingang {
  display: block;
  background: var(--papier);
  border: 1px solid var(--kaart-rand);
  border-radius: var(--radius);
  box-shadow: var(--schaduw);
  padding: var(--ruimte-5) var(--ruimte-5);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.ingang:hover {
  border-color: var(--accent);
  box-shadow: 0 2px 8px rgba(27, 31, 29, 0.1);
  color: inherit;
}
.ingang h3 { margin: var(--ruimte-2) 0 var(--ruimte-1); font-size: var(--tekst-l); color: var(--structuur); }
.ingang:hover h3 { color: var(--accent-diep); text-decoration: underline; text-underline-offset: 0.18em; }
.ingang p { margin: 0; font-size: var(--tekst-s); color: var(--inkt-zacht); }
/* Het pictogram van een ingang: dennengroen in een salierondje. */
.ingangicoon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--vlak);
  color: var(--structuur);
}
.ingangicoon .icoon { width: 1.35rem; height: 1.35rem; }
.ingangtel {
  margin-top: var(--ruimte-2) !important;
  font-size: var(--tekst-xs) !important;
  color: var(--inkt-licht) !important;
}

/* ---------------------------------------------------------------- werkbalk */

.werkbalk {
  background: var(--papier);
  border: 1px solid var(--lijn);
  border-radius: var(--radius);
  box-shadow: var(--schaduw);
  padding: var(--ruimte-4) var(--ruimte-4);
  margin-bottom: var(--ruimte-6);
  position: sticky;
  top: 0;
  z-index: 5;
}
.zoek { margin-bottom: var(--ruimte-3); }
.zoek label {
  display: block;
  font-size: var(--tekst-xs);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-weight: 700;
  color: var(--inkt-licht);
  margin-bottom: var(--ruimte-1);
}
.zoek input {
  width: 100%;
  font: inherit;
  padding: var(--ruimte-2) var(--ruimte-3);
  border: 1px solid var(--lijn-sterk);
  border-radius: var(--radius-klein);
  background: var(--papier);
  color: inherit;
}

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ruimte-2);
  align-items: center;
  margin-bottom: var(--ruimte-2);
}
.filterlabel {
  font-size: var(--tekst-xs);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-weight: 700;
  color: var(--inkt-licht);
  margin-right: var(--ruimte-1);
}
/* Een filterknop is een pil: dennengroene tekst met een rand, 44 px hoog. Aan is een salievlak
   met een dikkere rand én een vinkje — de stand staat dus ook in de vorm, niet alleen in kleur. */
.chip {
  font: inherit;
  font-size: var(--tekst-s);
  min-height: 44px;
  padding: var(--ruimte-1) var(--ruimte-4);
  border: 1px solid var(--veldrand);
  background: var(--papier);
  color: var(--structuur);
  border-radius: 999px;
  cursor: pointer;
}
.chip:hover { border-color: var(--structuur); background: var(--vlak-zacht); }
.chip.aan {
  background: var(--vlak);
  border-color: var(--structuur);
  box-shadow: inset 0 0 0 1px var(--structuur);
  color: var(--structuur);
  font-weight: 700;
}
.chip.aan::before { content: "\2713\00a0"; }

.filteracties {
  display: flex;
  gap: var(--ruimte-2);
  align-items: center;
  flex-wrap: wrap;
  margin-top: var(--ruimte-3);
  padding-top: var(--ruimte-3);
  border-top: 1px solid var(--lijn);
}
.treffers { font-size: var(--tekst-xs); color: var(--inkt-licht); margin-left: auto; }

/* Op een telefoon neemt een plakkende werkbalk te veel van het scherm; daar scrollt hij mee. */
@media (max-width: 46rem) {
  .werkbalk { position: static; }
}

/* Een plakkende balk moet zichzelf compenseren, anders landt elke ankerlink eronder.
   De balk is 348 px hoog op een laptop — 39% van het venster — en `.catsectie` had daar
   20 px scroll-margin tegenover staan. Gevolg: elke "Lees de volledige uitleg →" uit de
   rekentool en elk van de 27 submenulinks landde onder de balk, op een plek zonder titel.

   De hoogte hangt af van hoeveel de filterknoppen wrappen, dus die kan de stylesheet niet
   kennen: `initWerkbalkhoogte()` in app.js meet hem en zet `--werkbalkhoogte`. De
   terugvalwaarde hier is ruim genoeg om ook zonder javascript boven de kop uit te komen;
   de kop van een categorie of kaart komt dan hooguit iets te laag te staan, nooit te hoog.
   Alleen binnen deze mediaquery, want daaronder plakt de balk niet. */
@media (min-width: 46rem) {
  html:has(.werkbalk) { scroll-padding-top: calc(var(--werkbalkhoogte, 22rem) + 1rem); }
}

/* Twee knoppen, en niet meer. De gevulde oranje knop is de volgende stap; de omlijnde is
   alles daarnaast. Beide zijn een raakvlak van minstens 44 px hoog, zonder dat een pagina
   daar apart om hoeft te vragen. */
.knop,
.knopklein {
  font: inherit;
  cursor: pointer;
  border-radius: var(--radius-klein);
  border: 1px solid var(--knop-achter);
  background: var(--knop-achter);
  color: var(--knop-tekst);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ruimte-2);
  line-height: 1.25;
  text-align: center;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}
.knop {
  min-height: var(--knop-hoogte);
  padding: var(--ruimte-2) var(--ruimte-5);
  font-weight: 700;
  box-shadow: var(--schaduw);
}
.knop:hover { background: var(--knop-achter-zweef); border-color: var(--knop-achter-zweef); color: var(--knop-tekst); }
.knop:active { transform: translateY(1px); }
.knopklein {
  min-height: var(--knopklein-hoogte);
  padding: var(--ruimte-2) var(--ruimte-4);
  font-size: var(--tekst-s);
  font-weight: 600;
  background: var(--papier);
  color: var(--structuur);
  border-color: var(--veldrand);
}
.knopklein:hover { border-color: var(--structuur); background: var(--vlak-zacht); color: var(--structuur); }
.knopklein:disabled { opacity: 0.5; cursor: default; }
.knopklein:disabled:hover { border-color: var(--veldrand); background: var(--papier); color: var(--structuur); }

/* -------------------------------------------------------------- categorieën */

/* Het submenu linkt rechtstreeks naar een categorie; dan hoort de kop niet tegen de
   bovenrand van het venster te plakken. */
.catsectie { margin-bottom: var(--ruimte-4); scroll-margin-top: 1.25rem; }
.catvouw > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: var(--ruimte-2);
  border-bottom: 1px solid var(--lijn-sterk);
  padding: var(--ruimte-2) var(--ruimte-1) var(--ruimte-2);
  min-height: 48px;
}
.catvouw > summary::-webkit-details-marker { display: none; }
.catvouw > summary::before {
  content: "\203A";
  color: var(--accent);
  font-weight: 700;
  font-size: var(--tekst-xl);
  line-height: 1;
  transition: transform 0.12s;
  display: inline-block;
}
.catvouw[open] > summary::before { transform: rotate(90deg); }
.catvouw > summary:hover { background: var(--vlak-zacht); }
.catsectie h2 {
  font-size: var(--tekst-l);
  margin: 0;
  flex: 1 1 auto;
}
.catbody { padding-top: var(--ruimte-4); }
.cattel {
  font-size: var(--tekst-xs);
  font-weight: 600;
  color: var(--inkt-licht);
  vertical-align: middle;
}
.cattel::before { content: "· "; }

/* ------------------------------------------------------------------ kaarten */

.kaart {
  background: var(--papier);
  border: 1px solid var(--kaart-rand);
  border-radius: var(--radius);
  box-shadow: var(--schaduw);
  margin-bottom: var(--ruimte-2);
  scroll-margin-top: 1rem;
}
.kaart[hidden] { display: none; }

.kaart summary {
  cursor: pointer;
  min-height: 52px;
  padding: var(--ruimte-3) var(--ruimte-4);
  display: flex;
  flex-wrap: wrap;
  gap: var(--ruimte-2) var(--ruimte-3);
  align-items: baseline;
  list-style: none;
  border-radius: var(--radius);
}
.kaart summary::-webkit-details-marker { display: none; }
.kaart summary::before {
  content: "\203A"; /* › */
  color: var(--accent);
  font-weight: 700;
  font-size: var(--tekst-l);
  line-height: 1;
  margin-right: var(--ruimte-0);
  transition: transform 0.12s;
  display: inline-block;
}
.kaart details[open] > summary::before { transform: rotate(90deg); }
.kaart summary:hover { background: var(--vlak-zacht); }
.kaart details[open] > summary { border-radius: var(--radius) var(--radius) 0 0; }

/* De titel van een kaart is sinds september 2026 een h3 en geen span meer — bevinding 17.
   Hij hoort er precies zo uit te zien als daarvoor: een kop mag een kop zijn zonder ook een
   kopformaat te dragen. Zonder deze reset groeit elke van de 208 kaartregels met de
   standaardmarges van een h3 mee en wordt de pagina anderhalf scherm langer. */
h3.kaarttitel {
  font-weight: 700;
  font-size: var(--tekst-m);
  line-height: 1.35;
  margin: 0;
  flex: 1 1 18rem;
  color: inherit;
}
.badges { display: flex; gap: var(--ruimte-2); flex-wrap: wrap; }

/* Eén neutrale pil voor alles. Wat de badge betekent staat er in woorden in;
   kleur voegde alleen drukte toe. */
.badge {
  font-size: var(--tekst-xs);
  padding: var(--ruimte-0) var(--ruimte-2);
  border-radius: 999px;
  border: 1px solid var(--lijn);
  color: var(--inkt-zacht);
  background: var(--papier-zacht);
  white-space: nowrap;
}
.badge.bek-weinig,
.badge.soort-nietfiscaal,
.badge.waarschuwing { font-weight: 600; color: var(--inkt); }
/* De soortbadge krijgt GEEN eigen kleur. Hij past in geen van de vier banen uit het palet —
   hij is geen grondvlak, geen structuur, geen vlak en niets om aan te klikken — en dan is de
   regel dat er geen kleur bij komt. Hij onderscheidt zich van de neutrale "wanneer"-pil met
   gewicht en met een vollere tekstkleur; de betekenis staat er sowieso in woorden in, en de
   alinea onder de kaart herhaalt hem voluit. */
.badge.waarschuwing::before {
  content: "! ";
  font-weight: 700;
}

.kaartbody { padding: var(--ruimte-1) var(--ruimte-4) var(--ruimte-4); }
.veld { margin-bottom: var(--ruimte-4); }
.veld p { margin: 0; }

/* "In het kort" — de eerste regels van elke naslagkaart, in gewone taal. Het onderscheid met
   de precieze uitleg eronder draagt op drie dingen en op geen nieuwe kleur: de tekst staat een
   trede groter (de maat van een lead), het opschrift in dennengroen met een eigen teken, en
   een lijn scheidt de samenvatting van het vakwerk. Geen vlak: salie is binnen een kaart al
   het uitwerkingsvlak, en een tweede gevuld vlak zou het ene gevulde vlak zijn betekenis
   ontnemen. Geen hairline links: dat is de vorm van een noot (voorbehoud, aanname), en dit is
   geen kanttekening maar de hoofdzaak. */
.kort {
  position: relative;
  margin: 0 0 var(--ruimte-4);
  padding: var(--ruimte-2) 0 var(--ruimte-4);
}
.kort::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  border-bottom: 1px solid var(--vlak-lijn);
  transform-origin: left center;
}
.kort > h4 {
  display: flex;
  align-items: center;
  gap: var(--ruimte-2);
  color: var(--structuur);
}
/* Het teken: een streep met een punt erachter — "dit is de samenvatting". Monochroom, in de
   tekstkleur van het opschrift, en nooit de enige drager: het opschrift zegt het ook. */
.kort > h4::before {
  content: "";
  flex: 0 0 auto;
  width: 1.25em;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
}
.kort > p {
  margin: 0;
  font-size: var(--tekst-l);
  line-height: 1.5;
  color: var(--inkt);
}
/* Bij het openklappen schuift de samenvatting even in en trekt de lijn eronder zich. Alleen
   een verschuiving en een lijn: de tekst zelf staat er altijd, ook zonder beweging. */
@keyframes kortin { from { transform: translate3d(0, 6px, 0); } }
@keyframes kortlijn { from { transform: scaleX(0.15); } }
.beweegt .kaart details[open] > .kaartbody > .kort { animation: kortin 0.45s var(--uit) both; }
.beweegt .kaart details[open] > .kaartbody > .kort::after { animation: kortlijn 0.7s var(--uit) 0.1s both; }

.bron {
  margin: var(--ruimte-4) 0 0;
  padding-top: var(--ruimte-3);
  border-top: 1px solid var(--lijn);
  font-size: var(--tekst-s);
}
.bron ul { margin: 0; padding-left: var(--ruimte-4); }
.bron li { margin-bottom: var(--ruimte-0); }

/* ------------------------------------------------- de compacte werkbalk */
/* De balk plakt op een laptop bovenaan. Zij was 348 px hoog — 39% van het venster — en op
   een telefoon 854 px: een heel scherm filters vóór de eerste regeling. De categorieën zijn
   daarom naar het overzicht erboven verhuisd en de overige filters staan in een `<details>`.
   Wat overblijft is wat je hier het vaakst komt doen: zoeken. */
.zoekrij { display: flex; align-items: flex-end; gap: var(--ruimte-3); flex-wrap: wrap; }
.zoekrij .zoek { flex: 1 1 16rem; margin-bottom: 0; }
.zoekrij .treffers { margin-left: 0; padding-bottom: var(--ruimte-2); white-space: nowrap; }

.filterdetails { margin-top: var(--ruimte-3); border-top: 1px solid var(--lijn); padding-top: var(--ruimte-2); }
.filterdetails > summary {
  cursor: pointer;
  list-style: none;
  font-size: var(--tekst-s);
  font-weight: 700;
  color: var(--accent);
  display: flex;
  align-items: center;
  gap: var(--ruimte-2);
  min-height: 44px;
}
.filterdetails > summary::-webkit-details-marker { display: none; }
.filterdetails > summary::before {
  content: "\203A";
  font-size: var(--tekst-l);
  line-height: 1;
  display: inline-block;
  transition: transform 0.12s;
}
.filterdetails[open] > summary::before { transform: rotate(90deg); }
.filterbody { padding-top: var(--ruimte-2); }
.filterbody .filteracties { margin-top: var(--ruimte-2); padding-top: var(--ruimte-2); }

/* ------------------------------------------------- overzicht bovenaan */
/* "Op deze pagina": een rij pillen met een aantal erachter. Geen eigen kleurvlak — het is
   een lijst met links, en links zijn accent. Hij staat op elke naslagpagina op dezelfde
   plek: onder de inleiding, boven het zoeken. */

.paginaindex {
  margin: 0 0 var(--ruimte-4);
  padding: var(--ruimte-4) var(--ruimte-4);
  background: var(--papier);
  border: 1px solid var(--kaart-rand);
  border-radius: var(--radius);
}
.ixkop {
  font-family: var(--font-tekst);
  font-size: var(--tekst-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  color: var(--inkt-licht);
  margin: 0 0 var(--ruimte-2);
}
.ixlijst {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--ruimte-2) var(--ruimte-2);
}
.ixlijst li { display: flex; }
.ixlijst a {
  display: inline-flex;
  align-items: center;
  gap: var(--ruimte-2);
  font-size: var(--tekst-s);
  font-weight: 600;
  padding: var(--ruimte-1) var(--ruimte-4);
  border: 1px solid var(--veldrand);
  border-radius: 999px;
  color: var(--structuur);
  text-decoration: none;
  min-height: 44px;
}
.ixlijst a:hover { border-color: var(--structuur); background: var(--vlak-zacht); color: var(--structuur); }
.ixlijst a.aan {
  background: var(--vlak);
  border-color: var(--structuur);
  box-shadow: inset 0 0 0 1px var(--structuur);
  color: var(--structuur);
  font-weight: 700;
}
.ixlijst a.aan .ixtel { color: var(--structuur); }
.ixtel, .chiptel {
  font-size: var(--tekst-xs);
  font-weight: 600;
  color: var(--inkt-licht);
  margin-left: var(--ruimte-2);
}
.chip.aan .chiptel { color: var(--structuur); }

/* Het voorbehoud bij de bedragen: één keer per pagina, in plaats van in elke kaart. */
.paginavoorbehoud {
  margin: 0 0 var(--ruimte-5);
  font-size: var(--tekst-s);
  color: var(--inkt-licht);
  border-top: none;
  border-left: var(--noot-rand);
  padding: var(--ruimte-0) 0 var(--ruimte-0) var(--ruimte-4);
}

/* Wat de drie routes betekenen — één keer onder de filters, in woorden, in plaats van 208
   tooltips die op een telefoon voor niemand te zien waren. */
.routeuitleg {
  list-style: none;
  margin: var(--ruimte-3) 0 0;
  padding: var(--ruimte-2) 0 0;
  border-top: 1px solid var(--lijn);
  font-size: var(--tekst-xs);
  color: var(--inkt-licht);
}
.routeuitleg li { margin-bottom: var(--ruimte-1); max-width: none; }
.routeuitleg strong { color: var(--inkt-zacht); }
.routemeer { margin: var(--ruimte-2) 0 0; font-size: var(--tekst-xs); }

/* --------------------------------------------------- zoeken over de grens */
/* Het zoeken hield op bij de paginagrens en een mislukte zoekopdracht zei niets terug —
   bevinding 14. Deze twee vlakken zijn wat er nu wél verschijnt. */

.geentreffers,
.elderstreffers {
  background: var(--papier);
  border: 1px solid var(--lijn);
  border-radius: var(--radius);
  padding: var(--ruimte-4) var(--ruimte-4);
  margin-bottom: var(--ruimte-4);
}
.geentreffers p { margin: 0 0 var(--ruimte-2); }
.geentreffers p:last-child { margin-bottom: 0; }
.geenacties { font-size: var(--tekst-s); }
.elderskop {
  font-size: var(--tekst-m);
  font-weight: 700;
  margin: 0 0 var(--ruimte-2);
  color: var(--structuur);
}
.eldersrijen { list-style: none; margin: 0; padding: 0; }
.eldersrijen li {
  padding: var(--ruimte-1) 0;
  border-bottom: 1px solid var(--lijn);
}
.eldersrijen li:last-child { border-bottom: none; }
.eldersbij { font-size: var(--tekst-xs); color: var(--inkt-licht); }
.eldersmeer { margin: var(--ruimte-2) 0 0; font-size: var(--tekst-s); color: var(--inkt-licht); }

/* Het zoekveld op de vier pagina's zonder kaarten. */
.naslagzoek {
  background: var(--papier);
  border: 1px solid var(--lijn);
  border-radius: var(--radius);
  padding: var(--ruimte-4) var(--ruimte-4);
  margin-bottom: var(--ruimte-5);
}
.naslagzoek label {
  display: block;
  font-size: var(--tekst-xs);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-weight: 700;
  color: var(--inkt-licht);
  margin-bottom: var(--ruimte-1);
}
.naslagzoek input {
  width: 100%;
  font: inherit;
  padding: var(--ruimte-2) var(--ruimte-3);
  border: 1px solid var(--lijn-sterk);
  border-radius: var(--radius-klein);
  background: var(--papier);
  color: inherit;
}
.naslagzoekbij { margin: var(--ruimte-2) 0 0; font-size: var(--tekst-xs); color: var(--inkt-licht); }
.naslaguitkomst { margin-top: var(--ruimte-3); border-top: 1px solid var(--lijn); padding-top: var(--ruimte-3); }

/* Het zoeken en filteren is het enige op deze pagina's dat javascript nodig heeft. De
   inhoud staat er zonder javascript onverkort, dus dit is een noot en geen vangnet — maar
   een knop die niets doet hoort te zeggen dat hij niets doet. */
.geenjszoek {
  margin: var(--ruimte-3) 0 0;
  padding-top: var(--ruimte-2);
  border-top: 1px solid var(--lijn);
  font-size: var(--tekst-s);
  color: var(--inkt-zacht);
}

/* --------------------------------------------------- inklapbare diepgang */
/* Op de pagina's zonder kaarten staat de waarschuwing of de kop altijd open en gaan de
   cijfers, de tabellen en de bronlijsten eronder in een `<details>`. De inhoud staat
   onverkort in de pagina — een zoekmachine ziet hem, en zonder javascript werkt het ook,
   want `<details>` is html en geen script. */
.diep { margin-top: var(--ruimte-2); }
.diep > summary {
  cursor: pointer;
  list-style: none;
  font-size: var(--tekst-m);
  font-weight: 700;
  color: var(--accent);
  padding: var(--ruimte-2) 0;
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: var(--ruimte-2);
}
.diep > summary::-webkit-details-marker { display: none; }
.diep > summary::before {
  content: "\203A";
  font-size: var(--tekst-l);
  line-height: 1;
  transition: transform 0.12s;
  display: inline-block;
}
.diep[open] > summary::before { transform: rotate(90deg); }
.diep > summary:hover { color: var(--accent-diep); text-decoration: underline; text-underline-offset: 0.18em; }
.diepbody { margin-top: var(--ruimte-1); }

/* ------------------------------------------------------- de uitwerking */
/* Het enige gekleurde vlak in de inhoud: de bedragen, de strategie en de aandachtspunten
   van een regeling, afgezet tegen het witte "wat het is / voor wie" erboven.

   De rand staat er niet voor de sier: kleur mag nergens de enige drager van betekenis zijn,
   en zonder rand verdwijnt dit vlak zodra iemand met een eigen kleurinstelling of in
   zwart-wit kijkt. De opschriften binnenin ("Bedragen en cijfers 2026", "Strategie en
   stappen") dragen de betekenis in woorden. */
.uitwerking {
  margin-top: var(--ruimte-4);
  background: var(--vlak-zacht);
  border: 1px solid var(--vlak-lijn);
  border-radius: var(--radius-klein);
  padding: var(--ruimte-4) var(--ruimte-4);
}

.pblok { margin: var(--ruimte-4) 0; }
.pblok h4 { color: var(--structuur); }
.pblok ul { margin: 0; padding-left: var(--ruimte-4); }
.pblok li { margin-bottom: var(--ruimte-2); }
.p-letop,
.p-conflict {
  border-left-color: rgba(20, 58, 44, 0.3);
  color: var(--inkt-zacht);
  margin: var(--ruimte-4) 0;
}
.p-letop > h4,
.p-conflict > h4 { color: var(--structuur); }
.p-conflict p { margin: 0 0 var(--ruimte-2); font-size: var(--tekst-s); }
.p-conflict p:last-child { margin-bottom: 0; }

.pdisclaimer {
  margin: var(--ruimte-4) 0 0;
  padding-top: var(--ruimte-3);
  border-top: 1px solid rgba(20, 58, 44, 0.18);
  font-size: var(--tekst-xs);
  color: var(--inkt-zacht);
}

/* ------------------------------------------------------------------ tabellen */

.tabelwrap {
  overflow-x: auto;
  margin: var(--ruimte-4) 0;
  border: 1px solid var(--lijn);
  border-radius: var(--radius);
  background: var(--papier);
}
table {
  border-collapse: collapse;
  width: 100%;
  font-size: var(--tekst-s);
  min-width: 26rem;
  font-variant-numeric: tabular-nums;
}
th, td {
  text-align: left;
  padding: var(--ruimte-2) var(--ruimte-4);
  border-bottom: 1px solid var(--lijn);
  vertical-align: top;
}
/* De kopregel van een tabel is het meest voorkomende saliekleurige vlak van de site. Kleur
   draagt hier niets alleen: het zijn <th>'s, ze staan in kapitalen, en ze staan bovenaan. */
thead th {
  background: var(--vlak);
  font-size: var(--tekst-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 700;
  color: var(--structuur);
  white-space: nowrap;
}
tbody th { font-weight: 600; }
/* Een tabel van twee kolommen (een post en een bedrag) past op een telefoon gewoon: daar
   breekt de linkerkolom af en blijft het bedrag in beeld, in plaats van dat het bedrag — het
   getal waar het om gaat — achter de rechterrand van het schuifvak verdwijnt. Brede tabellen
   houden hun minimumbreedte en schuiven in hun eigen vak. */
@media (max-width: 34rem) {
  table:not(:has(:is(th, td):nth-child(3))) { min-width: 0; }
}
tbody tr:last-child th,
tbody tr:last-child td { border-bottom: none; }

/* ------------------------------------------------------------------ updates

   De updates-pagina volgt de bestaande taal: één accent, geen nieuwe kleurfamilie.
   De stand van vandaag is geen gekleurd vlak maar een grote, rustige zin — dat is het
   vertrouwenssignaal. Gaat er iets mis, dan draagt het woord dat, niet een kleur:
   de zin krijgt het gedeelde noot-patroon (hairline links) en zegt zelf wat er is.
   ------------------------------------------------------------------------- */

.updatekern { margin-bottom: var(--ruimte-7); }

.updatestand {
  font-size: var(--tekst-xl);
  line-height: 1.45;
  font-weight: 600;
  color: var(--inkt);
  max-width: var(--leesbreed);
  margin: 0 0 var(--ruimte-2);
}
.updatestand--let-op,
.updatestand--onbekend {
  border-left: var(--noot-rand);
  padding-left: var(--ruimte-4);
}

.updatevolgende {
  font-size: var(--tekst-s);
  color: var(--inkt-licht);
  max-width: var(--leesbreed);
  margin: 0 0 var(--ruimte-4);
}

.updatelijst { display: grid; gap: 0; }

/* Eén hairline tussen de regels; geen kaart per wijziging. Een lijst met datums leest
   beter als hij aaneengesloten is dan als losse dozen. */
.updateregel {
  padding: var(--ruimte-4) 0;
  border-top: 1px solid var(--lijn);
  max-width: calc(var(--leesbreed) + 4rem);
}
.updateregel:first-child { border-top: none; padding-top: var(--ruimte-1); }

.updatedatum {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--ruimte-2);
  margin: 0 0 var(--ruimte-0);
  font-size: var(--tekst-xs);
  color: var(--inkt-licht);
}
.updatedatum time { font-variant-numeric: tabular-nums; }
.updatesoort {
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-weight: 700;
  font-size: var(--tekst-xs);
  color: var(--inkt-licht);
}
.updateregel h3 { font-size: var(--tekst-m); margin: 0 0 var(--ruimte-2); }
.updateregel h3 code { font-weight: 400; font-size: var(--tekst-xs); }
.updateregel p { margin: 0 0 var(--ruimte-2); }
.updateregel p:last-child { margin-bottom: 0; }

/* Was → werd. Het bedrag draagt de betekenis, de pijl alleen de richting. */
.updateverschil {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--ruimte-2);
  font-variant-numeric: tabular-nums;
  margin: 0 0 var(--ruimte-2);
}
.updatewas { color: var(--inkt-licht); text-decoration: line-through; }
.updatepijl { color: var(--inkt-licht); }
.updatewerd { font-weight: 700; color: var(--inkt); }
.updatebron { font-size: var(--tekst-s); }

/* Het overzicht per bron. */
.bronstandtabel { min-width: 30rem; }
.bronstandtabel th[scope='row'] { font-weight: 600; }
.bronwaarvoor {
  display: block;
  font-weight: 400;
  font-size: var(--tekst-xs);
  color: var(--inkt-licht);
  margin-top: var(--ruimte-0);
}
/* De stand is een woord, geen stip: hij is leesbaar zonder kleur. */
.bronstatus { white-space: nowrap; }
.bronstatus--gewijzigd,
.bronstatus--onbereikbaar,
.bronstatus--handmatig-verlopen,
.bronstatus--handmatig-bereikbaar { font-weight: 700; color: var(--inkt); }
.bronstatus--gewijzigd::before,
.bronstatus--onbereikbaar::before,
.bronstatus--handmatig-verlopen::before,
.bronstatus--handmatig-bereikbaar::before { content: "! "; }
/* De drie handmatige standen zijn hele zinsdelen ("met de hand nagekeken"). Die mogen
   afbreken, anders duwen ze de tabel breder dan het scherm. */
.bronstatus--handmatig,
.bronstatus--handmatig-verlopen,
.bronstatus--handmatig-bereikbaar { white-space: normal; }

@media (max-width: 34rem) {
  .updatestand { font-size: var(--tekst-l); }

  /* Net als de ranglijst is dit op een telefoon geen tabel meer maar een lijst.
     Drie kolommen naast elkaar knijpen de bronnaam anders tot één letter per regel. */
  .tabelwrap:has(table.bronstandtabel) {
    overflow-x: visible;
    border: none;
    background: none;
    border-radius: 0;
  }
  table.bronstandtabel { min-width: 0; display: block; font-size: var(--tekst-s); }
  table.bronstandtabel thead { display: none; }
  table.bronstandtabel tbody { display: block; }
  table.bronstandtabel tr {
    display: block;
    background: var(--papier);
    border: 1px solid var(--lijn);
    border-radius: var(--radius);
    box-shadow: var(--schaduw);
    padding: var(--ruimte-4) var(--ruimte-4);
    margin-bottom: var(--ruimte-2);
  }
  table.bronstandtabel th,
  table.bronstandtabel td {
    display: block;
    border: none;
    padding: 0;
    text-align: left;
    white-space: normal;
  }
  table.bronstandtabel th[scope='row'] { font-size: var(--tekst-m); margin-bottom: var(--ruimte-2); }
  table.bronstandtabel td[data-kop] { margin-top: var(--ruimte-2); }
  table.bronstandtabel td[data-kop]::before {
    content: attr(data-kop);
    display: block;
    font-size: var(--tekst-xs);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    font-weight: 700;
    color: var(--inkt-licht);
  }
}

/* ----------------------------------------------------------- lijstpagina's */

.lijst { display: grid; gap: var(--ruimte-3); }
.lijstkaart {
  background: var(--papier);
  border: 1px solid var(--lijn);
  border-radius: var(--radius);
  box-shadow: var(--schaduw);
  padding: var(--ruimte-4) var(--ruimte-5);
}
.p-lijst .lijstkaart h3 { margin-top: 0; }
.lijstkaart .kern { font-weight: 600; margin: 0 0 var(--ruimte-2); }
.lijstmeta { font-size: var(--tekst-s); color: var(--inkt-licht); margin-bottom: 0; }

p.waarschuwing { font-size: var(--tekst-m); }

.drempelblok,
.zbsectie,
.viasectie,
.bronsectie {
  background: var(--papier);
  border: 1px solid var(--lijn);
  border-radius: var(--radius);
  box-shadow: var(--schaduw);
  padding: var(--ruimte-5) var(--ruimte-5);
  margin-bottom: var(--ruimte-4);
}
.drempelblok h2,
.zbsectie h2,
.viasectie h2,
.bronsectie h2 { margin-top: 0; }

/* Vijftig regelingen met elk een zin eronder maken één kolom eindeloos: deze pagina mat
   15,6 schermhoogtes op een telefoon. Op een breed scherm staan ze daarom in twee kolommen
   naast elkaar. `break-inside: avoid` houdt een regeling met haar zin bij elkaar, zodat er
   geen titel onderaan de ene kolom staat met de uitleg bovenaan de andere. */
.zblijst { list-style: none; padding: 0; margin: 0; }
.zblijst li {
  padding: var(--ruimte-2) 0;
  border-bottom: 1px solid var(--lijn);
  max-width: none;
  break-inside: avoid;
}
.zblijst li:last-child { border-bottom: none; }
@media (min-width: 58rem) {
  .zblijst { columns: 2; column-gap: var(--ruimte-6); }
}
.zbcat {
  font-size: var(--tekst-xs);
  white-space: nowrap;
  color: var(--inkt-licht);
  border: 1px solid var(--lijn);
  background: var(--papier-vlak);
  border-radius: 999px;
  padding: var(--ruimte-0) var(--ruimte-2);
}
.zbwat { font-size: var(--tekst-s); color: var(--inkt-zacht); }

.vialijst { columns: 1; margin: var(--ruimte-2) 0 0; padding-left: var(--ruimte-4); }
@media (min-width: 46rem) { .vialijst { columns: 2; column-gap: var(--ruimte-6); } }
.vialijst li { break-inside: avoid; margin-bottom: var(--ruimte-0); }

.onzekerheden { margin: var(--ruimte-2) 0 0; }
.onzekerheden dt { font-weight: 700; margin-top: var(--ruimte-4); }
.onzekerheden dd { margin: var(--ruimte-0) 0 0; color: var(--inkt-zacht); font-size: var(--tekst-s); max-width: var(--leesbreed); }

/* De afzendergegevens op over.html — label links, waarde rechts.
   Dit blok was tot de lancering van 17 september 2026 altijd LEEG (alle velden op null) en
   had daardoor nog nooit opmaak nodig gehad; op de standaard-<dl> van de browser stond het
   label op een eigen regel met de waarde eronder ingesprongen, en dan leest het paar niet
   meer als één gegeven. Een raster koppelt ze; onder 34 rem stapelt het, want daar past
   “Btw-identificatienummer” niet naast een waarde. `max-content` en de `minmax(0, …)`
   ernaast houden de labelkolom precies zo breed als het langste label en laten een lang
   e-mailadres afbreken in plaats van de kolom uit te rekken. */
.afzenderlijst {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: var(--ruimte-2) var(--ruimte-4);
  margin: var(--ruimte-2) 0 0;
  max-width: var(--leesbreed);
}
.afzenderlijst dt { font-weight: 700; color: var(--inkt-zacht); }
.afzenderlijst dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 34rem) {
  .afzenderlijst { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .afzenderlijst dt { margin-top: var(--ruimte-3); }
  .afzenderlijst dt:first-child { margin-top: 0; }
  .afzenderlijst dd { margin: var(--ruimte-0) 0 0; }
}

.statusbadge {
  display: inline-block;
  font-size: var(--tekst-xs);
  background: var(--papier-vlak);
  border: 1px solid var(--lijn);
  color: var(--inkt-zacht);
  border-radius: 999px;
  padding: var(--ruimte-0) var(--ruimte-2);
}

/* De bronnen per voorstel in het blok Belastingplan 2027: één regel onder de tekst, in dezelfde cel. */
.bronnenkort { margin: var(--ruimte-2) 0 0; font-size: var(--tekst-s); color: var(--inkt-zacht); }


/* ------------------------------------------------------------------- voet */

/* De voet is het grote dennengroene vlak van de site, en daarmee de plek waar de donkere
   kleur echt draagt in plaats van alleen koppen te kleuren. Bewust de voet en niet de kop:
   een donkere balk bovenaan met dit onderwerp erin leest als een overheidssite, en de
   regel "geen officiële site van de Belastingdienst" staat juist daar. Boven blijft alles
   dus wit en tekstueel. De voet valt in de afdruk helemaal weg. */
.voet {
  background: var(--structuur);
  color: var(--op-diep-zacht);
  padding: var(--ruimte-6) var(--ruimte-5) var(--ruimte-7);
}
.voet a { color: var(--op-diep); }
.voet a:hover { color: var(--op-diep); }
.voet > * {
  max-width: var(--maxbreed);
  margin-left: auto;
  margin-right: auto;
}
.voetlet { font-size: var(--tekst-s); color: var(--op-diep); max-width: var(--maxbreed); }
.voetklein { font-size: var(--tekst-xs); color: var(--op-diep-zacht); margin: var(--ruimte-2) auto 0; max-width: var(--maxbreed); }

/* =========================================================================
   De rekentool
   ========================================================================= */

/* De kop van de rekentool is de paginakop: tekst op papier, geen kader. */
.toolkop {
  background: none;
  border: none;
  padding: 0;
  margin-bottom: var(--ruimte-6);
  scroll-margin-top: 1rem;
}
.toolkop .lead { margin-bottom: var(--ruimte-4); }
.toolwaarschuwing { font-size: var(--tekst-s); margin: var(--ruimte-4) 0; }
.toolwaarschuwing strong { color: var(--inkt); }

.herstelmelding { font-size: var(--tekst-s); margin: 0 0 var(--ruimte-5); }
.herstelmelding p { margin: 0 0 var(--ruimte-2); }
.herstelmelding p:last-child { margin-bottom: 0; }
.herstelmelding strong { color: var(--inkt); }

/* ------------------------------------------------------------- stapnavigatie */
.stapnav {
  display: flex;
  gap: var(--ruimte-1);
  flex-wrap: wrap;
  margin-bottom: var(--ruimte-5);
}
.stapknop {
  font: inherit;
  font-size: var(--tekst-s);
  min-height: 44px;
  padding: var(--ruimte-1) var(--ruimte-4) var(--ruimte-1) var(--ruimte-2);
  border: 1px solid var(--veldrand);
  background: var(--papier);
  color: var(--structuur);
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--ruimte-2);
}
.stapknop:hover { border-color: var(--structuur); background: var(--vlak-zacht); }
/* De stap waar je bent: het dennengroene vlak met witte tekst — de plek waar je staat is geen
   knop om op te drukken, dus hij krijgt niet het oranje. */
.stapknop.aan {
  background: var(--structuur);
  border-color: var(--structuur);
  color: var(--op-diep);
  font-weight: 700;
}
.stapnr {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  background: var(--vlak);
  color: var(--structuur);
  font-size: var(--tekst-xs);
  font-weight: 700;
}
.stapknop.aan .stapnr { background: var(--papier); color: var(--structuur); }
/* Het vinkje op een afgeronde stap. Geen kleur en geen vlak: een teken naast de naam, met het
   woord "af" ernaast voor wie het niet ziet. Groen zou hier een vierde baan openen die het
   palet niet heeft, en het zou bovendien de enige drager van de betekenis zijn. */
.stapvink { margin-left: var(--ruimte-2); font-weight: 700; }
.stapknop.af { border-color: var(--veldrand); }
.stapvoortgang {
  margin: calc(-1 * var(--ruimte-4)) 0 var(--ruimte-5);
  font-size: var(--tekst-s);
  color: var(--inkt-licht);
  max-width: var(--leesbreed);
}

/* De regel over je gegevens, bij de tool. Zelfde noot-vorm als het voorbehoud erboven — het
   is een mededeling over hoe de tool werkt, geen waarschuwing en geen aanname. */
.toolprivacy {
  border-left: var(--noot-rand);
  padding: var(--ruimte-0) 0 var(--ruimte-0) var(--ruimte-4);
  margin: var(--ruimte-4) 0;
  font-size: var(--tekst-m);
  color: var(--inkt-zacht);
  max-width: calc(var(--leesbreed) + 1rem);
}
.toolprivacy strong { color: var(--inkt); }
/* De regel naar het inlezen van je aanslag. Deelt het noot-patroon met de privacyregel
   erboven: één hairline, geen vlak en geen eigen kleur. */
.toolaanslag {
  border-left: var(--noot-rand);
  padding: var(--ruimte-0) 0 var(--ruimte-0) var(--ruimte-4);
  margin: var(--ruimte-4) 0;
  font-size: var(--tekst-m);
  color: var(--inkt-zacht);
  max-width: calc(var(--leesbreed) + 1rem);
}

/* ------------------------------------------------- het meelopende antwoord

   De strook onder de stapnavigatie die meeloopt terwijl je invult. Geen nieuwe kleur: een
   witte kaart met een hairline erboven, cijfers in de bedragkleur en een label in woorden
   boven elk getal. Het rooster loopt van vijf kolommen op een breed scherm naar twee op een
   telefoon, en elk getal draagt zijn eenheid in de regel eronder — zodat geen cijfer hier
   zonder uitleg staat. */
.meeloop {
  background: var(--papier);
  border: 1px solid var(--lijn);
  border-radius: var(--radius);
  box-shadow: var(--schaduw);
  padding: var(--ruimte-4) var(--ruimte-4) var(--ruimte-4);
  margin: calc(-1 * var(--ruimte-2)) 0 var(--ruimte-5);
}
.meeloopkop {
  margin: 0 0 var(--ruimte-2);
  font-size: var(--tekst-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--inkt-licht);
}
.meelooprij {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr));
  gap: var(--ruimte-3) var(--ruimte-4);
}
.meeloopcel { min-width: 0; }
.meelooplabel {
  display: block;
  font-size: var(--tekst-xs);
  color: var(--inkt-zacht);
}
.meeloopwaarde {
  display: block;
  font-size: var(--tekst-xl);
  font-weight: 700;
  line-height: 1.15;
  color: var(--structuur);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.meeloopbij {
  display: block;
  font-size: var(--tekst-xs);
  color: var(--inkt-licht);
}
.meelooponder {
  margin: var(--ruimte-3) 0 0;
  padding-top: var(--ruimte-2);
  border-top: 1px solid var(--lijn);
  font-size: var(--tekst-s);
  color: var(--inkt-licht);
  max-width: var(--leesbreed);
}

/* De melding zonder javascript. Zij staat in een <noscript>, dus zij bestaat alleen in
   de browser waar het misgaat; de stijl hier is er voor die ene bezoeker. Geen nieuw
   kleurvlak — dezelfde kaart als een gewone stap, met een gewone kop. */
.geenjs {
  background: var(--papier);
  border: 1px solid var(--lijn);
  border-radius: var(--radius);
  box-shadow: var(--schaduw);
  padding: var(--ruimte-5) var(--ruimte-5) var(--ruimte-6);
  margin-bottom: var(--ruimte-6);
}
.geenjs > h2 { margin-top: 0; font-size: var(--tekst-xl); }
.geenjs ul { margin: var(--ruimte-2) 0 0; padding-left: var(--ruimte-4); }
.geenjs li { margin-bottom: var(--ruimte-2); }

/* --------------------------------------------------------------- de stappen */
.stap {
  display: none;
  background: var(--papier);
  border: 1px solid var(--lijn);
  border-radius: var(--radius);
  box-shadow: var(--schaduw);
  padding: var(--ruimte-5) var(--ruimte-5) var(--ruimte-6);
}
.stap.actief { display: block; }
.stap > h2 { margin-top: 0; font-size: var(--tekst-xl); }
.rubriekintro { color: var(--inkt-zacht); max-width: var(--leesbreed); font-size: var(--tekst-m); }

.veldkop {
  font-size: var(--tekst-s);
  text-transform: none;
  letter-spacing: 0;
  color: var(--inkt);
  font-weight: 700;
  margin: var(--ruimte-6) 0 var(--ruimte-1);
  padding-top: var(--ruimte-4);
  border-top: 1px solid var(--lijn);
}

.veldrij { margin: var(--ruimte-4) 0; }
.veldlabel {
  display: flex;
  align-items: baseline;
  gap: var(--ruimte-2);
  margin-bottom: var(--ruimte-1);
}
.veldnaam, .veldlabel label { font-weight: 600; font-size: var(--tekst-m); }

/* Het vraagteken bij een vraag. Zichtbaar een rondje van 1,6 rem, maar het raakvlak is 44 px:
   een onzichtbare rand eromheen (::after) vangt de vinger op, zonder dat het rondje de regel
   groter maakt. */
.helpknop {
  position: relative;
  flex: 0 0 auto;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  border: 1px solid var(--veldrand);
  background: var(--papier);
  color: var(--structuur);
  font-size: var(--tekst-s);
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}
.helpknop::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
}
.helpknop:hover { border-color: var(--structuur); background: var(--vlak-zacht); }
.helpknop[aria-expanded="true"] { background: var(--structuur); border-color: var(--structuur); color: var(--op-diep); }

.helptekst {
  border-left: var(--noot-rand);
  background: none;
  border-radius: 0;
  padding: var(--ruimte-0) 0 var(--ruimte-0) var(--ruimte-3);
  font-size: var(--tekst-s);
  color: var(--inkt-zacht);
  margin: var(--ruimte-2) 0 var(--ruimte-2);
  max-width: var(--leesbreed);
}

/* "Waar vind je dit?" hangt onder de fiscale uitleg in hetzelfde helpblok. Geen eigen kleur en
   geen eigen vlak — het opschrift draagt de betekenis, zoals bij elke noot op deze site. */
.veldwaar { margin: var(--ruimte-2) 0 0; }
.veldwaarkop {
  display: block;
  font-size: var(--tekst-xs);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--inkt-licht);
}

.invoerveld { display: flex; align-items: stretch; max-width: 16rem; }
.invoerveld .prefix {
  display: flex;
  align-items: center;
  padding: 0 var(--ruimte-3);
  background: var(--vlak);
  border: 1px solid var(--lijn-sterk);
  border-right: none;
  border-radius: var(--radius-klein) 0 0 var(--radius-klein);
  color: var(--structuur);
  font-size: var(--tekst-s);
}
.invoerveld .prefix + input { border-radius: 0 var(--radius-klein) var(--radius-klein) 0; }
/* Een getalveld is een tekstveld met `data-soort` (src/getallezer.js leest het getal), geen
   `type="number"` meer. De regel moet dus dat kenmerk treffen: op het oude type raakte hij na die
   omzetting geen enkel veld, en elk getalveld viel terug op 26 px van de browser. Het kenmerk
   staat in :where(), zodat de regel even zwaar weegt als toen: de rechte hoek naast het
   €-teken (.invoerveld .prefix + input) en de maat in een kind- of leningrij winnen er nog van. */
.veldrij :where(input[data-soort]),
.veldrij select {
  min-height: 44px;
  font: inherit;
  padding: var(--ruimte-2) var(--ruimte-3);
  border: 1px solid var(--lijn-sterk);
  border-radius: var(--radius-klein);
  background: var(--papier);
  color: inherit;
  width: 100%;
  max-width: 16rem;
}
/* Een keuzelijst waarin de opties hele antwoorden zijn in plaats van één woord, mag breder:
   op 16 rem viel "Per leningdeel — dan leiden wij af wat in box 3 valt" halverwege af, en dan
   staat er een keuze op het scherm die je niet kunt lezen. */
.veldrij select.breed { max-width: 26rem; }

.vinkje { display: flex; align-items: baseline; gap: var(--ruimte-2); flex-wrap: wrap; }
.vinkje label { display: flex; align-items: center; gap: var(--ruimte-2); min-height: 44px; font-size: var(--tekst-m); cursor: pointer; }
.vinkje input[type="checkbox"] { flex: 0 0 auto; width: 1.3rem; height: 1.3rem; accent-color: var(--structuur); }
.vinkje .helptekst,
.vinkje .veldhulp { flex-basis: 100%; }
.vinkje .veldhulp { margin: 0 0 var(--ruimte-1) var(--ruimte-6); }

.radiogroep { display: grid; gap: var(--ruimte-2); }
.radiokeuze { display: flex; align-items: center; gap: var(--ruimte-2); min-height: 44px; font-size: var(--tekst-m); cursor: pointer; }
.radiokeuze input { flex: 0 0 auto; width: 1.25rem; height: 1.25rem; margin: 0; accent-color: var(--structuur); }

/* Een kind is vier antwoorden: leeftijd, opvanguren per maand, soort opvang en de eigen
   uurprijs. Naast elkaar op een breed scherm, onder elkaar op een telefoon — vandaar labels
   bóven de velden en een vaste minimumbreedte per veld in plaats van één rij die op 390 px
   in stukken breekt. De rij zelf krijgt een hairline links, zodat je bij drie kinderen ziet
   waar het ene kind ophoudt en het volgende begint. */
.kindrij {
  display: flex;
  align-items: flex-end;
  gap: var(--ruimte-2) var(--ruimte-3);
  margin-bottom: var(--ruimte-3);
  padding-left: var(--ruimte-3);
  border-left: 2px solid var(--lijn);
  flex-wrap: wrap;
}
.kindveld {
  display: flex;
  flex-direction: column;
  gap: var(--ruimte-1);
  font-size: var(--tekst-s);
  flex: 1 1 8.5rem;
  min-width: 0;
}
.kindveld > span,
.kindveld > label { color: var(--inkt-zacht); }
.kindrij input,
.kindrij select {
  width: 100%;
  min-width: 0;
  font: inherit;
  font-size: var(--tekst-m);
  padding: var(--ruimte-2) var(--ruimte-2);
  border: 1px solid var(--lijn-sterk);
  border-radius: var(--radius-klein);
  background: var(--papier);
  color: inherit;
}
/* Het raakvlak van de verwijderknop blijft ook op een smal scherm minstens 44 px hoog. */
.kindrij .kindweg { min-height: 44px; flex: 0 0 auto; }
@media (max-width: 30rem) {
  .kindveld { flex: 1 1 100%; }
  .kindrij .kindweg { width: 100%; }
}

/* Een leningdeel is drie antwoorden: de stand op 1 januari, de aflosvorm en het startjaar.
   Zelfde vorm als een kindrij — labels bóven de velden, een hairline links zodat je ziet waar
   het ene deel ophoudt, en een raakvlak van minstens 44 px op een telefoon. Het €-teken vóór
   het bedrag is hetzelfde saliekleurige vlakje als bij een gewoon bedragveld. */
.leningrij {
  display: flex;
  align-items: flex-end;
  gap: var(--ruimte-2) var(--ruimte-3);
  margin-bottom: var(--ruimte-3);
  padding-left: var(--ruimte-3);
  border-left: 2px solid var(--lijn);
  flex-wrap: wrap;
}
.leningveld {
  display: flex;
  flex-direction: column;
  gap: var(--ruimte-1);
  font-size: var(--tekst-s);
  flex: 1 1 9.5rem;
  min-width: 0;
}
.leningveld > span:first-child,
.leningveld > label { color: var(--inkt-zacht); }
.leningrij input,
.leningrij select {
  width: 100%;
  min-width: 0;
  font: inherit;
  font-size: var(--tekst-m);
  padding: var(--ruimte-2) var(--ruimte-2);
  border: 1px solid var(--lijn-sterk);
  border-radius: var(--radius-klein);
  background: var(--papier);
  color: inherit;
}
/* Binnen een leningrij vult het bedragveld zijn kolom: de vaste maximumbreedte van een
   los bedragveld zou de drie kolommen uit balans trekken. */
.leningrij .invoerveld { max-width: none; }
.leningrij .invoerveld input { border-left: none; }
.leningrij .leningweg { min-height: 44px; flex: 0 0 auto; }
@media (max-width: 30rem) {
  .leningveld { flex: 1 1 100%; }
  .leningrij .leningweg { width: 100%; }
}
/* Wat de tool uit de rijen heeft afgeleid, in dezelfde toon als een nul-noot: het is geen
   waarschuwing en geen aanname, het is uitleg bij wat je net hebt ingevuld. */
#leningdelenafleiding { margin-top: var(--ruimte-2); }

/* Een toeslag is een voorschot. Die zin staat vóór de bedragen en mag niet wegvallen tussen
   de tabelregels: geen eigen kleurvlak, wel het gewicht van gewone tekst in plaats van de
   gedempte toon van een toelichting. */
.toeslagvoorschot {
  max-width: var(--leesbreed);
  margin: var(--ruimte-2) 0 var(--ruimte-4);
  font-size: var(--tekst-m);
}

.toolacties {
  display: flex;
  gap: var(--ruimte-2);
  align-items: center;
  flex-wrap: wrap;
  margin: var(--ruimte-5) 0 0;
}
.toolacties #volgende { margin-left: auto; }

/* Alles wissen staat bewust niet in de rij hierboven, maar eronder als tekstknop, en vraagt
   eerst (`vraagWissen()` in src/tool.js). */
.toolwis { margin: var(--ruimte-4) 0 0; }
.tekstknop {
  font: inherit;
  font-size: var(--tekst-s);
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
  min-height: 44px;
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}
.tekstknop:hover { color: var(--structuur); }
.wisvraag {
  border-left: 3px solid var(--structuur);
  padding: var(--ruimte-1) 0 var(--ruimte-1) var(--ruimte-4);
  margin: var(--ruimte-2) 0 0;
  max-width: var(--leesbreed);
}
.wisvraag p { margin: 0 0 var(--ruimte-2); }
.wisvraag .wisvraagknoppen { display: flex; flex-wrap: wrap; gap: var(--ruimte-2); margin: 0; }

/* ------------------------------------------------------------- de berekening */
table.berekening { min-width: 22rem; }
table.berekening th[scope="row"] { font-weight: 400; }
table.berekening td { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.rijtoelichting {
  display: block;
  font-size: var(--tekst-xs);
  color: var(--inkt-licht);
  font-weight: 400;
  margin-top: var(--ruimte-0);
}
tr.subtotaal th, tr.subtotaal td {
  border-top: 1px solid var(--lijn-sterk);
  font-weight: 700;
}
tr.totaal th, tr.totaal td {
  border-top: 2px solid var(--inkt);
  font-weight: 700;
  font-size: var(--tekst-m);
}
tr.positief td { color: var(--bedrag); }
tr.negatief td { color: var(--negatief); }
.nietberekend { color: var(--inkt-licht); font-style: italic; font-size: var(--tekst-s); }
.saldozin { font-size: var(--tekst-s); color: var(--inkt-zacht); }

/* Het marginale tarief: geen vlak, wel een groot getal. */
.marginaal {
  background: none;
  border: none;
  border-left: var(--noot-rand-zwaar);
  border-radius: 0;
  padding: var(--ruimte-1) 0 var(--ruimte-1) var(--ruimte-4);
  margin: var(--ruimte-6) 0;
}
.marginaal h3 { margin-top: 0; }
/* Het marginale tarief is het kerngetal van de berekening; het stond te klein
   omdat `.marginaal p` het overschreef. */
.marginaal .marggetal {
  font-size: var(--tekst-2xl);
  font-weight: 700;
  color: var(--structuur);
  margin: var(--ruimte-2) 0 var(--ruimte-1);
  line-height: 1;
  letter-spacing: -0.02em;
}
.marginaal p { margin: var(--ruimte-1) 0 0; font-size: var(--tekst-s); }

.ontbreekt h3,
.aannames h3 { font-size: var(--tekst-xs); }
.ontbreekt ul,
.aannames ul { margin: var(--ruimte-1) 0 0; padding-left: var(--ruimte-4); }
.aannames { font-size: var(--tekst-s); }

.rekenvoorbehoud {
  font-size: var(--tekst-s);
  color: var(--inkt-zacht);
  border-top: 1px solid var(--lijn);
  padding-top: var(--ruimte-3);
  margin-top: var(--ruimte-5);
  max-width: var(--leesbreed);
}

/* ----------------------------------------------------------------- adviezen */
.rubriekadvies {
  margin-top: var(--ruimte-6);
  padding-top: var(--ruimte-5);
  border-top: 1px solid var(--lijn-sterk);
}
.rubriekadvies > h3 { margin-top: 0; }

/* Eén witte kaart, geen gekleurde balk ernaast, geen blokken erin. */
.advies {
  border: 1px solid var(--lijn);
  border-radius: var(--radius);
  box-shadow: var(--schaduw);
  padding: var(--ruimte-4) var(--ruimte-5);
  margin-bottom: var(--ruimte-3);
  background: var(--papier);
}
.advies h4 {
  font-size: var(--tekst-m);
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
  color: var(--inkt);
  margin: 0 0 var(--ruimte-2);
  max-width: var(--leesbreed);
}
.advies h5 {
  font-size: var(--tekst-xs);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-weight: 700;
  color: var(--inkt-licht);
  margin: 0 0 var(--ruimte-1);
}
.adviesmeta { margin: 0 0 var(--ruimte-2); font-size: var(--tekst-s); display: flex; gap: var(--ruimte-2); align-items: baseline; flex-wrap: wrap; }
.naslaglink { font-size: var(--tekst-s); }

.adviesbedrag {
  font-size: var(--tekst-xl);
  font-weight: 700;
  color: var(--bedrag);
  margin: var(--ruimte-1) 0 var(--ruimte-2);
  letter-spacing: -0.01em;
}
.adviesbedrag span { font-size: var(--tekst-xs); font-weight: 600; color: var(--inkt-licht); letter-spacing: 0; }
/* Nagekeken: geen bedrag en geen oproep, een noot in het gedeelde patroon. */
.adviesnagekeken { font-size: var(--tekst-s); border-left: var(--noot-rand); padding-left: var(--ruimte-3); margin: 0 0 var(--ruimte-3); }
/* Wat bij het bedrag hoort (lijfrente: het is uitstel). Direct onder het bedrag, als noot. */
.adviesbijbedrag { font-size: var(--tekst-s); color: var(--inkt-zacht); border-left: var(--noot-rand); padding-left: var(--ruimte-3); margin: 0 0 var(--ruimte-3); }

/* Wat je inlegt: één regel met een opschrift, geen gekleurd blok. De drie
   soorten inleg verschillen in woorden en in gewicht, niet in kleur. */
.inleg,
.inleg.geld,
.inleg.geen,
.inleg.doen {
  border: none;
  border-left: var(--noot-rand);
  border-radius: 0;
  background: none;
  padding: var(--ruimte-0) 0 var(--ruimte-0) var(--ruimte-4);
  margin: var(--ruimte-3) 0 var(--ruimte-4);
  max-width: var(--leesbreed);
}
.inlegkop { margin: 0 0 var(--ruimte-1); display: flex; flex-wrap: wrap; gap: var(--ruimte-0) var(--ruimte-2); align-items: baseline; }
.inleglabel {
  font-size: var(--tekst-xs);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--inkt-licht);
  font-weight: 700;
}
.inlegkop strong { font-size: var(--tekst-m); }
.inlegtekst { margin: 0; font-size: var(--tekst-s); color: var(--inkt-zacht); }
.inlegnetto {
  margin: var(--ruimte-2) 0 0;
  font-size: var(--tekst-s);
  font-weight: 600;
}
.inleggeld { font-weight: 700; color: var(--inkt); }
.inleggeen { font-weight: 700; color: var(--bedrag); }
.inlegdoen { font-weight: 600; color: var(--inkt-zacht); }

.rekenbasis {
  background: var(--papier-vlak);
  border-radius: var(--radius-klein);
  padding: var(--ruimte-2) var(--ruimte-3);
  font-size: var(--tekst-s);
  color: var(--inkt-zacht);
  margin: 0 0 var(--ruimte-3);
  max-width: var(--leesbreed);
}
.stappen ol { margin: var(--ruimte-1) 0 var(--ruimte-3); padding-left: var(--ruimte-4); font-size: var(--tekst-s); }
.stappen li { margin-bottom: var(--ruimte-1); }
.adviesletop { font-size: var(--tekst-s); margin: var(--ruimte-4) 0; }
.adviesletop ul { margin: var(--ruimte-1) 0 0; padding-left: var(--ruimte-4); }
/* Wat je zou kunnen doen, het risico en de bron staan onvoorwaardelijk onder de kaart — zie
   adviesRegelDeel() in src/tool.js. Ze delen daarom één opmaak, en die is bewust gewoon:
   geen vlak, geen eigen kleur, alleen een vet opschrift dat zegt wat het is. */
.adviesactie { font-size: var(--tekst-m); color: var(--inkt); margin: var(--ruimte-4) 0 var(--ruimte-1); max-width: var(--leesbreed); }
.adviesrisico { font-size: var(--tekst-s); color: var(--inkt-zacht); margin: var(--ruimte-4) 0 var(--ruimte-1); max-width: var(--leesbreed); }
/* Waar het bedrag vandaan komt als het níét uit een belastingregeling komt. Zelfde vorm als de
   actie en het risico ernaast: een alinea met een opschrift in vet, geen vlak en geen kleur. */
.adviessoort { font-size: var(--tekst-s); color: var(--inkt-zacht); margin: var(--ruimte-4) 0 var(--ruimte-1); max-width: var(--leesbreed); }
.adviseur { font-size: var(--tekst-s); margin: var(--ruimte-4) 0; }
.adviesbron { font-size: var(--tekst-s); color: var(--inkt-licht); margin: var(--ruimte-4) 0 0; }
/* Verdieping die niet altijd open hoeft: stappenplan, aandachtspunten, bron. */
.adviesmeer {
  margin: var(--ruimte-2) 0 0;
  border-top: 1px solid var(--lijn);
  padding-top: var(--ruimte-1);
}
.adviesmeer > summary {
  cursor: pointer;
  list-style: none;
  font-size: var(--tekst-s);
  font-weight: 600;
  color: var(--accent);
  padding: var(--ruimte-2) 0 var(--ruimte-1);
  display: flex;
  align-items: center;
  gap: var(--ruimte-2);
}
.adviesmeer > summary::-webkit-details-marker { display: none; }
.adviesmeer > summary::before {
  content: "\203A";
  font-size: var(--tekst-l);
  line-height: 1;
  display: inline-block;
  transition: transform 0.12s;
}
.adviesmeer[open] > summary::before { transform: rotate(90deg); }
.adviesmeer > summary:hover { color: var(--structuur); }

/* ---------------------------------------------------------------- eindadvies */
.eindadvies {
  margin-top: var(--ruimte-6);
  padding-top: var(--ruimte-5);
  border-top: 1px solid var(--lijn-sterk);
}
/* ------------------------------------------------- de standenrij per gebied

   Eén pil per gebied, boven het kopbedrag. Geen stoplicht: rood en groen bestaan hier alleen
   als tekstkleur bij een bedrag, en een stand die alleen aan kleur hangt is voor een deel van
   de bezoekers geen stand. Elke pil zegt daarom in woorden wat de stand is, met het aantal en
   het bedrag eronder, en de drie standen verschillen daarnaast in VORM:

     verloopt  een salie vlak met een volle rand — het enige gebied dat een datum heeft
     tehalen   een witte pil met een rand, en het bedrag in de bedragkleur
     nalopen   een witte pil met een hairline
     leeg      dezelfde pil, gedempt

   Elke pil is een knop naar zijn stap, dus de rand en de focusring dragen het accent — de
   enige baan waarin het accent mag staan. */
.gebiedenblok { margin: var(--ruimte-4) 0 0; }
.gebiedenblok > h4 {
  font-size: var(--tekst-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--inkt-licht);
  margin: 0 0 var(--ruimte-2);
}
.gebiedenrij {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ruimte-2);
}
.gebiedspil {
  font: inherit;
  text-align: left;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: var(--ruimte-0);
  padding: var(--ruimte-2) var(--ruimte-3);
  min-height: 44px;
  border: 1px solid var(--lijn);
  border-radius: var(--radius-klein);
  background: var(--papier);
  color: var(--inkt-zacht);
}
.gebiedspil:hover { border-color: var(--accent); }
.gebiedspil:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.gebiednaam { font-size: var(--tekst-s); font-weight: 600; color: var(--inkt); }
.gebiedstand { font-size: var(--tekst-xs); }
.gebiedtel { font-size: var(--tekst-xs); color: var(--inkt-licht); font-variant-numeric: tabular-nums; }

.gebiedspil.stand-verloopt {
  background: var(--vlak);
  border-color: var(--vlak-lijn);
  color: var(--structuur);
}
.gebiedspil.stand-verloopt .gebiednaam,
.gebiedspil.stand-verloopt .gebiedtel { color: var(--structuur); }
.gebiedspil.stand-verloopt .gebiedstand { font-weight: 700; }
.gebiedspil.stand-tehalen { border-color: var(--lijn-sterk); }
.gebiedspil.stand-tehalen .gebiedtel { color: var(--bedrag); font-weight: 700; }
.gebiedspil.stand-leeg { color: var(--inkt-licht); }
.gebiedspil.stand-leeg .gebiednaam { font-weight: 600; color: var(--inkt-zacht); }
.gebiedenonder {
  margin: var(--ruimte-3) 0 0;
  font-size: var(--tekst-s);
  color: var(--inkt-licht);
  max-width: var(--leesbreed);
}

.eindadvies > h3 { font-size: var(--tekst-xl); margin-top: 0; }

/* Het eindbedrag is het anker van de pagina: groot getal, veel wit eromheen. */
.eindtotaal {
  background: none;
  border: none;
  border-top: 1px solid var(--lijn);
  border-bottom: 1px solid var(--lijn);
  border-radius: 0;
  padding: var(--ruimte-5) 0;
  margin: var(--ruimte-5) 0 var(--ruimte-6);
}
.eindbedrag {
  font-size: var(--tekst-3xl);
  font-weight: 700;
  color: var(--bedrag);
  margin: 0;
  line-height: 1;
  letter-spacing: -0.03em;
}
.eindtotaal p:last-child { margin: var(--ruimte-2) 0 0; font-size: var(--tekst-s); color: var(--inkt-zacht); }
/* Hetzelfde bedrag per maand en per dag: geen tweede bedrag en dus geen bedragkleur, maar
   dezelfde regel als de toelichting eronder. */
.perperiode {
  margin: var(--ruimte-2) 0 0;
  font-size: var(--tekst-m);
  color: var(--inkt-zacht);
  font-variant-numeric: tabular-nums;
}
.perperiode.onderberekening { margin: var(--ruimte-2) 0 0; max-width: var(--leesbreed); }
.eindterug { font-size: var(--tekst-s); color: var(--inkt-zacht); }
.eindgroep { margin-bottom: var(--ruimte-5); }
.eindgroep h4 { font-size: var(--tekst-m); text-transform: none; letter-spacing: 0; color: var(--inkt); font-weight: 700; margin-bottom: var(--ruimte-2); }
.eindlijst { margin: var(--ruimte-1) 0 0; padding-left: var(--ruimte-5); }
.eindlijst li { margin-bottom: var(--ruimte-2); max-width: none; }
.eindtitel { font-weight: 600; }
.eindbedragklein {
  display: inline-block;
  margin-left: var(--ruimte-2);
  font-weight: 700;
  color: var(--bedrag);
  font-variant-numeric: tabular-nums;
}
.eindnoot { margin-left: var(--ruimte-2); font-size: var(--tekst-xs); color: var(--inkt-licht); }
.eindintro { font-size: var(--tekst-m); color: var(--inkt-zacht); max-width: var(--leesbreed); }
.eindkader { font-size: var(--tekst-s); margin: var(--ruimte-4) 0 var(--ruimte-5); }
.eindkader strong { color: var(--inkt); }


/* ---------------------------------------- nul, herstel, ranglijst */

.nulnoot {
  margin: var(--ruimte-1) 0 0;
  font-size: var(--tekst-xs);
  color: var(--inkt-licht);
  max-width: var(--leesbreed);
}

/* De weg naar een getal, klik voor klik: een uitklapper onder het veld, op de rekentool
   (.veldstappen) en op de aanslagpagina (.astappen). Openklappen is iets wat je aanklikt, dus
   het pijltje staat in de accentkleur; de regel zelf is minstens 44 px hoog, ook op een telefoon.
   De stappen zijn een genummerde lijst, want de volgorde is de uitleg. */
.veldstappen, .astappen { margin: var(--ruimte-2) 0 0; max-width: var(--leesbreed); }
.veldstappen > summary, .astappen > summary {
  cursor: pointer;
  list-style: none;
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: var(--ruimte-2);
  font-size: var(--tekst-s);
  font-weight: 600;
  color: var(--structuur);
}
.veldstappen > summary::-webkit-details-marker, .astappen > summary::-webkit-details-marker { display: none; }
.veldstappen > summary::before, .astappen > summary::before {
  content: "\203A";
  font-size: var(--tekst-m);
  line-height: 1;
  color: var(--accent);
  display: inline-block;
  transition: transform 0.12s;
}
.veldstappen[open] > summary::before, .astappen[open] > summary::before { transform: rotate(90deg); }
.veldstappen > ol, .astappen > ol {
  margin: 0 0 var(--ruimte-2);
  padding: 0 0 0 var(--ruimte-5);
  font-size: var(--tekst-s);
  border-left: var(--noot-rand);
}
.veldstappen li + li, .astappen li + li { margin-top: var(--ruimte-1); }

.marguitleg { font-size: var(--tekst-m); margin: 0 0 var(--ruimte-2); }
.marginaal .marggetal span {
  display: block;
  font-size: var(--tekst-xs);
  font-weight: 600;
  color: var(--inkt-zacht);
  letter-spacing: 0;
  margin-top: var(--ruimte-1);
}
.margwaarom, .margtoeslag, .margwaartoe { font-size: var(--tekst-s); }
/* Een klif vlak boven het inkomen: een waarschuwing, dus een hairline links en geen vlak. */
.margklif { font-size: var(--tekst-s); border-left: var(--noot-rand-zwaar); padding-left: var(--ruimte-3); margin: 0 0 var(--ruimte-3); }
.margwaartoe { color: var(--inkt-licht); padding-top: var(--ruimte-2); margin-top: var(--ruimte-3) !important; }

table.ranglijst { min-width: 32rem; table-layout: fixed; }
table.ranglijst td, table.ranglijst th { font-size: var(--tekst-s); }
table.ranglijst th[scope="row"] { padding-right: var(--ruimte-4); }

/* De ranglijst heeft één vorm, maar heeft er twee gehad, en die hadden NIET dezelfde
   kolommen. Een vaste breedte op `nth-child` zonder de variant erbij landt dan op de
   verkeerde kolom: `width: 3.2rem` was voor het volgnummer bedoeld en kwam in de andere
   vorm op de titelkolom terecht — 51 px, waarin elke regelingnaam zich verticaal uitspelt
   en de tabel voor zestien punten tienduizend pixels hoog werd. Zet een kolombreedte hier
   dus nooit op `table.ranglijst` zelf, ook niet nu er maar één variant is.
   `controleer-uitlevering.js` bewaakt dat. */

/* vier kolommen: # · Punt · Wat je inlegt · Levert op */
table.ranglijst.volledig thead th:nth-child(1) { width: 3.2rem; }
table.ranglijst.volledig thead th:nth-child(3) { width: 9.5rem; }
table.ranglijst.volledig thead th:nth-child(4) { width: 7.5rem; text-align: right; }

/* zonder code — drie kolommen: Punt · Wat je zou kunnen doen · Wanneer. Kolom 1 is hier de titel
   en krijgt dus de rest van de ruimte; alleen de twee smalle kolommen worden vastgezet. */
.rangnr { width: 3.2rem; white-space: nowrap; color: var(--inkt-licht); font-variant-numeric: tabular-nums; }
.rangbedrag { text-align: right; white-space: nowrap; font-weight: 700; color: var(--bedrag); font-variant-numeric: tabular-nums; }
.rangnoot { display: block; font-size: var(--tekst-xs); font-weight: 400; color: var(--inkt-licht); white-space: normal; text-wrap: balance; }
/* Wat je zou kunnen doen en wanneer staan onder de titel, niet in een eigen kolom. Het
   opschrift staat er zichtbaar bij: zonder leest de zin eronder als een opdracht. */
.rangactie, .rangwanneer, .rangvoorwaarde, .rangbijbedrag {
  display: block;
  font-weight: 400;
  font-size: var(--tekst-s);
  color: var(--inkt-zacht);
  margin-top: var(--ruimte-1);
}
.rangwanneer { color: var(--inkt-licht); font-size: var(--tekst-xs); }
.rangactielabel { font-weight: 600; color: var(--inkt-licht); }
/* De soort staat in de ranglijst boven de actie, want hij bepaalt hoe je de rest van de rij
   leest. Vet en in de volle tekstkleur, zoals de badge op de kaart — geen eigen kleur. */
.rangsoort {
  display: block;
  font-weight: 600;
  font-size: var(--tekst-xs);
  color: var(--inkt);
  margin-top: var(--ruimte-1);
}
.rangintro { font-size: var(--tekst-s); color: var(--inkt-zacht); margin: var(--ruimte-1) 0 var(--ruimte-3); max-width: var(--leesbreed); }
.ranglijstblok { margin-bottom: var(--ruimte-6); }
.ranginleg { white-space: normal; font-variant-numeric: tabular-nums; }

/* De downloadbalk: witte kaart met één knop, geen gekleurd vlak. */
.downloadbalk {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ruimte-4);
  align-items: center;
  justify-content: space-between;
  border: 1px solid var(--lijn);
  background: var(--papier);
  box-shadow: var(--schaduw);
  border-radius: var(--radius);
  padding: var(--ruimte-4) var(--ruimte-5);
  margin: 0 0 var(--ruimte-6);
}
.downloadbalk > div { flex: 1 1 18rem; min-width: 0; }
.downloadkop { margin: 0; font-weight: 700; }
.downloaduitleg { margin: var(--ruimte-1) 0 0; font-size: var(--tekst-s); color: var(--inkt-zacht); }
.downloadbalk .knop { flex: 0 0 auto; }
/* Twee knoppen naast elkaar, en onder elkaar zodra de balk smal wordt. De pdf is de
   hoofdweg (gevulde knop), het csv-bestand de tweede (omlijnd) — het is er voor wie wil
   narekenen, niet voor wie wil meenemen. */
.downloadknoppen {
  flex: 0 1 auto;
  display: flex;
  flex-wrap: wrap;
  gap: var(--ruimte-2);
  align-items: center;
  min-width: 0;
}
/* Op een telefoon staan de twee knoppen onder elkaar en over de volle breedte. Zonder deze
   regel houdt de pdf-knop zijn eigen breedte vast en valt hij op 360 px buiten de kaart:
   `flex-wrap` helpt daar niet, want het is één knop die niet past en niet twee die niet
   passen. */
@media (max-width: 34rem) {
  .downloadknoppen { width: 100%; }
  .downloadknoppen .knop,
  .downloadknoppen .knopklein { width: 100%; text-align: center; }
}

/* onderbouwing per punt: alleen op papier */
.alleenprint { display: none; }

/* ------------------------------------------------------- poorten: heb ik niet */
/* Een poort is een vraag, geen doos. Een hairline erboven markeert het onderwerp. */
.veldrij.poort {
  border: none;
  border-top: 1px solid var(--lijn);
  border-radius: 0;
  background: none;
  padding: var(--ruimte-4) 0 0;
  margin: var(--ruimte-6) 0 var(--ruimte-4);
}
.poortvraag { display: flex; gap: var(--ruimte-2); align-items: baseline; }
.poortvraag .veldnaam { font-weight: 700; font-size: var(--tekst-m); }
.poortkeuze { display: flex; flex-wrap: wrap; gap: var(--ruimte-2); margin-top: var(--ruimte-2); }
/* Ja/nee bij een onderwerp: twee pillen van 44 px. De gekozen stand is een salievlak met een
   dikkere dennengroene rand en een gevuld rondje — drie tekens, niet één kleur. */
.poortknop {
  display: inline-flex;
  align-items: center;
  gap: var(--ruimte-2);
  min-height: 44px;
  border: 1px solid var(--veldrand);
  border-radius: 999px;
  background: var(--papier);
  padding: var(--ruimte-2) var(--ruimte-4);
  cursor: pointer;
  font-size: var(--tekst-m);
}
.poortknop:hover { border-color: var(--structuur); background: var(--vlak-zacht); }
.poortknop:has(input:checked) {
  border-color: var(--structuur);
  box-shadow: inset 0 0 0 1px var(--structuur);
  background: var(--vlak);
  color: var(--structuur);
  font-weight: 700;
}
.poortknop input { width: 1.2rem; height: 1.2rem; margin: 0; accent-color: var(--structuur); }
/* de velden ván een poort springen in, zodat zichtbaar is waar het onderwerp loopt */
.veldrij.onderpoort { border-left: 2px solid var(--lijn); padding-left: var(--ruimte-4); }
.veldrij.poort.onderpoort {
  border-left: 2px solid var(--lijn);
  border-top: none;
  margin-left: var(--ruimte-4);
  padding: var(--ruimte-1) 0 var(--ruimte-1) var(--ruimte-4);
}

/* ------------------------------------------- ontbrekende getallen bij de uitkomst */
.invoercontrole { margin: 0 0 var(--ruimte-6); }
.invoercontrole p { margin: 0 0 var(--ruimte-2); font-size: var(--tekst-s); }
.mistlijst { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--ruimte-2); }
.mistlijst li { max-width: none; }
.mistknop {
  border: 1px solid var(--veldrand);
  background: var(--papier);
  color: var(--structuur);
  border-radius: var(--radius-klein);
  padding: var(--ruimte-2) var(--ruimte-3);
  font: inherit;
  font-size: var(--tekst-s);
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}
.mistknop:hover { border-color: var(--structuur); background: var(--vlak-zacht); }
/* Een sprongknop is een raakvlak, dus minstens 44 bij 44 — ook op de smalste telefoon.
   De ronde vorm blijft, alleen de hoogte wordt een echt doelwit in plaats van een streepje. */
.mistknop {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.mistlijst li { display: flex; }

/* ------------------------------------------- de blokkade bij een leeg verplicht veld */
/* Het meldvak van een stap staat er altijd (het draagt role="alert" en moet dus al bestaan
   voordat er iets in komt), maar leeg neemt het geen ruimte in. */
.stapfout:empty { display: none; }
.stapfout {
  border-left-width: 3px;
  color: var(--inkt);
  margin: 0 0 var(--ruimte-5);
}
.stapfout > h3 { margin-bottom: var(--ruimte-2); }
.stapfout p { margin: 0 0 var(--ruimte-2); }

/* De reden náást het veld. De rode rand op het veld zelf is een tweede signaal; deze regel
   draagt de betekenis, want kleur mag dat nergens op deze site alleen doen. */
.veldfout {
  margin: var(--ruimte-2) 0 0;
  font-size: var(--tekst-s);
  color: var(--inkt);
}
.veldfout > .veldfoutkop { margin-bottom: var(--ruimte-1); }
input.mist, select.mist { border-color: var(--negatief); border-width: 2px; }
/* Zolang de markering staat, neemt de foutregel de nul-noot van dit veld over — anders
   staat dezelfde zin twee keer vlak onder elkaar. Zie uitwegZin() in src/tool.js. */
.veldrij.mistactief > .nulnoot { display: none; }

/* ------------------------------------------- wat er gelezen is (src/getallezer.js) */
/* Onder elk getalveld: wat er gelezen is ("= € 48.500"), of waarom het niet te lezen is. Het is
   een span en geen alinea, omdat het in een rij van een kind of een leningdeel ook binnen een
   veldblok staat. Het getal in tabelcijfers, zodat het onder het veld niet verspringt. */
.getalecho {
  display: block;
  margin: var(--ruimte-1) 0 0;
  font-size: var(--tekst-s);
  color: var(--inkt-zacht);
  font-variant-numeric: tabular-nums;
  max-width: var(--leesbreed);
}
/* Niet te lezen: het gedeelde noot-patroon, met een opschrift en een teken — kleur is ook
   hier niet de enige drager. */
.getalecho.getalfout {
  margin: var(--ruimte-2) 0 0;
  font-size: var(--tekst-s);
  color: var(--inkt);
}
.getalfout > .getalfoutkop { margin-bottom: var(--ruimte-1); }
input[data-getalfout] { border-color: var(--negatief); border-width: 2px; }
/* Staat de melding van de blokkade al bij het veld, dan neemt die het over: één melding. */
.getalecho[data-onderfout] { display: none; }

/* ------------------------------------------- weet ik niet */
/* De uitweg bij een veld waarvan het getal bij een ander ligt. Het gevolg staat er
   onvoorwaardelijk onder, dus vóór de keuze en niet erna. */
.weetniet { margin: var(--ruimte-2) 0 0; }
.weetnietkeuze {
  display: inline-flex;
  align-items: center;
  gap: var(--ruimte-2);
  min-height: 44px;
  padding: 0 var(--ruimte-1) 0 0;
  cursor: pointer;
  font-size: var(--tekst-s);
}
.weetnietkeuze input { accent-color: var(--structuur); width: 1.25rem; height: 1.25rem; }
.weetnietgevolg {
  margin: 0 0 0 var(--ruimte-5);
  font-size: var(--tekst-s);
  color: var(--inkt-zacht);
  max-width: var(--leesbreed);
}
/* Staat het vinkje aan, dan is het veld op slot en leeg. Dat mag je zien zonder het te
   moeten aanklikken — en zonder een nieuwe kleur: alleen gedempt. */
.veldrij.weetnietaan .invoerveld { opacity: 0.55; }
.veldrij.weetnietaan .weetnietgevolg { color: var(--inkt); }

/* ------------------------------------------- wat de bezoeker niet wist, bij de uitkomst */
.onbekendcontrole { margin: 0 0 var(--ruimte-6); }
.onbekendcontrole p { margin: 0 0 var(--ruimte-2); font-size: var(--tekst-s); }
.onbekendlijst { margin: 0; padding-left: var(--ruimte-4); font-size: var(--tekst-s); }
.onbekendlijst li { margin-bottom: var(--ruimte-2); max-width: none; }

/* --------------------------------------------------------------- de kansenlijst */
/* Wat je nog zou kunnen doen. Het staat onder het eindadvies en moet er duidelijk van
   gescheiden zijn zonder een nieuwe kleurfamilie op te tuigen: een dikkere scheidingslijn
   erboven, een voorbehoud in het gedeelde noot-patroon, en woorden die geen belofte doen. */
.kansenblok {
  margin: var(--ruimte-6) 0 0;
  padding-top: var(--ruimte-5);
  border-top: 1px solid var(--lijn-sterk);
}
.kansvoorbehoud { margin: var(--ruimte-2) 0 var(--ruimte-4); }
.kansgroep {
  border-top: 1px solid var(--lijn);
  margin: 0;
}
.kansgroep > summary {
  cursor: pointer;
  list-style: none;
  font-size: var(--tekst-m);
  font-weight: 700;
  color: var(--inkt);
  padding: var(--ruimte-3) 0;
  display: flex;
  align-items: center;
  gap: var(--ruimte-2);
}
.kansgroep > summary::-webkit-details-marker { display: none; }
.kansgroep > summary::before {
  content: "\203A";
  font-size: var(--tekst-l);
  line-height: 1;
  color: var(--accent);
  display: inline-block;
  transition: transform 0.12s;
}
.kansgroep[open] > summary::before { transform: rotate(90deg); }
.kansgroep > summary:hover { color: var(--structuur); }
.kansgroep > *:not(summary) { margin-bottom: var(--ruimte-3); }

.kans {
  border: 1px solid var(--lijn);
  border-radius: var(--radius);
  box-shadow: var(--schaduw);
  background: var(--papier);
  padding: var(--ruimte-4) var(--ruimte-4);
  margin: 0 0 var(--ruimte-3);
}
.kans h5 {
  font-size: var(--tekst-m);
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
  color: var(--inkt);
  margin: 0 0 var(--ruimte-2);
  max-width: var(--leesbreed);
}
/* Voorwaardelijk, en dat moet je zien: kleiner dan het bedrag van een advies, met het
   woord "zou" ervoor en de voorwaarde erachter. Wel dezelfde bedragkleur, want een andere
   kleur zou een nieuwe familie zijn. */
.kansbedrag {
  font-size: var(--tekst-l);
  font-weight: 700;
  color: var(--bedrag);
  margin: var(--ruimte-1) 0 var(--ruimte-2);
}
.kansbedrag span { font-size: var(--tekst-xs); font-weight: 600; color: var(--inkt-licht); }
.kanswaarom { font-size: var(--tekst-s); color: var(--inkt-zacht); margin: 0 0 var(--ruimte-2); }
.kansdoen {
  border-left: var(--noot-rand);
  padding: var(--ruimte-0) 0 var(--ruimte-0) var(--ruimte-4);
  margin: var(--ruimte-2) 0 var(--ruimte-3);
  font-size: var(--tekst-s);
  max-width: calc(var(--leesbreed) + 1rem);
}
.kanslabel {
  display: block;
  font-size: var(--tekst-xs);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-weight: 700;
  color: var(--inkt-licht);
}
.kansuitleg { font-size: var(--tekst-m); margin: 0 0 var(--ruimte-2); }
.kansactie { margin: var(--ruimte-3) 0 0; display: flex; flex-wrap: wrap; gap: var(--ruimte-2); align-items: baseline; }
.kansvraag { font-size: var(--tekst-s); color: var(--inkt-licht); }
.nvtlijst { margin: var(--ruimte-1) 0 0; padding-left: var(--ruimte-4); font-size: var(--tekst-s); color: var(--inkt-zacht); }
.nvtlijst li { max-width: none; margin-bottom: var(--ruimte-2); }

/* --------------------------------------------- een onderwerp dat uit staat */
/* Uit betekent: telt niet mee in je cijfers. Niet: weg. De vraag blijft staan, gedempt,
   met eronder hoeveel vragen eronder hangen — één klik en het onderwerp is er weer. */
.veldrij.poort.uit .veldnaam { color: var(--inkt-zacht); }
.poortuit {
  margin: var(--ruimte-2) 0 0;
  font-size: var(--tekst-s);
  color: var(--inkt-licht);
  max-width: var(--leesbreed);
}
.poortuit[hidden] { display: none; }

.invoeroverzicht { margin-top: var(--ruimte-6); }
.invoerdetails summary {
  cursor: pointer;
  font-weight: 700;
  padding: var(--ruimte-3) 0;
  border-top: 1px solid var(--lijn-sterk);
}
.invoerintro { font-size: var(--tekst-s); color: var(--inkt-zacht); }
table.invoertabel { min-width: 20rem; font-size: var(--tekst-s); }
table.invoertabel th[scope="row"] { font-weight: 400; color: var(--inkt-zacht); }
table.invoertabel td { text-align: right; font-variant-numeric: tabular-nums; }

.afdrukkop { display: none; }
/* =========================================================================
   De startpagina — één hoofdroute, twee zijwegen

   De startpagina is de ingang, en sinds de nieuwe look van september 2026 heeft
   zij één hoofdroute: je voorlopige aanslag inlezen. Zelf rekenen en de naslag
   staan eronder, als tweede en derde weg; er komt geen vierde onderwerp bij.

   Vier blokken, in de volgorde wat is dit → begin → andere wegen → voorwaarden:
     1. rubriek, titel, één zin, de grote oranje knop en drie beloften, met
        ernaast (op een telefoon eronder) hoe het werkt in drie stappen;
     2. zelf rekenen: drie keuzekaarten en één regel geruststelling;
     3. de route naar de naslag, als gewone links in de HTML;
     4. het voorbehoud, in het gedeelde noot-patroon.

   Eén oranje knop op de hele pagina; de keuzekaarten zijn wit met een haarlijn
   en een oranje regel "Start berekening".
   ========================================================================= */

/* De startpagina: één hoofdroute bovenaan — je voorlopige aanslag inlezen — op een diep
   dennengroen vlak met een verloop, zwevende boeien die met het scrollen meeschuiven en
   meedraaien, en ernaast (op een telefoon eronder) een voorbeeld dat laat ZIEN wat de site
   doet: een waterval van belasting naar eindbedrag, met een schuif die hem live laat
   meebewegen. Daaronder "Zo werkt het" in drie stappen, en dan zelf rekenen en de naslag.
   Sinds de beleving van september 2026 (BELEVINGRONDE-2026-09.md); de kop is donker maar
   staat ONDER de kop van de site, en groen met oranje is geen overheidskleur. */
.starthero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--ruimte-6);
  margin: var(--ruimte-1) 0 var(--ruimte-7);
  padding: var(--ruimte-6) var(--ruimte-5);
  background:
    radial-gradient(120% 90% at 100% 0%, var(--hero-tot) 0%, transparent 60%),
    linear-gradient(160deg, var(--hero-van) 0%, var(--hero-van) 45%, var(--hero-tot) 100%);
  color: var(--op-diep);
  border-radius: calc(var(--radius) + 8px);
  box-shadow: var(--schaduw-til);
}
@media (max-width: 34rem) {
  .starthero { padding: var(--ruimte-5) var(--ruimte-4) var(--ruimte-4); gap: var(--ruimte-5); border-radius: var(--radius); }
}
@media (min-width: 58rem) {
  .starthero {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: var(--ruimte-6);
    padding: var(--ruimte-7) var(--ruimte-6) var(--ruimte-6);
    align-items: center;
  }
}
.starthero :focus-visible { outline-color: var(--op-diep); box-shadow: 0 0 0 5px var(--structuur); }
.starthero .startdemo :focus-visible { outline-color: var(--focus); box-shadow: 0 0 0 5px var(--papier); }

/* De boeien: het beeldmerk, groot en half doorzichtig, in drie lagen die elk met een eigen
   snelheid meeschuiven (`data-parallax`, beweging.js zet --py en --draai). Decor: aria-hidden,
   en bij minder beweging staan ze gewoon stil. */
.herodecor { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.heroboei {
  position: absolute;
  color: var(--accent);
  transform: translate3d(0, var(--py, 0px), 0) rotate(var(--draai, 0deg));
  will-change: transform;
}
.heroboeisvg { display: block; width: 100%; height: 100%; }
.heroboei-een { width: 26rem; height: 26rem; right: -9rem; top: -10rem; opacity: 0.2; }
.heroboei-twee { width: 9rem; height: 9rem; left: -3rem; bottom: -2.5rem; opacity: 0.28; color: var(--zon); }
.heroboei-drie { width: 4.5rem; height: 4.5rem; left: 44%; top: 1.2rem; opacity: 0.35; color: var(--zon); }
.herogloed {
  position: absolute;
  width: 30rem;
  height: 30rem;
  left: -12rem;
  top: -14rem;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--hero-tot), transparent);
  opacity: 0.9;
  transform: translate3d(0, var(--py, 0px), 0);
}
@media (max-width: 34rem) {
  .heroboei-een { width: 16rem; height: 16rem; right: -6rem; top: -6rem; }
  .heroboei-drie { display: none; }
}

.startherotekst { position: relative; }
.starthero .herorubriek { color: var(--zon); }
.starthero h1 {
  font-size: var(--tekst-3xl);
  line-height: 1.08;
  letter-spacing: -0.01em;
  margin-bottom: var(--ruimte-4);
  color: var(--op-diep);
}
.herokleur { color: var(--zon); }

.startlead {
  font-size: var(--tekst-l);
  line-height: 1.55;
  color: var(--op-diep-zacht);
  margin: 0 0 var(--ruimte-5);
}

.startactie { margin: 0 0 var(--ruimte-4); }
/* De grote knop: over de volle breedte op een telefoon, zodat hij niet te missen is en met
   een duim overal te raken; op een groter scherm zo breed als zijn woorden. Op het donkere
   vlak krijgt hij een lichte ring, zodat zijn rand ook daar te zien is. */
.knopgroot {
  min-height: 56px;
  padding: var(--ruimte-3) var(--ruimte-5);
  font-size: var(--tekst-l);
  width: 100%;
}
.starthero .knopgroot { box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.18), 0 10px 26px rgba(0, 0, 0, 0.28); }
@media (min-width: 36rem) {
  .knopgroot { width: auto; }
}
@media (max-width: 34rem) {
  .knopgroot { padding: var(--ruimte-3) var(--ruimte-4); }
}

/* De drie beloften onder de knop: een vinkje ervoor, de betekenis in woorden. */
.startbelofte {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--ruimte-2) var(--ruimte-4);
  font-size: var(--tekst-s);
  color: var(--op-diep-zacht);
}
.startbelofte li { max-width: none; display: flex; gap: var(--ruimte-2); align-items: baseline; }
.startbelofte li::before {
  content: "\2713"; /* ✓ */
  font-weight: 700;
  color: var(--zon);
}

/* ---- het voorbeeld in de kop: een witte kaart op het groene vlak */
.startdemo {
  position: relative;
  background: var(--papier);
  color: var(--inkt);
  border-radius: calc(var(--radius) + 4px);
  padding: var(--ruimte-4);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.32);
}
@media (min-width: 58rem) {
  .startdemo { padding: var(--ruimte-5); }
}
.startdemolabel {
  display: flex;
  align-items: center;
  gap: var(--ruimte-2);
  margin: 0 0 var(--ruimte-1);
  font-size: var(--tekst-xs);
  color: var(--inkt-licht);
}
.startdemomerk {
  padding: var(--ruimte-0) var(--ruimte-2);
  border-radius: 999px;
  background: var(--zon);
  color: var(--inkt);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.startdemokop { margin: 0 0 var(--ruimte-3); font-size: var(--tekst-l); color: var(--structuur); }
.startdemoknoppen { display: grid; gap: var(--ruimte-3); margin: 0 0 var(--ruimte-2); }
.startdemoknoppen[hidden] { display: none; }
.startdemosoort {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ruimte-2);
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}
.startdemokeus { position: relative; display: inline-flex; }
.startdemokeus input { position: absolute; z-index: 1; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.startdemokeus span {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: var(--ruimte-1) var(--ruimte-3);
  border: 1px solid var(--veldrand);
  border-radius: 999px;
  font-size: var(--tekst-s);
  font-weight: 600;
  color: var(--structuur);
  background: var(--papier);
  transition: background-color 0.2s, border-color 0.2s, transform 0.25s var(--veer);
}
.startdemokeus input:checked + span {
  background: var(--structuur);
  border-color: var(--structuur);
  color: var(--op-diep);
}
.startdemokeus input:checked + span::before { content: "\25CF"; margin-right: var(--ruimte-2); font-size: var(--tekst-xs); color: var(--zon); }
.startdemokeus input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }
@media (hover: hover) {
  .startdemokeus:hover span { border-color: var(--structuur); transform: translateY(-2px); }
}
.startdemoschuif {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: var(--ruimte-1) var(--ruimte-3);
}
.startdemoschuif label { font-size: var(--tekst-s); font-weight: 600; color: var(--inkt-zacht); }
.startdemoschuif output { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--structuur); }
.startdemoschuif input[type="range"] { grid-column: 1 / -1; width: 100%; min-height: 44px; accent-color: var(--accent); cursor: pointer; }
.startdemoschuif input[type="range"]:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.startdemobeeld .grafiek { margin: 0; padding: 0; border: 0; box-shadow: none; }
.startdemonoot { margin: var(--ruimte-3) 0 0; font-size: var(--tekst-xs); line-height: 1.5; color: var(--inkt-licht); }

/* De kop komt binnen: de tekst schuift omhoog, de kaart zweeft in, de boeien draaien erbij.
   Eén keer, bij het openen — puur css, dus er is geen moment waarop iets verdwijnt en
   terugkomt. Bij minder beweging staat de regel bovenaan dit blad alles op 0,01 ms. */
@keyframes heroin { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes herokaart { from { opacity: 0; transform: translateY(40px) rotate(3deg) scale(0.96); } to { opacity: 1; } }
@keyframes boeiin { from { opacity: 0; scale: 0.4; rotate: -120deg; } }
@media (prefers-reduced-motion: no-preference) {
  .startherotekst > * { animation: heroin 0.8s var(--uit) both; }
  .startherotekst > :nth-child(2) { animation-delay: 0.08s; }
  .startherotekst > :nth-child(3) { animation-delay: 0.16s; }
  .startherotekst > :nth-child(4) { animation-delay: 0.26s; }
  .startherotekst > :nth-child(5) { animation-delay: 0.34s; }
  .startdemo { animation: herokaart 1s var(--uit) 0.3s both; }
  .heroboei { animation: boeiin 1.4s var(--uit) both; }
  .heroboei-twee { animation-delay: 0.25s; }
  .heroboei-drie { animation-delay: 0.5s; }
}

/* ---- zo werkt het: drie stappen met een lijn die zich trekt als ze in beeld komen */
.startwerkt { margin: 0 0 var(--ruimte-7); }
.startstappenkop { margin: 0 0 var(--ruimte-4); }
.startstappen {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--ruimte-3);
}
.startstappen li {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "nr tekst" "icoon tekst";
  gap: var(--ruimte-1) var(--ruimte-3);
  align-items: start;
  margin: 0;
  max-width: none;
  padding: var(--ruimte-4);
  background: var(--papier);
  border: 1px solid var(--kaart-rand);
  border-radius: var(--radius);
  box-shadow: var(--schaduw);
  transition: transform 0.35s var(--veer), box-shadow 0.35s var(--uit), border-color 0.2s;
}
@media (min-width: 46rem) {
  .startstappen { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ruimte-4); }
  .startstappen li { grid-template-columns: 1fr; grid-template-areas: "nr" "tekst"; padding: var(--ruimte-5) var(--ruimte-4); }
  .startstappen::before {
    content: "";
    position: absolute;
    left: 8%;
    right: 8%;
    top: 3.2rem;
    border-top: 3px dotted var(--vlak-lijn);
    transform-origin: 0 50%;
    transition: transform 1.2s var(--uit) 0.2s;
  }
  .beweegt .startwerkt:not(.zichtbaar) .startstappen::before { transform: scaleX(0); }
  .startstappen li { z-index: 1; }
}
@media (hover: hover) {
  .startstappen li:hover { transform: translateY(-4px); box-shadow: var(--schaduw-til); border-color: var(--vlak-lijn); }
}
/* Het stapnummer is een rond vlak — oranje, want het is het ritme van de hoofdroute; het
   cijfer is decoratie (aria-hidden): de lijst is al een <ol>. */
.startstapnr {
  grid-area: nr;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  background: var(--accent);
  color: var(--knop-tekst);
  font-weight: 700;
  font-size: var(--tekst-l);
  box-shadow: 0 0 0 6px var(--papier), 0 6px 14px rgba(179, 68, 11, 0.3);
}
.startstapicoon { grid-area: icoon; width: 1.6rem; height: 1.6rem; color: var(--structuur); justify-self: center; }
@media (min-width: 46rem) {
  .startstapicoon { position: absolute; right: var(--ruimte-4); top: var(--ruimte-5); width: 2rem; height: 2rem; }
}
.startstaptekst { grid-area: tekst; font-size: var(--tekst-m); line-height: 1.5; color: var(--inkt-zacht); }
.startstaptekst strong { display: block; color: var(--structuur); font-family: var(--font-kop); font-size: var(--tekst-l); margin-bottom: var(--ruimte-1); }
@keyframes stapnrin { from { transform: scale(0.2) rotate(-90deg); } }
.beweegt .startstappen > li.zichtbaar .startstapnr { animation: stapnrin 0.7s var(--veer) both; animation-delay: calc(var(--onthul-i, 0) * 90ms + 0.2s); }

.startzelf { margin: 0 0 var(--ruimte-6); }
.startzelf h2 { margin-top: 0; }
.startzelfintro { margin: 0 0 var(--ruimte-4); color: var(--inkt-zacht); }

.startkaarten {
  list-style: none;
  margin: 0 0 var(--ruimte-3);
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--ruimte-2);
}
.startkaarten li { max-width: none; display: flex; }

.startkaart {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: var(--ruimte-1);
  min-height: 44px;
  padding: var(--ruimte-4) var(--ruimte-4) var(--ruimte-4);
  background: var(--papier);
  border: 1px solid var(--kaart-rand);
  border-radius: var(--radius);
  box-shadow: var(--schaduw);
  color: var(--inkt);
  text-decoration: none;
}
.startkaart:hover {
  border-color: var(--accent);
  box-shadow: 0 2px 4px rgba(27, 31, 29, 0.05), 0 8px 22px rgba(27, 31, 29, 0.08);
}
.startkaartkop { font-size: var(--tekst-l); font-weight: 700; line-height: 1.3; color: var(--structuur); }
.startkaartbij {
  flex: 1 1 auto;
  font-size: var(--tekst-s);
  line-height: 1.45;
  color: var(--inkt-zacht);
}
.startkaartactie {
  margin-top: var(--ruimte-2);
  font-size: var(--tekst-m);
  font-weight: 700;
  color: var(--accent);
}
.startkaart:hover .startkaartactie { color: var(--accent-diep); text-decoration: underline; text-underline-offset: 0.18em; }

/* De 404-pagina (nietGevondenPagina() in build.js): een kop, één zin uitleg en drie kaarten in
   de vorm van de startpagina (aanslag, rekentool, naslag) — de weg terug staat meteen onder de
   melding. */
.nietgevonden { margin: var(--ruimte-5) 0 var(--ruimte-6); }
.nietgevondenlead { font-size: var(--tekst-l); line-height: 1.55; margin: 0 0 var(--ruimte-5); }
.nietgevondencode { margin: var(--ruimte-5) 0 var(--ruimte-3); }

.startnaast {
  margin: 0 0 var(--ruimte-4);
  font-size: var(--tekst-s);
  color: var(--inkt-licht);
}

.startgerust {
  margin: 0;
  padding-top: var(--ruimte-3);
  border-top: 1px solid var(--lijn);
  font-size: var(--tekst-s);
  color: var(--inkt-licht);
  max-width: none;
}

/* De route naar de naslag. Dit blok is er om één harde reden: de naslag moet vindbaar
   blijven ook nu de navigatie achter een knop zit. Vier gewone links in de statische HTML
   van de meest bezochte pagina — daar hoeft niemand een menu voor te openen. */
.startnaslag { margin: 0 0 var(--ruimte-6); }
.startnaslag h2 { margin-top: 0; }
.startnaslagintro { margin: 0 0 var(--ruimte-3); font-size: var(--tekst-m); color: var(--inkt-zacht); }

.startnaslaglijst {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--ruimte-2) var(--ruimte-2);
}
.startnaslaglijst li { max-width: none; }
.startnaslaglijst a {
  display: flex;
  align-items: center;
  gap: var(--ruimte-2);
  min-height: 48px;
  padding: var(--ruimte-2) var(--ruimte-4);
  background: var(--papier);
  border: 1px solid var(--veldrand);
  border-radius: 999px;
  font-size: var(--tekst-m);
  font-weight: 600;
  color: var(--structuur);
  text-decoration: none;
}
.startnaslaglijst a:hover { border-color: var(--structuur); background: var(--vlak-zacht); color: var(--structuur); }
.startnaslagtel { font-size: var(--tekst-xs); font-weight: 400; color: var(--inkt-licht); }
.startnaslagtel::before { content: "· "; }

/* "Ga verder waar je was". Staat alleen op de startpagina en alleen als er echt iets
   openstaat; app.js zet hem aan. Zonder dit blok zouden de drie keuzekaarten lezen als
   "begin opnieuw" terwijl de antwoorden er nog gewoon zijn. */
.p-start .hervat { margin: 0 0 var(--ruimte-6); }
.hervatkop { margin: 0 0 var(--ruimte-2); }
.hervatactie { margin: 0; max-width: none; }

@media (min-width: 46rem) {
  .startkaarten { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* =========================================================================
   De kop van de rekentool

   Kort: het uithangbord staat op de startpagina en die heb je net gelezen. Wat
   hier hoort te staan is wat de tool met je antwoorden doet, plus het
   voorbehoud — dat moet je ook lezen als je hier rechtstreeks binnenkomt via
   het menu, een link in de tekst of een bladwijzer.
   ========================================================================= */

.toolhero { margin-bottom: var(--ruimte-6); }

.toolrubriek {
  margin: 0 0 var(--ruimte-2);
  font-size: var(--tekst-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--structuur);
}

.toolhero h1 { margin-bottom: var(--ruimte-2); }
.toolhero .lead { font-size: var(--tekst-l); margin-bottom: var(--ruimte-4); }

/* --------------------------------------- de rekentool onder een naslagpagina */

/* Op elke naslagpagina staat onderaan dezelfde volgende stap. De naslag vertelt wat er
   bestaat; de tool vertelt wat het jóu doet. Eén hairline erboven, één knop erin. */
.naardetool {
  margin: var(--ruimte-7) 0 0;
  padding-top: var(--ruimte-5);
  border-top: 1px solid var(--lijn-sterk);
}
.naardetool h2 { margin-top: 0; }
.naardetoolactie {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--ruimte-2) var(--ruimte-4);
  max-width: none;
  margin: var(--ruimte-4) 0 0;
}
.naardetoolnaast { font-size: var(--tekst-s); color: var(--inkt-licht); }

/* ---------------------------------------------- de plattegrond in de voet */

/* Het menu is een snelweg, geen enige weg: hier staat alles nog een keer, altijd open.
   Valt in de afdruk weg met de rest van de voet. */
.voetnav { margin: 0 auto var(--ruimte-6); max-width: var(--maxbreed); }
.voetnavbinnen {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--ruimte-5) var(--ruimte-6);
  padding-bottom: var(--ruimte-5);
  border-bottom: 1px solid var(--structuur-lijn);
}
@media (min-width: 40rem) {
  .voetnavbinnen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 56rem) {
  .voetnavbinnen { grid-template-columns: 1.2fr 1.2fr 1fr 1fr 1fr; }
}
/* De kolomkoppen in de voet zijn h2's en zouden anders het dennengroen van hierboven erven —
   op een dennengroen vlak. */
.voetkolom h2 {
  font-family: var(--font-tekst);
  font-size: var(--tekst-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--op-diep-zacht);
  margin: 0 0 var(--ruimte-2);
}
/* Een kolomkop die zelf een pagina heeft, is een link — maar hij blijft een kolomkop: zelfde
   maat en letter als de koppen ernaast, niet de maat van de links eronder. */
.voetkolom h2 a { display: inline-flex; align-items: center; min-height: 44px; font-size: inherit; color: var(--op-diep-zacht); text-decoration: underline; text-underline-offset: 0.2em; }
.voetkolom ul { list-style: none; margin: 0; padding: 0; }
.voetkolom li { max-width: none; }
.voetkolom a {
  display: block;
  min-height: 44px;
  display: flex;
  align-items: center;
  font-size: var(--tekst-s);
  color: var(--op-diep-zacht);
  text-decoration: none;
}
.voetkolom a:hover { color: var(--op-diep); text-decoration: underline; }
.voetkolom a[aria-current="page"] { color: var(--op-diep); font-weight: 700; }
.voetkolomtekst { font-size: var(--tekst-s); color: var(--op-diep-zacht); margin: 0 0 var(--ruimte-3); }
.voetkolomtool p:last-child { margin-bottom: 0; }
/* De knop is een knop: .voetkolom a hierboven zou hem anders de zachte voettekstkleur
   geven. Op het dennengroene vlak keert hij om — wit vlak, dennengroene tekst — want het
   oranje op dennengroen haalt maar 2,2:1 en zou wegvallen in de achtergrond. */
.voetkolomtool .knop {
  min-height: var(--knop-hoogte);
  padding: var(--ruimte-2) var(--ruimte-4);
  display: inline-flex;
  align-items: center;
  background: var(--op-diep);
  border-color: var(--op-diep);
  color: var(--structuur);
}
.voetkolomtool .knop:hover {
  background: var(--vlak);
  border-color: var(--vlak);
  color: var(--structuur);
  text-decoration: none;
}

/* Ook op een breed scherm blijft elke link in de voet 44 px hoog: een iPad staand is 48 rem
   breed en wordt met een vinger bediend. De voet wordt daar iets langer; dat is de prijs. */

/* =========================================================================
   Het staafbeeld — dezelfde tekening op drie plekken

   Wat er van je volgende € 100 afgaat, waar een loonsverhoging blijft, en wat
   een regeling oplevert tegenover wat je erin legt. Zie src/staaf.js voor de
   bouw; hier staat alleen hoe hij eruitziet.

   Er komt geen kleur bij. Een GEVULD stuk is salie — de kleur die volgens
   de afspraak boven in dit bestand uitsluitend een vlak mag zijn — en een LEEG
   stuk is papier met een rand. Dat verschil draagt zelf betekenis: gevuld is
   weg, leeg blijft van jou. De arcering onderscheidt de gevulde stukken van
   elkaar zonder een tweede tint nodig te hebben, en het nummer in het stuk
   doet dat nog eens in cijfers — zodat kleur nergens de enige drager is.

   De hoogte staat hier in pixels en in src/staaf.js in gebruikerseenheden, en
   die twee horen gelijk te zijn: de svg wordt horizontaal uitgerekt maar niet
   verticaal, en alleen bij gelijke hoogte is de streepafstand van de arcering
   precies wat er in de tekening staat. Verschuif je er een, verschuif dan de
   ander mee.
   ========================================================================= */

.staafbeeld { margin: var(--ruimte-4) 0 var(--ruimte-5); }
.staaftitel {
  margin: 0 0 var(--ruimte-2);
  font-size: var(--tekst-s);
  font-weight: 600;
  color: var(--structuur);
}
.staafhouder { position: relative; }
.staafsvg { display: block; width: 100%; height: 34px; }
/* De lage balk, voor twee balken onder elkaar in één rij. Deze hoogte hoort gelijk te zijn
   aan HOOGTE_KLEIN in src/staaf.js — zie de toelichting bij de gewone hoogte hierboven. */
.staafsvg.staafklein { height: 18px; }

.staafgrond { fill: var(--vlak); }
/* De arcering is een LIJNkleur en geen tekstkleur: zij moet het stuk herkenbaar maken zonder
   de waarde erin onleesbaar te maken. Dennengroen is hier geprobeerd en afgevallen — dat gaf een
   vlak waar het bedrag doorheen moest worden gelezen. Het onderscheid hoeft ook niet hard te
   zijn: het nummer in het stuk zegt al welk stuk het is. */
.staafarcering { stroke: var(--vlak-lijn); stroke-width: 1; }

/* De scheiding tussen twee stukken, en de omlijning eromheen. `non-scaling-stroke`
   houdt ze één pixel breed, hoe ver de svg ook wordt uitgerekt. */
.staafdeel {
  stroke: var(--vlak-lijn);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
/* LET OP: de vulling staat hier PER VORM en niet op `.staafdeel` zelf. Een gestreept stuk
   krijgt zijn vulling als attribuut mee (`fill="url(#…)"`, want een patroon-id is per svg
   uniek en kan dus niet in een stylesheet staan), en een css-regel wint het altijd van een
   attribuut. Eén regel `.staafdeel { fill: … }` maakt daarmee elke arcering onzichtbaar —
   dat is in de browser gebeurd en niet te zien aan de code. Zet hier dus nooit een vulling
   neer die ook voor `staaf-streep` en `staaf-dicht` geldt. */
.staafdeel.staaf-vol { fill: var(--vlak); }
.staafdeel.staaf-leeg { fill: var(--papier); }
.staafrand {
  fill: none;
  stroke: var(--lijn-sterk);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.staafmerk {
  stroke: var(--structuur);
  stroke-width: 2;
  stroke-dasharray: 3 3;
  vector-effect: non-scaling-stroke;
}

/* De nummerlaag ligt precies over de stukken. Elke cel is zo breed als haar stuk en
   knipt af wat er niet in past — zo steekt er nooit iets buiten de balk en kan deze
   tekening een pagina niet horizontaal laten schuiven. */
.staafnummers {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.staafnr {
  position: absolute;
  top: 0;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--ruimte-1);
  overflow: hidden;
  white-space: nowrap;
  font-size: var(--tekst-xs);
  color: var(--structuur);
  font-variant-numeric: tabular-nums;
}
.staafnr b {
  font-weight: 700;
  font-size: var(--tekst-xs);
}
.staafmerklabel {
  margin: var(--ruimte-2) 0 0;
  font-size: var(--tekst-xs);
  color: var(--inkt-licht);
}

.staaflijst {
  list-style: none;
  margin: var(--ruimte-3) 0 0;
  padding: 0;
  display: grid;
  gap: var(--ruimte-1);
}
.staafitem {
  display: grid;
  grid-template-columns: 1.35rem minmax(0, 1fr) auto;
  align-items: baseline;
  gap: var(--ruimte-2);
  font-size: var(--tekst-s);
  padding: var(--ruimte-1) 0;
  border-bottom: 1px solid var(--lijn);
}
.staafitem:last-child { border-bottom: none; }
.staafmerkje {
  grid-column: 1;
  justify-self: start;
  min-width: 1.35rem;
  text-align: center;
  font-size: var(--tekst-xs);
  font-weight: 700;
  color: var(--structuur);
  background: var(--vlak);
  border: 1px solid var(--vlak-lijn);
  border-radius: var(--radius-klein);
  padding: var(--ruimte-0) var(--ruimte-1);
  font-variant-numeric: tabular-nums;
}
/* Hetzelfde onderscheid als in de balk, ook hier: leeg is leeg. */
.staafitem-leeg .staafmerkje { background: var(--papier); border-color: var(--lijn-sterk); }
.staaflabel { grid-column: 2; color: var(--inkt); }
.staafbedrag {
  grid-column: 3;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--inkt);
}
.staafitem-leeg .staafbedrag { color: var(--bedrag); }
.staafnoot {
  grid-column: 2 / -1;
  font-size: var(--tekst-xs);
  color: var(--inkt-licht);
}
.staafonder {
  margin: var(--ruimte-2) 0 0;
  font-size: var(--tekst-s);
  color: var(--inkt-zacht);
}

/* Twee balken op één schaal, onder elkaar, met hun eigen kop ertussen. */
.staafgroep { margin: var(--ruimte-4) 0 0; }
.staafgroep .staafbeeld { margin: 0 0 var(--ruimte-4); }
.staafgroep .staafbeeld:last-child { margin-bottom: 0; }

/* Zonder bedragen is de lijst een legenda: wat betekent welk nummer. Hij mag dan in
   kolommen, want er is geen getal dat rechts moet uitlijnen. */
.staaflegenda { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.staaflegenda .staafitem { border-bottom: none; grid-template-columns: 1.35rem minmax(0, 1fr); }

/* ---- de ranglijst in beeld: wat een punt oplevert, en wat je ervoor vrijmaakt */
.rangbeeld { margin: var(--ruimte-4) 0 var(--ruimte-5); }
.rangbeeld > h5 {
  margin: 0 0 var(--ruimte-1);
  font-size: var(--tekst-m);
  color: var(--structuur);
}
.rangbeeldrij { margin: 0 0 var(--ruimte-4); }
.rangbeeldrij .staafhouder { margin-bottom: 2px; }
.rangbeeldrij .staafnr { font-size: var(--tekst-xs); line-height: 1; }
/* Een inleg die niet op de schaal past, loopt de balk uit. De omlijning wordt dan een
   streepjeslijn — "hier houdt hij niet op" — maar dat is de tweede drager: het staat in
   woorden in de balk zelf én in de zin eronder. Een vorm die je moet kennen om hem te
   begrijpen, legt niets uit. */
.staafdoorloop .staafrand { stroke-dasharray: 6 4; }
.rangbeeldrij:last-of-type { margin-bottom: 0; }
.rangbeeldkop {
  margin: 0 0 var(--ruimte-1);
  font-size: var(--tekst-s);
  font-weight: 600;
  color: var(--inkt);
}
.rangbeelduitleg {
  margin: var(--ruimte-1) 0 0;
  font-size: var(--tekst-s);
  color: var(--inkt-zacht);
  display: flex;
  flex-wrap: wrap;
  gap: var(--ruimte-0) var(--ruimte-2);
}
.rangbeeldop {
  font-weight: 700;
  color: var(--bedrag);
  font-variant-numeric: tabular-nums;
}
.rangbeeldin { color: var(--inkt-zacht); }
.rangbeeldnoot { width: 100%; color: var(--inkt-licht); font-size: var(--tekst-xs); }
.rangbeeldrest { margin: var(--ruimte-3) 0 0; font-size: var(--tekst-s); color: var(--inkt-licht); }

/* ---- de algemene illustratie boven aan een naslagpagina (nu: rente op rente)

   Zij is met opzet EEN BLOK MET EEN RAND en geen vlak: het palet krijgt er niets bij, en
   een salie vlak zou hier een betekenis suggereren die er niet is. De rand zegt
   alleen "dit hoort bij elkaar" — dat het om een algemeen voorbeeld gaat, staat in de
   badge, in het opschrift van het aannameblok en in de zin eronder, dus in woorden. */
.illustratie {
  margin: var(--ruimte-5) 0 var(--ruimte-6);
  padding: var(--ruimte-4) var(--ruimte-4) var(--ruimte-4);
  border: 1px solid var(--lijn);
  border-radius: var(--radius);
  max-width: var(--leesbreed);
}
.illustratie > h2 {
  margin: 0 0 var(--ruimte-2);
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--ruimte-2);
}
.illustratie > .lead { margin: 0 0 var(--ruimte-4); }
.ilaannames { margin: var(--ruimte-4) 0 0; }
.ilaannames p { margin: 0 0 var(--ruimte-2); }
.ilaannames li { margin-bottom: var(--ruimte-1); }
.ilverder { margin: var(--ruimte-4) 0 0; font-size: var(--tekst-s); }

/* De drie schuiven. Ze staan in de pagina met `hidden` en worden pas door
   dist/assets/groei.js aangezet: een schuif die zonder javascript niet schuift, is een
   kapotte knop. Zonder javascript staat er in plaats daarvan één regel die zegt welke
   stand er getekend is. */
.groeiknoppen { margin: 0 0 var(--ruimte-4); }
.groeiknoppen[hidden] { display: none; }
.groeiknoppen > h3 {
  margin: 0 0 var(--ruimte-2);
  font-size: var(--tekst-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--inkt);
}
.groeischuif {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  column-gap: var(--ruimte-2);
  margin-bottom: var(--ruimte-2);
}
.groeischuif label { font-size: var(--tekst-s); color: var(--inkt); }
.groeiwaarde {
  justify-self: end;
  font-size: var(--tekst-s);
  font-weight: 700;
  color: var(--structuur);
  font-variant-numeric: tabular-nums;
}
/* Het raakvlak is 44 px hoog, ook al is de baan dun: dat is de eis uit de opdracht en het is
   met de hand nagemeten. De duimknop is 26 px, want een schuif die je op een telefoon niet
   kunt pakken, is geen schuif. */
.groeischuif input[type="range"] {
  grid-column: 1 / -1;
  width: 100%;
  height: 44px;
  margin: 0;
  background: none;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}
.groeischuif input[type="range"]:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: var(--radius-klein);
}
.groeischuif input[type="range"]::-webkit-slider-runnable-track {
  height: 6px;
  background: var(--vlak);
  border: 1px solid var(--vlak-lijn);
  border-radius: 999px;
}
.groeischuif input[type="range"]::-moz-range-track {
  height: 6px;
  background: var(--vlak);
  border: 1px solid var(--vlak-lijn);
  border-radius: 999px;
}
.groeischuif input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 26px;
  height: 26px;
  margin-top: -11px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--papier);
  box-shadow: 0 0 0 1px var(--accent);
}
.groeischuif input[type="range"]::-moz-range-thumb {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--papier);
  box-shadow: 0 0 0 1px var(--accent);
}
.groeivast {
  margin: 0 0 var(--ruimte-4);
  font-size: var(--tekst-s);
  color: var(--inkt-zacht);
}

/* Het beeld zelf: een schaalkolom links, de tekening rechts, de jaartekens eronder — en die
   laatste moeten precies zo breed zijn als de tekening, want hun plaats is een percentage. */
.groeiveld {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: var(--ruimte-2);
}
.groeischaal {
  grid-column: 1;
  grid-row: 1;
  position: relative;
  width: 4.4rem;
}
.groeischaal span {
  position: absolute;
  right: 0;
  font-size: var(--tekst-xs);
  color: var(--inkt-licht);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* De hoogte van deze twee staat INLINE, uit dezelfde functie die de hulplijn in de tekening
   zet (`merken()` in src/groeibeeld.js). Zet hier dus geen `top` neer: dan gaan het opschrift
   en zijn lijn uit elkaar lopen zodra de topruimte verschuift. */
.groeischaal span { transform: translateY(-50%); }
.groeibeeldhouder { grid-column: 2; grid-row: 1; }
/* Deze hoogte hoort gelijk te zijn aan HOOGTE in src/groeibeeld.js — zie de toelichting
   daar: alleen bij gelijke hoogte is de streepafstand van de arcering wat er staat. */
.groeisvg { display: block; width: 100%; height: 200px; }

/* Het vlak dat je er zelf in stopte is PAPIER met een lijn eromheen; het vlak dat het
   rendement erbovenop deed is salie met een horizontale arcering. Schuin zou onder de
   uitrekking een vlek worden — dezelfde regel als bij het staafbeeld. Kleur draagt de
   betekenis niet: de twee vlakken verschillen in vulling én dragen een nummer dat ook bij het
   bedrag eronder staat. */
.groeigrond { fill: var(--vlak); }
.groeiarcering { stroke: var(--vlak-lijn); stroke-width: 1; }
.groeivlak {
  stroke: var(--vlak-lijn);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.groeivlak.groei-inleg { fill: var(--papier); }
.groeilijn {
  fill: none;
  stroke: var(--structuur);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}
.groeiraster {
  stroke: var(--lijn);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.groeias {
  stroke: var(--lijn-sterk);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

/* De jaartekens hangen aan dezelfde percentages als de lijnen erboven — gewone html, want
   tekst in een uitgerekte svg wordt platgedrukt. Het eerste en het laatste teken worden naar
   binnen getrokken zodat ze niet buiten de tekening steken. */
.groeijaren {
  grid-column: 2;
  grid-row: 2;
  position: relative;
  height: 1.2rem;
  margin-top: var(--ruimte-0);
}
.groeijaar {
  position: absolute;
  transform: translateX(-50%);
  font-size: var(--tekst-xs);
  color: var(--inkt-licht);
  font-variant-numeric: tabular-nums;
}
.groeijaar[style*="left:0.00%"] { transform: none; }
.groeijaar[style*="left:100%"],
.groeijaar[style*="left:100.00%"] { transform: translateX(-100%); }
.groeiasnaam {
  margin: 0;
  font-size: var(--tekst-xs);
  color: var(--inkt-licht);
  text-align: right;
}

/* De drie bedragen, met bij de eerste twee een merkje dat naar een vlak in de tekening wijst.
   Het merkje staat HIER en niet in het vlak — in de uitgerekte svg staat geen letter. Het bindt
   de regel aan het vlak door zijn vulling na te doen: merkje 1 is papier met een lijn zoals het
   inlegvlak, merkje 2 salie zoals het rendementsvlak. */
.groeiuitkomst {
  list-style: none;
  margin: var(--ruimte-4) 0 0;
  padding: 0;
  display: grid;
  gap: var(--ruimte-1);
}
.groeiuit {
  display: grid;
  grid-template-columns: 1.35rem minmax(0, 1fr) auto;
  align-items: baseline;
  gap: var(--ruimte-2);
  font-size: var(--tekst-s);
  padding: var(--ruimte-1) 0;
  border-bottom: 1px solid var(--lijn);
}
.groeiuit:last-child { border-bottom: none; }
.groeimerkje {
  justify-self: start;
  min-width: 1.35rem;
  text-align: center;
  font-size: var(--tekst-xs);
  font-weight: 700;
  color: var(--structuur);
  background: var(--vlak);
  border: 1px solid var(--vlak-lijn);
  border-radius: var(--radius-klein);
  padding: var(--ruimte-0) var(--ruimte-1);
  font-variant-numeric: tabular-nums;
}
/* Hetzelfde onderscheid als in de tekening: het eigen inlegvlak is papier met een lijn. */
.groeiuit-inleg .groeimerkje { background: var(--papier); border-color: var(--lijn-sterk); }
.groeigeenmerk { border: none; background: none; }
.groeiop { color: var(--inkt); }
.groeibedrag {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--inkt);
}
.groeiuit-totaal { font-weight: 700; }
.groeiuit-totaal .groeibedrag { color: var(--structuur); }

@media (max-width: 46rem) {
  .illustratie { padding: var(--ruimte-4) var(--ruimte-3) var(--ruimte-4); }
  /* De schaalkolom is op een telefoon smaller: vier rem naast een beeld van 250 px is een
     zesde van de breedte. De bedragen passen nog op 0,8 rem — kleiner werd voor wie slecht
     ziet onleesbaar. */
  .groeischaal { width: 4rem; }
  .groeischaal span { font-size: var(--tekst-xs); }
  /* De hoogte van de tekening verschuift hier NIET mee. Zij is gelijk aan HOOGTE in
     src/groeibeeld.js, en alleen bij gelijke hoogte is de streepafstand van de arcering
     precies wat er in de tekening staat. Een lagere balk op een telefoon zou de arcering
     samendrukken tot een vlak. */
}

/* =========================================================================
   Telefoon — 390px blijft volledig bruikbaar
   ========================================================================= */

@media (max-width: 46rem) {
  main { padding: var(--ruimte-5) var(--ruimte-4) var(--ruimte-7); }
  .kopbinnen { padding: var(--ruimte-3) var(--ruimte-4) var(--ruimte-2); }
  /* De merknaam en de menuknop horen naast elkaar; de ondertitel mag eronder doorlopen.
     Zonder dit duwt de basisbreedte van .merk de knop naar een eigen regel, boven het
     uithangbord van de tool. */
  .merk { flex: 1 1 0; }
  .voet { padding: var(--ruimte-5) var(--ruimte-4) var(--ruimte-7); }

  /* Een paneel staat hier in de tekststroom en zou de hele pagina kunnen wegduwen. Het
     scrollt daarom binnen zichzelf; de vier ingangen blijven zo boven elkaar in beeld
     passen en je hoeft nooit langs dertig links naar beneden. */
  .navpaneel {
    max-height: 68vh;
    max-height: 68dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .navrij { gap: 0 var(--ruimte-0); }

  h1 { font-size: var(--tekst-2xl); }
  .toolhero h1 { font-size: var(--tekst-2xl); }
  .toolhero .lead { font-size: var(--tekst-m); }
  .knopgroot { width: 100%; justify-content: center; text-align: center; }
  h2 { font-size: var(--tekst-xl); }
  .stap { padding: var(--ruimte-4) var(--ruimte-4) var(--ruimte-5); }
  .uitleg,
  .drempelblok,
  .zbsectie,
  .viasectie,
  .bronsectie { padding: var(--ruimte-4) var(--ruimte-4); }
  .advies { padding: var(--ruimte-4) var(--ruimte-4); }
  .stapnav { gap: var(--ruimte-1); }
  .stapknop { font-size: var(--tekst-xs); padding: var(--ruimte-1) var(--ruimte-2) var(--ruimte-1) var(--ruimte-1); }
  .marginaal .marggetal { font-size: var(--tekst-2xl); }
  .eindbedrag { font-size: var(--tekst-2xl); }
  .toolacties #volgende { margin-left: 0; }

  /* De ranglijst is op een telefoon geen tabel meer maar een lijst: alle zes
     de gegevens per punt onder elkaar, met hun opschrift ervoor. Zo staat
     "levert op" weer in beeld in plaats van buiten het scherm. */
  .tabelwrap:has(table.ranglijst) {
    overflow-x: visible;
    border: none;
    background: none;
    border-radius: 0;
  }
  table.ranglijst { min-width: 0; display: block; font-size: var(--tekst-s); }
  table.ranglijst thead { display: none; }
  table.ranglijst tbody { display: block; }
  table.ranglijst tr {
    display: block;
    background: var(--papier);
    border: 1px solid var(--lijn);
    border-radius: var(--radius);
    box-shadow: var(--schaduw);
    padding: var(--ruimte-4) var(--ruimte-4);
    margin-bottom: var(--ruimte-2);
  }
  table.ranglijst th,
  table.ranglijst td {
    display: block;
    border: none;
    padding: 0;
    text-align: left;
    white-space: normal;
  }
  table.ranglijst { table-layout: auto; }
  table.ranglijst th[scope="row"] {
    font-size: var(--tekst-m);
    font-weight: 700;
    margin-bottom: var(--ruimte-2);
    padding-right: 0;
  }
  table.ranglijst .rangactie { font-size: var(--tekst-s); }
  table.ranglijst td[data-kop] { margin-top: var(--ruimte-2); }
  table.ranglijst td[data-kop]::before {
    content: attr(data-kop);
    display: block;
    font-size: var(--tekst-xs);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    font-weight: 700;
    color: var(--inkt-licht);
  }
  table.ranglijst td.rangnr {
    width: auto;
    font-size: var(--tekst-xs);
    font-weight: 700;
    color: var(--inkt-licht);
    margin-bottom: var(--ruimte-0);
  }
  table.ranglijst td.rangnr::before { content: "#"; }
  table.ranglijst td.rangbedrag {
    text-align: left;
    font-size: var(--tekst-l);
    margin-top: var(--ruimte-2);
  }
  table.ranglijst .rangnoot { display: block; font-size: var(--tekst-xs); }
}

/* ------------------------------------------------------------------- afdrukken */

/* --------------------------------------------- de loonsverhoging-val

   Eén pagina met één vraag, en de opmaak volgt de banen van het palet zoals overal:
   wit is het grondvlak, dennengroen is tekst en structuur, salie is uitsluitend een
   vlak, en het accent is alleen wat je kunt aanklikken. Er komt hier dus GEEN vijfde
   kleur bij voor "duur" of "goedkoop" — de druk staat in cijfers en in woorden, en de
   grafiek gebruikt het accent dat er al is. Groen blijft wat het overal is: een
   tekstkleur bij een bedrag, hier bij het enige bedrag dat je overhoudt.
   ------------------------------------------------------------------- */

.loonvalvraag,
.loonvaluitleg,
.loonvalbronnen,
.lvblok {
  background: var(--papier);
  border: 1px solid var(--lijn);
  border-radius: var(--radius);
  box-shadow: var(--schaduw);
  padding: var(--ruimte-5) var(--ruimte-5) var(--ruimte-6);
  margin-bottom: var(--ruimte-6);
}
.loonvalvraag > h2,
.loonvaluitleg > h2,
.loonvalbronnen > h2,
.lvblok > h2 { margin-top: 0; font-size: var(--tekst-xl); }
.loonvalbronnen p { max-width: var(--leesbreed); }

.loonvalvak { margin-top: var(--ruimte-4); }
.loonvalmeer {
  max-width: var(--leesbreed);
  font-size: var(--tekst-m);
  color: var(--inkt-zacht);
  margin: var(--ruimte-5) 0 var(--ruimte-3);
  padding-top: var(--ruimte-4);
  border-top: 1px solid var(--lijn);
}
/* De hulptekst staat hier onvoorwaardelijk onder het veld in plaats van achter een `?`.
   Op deze pagina zijn het er vijf en ze zijn kort; een vraagteken dat je vijf keer moet
   opendoen om te weten wát er gevraagd wordt, is hier meer werk dan lezen. */
.veldhulp {
  border-left: var(--noot-rand);
  padding: var(--ruimte-0) 0 var(--ruimte-0) var(--ruimte-3);
  font-size: var(--tekst-s);
  color: var(--inkt-zacht);
  margin: var(--ruimte-2) 0 0;
  max-width: var(--leesbreed);
}
.loonvalonder {
  border-left: var(--noot-rand);
  padding-left: var(--ruimte-4);
  margin: var(--ruimte-1) 0 var(--ruimte-4);
}
.loonvalonder[hidden] { display: none; }
.loonvalvoorbeeld {
  margin: var(--ruimte-5) 0 0;
  padding-top: var(--ruimte-4);
  border-top: 1px solid var(--lijn);
  font-size: var(--tekst-s);
  color: var(--inkt-zacht);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ruimte-2);
}

/* ---- de drie kaarten: één bedrag per verhoging, en dat bedrag is de boodschap */
.lvkaarten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: var(--ruimte-4);
  margin: var(--ruimte-4) 0 var(--ruimte-5);
}
.lvkaart {
  border: 1px solid var(--lijn);
  border-radius: var(--radius);
  padding: var(--ruimte-4) var(--ruimte-4) var(--ruimte-4);
  min-width: 0;
}
.lvkaartkop {
  margin: 0;
  font-size: var(--tekst-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  color: var(--structuur);
}
.lvkaartbedrag {
  margin: var(--ruimte-2) 0 var(--ruimte-0);
  font-size: var(--tekst-2xl);
  line-height: 1.1;
  font-weight: 700;
  color: var(--bedrag);
  font-variant-numeric: tabular-nums;
}
/* Een verhoging die je netto ARMER maakt — de klif van de kinderopvangtoeslag. Zie
   kaartenHtml() in src/loonval.js: de zin eronder zegt het ook in woorden. */
.lvkaartbedrag.lvkaartminder { color: var(--negatief); }
.lvkaartonder { margin: 0; font-size: var(--tekst-s); color: var(--inkt-zacht); }
.lvkaartdruk {
  margin: var(--ruimte-3) 0 0;
  padding-top: var(--ruimte-2);
  border-top: 1px solid var(--lijn);
  font-size: var(--tekst-l);
  font-weight: 700;
  color: var(--inkt);
  font-variant-numeric: tabular-nums;
}
.lvkaartdruk span { font-size: var(--tekst-s); font-weight: 400; color: var(--inkt-zacht); }

.lvkernzin {
  max-width: calc(var(--leesbreed) + 2rem);
  font-size: var(--tekst-m);
  line-height: 1.55;
  color: var(--inkt);
  border-left: var(--noot-rand);
  padding-left: var(--ruimte-4);
  margin: var(--ruimte-4) 0 var(--ruimte-5);
}

/* ---- de tabel: waar blijft het geld */
table.lvposten { min-width: 30rem; }
table.lvposten td { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
table.lvposten th[scope="row"] { font-weight: 400; }
table.lvposten thead th:not(:first-child) { text-align: right; }
table.lvposten .lvnul { color: var(--inkt-licht); }
/* Een bedrag dat er juist bíj komt. Het teken en het woord in de legenda dragen de
   betekenis; de kleur is dezelfde die elk positief bedrag op deze site heeft. */
table.lvposten .lvbij { color: var(--bedrag); }
table.lvposten tr.lvsom th,
table.lvposten tr.lvsom td { border-top: 1px solid var(--lijn-sterk); font-weight: 700; }
table.lvposten tr.lvnetto td { color: var(--bedrag); font-size: var(--tekst-l); }
.lvart {
  display: block;
  font-weight: 400;
  font-size: var(--tekst-xs);
  color: var(--inkt-licht);
  white-space: normal;
}
.lvlegenda {
  font-size: var(--tekst-s);
  color: var(--inkt-zacht);
  max-width: var(--leesbreed);
  border-left: 2px solid var(--lijn-sterk);
  padding-left: var(--ruimte-3);
  margin: var(--ruimte-3) 0 0;
}

/* ---- de grafiek

   De svg wordt uitgerekt (preserveAspectRatio="none") zodat de lijn op elk scherm de volle
   breedte en een vaste hoogte krijgt. Daarom staat er geen letter IN de tekening: die zou
   op een telefoon horizontaal worden platgedrukt. De opschriften zijn gewone html eromheen
   en hangen aan dezelfde percentages als de lijnen zelf. */
.lvgrafiek {
  position: relative;
  padding-left: var(--ruimte-7);
  margin: var(--ruimte-4) 0 var(--ruimte-1);
}
.lvplot { position: relative; }
.lvcurve { display: block; width: 100%; height: 240px; }
.lvraster { stroke: var(--lijn); stroke-width: 1; vector-effect: non-scaling-stroke; }
.lvvlak { fill: var(--vlak); stroke: none; }
.lvlijn { fill: none; stroke: var(--structuur); stroke-width: 2; vector-effect: non-scaling-stroke; }
/* Een klif is een streepje op de as. Vorm en plaats dragen de betekenis; de legenda eronder
   zegt in woorden wat het is, zodat kleur hier niets alleen draagt. */
.lvklif { stroke: var(--structuur); stroke-width: 3; vector-effect: non-scaling-stroke; }
.lvjij { stroke: var(--structuur); stroke-width: 1; stroke-dasharray: 4 3; vector-effect: non-scaling-stroke; }
.lvymerk {
  position: absolute;
  left: 0;
  width: 2.3rem;
  text-align: right;
  transform: translateY(-50%);
  font-size: var(--tekst-xs);
  color: var(--inkt-licht);
  font-variant-numeric: tabular-nums;
}
.lvjijmerk {
  position: absolute;
  top: 0.15rem;
  margin-left: var(--ruimte-2);
  white-space: nowrap;
  font-size: var(--tekst-xs);
  font-weight: 700;
  color: var(--structuur);
  background: var(--papier);
  padding: 0 var(--ruimte-1);
}
.lvjijmerk.lvjijlinks { transform: translateX(-100%); margin-left: calc(-1 * var(--ruimte-2)); }
.lvxas {
  display: flex;
  justify-content: space-between;
  margin-left: var(--ruimte-7);
  font-size: var(--tekst-xs);
  color: var(--inkt-licht);
  font-variant-numeric: tabular-nums;
}
.lvxas span:first-child { margin-left: calc(-1 * var(--ruimte-1)); }
.lvxas span:last-child { margin-right: calc(-1 * var(--ruimte-1)); }

/* ---- de randen in woorden */
table.lvranden { min-width: 30rem; }
table.lvranden th[scope="row"] { white-space: nowrap; font-variant-numeric: tabular-nums; }
table.lvranden .lvsprong { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
/* Het knikpunt dat vlak bij je eigen inkomen ligt. Salie is hier wat het overal is —
   een vlak — en de rij zegt daarnáást in woorden waaróm hij oplicht. */
table.lvranden tr.lvdichtbij { background: var(--vlak); }
table.lvranden tr.lvdichtbij th[scope="row"] { color: var(--structuur); }

.lvleeg {
  border-left: var(--noot-rand);
  padding: var(--ruimte-0) 0 var(--ruimte-0) var(--ruimte-4);
  margin: 0 0 var(--ruimte-6);
  color: var(--inkt-zacht);
  max-width: var(--leesbreed);
}

.loonvaldrie {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--ruimte-2) var(--ruimte-5);
  margin: var(--ruimte-4) 0 var(--ruimte-2);
}
.loonvaldeel { min-width: 0; }
.loonvaldeel h3 { font-size: var(--tekst-m); margin-bottom: var(--ruimte-1); }
.loonvaldeel p { font-size: var(--tekst-s); margin-top: 0; }
.loonvalnaardrempels { max-width: var(--leesbreed); font-size: var(--tekst-m); }

@media (max-width: 40rem) {
  .loonvalvraag,
  .loonvaluitleg,
  .loonvalbronnen,
  .lvblok { padding: var(--ruimte-4) var(--ruimte-4) var(--ruimte-5); }
  .lvkaartbedrag { font-size: var(--tekst-2xl); }
  .lvcurve { height: 190px; }
  .lvxas span:nth-child(even) { display: none; }

  /* De twee tabellen krimpen mee in plaats van opzij te schuiven. Ze bestaan uit korte
     bedragen en één tekstkolom, dus ze passen — en een kolom die je alleen ziet door te
     vegen, is een kolom die niemand leest. De uitwijk blijft staan: `.tabelwrap` schuift
     alsnog als het echt niet past. */
  table.lvposten,
  table.lvranden { min-width: 0; font-size: var(--tekst-xs); }
  table.lvposten th,
  table.lvposten td,
  table.lvranden th,
  table.lvranden td { padding: var(--ruimte-2) var(--ruimte-2); }
  table.lvposten thead th,
  table.lvranden thead th { white-space: normal; }
  .lvart { font-size: var(--tekst-xs); }
}

/* --------------------------------------------- je voorlopige aanslag inlezen

   Dezelfde banen als overal: wit is het grondvlak, dennengroen is tekst en structuur,
   salie is uitsluitend een vlak, en het accent is alleen wat je kunt aanklikken.
   Er komt hier dus geen vijfde kleur bij voor "zeker" en "onzeker".

   Dat onderscheid is op deze pagina juist het belangrijkste wat er staat, en het draagt
   daarom op WOORDEN en op VORM: elke post zegt in het merk ernaast waar zijn bedrag vandaan
   komt ("gelezen uit je document", "niet met zekerheid te lezen", "door jou ingevuld"), en
   een post zonder zekerheid krijgt de hairline en het vraagteken van het gedeelde
   noot-patroon. Zet je daar een rode of groene rand omheen, dan is kleur ineens wel de
   drager — en dat is precies de fout die het palet uitsluit.
   ------------------------------------------------------------------- */

.aanslagkiezen,
.aanslagvooraf,
.aanslagposten,
.aanslagplan,
.aanslaguitleg,
.aanslagbronnen {
  background: var(--papier);
  border: 1px solid var(--kaart-rand);
  border-radius: var(--radius);
  box-shadow: var(--schaduw);
  padding: var(--ruimte-5) var(--ruimte-5) var(--ruimte-6);
  margin-bottom: var(--ruimte-6);
}
@media (max-width: 34rem) {
  .aanslagkiezen,
  .aanslagvooraf,
  .aanslagposten,
  .aanslagplan,
  .aanslaguitleg,
  .aanslagbronnen { padding: var(--ruimte-4) var(--ruimte-4) var(--ruimte-5); }
}
.aanslagkiezen > h2,
.aanslagposten > h2,
.aanslagplan > h2,
.aanslaguitleg > h2,
.aanslagbronnen > h2 { margin-top: 0; font-size: var(--tekst-xl); }
.aanslagposten > h3,
.aanslagplan > h3 { font-size: var(--tekst-l); margin: var(--ruimte-6) 0 var(--ruimte-1); }
.aanslagbronnen p { max-width: var(--leesbreed); }
.aanslagvooraf[hidden],
.aanslagplan[hidden],
.aanslagposten[hidden] { display: none; }
/* Vóór het plan staat alleen wat er vóór moet: een melding over het document en je
   geboortejaar. Een smal vak, zonder eigen kop — het veld draagt zijn eigen label. */
.aanslagvooraf { padding-top: var(--ruimte-4); padding-bottom: var(--ruimte-4); }
.aanslagvooraf > .pblok:first-child,
.aanslagvooraf > .apostlijst:first-child { margin-top: 0; }
.aanslagvooraf > .apostlijst:first-child > .apost:first-child { padding-top: 0; }
.aanslagvooraf .apostlijst > .apost:last-child { padding-bottom: 0; }

/* ---- het kiezen van het bestand
   Het belangrijkste veld van de site, en dus het grootste: een vak met een gestippelde rand
   waar je het bestand ook op kunt laten vallen (dat doet het gewone bestandsveld van de browser
   zelf), met de oranje knop erin. Het blijft een gewoon <input type="file"> met een gewoon
   <label>: geen eigen sleepcode, dus ook niets dat met het toetsenbord anders werkt. */
.aanslagvak { margin-top: var(--ruimte-4); }
.aanslagvak > .veldrij:first-child {
  padding: var(--ruimte-4) var(--ruimte-4) var(--ruimte-4);
  background: var(--vlak-zacht);
  border: 2px dashed var(--vlak-lijn);
  border-radius: var(--radius);
}
.aanslagvak > .veldrij:first-child .veldlabel label {
  font-family: var(--font-kop);
  font-size: var(--tekst-l);
  font-weight: 700;
  color: var(--structuur);
}
.aanslagvak > .veldrij:first-child .veldhulp { margin-bottom: 0; }
.aanslagvak > .toolprivacy { margin: var(--ruimte-4) 0 var(--ruimte-5); }
input[type="file"] {
  display: block;
  width: 100%;
  max-width: none;
  margin: var(--ruimte-2) 0 var(--ruimte-2);
  font: inherit;
  font-size: var(--tekst-m);
  color: var(--inkt-zacht);
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
}
input[type="file"]::file-selector-button {
  font: inherit;
  font-size: var(--tekst-m);
  font-weight: 700;
  min-height: var(--knop-hoogte);
  margin-right: var(--ruimte-4);
  padding: var(--ruimte-2) var(--ruimte-5);
  border: 1px solid var(--knop-achter);
  border-radius: var(--radius-klein);
  background: var(--knop-achter);
  color: var(--knop-tekst);
  cursor: pointer;
  box-shadow: var(--schaduw);
}
input[type="file"]:hover::file-selector-button { background: var(--knop-achter-zweef); border-color: var(--knop-achter-zweef); }
input[type="file"]:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }

.aanslagstatus {
  /* Na een lezing schuift de pagina hierheen (`naarStatus()`); de focusrand hoort dan niet
     tegen de rand van het scherm te plakken. */
  scroll-margin-top: var(--ruimte-5);
  margin: var(--ruimte-4) 0 0;
  max-width: var(--leesbreed);
  font-size: var(--tekst-m);
  color: var(--inkt-zacht);
  min-height: 1.2em;
}
.aanslagstatus-goed,
.aanslagstatus-fout,
.aanslagstatus-bezig {
  border-left: var(--noot-rand-zwaar);
  padding: var(--ruimte-1) 0 var(--ruimte-1) var(--ruimte-4);
  font-weight: 600;
  color: var(--inkt);
}
.aanslagzelfregel {
  margin: var(--ruimte-5) 0 0;
  padding-top: var(--ruimte-4);
  border-top: 1px solid var(--lijn);
  font-size: var(--tekst-s);
  color: var(--inkt-zacht);
  max-width: var(--leesbreed);
}

/* ---- één post: wat er gevonden is, waar het stond, en wat jij ervan maakt */
.apostlijst { margin: var(--ruimte-4) 0 0; }
.apost {
  border-top: 1px solid var(--lijn);
  padding: var(--ruimte-3) 0 var(--ruimte-4);
}
.apost:first-child { border-top: none; }
.apostkop {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--ruimte-1) var(--ruimte-4);
}
.apostkop label { font-weight: 600; color: var(--structuur); }
.astand {
  font-size: var(--tekst-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--inkt-licht);
  white-space: nowrap;
}
/* Het merk van een gelezen bedrag staat op een salie vlak — een vlak, geen tekstkleur,
   precies zoals het palet voorschrijft. De andere twee standen dragen alleen hun woorden. */
.astand-gevonden {
  background: var(--vlak);
  color: var(--structuur);
  padding: var(--ruimte-0) var(--ruimte-2);
  border-radius: var(--radius-klein);
}
.apostveld { margin: var(--ruimte-2) 0 0; max-width: 16rem; }
/* De keuzevragen op de aanslagpagina: even hoog als de getalvelden ernaast, en groot genoeg om
   met een duim te raken. Zonder deze regel bleef de keuzelijst op 37 px (nagemeten op 390 px). */
.apostveld select { min-height: 44px; }
.invoerveldkaal { max-width: 9rem; }

.aherkomst,
.awaar {
  margin: var(--ruimte-2) 0 0;
  font-size: var(--tekst-s);
  color: var(--inkt-zacht);
  max-width: calc(var(--leesbreed) + 2rem);
}
.aherkomstkop,
.awaarkop,
.akandidatenkop {
  font-size: var(--tekst-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--inkt);
}
.aherkomst q { font-style: normal; }
.akandidaten {
  margin: var(--ruimte-2) 0 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ruimte-2);
  font-size: var(--tekst-s);
}
/* Een kandidaatknop is op deze pagina de MANIER om onzekerheid op te lossen, en geen
   bijzaak zoals de andere kleine knoppen op de site. Hij krijgt daarom een raakvlak dat
   met een duim te halen is; de gedeelde `.knopklein` blijft staan zoals hij is. */
.akandidaten .knopklein,
/* En de vangnetknop, om dezelfde reden: wie hier staat omdat het inlezen niet lukte, hoort
   niet op een knop van 33 px te moeten mikken. Beide bumps zijn met de hand nagemeten op
   390 px; de gedeelde `.knopklein` elders op de site blijft onveranderd. */
.aanslagzelfregel .knopklein { min-height: 44px; }

/* Het teken vóór een melding zonder zekerheid: hetzelfde rondje in de tekstkleur als bij
   het noot-patroon, en nooit de enige drager — de zin ernaast zegt het ook. */
.ateken {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25em;
  height: 1.25em;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-size: var(--tekst-m);
  line-height: 1;
  margin-right: var(--ruimte-1);
}
.aonzeker { color: var(--inkt); }

/* ---- de voorbeeldtekening van een voorlopige aanslag

   Vier banen, zoals overal: wit is het vlak van het papier, dennengroen is élke lijn en élke
   letter, salie is uitsluitend vlak (het afzenderblok, de tabelkop, de weggelaten
   nummers), en er komt geen accent in voor — je kunt hier niets aanklikken.

   Dat hij geen echt document is, draagt op VIER dingen tegelijk en niet op één: het merk
   bovenaan, het watermerk dwars over het vlak, de regel onderaan, en het bijschrift eronder.
   Kleur draagt daar niets van; ook wie de tekening niet ziet, leest het in het bijschrift. */
.aavoorbeeld {
  margin: var(--ruimte-5) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 18rem) minmax(0, 1fr);
  gap: var(--ruimte-2) var(--ruimte-5);
  align-items: start;
}
.aavoorbeeldsvg {
  display: block;
  width: 100%;
  max-width: 18rem;
  height: auto;
  min-width: 0;
}
.aavoorbeeld figcaption { min-width: 0; }
.aavoorbeeldkop,
.aavoorbeeldonder {
  margin: 0 0 var(--ruimte-2);
  font-size: var(--tekst-s);
  color: var(--inkt-zacht);
  max-width: var(--leesbreed);
}
.aavoorbeeldkop strong { color: var(--inkt); }
.aavoorbeeldonder { margin: var(--ruimte-2) 0 0; }
.aalegenda { list-style: none; margin: 0; padding: 0; }
.aalegenda li {
  display: flex;
  gap: var(--ruimte-2);
  margin-bottom: var(--ruimte-2);
  font-size: var(--tekst-s);
  color: var(--inkt-zacht);
  max-width: var(--leesbreed);
}
.aalegenda strong { color: var(--inkt); }
/* Hetzelfde rondje als in de tekening, zodat het nummer op beide plekken één ding is. */
.aalegendanr {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.45em;
  height: 1.45em;
  border: 1px solid var(--structuur);
  border-radius: 50%;
  color: var(--structuur);
  font-size: var(--tekst-xs);
  font-weight: 700;
}

.aapapier { fill: var(--papier); stroke: var(--structuur); stroke-width: 1.2; }
.aavlak { fill: var(--vlak); }
.aalijn { stroke: var(--structuur); stroke-width: 1; }
.aalijnfijn { stroke: var(--vlak-lijn); stroke-width: 0.8; }
.aakop { fill: var(--structuur); font-size: 17px; font-weight: 700; }
.aakop2 { fill: var(--structuur); font-size: 12px; font-weight: 700; }
.aatekst { fill: var(--structuur); font-size: 10.5px; }
.aatekstklein { fill: var(--structuur); font-size: 9px; }
.aabedrag { fill: var(--structuur); font-size: 10.5px; text-anchor: end; font-variant-numeric: tabular-nums; }
.aabedragdik { fill: var(--structuur); font-size: 12px; font-weight: 700; text-anchor: end; font-variant-numeric: tabular-nums; }
.aamidden { text-anchor: middle; }
.aarechts { text-anchor: end; }
/* Het merk bovenaan is een omlijnd vlak met een onderbroken rand: geen enkel echt formulier
   draagt zoiets, en dat is precies de bedoeling. */
.aabadge { fill: var(--papier); stroke: var(--structuur); stroke-width: 1.2; stroke-dasharray: 5 3; }
.aabadgetekst { fill: var(--structuur); font-size: 10px; font-weight: 700; letter-spacing: 0.1em; }
.aamerkcirkel { fill: var(--papier); stroke: var(--structuur); stroke-width: 1.2; }
.aamerktekst { fill: var(--structuur); font-size: 11px; font-weight: 700; text-anchor: middle; }
.aawatermerk {
  fill: var(--structuur);
  opacity: 0.14;
  font-size: 34px;
  font-weight: 700;
  letter-spacing: 0.12em;
}

@media (max-width: 52rem) {
  /* Onder de tekening in plaats van ernaast, en dan mag hij ook breder: op een telefoon is
     een tekening van 18 rem naast een kolom tekst geen tekening meer maar een postzegel. */
  .aavoorbeeld { grid-template-columns: minmax(0, 1fr); }
  .aavoorbeeldsvg { max-width: 22rem; margin: 0 auto; }
}

.aanslagdoor {
  margin: var(--ruimte-6) 0 0;
  padding-top: var(--ruimte-4);
  border-top: 1px solid var(--lijn);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ruimte-2) var(--ruimte-4);
}
.aanslagdoornaast { font-size: var(--tekst-s); color: var(--inkt-zacht); }

/* ---- het plan */
.anu,
.akansen,
.avergelijk,
.aranglijst,
.aherkomstblok,
.anaartool { margin-top: var(--ruimte-6); }
.anu > h3,
.akansen > h3,
.avergelijk > h3,
.aranglijst > h3,
.aherkomstblok > h3,
.anaartool > h3 { font-size: var(--tekst-l); margin: 0 0 var(--ruimte-1); }

table.anutabel { min-width: 0; }
table.anutabel th[scope="row"] { font-weight: 400; }
table.anutabel td { text-align: right; font-variant-numeric: tabular-nums; }
.anusaldo th, .anusaldo td { font-weight: 700; border-top: 2px solid var(--lijn-sterk); }
/* De twee inkomensregels bovenaan tellen niet mee in de optelsom eronder; een lijn zet ze apart. */
table.anutabel tbody + tbody tr:first-child th,
table.anutabel tbody + tbody tr:first-child td { border-top: 2px solid var(--lijn-sterk); }
.anuvoorbehoud {
  margin: var(--ruimte-3) 0 0;
  font-size: var(--tekst-s);
  color: var(--inkt-zacht);
  max-width: var(--leesbreed);
}

table.avergelijktabel td,
table.auitkomst td { font-variant-numeric: tabular-nums; }
/* Een rij die fors afwijkt wordt ZWAARDER gezet en niet gekleurd: de zin eronder telt ze,
   en de tabel blijft leesbaar voor wie kleur niet ziet. */
tr.aver th, tr.aver td { font-weight: 700; }
tr.aver th[scope="row"]::after {
  content: " — wijkt af";
  font-weight: 400;
  font-size: var(--tekst-xs);
  color: var(--inkt-zacht);
}
.aversom { color: var(--inkt); }

.rangbron {
  display: block;
  font-size: var(--tekst-xs);
  color: var(--inkt-zacht);
  margin-top: var(--ruimte-0);
}
/* Het eindbeeld: voorlopige aanslag, onze uitkomst, na de stappen — het antwoord op de vraag
   waarmee de bezoeker kwam, en daarom het enige blok van de uitkomst met een eigen vlak. Het is
   een tijdlijn: een lijn links met een punt per regel, het begin (je voorlopige aanslag) als open
   rondje en het eindpunt (na de stappen) als gevuld rondje, beide groter gezet. Daartussen de
   stappen als witte kaartjes met drie opschriften. De betekenis blijft in de woorden ("terug",
   "bijbetalen") — de punten en de maat zeggen alleen wat begin en eind is. */
.eindbeeld {
  margin: var(--ruimte-4) 0 var(--ruimte-5);
  padding: var(--ruimte-4) var(--ruimte-4) var(--ruimte-4);
  background: var(--vlak-zacht);
  border: 1px solid var(--vlak-lijn);
  border-radius: var(--radius);
}
.eindbeeld h3, .eindbeeld h4 {
  margin: 0 0 var(--ruimte-4);
  font-family: var(--font-kop);
  font-size: var(--tekst-xl);
  text-transform: none;
  letter-spacing: 0;
  color: var(--structuur);
}
.eindbeeldregels {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 46rem;
}
.eindbeeldregels > li {
  position: relative;
  margin: 0;
  padding: 0 0 var(--ruimte-3) var(--ruimte-6);
  max-width: none;
}
/* De lijn van de tijdlijn: loopt door tot de volgende regel. */
.eindbeeldregels > li::after {
  content: "";
  position: absolute;
  left: 0.5rem;
  top: 0.95rem;
  bottom: -0.25rem;
  border-left: 2px solid var(--vlak-lijn);
}
.eindbeeldregels > li:last-child::after { display: none; }
/* Het punt per regel. */
.eindbeeldregels > li::before {
  content: "";
  position: absolute;
  z-index: 1;
  left: 0.2rem;
  top: 0.45rem;
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  background: var(--papier);
  border: 2px solid var(--structuur-lijn);
}
.eindbeeld-voorlopig,
.eindbeeld-na {
  font-size: var(--tekst-l);
  font-weight: 700;
  line-height: 1.4;
  color: var(--inkt);
}
.eindbeeldregels > .eindbeeld-voorlopig::before,
.eindbeeldregels > .eindbeeld-na::before {
  left: 0;
  top: 0.3rem;
  width: 1.1rem;
  height: 1.1rem;
  border: 3px solid var(--structuur);
}
.eindbeeldregels > .eindbeeld-na::before { background: var(--structuur); }
.eindbeeld-verschil { font-weight: 700; }
.eindbeeld-werkgever, .eindbeeld-aanvraag, .eindbeeld-band, .eindbeeld-ernaast, .eindbeeld-toeslag {
  color: var(--inkt-zacht);
  font-size: var(--tekst-m);
}
.eindbeeldregels > :is(.eindbeeld-werkgever, .eindbeeld-aanvraag, .eindbeeld-band, .eindbeeld-ernaast, .eindbeeld-toeslag)::before {
  width: 0.5rem;
  height: 0.5rem;
  left: 0.3rem;
  top: 0.55rem;
  border-width: 2px;
  border-color: var(--vlak-lijn);
  background: var(--vlak-lijn);
}
/* De stappen hangen aan de regel "na de stappen" erboven en hebben zelf geen punt. */
.eindbeeldregels > .eindbeeldstappen::before { display: none; }
.eindbeeldstappen ol {
  list-style: none;
  margin: var(--ruimte-0) 0 var(--ruimte-1);
  padding: 0;
  counter-reset: ebstap;
}
.ebstap {
  counter-increment: ebstap;
  margin: 0 0 var(--ruimte-2);
  padding: var(--ruimte-3) var(--ruimte-4) var(--ruimte-3);
  background: var(--papier);
  border: 1px solid var(--lijn);
  border-radius: var(--radius-klein);
  box-shadow: var(--schaduw);
  max-width: none;
}
.ebstapactie { margin: 0 0 var(--ruimte-2); font-size: var(--tekst-m); line-height: 1.4; }
.ebstapactie::before {
  content: "Stap " counter(ebstap) " · ";
  font-weight: 700;
  color: var(--structuur);
}
.ebstapfeiten {
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--ruimte-2) var(--ruimte-4);
  font-size: var(--tekst-s);
}
@media (min-width: 40rem) {
  .ebstapfeiten { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr) minmax(0, 1.4fr); }
}
.ebstapfeiten dt {
  font-size: var(--tekst-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--inkt-licht);
}
.ebstapfeiten dd { margin: var(--ruimte-0) 0 0; color: var(--inkt); font-variant-numeric: tabular-nums; }
.ebstapscheelt dd { font-weight: 700; }
.eindwerkgever { margin-top: var(--ruimte-1); }

/* -------------------------------------------------------------- dit kun je wél doen
   Bij een kopbedrag van € 0, direct onder "In één oogopslag" (AANSLAGNULRONDE-2026-09.md). Een
   wit kaartje op het salievlak van het eindbeeld, zoals een stap: een kop in de kopletter, en per
   ding dat je wél kunt doen een rond pictogram (salie vlak, dennengroene lijn), de titel, het bedrag
   in de bedragkleur en een korte uitleg. Geen optelling en dus geen totaalregel. De knop bij de
   lijfrente is een omlijnde knop: de ene oranje knop hoort bij het meenemen. */
.weldoen {
  margin: 0 0 var(--ruimte-5);
  padding: var(--ruimte-4);
  background: var(--papier);
  border: 1px solid var(--lijn);
  border-radius: var(--radius);
  box-shadow: var(--schaduw);
}
.weldoen .weldoenkop {
  margin: 0 0 var(--ruimte-3);
  font-family: var(--font-kop);
  font-size: var(--tekst-l);
  font-weight: 700;
  line-height: 1.35;
  text-transform: none;
  letter-spacing: 0;
  color: var(--structuur);
  max-width: var(--leesbreed);
}
.weldoenlijst { list-style: none; margin: 0; padding: 0; }
/* Op een telefoon staat het pictogram alleen naast de titel en het bedrag, en krijgt de rest de
   volle breedte; breder schuift alles in onder de titel. `.weldoeninhoud` doet daarvoor niet mee
   in de opmaak (`display: contents`): het is een kale div zonder rol. */
.weldoenregel {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--ruimte-2) var(--ruimte-3);
  align-items: start;
  margin: 0;
  padding: var(--ruimte-3) 0;
  border-top: 1px solid var(--lijn);
  max-width: none;
}
.weldoeninhoud { display: contents; }
.weldoenhoofd { grid-column: 2; align-self: center; }
.weldoentekst, .weldoennoot, .weldoenactie, .weldoenplek { grid-column: 1 / -1; }
@media (min-width: 40rem) {
  .weldoentekst, .weldoennoot, .weldoenactie, .weldoenplek { grid-column: 2; }
}
.weldoenregel:first-child { border-top: 0; padding-top: 0; }
.weldoenregel:last-child { padding-bottom: 0; }
.weldoenrond {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--vlak);
  color: var(--structuur);
}
.weldoenrond svg { width: 1.35rem; height: 1.35rem; }
.weldoenhoofd {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--ruimte-0) var(--ruimte-3);
  margin: 0;
  max-width: none;
}
.weldoentitel { font-weight: 700; color: var(--inkt); }
.weldoenbedrag {
  font-size: var(--tekst-l);
  font-weight: 700;
  color: var(--bedrag);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.weldoentekst { margin: 0; font-size: var(--tekst-s); color: var(--inkt-zacht); max-width: var(--leesbreed); }
.weldoennoot {
  margin: 0;
  padding: var(--ruimte-0) 0 var(--ruimte-0) var(--ruimte-3);
  border-left: var(--noot-rand);
  font-size: var(--tekst-s);
  color: var(--inkt-zacht);
  max-width: var(--leesbreed);
}
.weldoenactie { margin: var(--ruimte-1) 0 0; }
/* Het pijltje zegt of de vraag open of dicht is; aria-expanded zegt het de schermlezer. */
.weldoenknop::after {
  content: "";
  width: 0.45em;
  height: 0.45em;
  border: solid currentColor;
  border-width: 0 2px 2px 0;
  transform: translateY(-0.15em) rotate(45deg);
}
.weldoenknop[aria-expanded="true"] { border-color: var(--structuur); background: var(--vlak-zacht); }
.weldoenknop[aria-expanded="true"]::after { transform: translateY(0.1em) rotate(-135deg); }
/* De pensioenvraag zelf, bij de lijfrente in het plan: de gewone aanvulvragen in een zacht salie
   vak, zodat je ziet dat ze bij deze regel horen. Onder de pensioenvraag (bij de aanvulvragen)
   staat hetzelfde vak zonder kader. */
.weldoenplek .apensioenvak {
  margin: 0;
  padding: var(--ruimte-1) var(--ruimte-3) var(--ruimte-3);
  background: var(--vlak-zacht);
  border: 1px solid var(--vlak-lijn);
  border-radius: var(--radius-klein);
}
.weldoenplek .apensioenvak .invoerveldkaal > select { min-width: 0; width: 100%; max-width: 20rem; }
.ebstap .weldoenplek .apensioenvak, .eindbeeld-band .weldoenplek .apensioenvak { margin-top: var(--ruimte-3); }
.eindbeeldregels > .eindbeeld-band .weldoenactie { margin-top: var(--ruimte-2); }

/* Bij € 0 geen groot getal meer onder "Wat je mogelijk laat liggen", maar de weg naar wat je
   wél kunt doen — in de gewone tekstmaat, niet als bijschrift. */
.eindtotaal.eindtotaalnul { padding: var(--ruimte-4) 0; }
.eindtotaal.eindtotaalnul p:last-child { margin: 0; font-size: var(--tekst-m); color: var(--inkt); max-width: var(--leesbreed); }

/* -------------------------------------------------------------- je kansen op de aanslagpagina
   De haalbare kansen van de rekentool, met hun bedrag per eenheid. Witte kaartjes zoals de
   kansen in de rekentool, op een telefoon onder elkaar en breder twee naast elkaar; het
   voorbehoud ("telt niet mee") is een noot en staat bovenaan. */
.akansenintro {
  margin: 0 0 var(--ruimte-3);
  padding: var(--ruimte-0) 0 var(--ruimte-0) var(--ruimte-3);
  border-left: var(--noot-rand);
  font-size: var(--tekst-s);
  color: var(--inkt-zacht);
  max-width: var(--leesbreed);
}
.akansenlijst {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--ruimte-3);
}
@media (min-width: 48rem) {
  .akansenlijst { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.akans {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: var(--ruimte-4);
  background: var(--papier);
  border: 1px solid var(--lijn);
  border-radius: var(--radius);
  box-shadow: var(--schaduw);
  max-width: none;
}
/* De titel, en daaronder altijd op een eigen regel wie je het vraagt. */
.akanskop {
  display: grid;
  justify-items: start;
  gap: var(--ruimte-1);
  margin: 0 0 var(--ruimte-2);
  max-width: none;
}
.akanstitel { font-weight: 700; color: var(--inkt); }
.akansbedrag { margin: 0 0 var(--ruimte-3); font-size: var(--tekst-s); color: var(--inkt-zacht); }
.akansbedrag strong {
  font-size: var(--tekst-l);
  font-weight: 700;
  color: var(--bedrag);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.akanstekst { margin: 0 0 var(--ruimte-2); font-size: var(--tekst-s); color: var(--inkt); }
.akansactie { margin: 0 0 var(--ruimte-3); }
.akansbron { margin: auto 0 0; font-size: var(--tekst-xs); color: var(--inkt-licht); }
.akansenmee {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ruimte-2) var(--ruimte-3);
  margin: var(--ruimte-4) 0 0;
}
.akansenmeenaast { font-size: var(--tekst-s); color: var(--inkt-licht); }
.analoop .anlooplijst { padding-left: var(--ruimte-4); max-width: var(--leesbreed); }
.analoop .anlooplijst li { margin: var(--ruimte-2) 0; }

/* =========================================================================
   Fase 1 van de aanslagroute — de samenhangtoets, de VA-check, je aanslag regel voor regel
   en de gesprekslijst voor je boekhouder. Geen nieuwe kleur en geen nieuwe maat: elk vlak,
   elke rand en elke letter komt uit de tokens hierboven, en elk blok volgt een patroon dat de
   pagina al kende (noot, eindbeeldkaartje, tabelvak, kaart).
   ========================================================================= */

/* De optellingen kloppen: een noot, net als de andere meldingen boven de posten, met het
   vinkje als teken. Het woord "kloppen" draagt de betekenis, niet de kleur. */
.asamenhang {
  border-left: var(--noot-rand);
  padding: var(--ruimte-0) 0 var(--ruimte-0) var(--ruimte-4);
  margin: var(--ruimte-4) 0;
  font-size: var(--tekst-m);
  color: var(--inkt);
  max-width: calc(var(--leesbreed) + 1rem);
}
.asamenhang .ateken { color: var(--structuur); font-weight: 700; }

/* De VA-check in het eindbeeld: een wit kaartje op de tijdlijn, zoals een stap, met een
   opschrift in kapitalen. Het is de regel die een ondernemer hier komt zoeken. */
.ebvacheck {
  padding: var(--ruimte-3) var(--ruimte-4) var(--ruimte-3);
  line-height: 1.5;
  background: var(--papier);
  border: 1px solid var(--lijn);
  border-radius: var(--radius-klein);
  box-shadow: var(--schaduw);
}
.ebvacheck .ebopschrift {
  display: block;
  margin: 0 0 var(--ruimte-1);
  font-size: var(--tekst-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--structuur);
}
/* Het punt op de tijdlijn staat bij het opschrift van het kaartje, niet ernaast. */
.eindbeeldregels > .eindbeeld-vacheck::before { top: 1.1rem; }
/* Dat punt staat lager dan bij de andere regels; de lijn begint daarom bovenaan het kaartje, anders
   zit er vlak boven het punt een gat in de tijdlijn. */
.eindbeeldregels > .eindbeeld-vacheck::after { top: 0; }

/* Je aanslag, regel voor regel: een wit vak zoals een tabel, met per regel het opschrift en
   het bedrag op één lijn (het bedrag rechts, in tabelcijfers) en de uitleg eronder. Geen
   kolommen: de uitleg is lopende tekst, en die hoort op een telefoon niet buiten beeld te
   vallen. */
.aregellijst {
  list-style: none;
  margin: var(--ruimte-2) 0 var(--ruimte-4);
  padding: 0;
  background: var(--papier);
  border: 1px solid var(--lijn);
  border-radius: var(--radius);
  overflow: hidden;
}
.aregel {
  margin: 0;
  padding: var(--ruimte-3) var(--ruimte-4) var(--ruimte-3);
  border-top: 1px solid var(--lijn);
  max-width: none;
}
.aregel:first-child { border-top: none; }
.aregelkop {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--ruimte-0) var(--ruimte-4);
}
.aregellabel { font-weight: 700; color: var(--inkt); }
.aregelbedrag {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--structuur);
  white-space: nowrap;
  margin-left: auto;
}
.aregeltekst {
  margin: var(--ruimte-1) 0 0;
  font-size: var(--tekst-m);
  color: var(--inkt-zacht);
  max-width: var(--leesbreed);
}
.aregelonbekend { font-style: italic; }
.aregelonze {
  margin: var(--ruimte-1) 0 0;
  font-size: var(--tekst-s);
  font-weight: 700;
  color: var(--inkt);
  font-variant-numeric: tabular-nums;
}
.aregel .rangbron { margin-top: var(--ruimte-1); }
.aregel .aonzeker { margin: var(--ruimte-2) 0 0; }

/* Twee ingeklapte blokken op de aanslagpagina: de posten die niet op je aanslag stonden, en de
   uitleg regel voor regel. Dezelfde vorm als de kansgroepen in de rekentool — een regel met een
   pijltje in de accentkleur, want openklappen is iets wat je aanklikt — en minstens 44 px hoog. */
.anietgevonden, .aregelsvouw { margin: var(--ruimte-4) 0; border-top: 1px solid var(--lijn); border-bottom: 1px solid var(--lijn); }
.anietgevonden > summary, .aregelsvouw > summary {
  cursor: pointer;
  list-style: none;
  min-height: 44px;
  font-weight: 600;
  color: var(--inkt);
  padding: var(--ruimte-3) 0;
  display: flex;
  align-items: center;
  gap: var(--ruimte-2);
}
.anietgevonden > summary::-webkit-details-marker, .aregelsvouw > summary::-webkit-details-marker { display: none; }
.anietgevonden > summary::before, .aregelsvouw > summary::before {
  content: "\203A";
  font-size: var(--tekst-m);
  line-height: 1;
  color: var(--accent);
  display: inline-block;
  transition: transform 0.12s;
}
.anietgevonden[open] > summary::before, .aregelsvouw[open] > summary::before { transform: rotate(90deg); }
.anietgevonden > summary:hover, .aregelsvouw > summary:hover { color: var(--structuur); }
.anietgevonden > .apostlijst { margin-top: 0; }
.aregelsvouw[open] { border-bottom: none; }

/* De gesprekslijst voor je boekhouder: een kaart, met de kop in de kopletter zoals het
   eindbeeld, drie opschriften in kapitalen, en de drukknop als tweede knop onderaan. */
.gesprekslijst {
  margin: var(--ruimte-5) 0;
  padding: var(--ruimte-4) var(--ruimte-4) var(--ruimte-4);
  background: var(--papier);
  border: 1px solid var(--kaart-rand);
  border-radius: var(--radius);
  box-shadow: var(--schaduw);
}
.gesprekslijst > h3 {
  margin: 0 0 var(--ruimte-2);
  font-family: var(--font-kop);
  font-size: var(--tekst-xl);
  color: var(--structuur);
}
/* Geen kindselector: elke kop staat met zijn lijst in een eigen blok (.gesprekdeel), zodat hij
   op papier niet los van zijn punten komt te staan. */
.gesprekslijst h4 {
  margin: var(--ruimte-4) 0 var(--ruimte-2);
  padding-top: var(--ruimte-3);
  border-top: 1px solid var(--lijn);
  font-size: var(--tekst-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--structuur);
}
.gesprekzinnen, .gesprekmee { margin: 0; padding-left: var(--ruimte-4); max-width: var(--leesbreed); }
.gesprekzinnen li, .gesprekmee li { margin: var(--ruimte-2) 0; }
.gesprekpunten { margin: 0; padding-left: var(--ruimte-5); max-width: var(--leesbreed); }
.gesprekpunten > li { margin: 0 0 var(--ruimte-3); padding-left: var(--ruimte-1); }
.gesprekpunten > li::marker { font-weight: 700; color: var(--structuur); }
.gesprekpunt { margin: 0; }
.gesprekbedrag {
  margin: var(--ruimte-0) 0 0;
  font-size: var(--tekst-s);
  font-weight: 700;
  color: var(--inkt);
  font-variant-numeric: tabular-nums;
}
.gesprekbv { margin-top: var(--ruimte-4); }
.gesprekdatum { margin: var(--ruimte-1) 0 0; font-size: var(--tekst-s); font-weight: 700; color: var(--inkt); }
.gesprekdruk {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ruimte-2) var(--ruimte-4);
  margin: var(--ruimte-4) 0 var(--ruimte-1);
  padding-top: var(--ruimte-4);
  border-top: 1px solid var(--lijn);
  max-width: none;
}
.gesprekdruk .aanslagdoornaast { font-size: var(--tekst-s); color: var(--inkt-zacht); }
@media (max-width: 40rem) {
  .gesprekslijst { padding: var(--ruimte-4) var(--ruimte-4) var(--ruimte-4); }
  .gesprekdruk .knopklein { width: 100%; justify-content: center; }
  .aregel { padding: var(--ruimte-3) var(--ruimte-3) var(--ruimte-3); }
}

/* Het risico per punt op de aanslagpagina. Geen kleur: het opschrift draagt de betekenis. */
.rangrisico {
  display: block;
  font-weight: 400;
  font-size: var(--tekst-xs);
  color: var(--inkt-zacht);
  margin-top: var(--ruimte-1);
}
.rangrisicokop { font-weight: 700; }
/* Het eindbedrag wijkt af: de zwaarste van de meldingen onder de vergelijking. */
.aversomeind { font-weight: 700; }
.aleeg { max-width: var(--leesbreed); color: var(--inkt-zacht); }

.aanslagdrie {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--ruimte-2) var(--ruimte-5);
  margin: var(--ruimte-4) 0 var(--ruimte-2);
}
.aanslagdeel { min-width: 0; }
.aanslagdeel h3 { font-size: var(--tekst-m); margin-bottom: var(--ruimte-1); }
.aanslagdeel p { font-size: var(--tekst-s); margin-top: 0; }

@media (max-width: 40rem) {
  .aanslagkiezen,
  .aanslagvooraf,
  .aanslagposten,
  .aanslagplan,
  .aanslaguitleg,
  .aanslagbronnen { padding: var(--ruimte-4) var(--ruimte-4) var(--ruimte-5); }
  .apostkop { flex-direction: column; align-items: flex-start; }
  .astand { white-space: normal; }
  .apostveld { max-width: none; }
  table.anutabel,
  table.avergelijktabel,
  table.auitkomst,
  table.aherkomsttabel { min-width: 0; font-size: var(--tekst-xs); }
}

/* =========================================================================
   Je aanslag mee naar de rekentool — de knop op aanslag.html en wat er in de
   rekentool van terugkomt. Geen nieuwe kleur: het merk "uit je aanslag" staat op
   hetzelfde saliekleurige vlak als het merk "gelezen uit je document" op de
   aanslagpagina, zodat het op beide plekken één ding is; wat onzeker bleef, draagt
   het vraagteken en de hairline van het noot-patroon. Betekenis staat telkens ook
   in woorden.
   ========================================================================= */

/* ---- op de aanslagpagina: wat gaat er mee */
.aanslagmee { margin-top: var(--ruimte-6); }
.aanslagmee > h3 { font-size: var(--tekst-l); margin: 0 0 var(--ruimte-1); }
.ameeblok { margin: var(--ruimte-4) 0 0; }
.ameeblok > h4 {
  font-size: var(--tekst-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--inkt);
  margin: var(--ruimte-4) 0 var(--ruimte-1);
}
.ameelijst { list-style: none; margin: 0; padding: 0; max-width: calc(var(--leesbreed) + 2rem); }
.ameelijst li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--ruimte-0) var(--ruimte-2);
  padding: var(--ruimte-1) 0;
  border-top: 1px solid var(--lijn);
  font-size: var(--tekst-s);
  color: var(--inkt-zacht);
}
.ameelijst li:first-child { border-top: none; }
.ameelabel { font-weight: 600; color: var(--inkt); }
.ameewaarde { font-variant-numeric: tabular-nums; color: var(--inkt); }
.ameeherkomst { font-size: var(--tekst-s); }
.ameenoot,
.ameegeen,
.anaartoolmee { font-size: var(--tekst-s); color: var(--inkt-zacht); max-width: var(--leesbreed); margin: var(--ruimte-2) 0 0; }
.ameebestaand,
.ameemelding {
  border-left: var(--noot-rand);
  padding: var(--ruimte-0) 0 var(--ruimte-0) var(--ruimte-4);
  margin: var(--ruimte-4) 0 0;
  font-size: var(--tekst-s);
  color: var(--inkt);
  max-width: calc(var(--leesbreed) + 1rem);
}
.ameemelding[hidden] { display: none; }

/* ---- in de rekentool: onder elk veld dat meekwam, waar het vandaan komt */
.aanslagnoot {
  margin: var(--ruimte-2) 0 0;
  font-size: var(--tekst-s);
  color: var(--inkt-zacht);
  max-width: calc(var(--leesbreed) + 2rem);
}
.aanslagnootkop,
.aanslagkandidatenkop {
  font-size: var(--tekst-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--inkt);
  margin-right: var(--ruimte-1);
}
.aanslagnoot-gelezen .aanslagnootkop,
.aanslagnoot-gekozen .aanslagnootkop {
  background: var(--vlak);
  color: var(--structuur);
  padding: var(--ruimte-0) var(--ruimte-2);
  border-radius: var(--radius-klein);
}
/* Wat onzeker bleef, is een vraag aan de bezoeker: hairline plus vraagteken, net als
   `.aonzeker` op de aanslagpagina. */
.aanslagnoot-onzeker,
.aanslagnoot-nietgevonden {
  border-left: var(--noot-rand);
  padding-left: var(--ruimte-3);
  color: var(--inkt);
}
.aanslagnoot-onzeker .aanslagnootkop::before {
  content: "?";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25em;
  height: 1.25em;
  margin-right: var(--ruimte-1);
  border: 1px solid currentColor;
  border-radius: 50%;
  letter-spacing: 0;
}
.aanslagkandidaten {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ruimte-2);
  margin-top: var(--ruimte-2);
}
/* Dezelfde reden als op de aanslagpagina: hier is de knop de manier om de onzekerheid op te
   lossen, dus een raakvlak van 44 px. De gedeelde `.knopklein` blijft elders onveranderd. */
.aanslagkandidaten .knopklein { min-height: 44px; }

/* ---- in de rekentool: het overzicht boven de vragen */
.herstelmelding.aanslagovername { color: var(--inkt-zacht); }
.aanslagovername > h2 { font-size: var(--tekst-l); margin: 0 0 var(--ruimte-2); }
/* De kop krijgt de focus bij aankomst, zodat een schermlezer hem als eerste hoort. Het is
   geen bediening, dus er hoort geen focusrand omheen. */
.aanslagovername > h2:focus { outline: none; }
.aanslagovername > h3 {
  font-size: var(--tekst-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--inkt);
  margin: var(--ruimte-4) 0 var(--ruimte-2);
}
.overnamelijst,
.overnamestappen { list-style: none; margin: 0; padding: 0; }
.overnamelijst li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ruimte-1) var(--ruimte-2);
  margin-bottom: var(--ruimte-2);
}
.overnamewaarde { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--inkt); }
.overnameherkomst { font-size: var(--tekst-s); }
.overnamelabel { font-weight: 600; color: var(--inkt); }
.overnamestappen li {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--ruimte-1) var(--ruimte-2);
  margin-bottom: var(--ruimte-2);
}
.overnamestappen .mistknop { font-weight: 600; }
/* De eerste regel tekst op de hoogte van de tekst in de knop ernaast, ook als hij over
   meer regels doorloopt. */
.overnamevragen { flex: 1 1 18rem; min-width: 0; font-size: var(--tekst-s); padding-top: var(--ruimte-3); }
.overnamewis {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ruimte-2) var(--ruimte-3);
  margin-top: var(--ruimte-4) !important;
}
.overnamewis .knopklein { min-height: 44px; }

/* =========================================================================
   De beleving — grafieken, beweging en aanraking (september 2026)

   Op verzoek van de opdrachtgever een levendige, interactieve laag bovenop de nieuwe look:
   de uitkomst in één oogopslag als grafiek, bedragen die optellen, blokken die bij het
   scrollen in beeld schuiven, een voortgangsstreep, en knoppen en kaarten die reageren op
   aanwijzen en aantikken. BELEVINGRONDE-2026-09.md draagt de verantwoording.

   Drie regels, en ze gaan vóór de beleving:
     1. WIE MINDER BEWEGING VRAAGT, ZIET ALLES MEETEN. Alles wat bij het scrollen verschijnt of
        opbouwt, is alleen verborgen onder `.beweegt` — die klasse zet beweging.js, en alleen als
        er bewogen mag worden. Zonder javascript, bij minder beweging en op papier staat alles er.
     2. ELK BEDRAG STAAT OOK ALS TEKST. Een balk is de vorm van een bedrag dat ernaast staat.
     3. ALLEEN TRANSFORM EN OPACITY BEWEGEN — geen breedte of hoogte die de opmaak laat
        verspringen. De balken van de grafieken verschijnen met een clip-path.
   ========================================================================= */

/* ---- onthullen bij het scrollen
   De verborgen stand is ALLEEN doorzichtig, niet verschoven: een sprong naar een anker of een
   stap rekent met de plek van het element, en die hoort de echte plek te zijn. Het omhoog
   schuiven zit in een animatie die pas bij het binnenkomen loopt en daarna niets achterlaat —
   zo houdt een kaart ook haar eigen beweging bij aanwijzen. */
@keyframes onthulin { from { transform: translate3d(0, 28px, 0) scale(0.985); } }
.beweegt .onthul {
  opacity: 0;
  transition: opacity 0.8s var(--uit);
  transition-delay: calc(var(--onthul-i, 0) * 90ms);
}
.beweegt .onthul.zichtbaar {
  opacity: 1;
  animation: onthulin 0.8s var(--uit) backwards;
  animation-delay: calc(var(--onthul-i, 0) * 90ms);
}

/* ---- de voortgangsstreep bovenin: hoe ver je op de pagina bent */
.scrollstreep {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
  height: 4px;
  background: linear-gradient(90deg, var(--accent), var(--zon));
  transform: scaleX(0);
  transform-origin: 0 50%;
  pointer-events: none;
}

/* Een bedrag dat optelt, houdt zijn breedte: cijfers van gelijke breedte, zodat de regel niet
   heen en weer schuift terwijl het getal loopt. */
.telt { font-variant-numeric: tabular-nums; }

/* ---- aanraking: knoppen en kaarten reageren */
.knop,
.knopklein {
  transition: background-color 0.15s, border-color 0.15s, color 0.15s, transform 0.25s var(--veer), box-shadow 0.25s var(--uit);
}
.knop:active,
.knopklein:active { transform: translateY(0) scale(0.97); transition-duration: 0.08s; }
.knoppijl { display: inline-block; transition: transform 0.3s var(--veer); }
.startkaart,
.ingang,
.startnaslaglijst a,
.lijstkaart {
  transition: transform 0.35s var(--veer), box-shadow 0.35s var(--uit), border-color 0.2s, background-color 0.2s;
}
.startkaartactie { transition: letter-spacing 0.3s var(--uit); }
@media (hover: hover) {
  .knop:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(179, 68, 11, 0.3); }
  .knopklein:hover { transform: translateY(-1px); }
  .knop:hover .knoppijl { transform: translateX(5px); }
  .startkaart:hover,
  .ingang:hover { transform: translateY(-6px); box-shadow: var(--schaduw-til); }
  .startkaart:hover .startkaartactie { letter-spacing: 0.02em; }
  .startnaslaglijst a:hover { transform: translateY(-3px); box-shadow: var(--schaduw); }
  .lijstkaart:hover { transform: translateY(-3px); box-shadow: var(--schaduw-til); }
}
@keyframes plop { 40% { transform: scale(1.08); } }
.beweegt .poortknop input:checked + span,
.beweegt .radiokeuze input:checked + span { display: inline-block; animation: plop 0.35s var(--veer); }

/* ---- de rekentool: een stap schuift binnen, de stappenrij volgt */
@keyframes stapin { from { opacity: 0; transform: translate3d(32px, 0, 0); } }
.beweegt .stap.actief { animation: stapin 0.5s var(--uit) both; }
.stapknop { transition: background-color 0.25s, color 0.25s, border-color 0.25s, transform 0.3s var(--veer); }
.beweegt .stapknop.aan { transform: scale(1.05); }
/* De stap waar je bent, ook in de hoog-contrastmodus: daar valt het vlak weg, dus krijgt hij
   een rand en een onderstreping, die blijven wel staan. */
@media (forced-colors: active) {
  .stapknop[aria-current="step"] { outline: 3px solid CanvasText; text-decoration: underline; }
}
/* Waar een sprong landt, blijft de kop van de stap net vrij van de bovenrand. */
.stap > h2 { scroll-margin-top: var(--ruimte-4); }

/* =========================================================================
   De grafieken (src/grafiek.js)

   Elke grafiek is een lijst: per regel een label, een spoor met een balk, en het bedrag als
   tekst. Op een breed scherm staan die drie naast elkaar, op een telefoon het label en het
   bedrag op één regel en het spoor eronder over de volle breedte. Aanwijzen, aantikken of er
   met tab op komen licht de regel op en zet de uitleg in het vak onder de grafiek.
   ========================================================================= */
.grafiek {
  container: grafiek / inline-size;
  margin: var(--ruimte-5) 0;
  padding: var(--ruimte-4);
  background: var(--papier);
  border: 1px solid var(--kaart-rand);
  border-radius: var(--radius);
  box-shadow: var(--schaduw);
}
.grafiekkop { display: flex; flex-direction: column; gap: var(--ruimte-0); margin: 0 0 var(--ruimte-3); }
.grafiektitel { font-family: var(--font-kop); font-size: var(--tekst-l); font-weight: 700; line-height: 1.3; color: var(--structuur); }
.grafiekonder { font-size: var(--tekst-s); color: var(--inkt-licht); }
.grafiekrijen { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--ruimte-1); }
.grafiekrij {
  display: grid;
  grid-template-columns: minmax(0, 14rem) minmax(0, 1fr) minmax(6.5rem, auto);
  grid-template-areas: "label spoor bedrag";
  align-items: center;
  gap: var(--ruimte-1) var(--ruimte-3);
  max-width: none;
  margin: 0;
  padding: var(--ruimte-2);
  border-radius: var(--radius-klein);
  cursor: pointer;
  transition: background-color 0.2s, box-shadow 0.2s;
}
.grafiekrij:hover,
.grafiekrij.actief { background: var(--vlak-zacht); box-shadow: inset 3px 0 0 var(--structuur); }
.grafiekrij:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; }
.grafieklabel { grid-area: label; font-size: var(--tekst-s); line-height: 1.35; overflow-wrap: anywhere; }
.grafiekbedrag {
  grid-area: bedrag;
  text-align: right;
  white-space: nowrap;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.grafiekuitleg { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.grafiekspoor { grid-area: spoor; position: relative; height: 1.5rem; }
/* De nullijn: waar niets bij of af is. Gestippeld, zodat hij geen balk lijkt. */
.grafiekspoor::before {
  content: "";
  position: absolute;
  top: -5px;
  bottom: -5px;
  left: calc(var(--nul, 0) * 100%);
  border-left: 2px dotted var(--lijn-sterk);
}
.grafiekbalk {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--l) * 100%);
  width: max(4px, calc(var(--w) * 100%));
  border-radius: 4px;
  background: var(--grafiek-heffing);
  transition: left 0.5s var(--uit), width 0.5s var(--uit);
}
.grafiekdetail {
  min-height: 3em;
  margin: var(--ruimte-3) 0 0;
  padding-top: var(--ruimte-2);
  border-top: 1px dashed var(--lijn);
  font-size: var(--tekst-s);
  color: var(--inkt-licht);
  max-width: none;
}
.grafiekdetail.gevuld { color: var(--inkt); }
/* Is de grafiek smal — op een telefoon, of in de kaart op de voorpagina — dan staan het label
   en het bedrag op één regel en krijgt het spoor de volle breedte eronder. Dat hangt aan de
   breedte van de GRAFIEK en niet van het scherm. */
@media (max-width: 40rem) {
  .grafiek { padding: var(--ruimte-3); }
}


/* ---- de waterval: wat erbij komt is dennengroen, de kortingen amber, wat al is ingehouden
   gestreept salie, en het eindbedrag in de kleur van bijbetalen of terugkrijgen. Het teken
   (+ of −) en het label zeggen hetzelfde in woorden. */
.wv-kortingen .grafiekbalk { background: var(--grafiek-korting); }
.wv-ingehouden .grafiekbalk {
  background: repeating-linear-gradient(-45deg, var(--grafiek-ingehouden) 0 6px, var(--vlak) 6px 9px);
  box-shadow: inset 0 0 0 2px var(--grafiek-ingehouden);
}
.wv-eind { margin-top: var(--ruimte-1); border-top: 2px solid var(--lijn); border-radius: 0 0 var(--radius-klein) var(--radius-klein); }
.wv-eind .grafieklabel { font-weight: 700; font-size: var(--tekst-m); }
.wv-eind .grafiekbedrag { font-size: var(--tekst-l); }
.wv-eind .grafiekspoor { height: 1.9rem; }
.wv-bij .grafiekbalk { background: var(--grafiek-bij); }
.wv-bij .grafiekbedrag { color: var(--negatief); }
.wv-terug .grafiekbalk { background: var(--grafiek-terug); }
.wv-terug .grafiekbedrag { color: var(--bedrag); }
.wv-nul .grafiekbalk { background: var(--structuur); }
/* Het verbindingsstreepje: van het eind van de ene trede naar het begin van de volgende. */
.wv-erbij .grafiekspoor::after,
.wv-eraf .grafiekspoor::after {
  content: "";
  position: absolute;
  top: 100%;
  height: calc(var(--ruimte-1) + var(--ruimte-4));
  border-left: 1px dashed var(--inkt-licht);
}
.wv-erbij .grafiekspoor::after { left: calc((var(--l) + var(--w)) * 100%); }
.wv-eraf .grafiekspoor::after { left: calc(var(--l) * 100%); }

/* ---- in één oogopslag: een meter en de uitkomst als kaart (OOGOPSLAGRONDE-2026-09.md)

   Links (op een telefoon: boven) een halve meter: wijnrood is bijbetalen, groen is terug, en
   nul staat altijd bovenaan in het midden. De naald wijst naar de uitkomst; een streepjesnaald
   staat waar je vandaan kwam, en het salie vak ertussen is wat je stappen doen. Rechts (onder)
   dezelfde punten als kaarten, van boven naar beneden, met de uitkomst onderaan en het grootst:
   een licht vlak in de kleur van de richting, een rond pictogram (pijl uit of in het bakje) en
   het bedrag met het woord erachter. De betekenis draagt op de woorden; kleur, pijl en naald
   zeggen hetzelfde nog eens. */
/* Niet breder dan de zinnen van het eindbeeld eronder: op een groot scherm staan de kaarten
   anders met een halve meter lucht rechts van hun bedrag. */
.sabeeld {
  display: grid;
  max-width: 50rem;
  grid-template-columns: minmax(11rem, 17rem) minmax(0, 1fr);
  align-items: center;
  gap: var(--ruimte-5) var(--ruimte-6);
}
.sameter {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: "nul nul" "meter meter" "bij terug";
  row-gap: var(--ruimte-1);
  width: 100%;
  font-size: var(--tekst-xs);
  font-weight: 700;
  line-height: 1.2;
}
.sameternul { grid-area: nul; justify-self: center; color: var(--inkt-zacht); }
.sametersvg { grid-area: meter; display: block; width: 100%; height: auto; overflow: visible; }
.sameterbij,
.sameterterug { text-transform: uppercase; letter-spacing: 0.06em; }
.sameterbij { grid-area: bij; justify-self: start; color: var(--negatief); }
.sameterterug { grid-area: terug; justify-self: end; color: var(--bedrag); }
.saboog { fill: none; stroke-width: 22; }
.saboogbij { stroke: var(--grafiek-bij); }
.saboogterug { stroke: var(--grafiek-terug); }
.sanulstreep { fill: none; stroke: var(--papier); stroke-width: 4; }
.sawig { fill: none; stroke: var(--vlak-lijn); stroke-width: 69; }
.samerk { fill: var(--papier); stroke: var(--structuur); stroke-width: 3; }
.saspoor { fill: none; stroke: var(--inkt-licht); stroke-width: 3; stroke-dasharray: 5 5; stroke-linecap: round; }
/* De naald draait om het midden van de meter (100, 100 in de tekening). Zonder beweging staat
   hij meteen op de uitkomst; het zwaaien staat hieronder, alleen onder .beweegt. */
.sanaald {
  fill: var(--structuur);
  transform-box: view-box;
  transform-origin: 100px 100px;
  transform: rotate(var(--p2));
}
.sanaaldpit { fill: var(--papier); }

/* De kaarten: pictogram links, label en bedrag rechts ervan. */
.sakaarten { gap: var(--ruimte-2); }
.saldoas .sakaart {
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "icoon label" "icoon bedrag";
  align-items: center;
  gap: 0 var(--ruimte-3);
  padding: var(--ruimte-3);
  background: var(--papier);
  border: 1px solid var(--lijn);
  border-radius: var(--radius);
}
.saldoas .sakaart:hover,
.saldoas .sakaart.actief { background: var(--papier); box-shadow: 0 0 0 2px var(--vlak-lijn); }
.saicoon {
  grid-area: icoon;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  color: var(--papier);
  background: var(--structuur);
}
.saicoon svg { width: 1.35rem; height: 1.35rem; }
.sa-bij .saicoon { background: var(--uitkomst-bij-teken); }
.sa-terug .saicoon { background: var(--uitkomst-terug-teken); }
.saldoas .grafieklabel { grid-area: label; color: var(--inkt-zacht); }
.sabedrag {
  grid-area: bedrag;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 var(--ruimte-2);
  line-height: 1.25;
}
.saldoas .grafiekbedrag { font-size: var(--tekst-l); text-align: left; }
.sawoord { font-weight: 700; }
.sa-bij :is(.grafiekbedrag, .sawoord) { color: var(--negatief); }
.sa-terug :is(.grafiekbedrag, .sawoord) { color: var(--bedrag); }
.sa-nul :is(.grafiekbedrag, .sawoord) { color: var(--structuur); }
.sa-nul .sawoord { font-weight: 600; }

/* De uitkomst: groter, en op een licht vlak in de kleur van de richting. */
.saldoas .sahoofd { padding: var(--ruimte-4); border-width: 2px; }
.saldoas .sahoofd.sa-bij,
.saldoas .sahoofd.sa-bij:is(:hover, .actief) { background: var(--uitkomst-bij); border-color: var(--uitkomst-bij-lijn); }
.saldoas .sahoofd.sa-terug,
.saldoas .sahoofd.sa-terug:is(:hover, .actief) { background: var(--uitkomst-terug); border-color: var(--uitkomst-terug-lijn); }
.saldoas .sahoofd.sa-nul,
.saldoas .sahoofd.sa-nul:is(:hover, .actief) { background: var(--vlak-zacht); border-color: var(--vlak-lijn); }
.saldoas .sahoofd:is(:hover, .actief) { box-shadow: 0 0 0 2px var(--structuur-lijn); }
.sahoofd .saicoon { width: 3.25rem; height: 3.25rem; }
.sahoofd .saicoon svg { width: 1.8rem; height: 1.8rem; }
.saldoas .sahoofd .grafieklabel {
  font-size: var(--tekst-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--structuur);
}
.saldoas .sahoofd .grafiekbedrag { font-size: var(--tekst-2xl); line-height: 1.1; }
.sahoofd .sawoord { font-size: var(--tekst-xl); }

/* Wat je eigen stappen schelen, tussen de laatste twee kaarten: een pijl naar beneden in de
   kolom van de pictogrammen, en het bedrag op een salie pil. */
.sascheelt {
  display: flex;
  align-items: center;
  gap: var(--ruimte-3);
  line-height: 1.3;
  max-width: none;
  margin: 0;
  padding: 0 var(--ruimte-3);
  font-size: var(--tekst-s);
  font-weight: 600;
  color: var(--structuur);
}
.sascheeltinhoud { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ruimte-1) var(--ruimte-2); }
.sascheeltpijl { display: grid; place-items: center; flex: none; width: 2.5rem; color: var(--structuur-lijn); }
.sascheeltpijl svg { width: 1.35rem; height: 1.35rem; }
.sascheeltbedrag {
  display: inline-block;
  padding: var(--ruimte-0) var(--ruimte-2);
  border-radius: 999px;
  background: var(--vlak);
  font-weight: 700;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.eindbeeld .grafiek { margin: 0 0 var(--ruimte-4); }
/* De zin in het eindbeeld die bij een aangewezen kaart hoort. */
.eindbeeldregels > li.gekoppeld { background: var(--papier); border-radius: var(--radius-klein); box-shadow: 0 0 0 2px var(--vlak-lijn); }

/* ---- twee balken: de winst van je aanslag naast de winst die jij verwacht. De merkstreep op
   de tweede balk staat waar de eerste ophoudt. */
.tweebalken { margin: var(--ruimte-3) 0 0; padding: var(--ruimte-3); box-shadow: none; }
.tb-aanslag .grafiekbalk { background: var(--grafiek-ingehouden); }
.tb-verwacht .grafiekbalk { background: var(--grafiek-heffing); }
.tb-verwacht .grafiekspoor::after {
  content: "";
  position: absolute;
  top: -4px;
  bottom: -4px;
  left: calc(var(--merk) * 100%);
  border-left: 3px solid var(--grafiek-korting);
}

/* Smalle grafiek: zie hierboven bij .grafiek. Deze regels staan na alle soorten grafiek,
   zodat ze het van hun gewone maten winnen. */
@container grafiek (max-width: 36rem) {
  .grafiekrij {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "label bedrag" "spoor spoor";
    padding: var(--ruimte-2) var(--ruimte-1);
  }
  .grafiekspoor { height: 1.1rem; }
  .wv-eind .grafiekspoor { height: 1.5rem; }
  /* In één oogopslag: de meter boven, gecentreerd, en de kaarten eronder. De kaarten zelf houden
     hun indeling: `.saldoas .sakaart` weegt zwaarder dan de `.grafiekrij` hierboven. */
  .sabeeld { grid-template-columns: minmax(0, 1fr); gap: var(--ruimte-4); }
  .sameter { max-width: 16rem; justify-self: center; }
  .wv-erbij .grafiekspoor::after,
  .wv-eraf .grafiekspoor::after { display: none; }
}
/* ---- de balken bouwen op als de grafiek in beeld komt, de een na de ander */
@keyframes balkrechts { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0); } }
@keyframes balklinks { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0); } }
@keyframes bedragin { from { opacity: 0; transform: translate3d(8px, 0, 0); } }
.beweegt .grafiek:not(.zichtbaar) .grafiekbalk { clip-path: inset(0 100% 0 0); }
.beweegt .grafiek.zichtbaar .grafiekbalk { animation: balkrechts 0.8s var(--uit) both; animation-delay: calc(var(--i) * 140ms + 120ms); }
.beweegt .grafiek.zichtbaar .wv-eraf .grafiekbalk,
.beweegt .grafiek.zichtbaar .wv-terug .grafiekbalk { animation-name: balklinks; }
.beweegt .grafiek.zichtbaar .grafiekbedrag { animation: bedragin 0.5s var(--uit) both; animation-delay: calc(var(--i) * 140ms + 300ms); }
/* Opnieuw getekend terwijl hij al in beeld stond (na een wijziging): geen opbouw, de balken
   staan er meteen — alleen de bedragen lopen van oud naar nieuw. */
.beweegt .grafiek.stil .grafiekbalk,
.beweegt .grafiek.stil .grafiekbedrag { animation: none; }

/* ---- in één oogopslag, in beweging. Eén keer, als het blok in beeld komt, in ongeveer
   tweeënhalve seconde: de naald staat eerst op je voorlopige aanslag (of op nul), zwaait naar
   wat wij uitrekenen, en veert daarna door naar na je stappen — over de nul heen als je daardoor
   van bijbetalen naar terugkrijgen gaat. De kaarten komen na elkaar; de uitkomstkaart verschijnt
   als de naald aan zijn laatste zwaai begint, en haar bedrag telt dan pas op (`--telwacht`, in
   milliseconden, gelezen door beweging.js). De tussenstops staan in de keyframes met de uitloop
   van --uit en de veer van --veer; een eigenschap in een keyframe kan geen var() dragen. */
@keyframes naaldzwaai {
  0% { transform: rotate(var(--p0)); }
  22% { transform: rotate(var(--p0)); animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); }
  45% { transform: rotate(var(--p1)); }
  55% { transform: rotate(var(--p1)); animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1); }
  100% { transform: rotate(var(--p2)); }
}
@keyframes naaldbij { from { transform: rotate(var(--p1)); } to { transform: rotate(var(--p2)); } }
@keyframes saverschijn { from { opacity: 0; } }
@keyframes kaartin { from { opacity: 0; transform: translate3d(0, 12px, 0); } }
@keyframes hoofdin {
  0% { opacity: 0; transform: scale(0.94); }
  60% { opacity: 1; transform: scale(1.02); }
  100% { opacity: 1; transform: none; }
}
@keyframes icoonpuls { 50% { transform: scale(1.15); } }
.beweegt .saldoas.zichtbaar .sanaald { animation: naaldzwaai 2.6s linear 0.2s both; }
.beweegt .saldoas.zichtbaar .saspoor,
.beweegt .saldoas.zichtbaar .sawig { animation: saverschijn 0.6s var(--uit) 1.4s both; }
.beweegt .saldoas.zichtbaar .sakaart,
.beweegt .saldoas.zichtbaar .sascheelt { animation: kaartin 0.6s var(--uit) both; animation-delay: calc(var(--i) * 0.3s + 0.2s); }
/* Hoe lang het bedrag van de uitkomstkaart wacht, gerekend vanaf het moment dat het blok in beeld
   kwam — gelijk aan de vertraging van `hoofdin`. Alleen beweging.js leest het, en alleen als er
   bewogen mag worden; daarom hangt het niet aan .beweegt (die klasse komt pas na de eerste ronde). */
.saldoas .sahoofd { --telwacht: 1500; }
.beweegt .saldoas.zichtbaar .sahoofd { animation: hoofdin 0.7s var(--uit) 1.5s both; }
.beweegt .saldoas.zichtbaar .sahoofd .saicoon { animation: icoonpuls 0.6s var(--veer) 2.6s both; }
/* Opnieuw getekend terwijl het in beeld stond (je past iets aan in de rekentool): alles staat er
   meteen, en de bedragen lopen van oud naar nieuw. Wijst de naald nu ergens anders heen, dan
   veert hij van de oude stand naar de nieuwe (`zwaait`, gezet door beweging.js). */
.beweegt .saldoas.stil .sanaald,
.beweegt .saldoas.stil .saspoor,
.beweegt .saldoas.stil .sawig,
.beweegt .saldoas.stil .sakaart,
.beweegt .saldoas.stil .sascheelt,
.beweegt .saldoas.stil .sahoofd,
.beweegt .saldoas.stil .sahoofd .saicoon { animation: none; }
.saldoas.stil .sahoofd { --telwacht: 0; }
.beweegt .saldoas.stil.zwaait .sanaald { animation: naaldbij 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) both; }

/* ---- de bestaande staafbeelden (de volgende € 100, de loonsverhoging-val, de ranglijst)
   schuiven van links naar rechts open als ze in beeld komen */
@keyframes staafin { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0); } }
.beweegt .staafbeeld:not(.zichtbaar) .staafhouder,
.beweegt .rangbeeldrij:not(.zichtbaar) .staafhouder { clip-path: inset(0 100% 0 0); }
.beweegt .staafbeeld.zichtbaar .staafhouder,
.beweegt .rangbeeldrij.zichtbaar .staafhouder { animation: staafin 0.9s var(--uit) both; animation-delay: calc(var(--onthul-i, 0) * 90ms + 0.15s); }
.beweegt .staafbeeld.stil .staafhouder,
.beweegt .rangbeeldrij.stil .staafhouder { animation: none; }

/* ---- de kop van elke pagina komt binnen */
@media (prefers-reduced-motion: no-preference) {
  main > h1:first-child,
  main > .paginakop h1,
  .toolkop h1 { animation: heroin 0.7s var(--uit) both; }
}

/* =========================================================================
   Afwerking uit de interfacecontrole van september 2026 (klus 3, 6 en 8)
   ========================================================================= */

/* Klus 3 — de tabellen van de aanslagpagina zijn op een telefoon geen tabel meer maar kaartjes,
   met het opschrift van elke kolom erboven; zo valt er niets rechts uit beeld. Hetzelfde
   patroon als de ranglijst. En een bedrag in "Wat je met deze bedragen betaalt" breekt niet
   meer af tussen € en het getal. */
table.anutabel td { white-space: nowrap; }
@media (max-width: 40rem) {
  .tabelwrap:has(table.avergelijktabel),
  .tabelwrap:has(table.auitkomst),
  .tabelwrap:has(table.aherkomsttabel) {
    overflow-x: visible;
    border: none;
    background: none;
    border-radius: 0;
    box-shadow: none;
  }
  table.avergelijktabel,
  table.auitkomst,
  table.aherkomsttabel { display: block; min-width: 0; font-size: var(--tekst-s); }
  table.avergelijktabel thead,
  table.auitkomst thead,
  table.aherkomsttabel thead { display: none; }
  table.avergelijktabel tbody,
  table.auitkomst tbody,
  table.aherkomsttabel tbody { display: block; }
  table.avergelijktabel tr,
  table.auitkomst tr,
  table.aherkomsttabel tr {
    display: block;
    background: var(--papier);
    border: 1px solid var(--lijn);
    border-radius: var(--radius);
    box-shadow: var(--schaduw);
    padding: var(--ruimte-3) var(--ruimte-4);
    margin-bottom: var(--ruimte-2);
  }
  table.avergelijktabel th,
  table.avergelijktabel td,
  table.auitkomst th,
  table.auitkomst td,
  table.aherkomsttabel th,
  table.aherkomsttabel td {
    display: block;
    border: none;
    padding: 0;
    text-align: left;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  table.avergelijktabel th[scope="row"],
  table.auitkomst th[scope="row"],
  table.aherkomsttabel th[scope="row"] { font-size: var(--tekst-m); font-weight: 700; margin-bottom: var(--ruimte-1); }
  table.avergelijktabel td[data-kop],
  table.auitkomst td[data-kop],
  table.aherkomsttabel td[data-kop] { margin-top: var(--ruimte-2); }
  table.avergelijktabel td[data-kop]::before,
  table.auitkomst td[data-kop]::before,
  table.aherkomsttabel td[data-kop]::before {
    content: attr(data-kop);
    display: block;
    font-size: var(--tekst-xs);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    font-weight: 700;
    color: var(--inkt-licht);
  }
}

/* Klus 6 — de meelopende strook op een telefoon als één regel: de twee cijfers die ertoe
   doen, zonder opschrift en zonder uitleg eronder. De rest staat op de uitkomststap voluit. */
@media (max-width: 34rem) {
  .meeloop { padding: var(--ruimte-2) var(--ruimte-3); }
  .meeloopkop,
  .meelooponder,
  .meeloopbij { display: none; }
  .meelooprij { display: flex; flex-wrap: nowrap; gap: var(--ruimte-4); overflow: hidden; }
  .meeloopcel:nth-child(n+3) { display: none; }
  .meeloopcel { display: flex; flex-direction: column; min-width: 0; }
  .meeloopwaarde { font-size: var(--tekst-l); }
}

/* Klus 8 — afwerking. Een lange samenstelling breekt af in plaats van uit haar vak te lopen
   ("arbeidsongeschiktheidsverzekering", "kleinschaligheidsinvesteringsaftrek"); de afbreking
   met een streepje blijft de eerste keus waar de browser Nederlands kan afbreken. */
h1, h2, h3, h4,
.kaart h3,
.badge,
.aregellabel,
.gesprekslijst li,
.startkaartkop { overflow-wrap: anywhere; }
.badge { white-space: normal; display: inline-block; max-width: 100%; }
.aregelkop > * { min-width: 0; }
/* Op de lijstpagina's stond boven elke kaart een lege strook: de marge van de kop. */
.lijstkaart > h2 { margin-top: 0; }
/* Een keuzelijst toont zijn keuze voluit ("Maak een keuze", niet "Maak een keu:"). */
.invoerveldkaal:has(> select) { max-width: none; }
.invoerveldkaal > select { min-width: 12rem; max-width: 100%; }
/* Het vraagteken blijft naast zijn vinkje staan, ook bij een lang label. */
.vinkje > label { flex: 1 1 14rem; min-width: 0; }
.vinkje > .helpknop { flex: 0 0 auto; }
/* Ook het skiplink en het bestandsveld halen het raakvlak van 44 px. */
.skip:focus { display: inline-flex; align-items: center; min-height: 44px; }
input[type="file"] { min-height: 44px; }
/* De koppen in de voet zijn gelijk: een kop die een link is, oogt als de rest, en wordt pas
   bij aanwijzen onderstreept. */
.voetkolom h2 a { text-decoration: none; }
.voetkolom h2 a:hover { text-decoration: underline; }

/* ---- op papier: alles staat er, niets beweegt, geen streep en geen decor */
@media print {
  .onthul { opacity: 1 !important; transform: none !important; }
  .grafiekbalk,
  .staafhouder { clip-path: none !important; animation: none !important; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .kort, .kort::after { animation: none !important; transform: none !important; } /* de korte uitleg staat op papier meteen en heel */
  .startstappen::before { transform: none !important; }
  .scrollstreep, .herodecor, .startdemoknoppen, .grafiekdetail { display: none !important; }
  /* In één oogopslag op papier: de naald op de uitkomst, de kaarten zonder vlak, het pictogram
     als lijn in plaats van wit op een kleur die niet wordt afgedrukt. */
  .sanaald, .saspoor, .sawig, .sakaart, .sascheelt, .sahoofd, .saicoon, .grafiekbedrag { animation: none !important; opacity: 1 !important; }
  .sanaald { transform: rotate(var(--p2)) !important; }
  .saldoas .sakaart { background: none !important; border: 1px solid #999 !important; box-shadow: none !important; }
  .saicoon { background: none !important; color: #000 !important; border: 1.5pt solid #000; }
  .sascheeltbedrag { background: none; border: 1px solid #999; }
  .starthero { background: none; color: black; box-shadow: none; border: 1px solid black; }
  .starthero h1, .startlead, .startbelofte, .herokleur, .herorubriek { color: black !important; }
  .startdemo { transform: none; box-shadow: none; }
}

@media print {
  /* De herkomst van een veld is een handeling in beeld (kiezen, wijzigen), geen uitkomst. */
  .aanslagnoot, .aanslagmee { display: none !important; }
  /* De gesprekslijst voor je boekhouder, alleen: zolang die afdruk loopt, staat er op papier
     niets anders dan de lijst. De knop zelf is een handeling. */
  body.drukgesprekslijst main > :not(#aanslagplan):not(.gesprekkop),
  body.drukgesprekslijst #aanslagplan > :not(.gesprekslijst) { display: none !important; }
  body:not(.drukgesprekslijst) .gesprekkop, .gesprekdruk { display: none !important; }
  /* Op papier geen kaart: de lijst is het hele document. */
  .gesprekslijst { border: none; box-shadow: none; padding: 0; margin: 0; }
  /* Op papier is de lettermaat in pt; een maat in rem zou het bedrag groter zetten dan de
     tekst eromheen. Hier dus relatief aan de regel zelf. */
  .gesprekbedrag, .gesprekslijst .rangbron, .gesprekdruk { font-size: 0.92em; }
  .gesprekslijst > h3 { font-size: 1.3em; }
  .gesprekslijst h4 { font-size: 0.85em; }
  .aregellijst { border-radius: 0; }
  /* Wat nog leeg is, is een handeling en geen uitkomst: lege invulvelden, het blok met posten die
     niet op je aanslag stonden, en de aanvulvragen als er geen enkele is beantwoord. Knoppen
     hebben op papier geen betekenis. Dat was samen twee A4'tjes plus een oranje knop. */
  .apost[data-leeg], .aanslagdoor, .akandidaten, .aanslagzelfregel, .naardetoolactie, .anaartoolmee,
  .ameemelding, .weldoenactie, .akansactie, .akansenmee { display: none !important; }
  /* Een blok zonder één ingevuld veld valt in zijn geheel weg. Elk in een eigen regel: een browser
     die :has() niet kent, gooit anders de hele regel hierboven weg, knoppen en lege velden incluis. */
  .aanvulblok:not(:has(.apost:not([data-leeg]))) { display: none !important; }
  .anietgevonden:not(:has(.apost:not([data-leeg]))) { display: none !important; }
  .aregelsvouw, .anietgevonden { border: none; }
  .aregelsvouw > summary, .anietgevonden > summary { display: none !important; }
  /* Een kop blijft bij wat eronder staat, en een kop met een korte lijst gaat in zijn geheel
     naar het volgende blad in plaats van met één punt onderaan dit blad te blijven hangen. */
  h2, h3, h4, .afdrukkop { break-after: avoid; page-break-after: avoid; }
  .gesprekdeel, .apost, .aregel { break-inside: avoid; page-break-inside: avoid; }
}

@media print {
  @page { margin: 16mm 14mm; }

  body { background: #fff; font-size: 10.5pt; color: #000; }
  /* .toolkop valt weg: de afdrukkop eronder is de titel van het document, en de
     twee voorbehouden op de uitkomst zelf (.rekenvoorbehoud en .eindkader)
     zeggen hetzelfde als de waarschuwing in die kop. */
  /* .meeloop is de meelopende strook boven de vragen: dezelfde cijfers die op de uitkomst
     voluit staan, en dus een handeling in beeld houden in plaats van inhoud. Hij is op de
     uitkomststap al leeg, maar hij hoort ook weg te vallen als de afdruk ooit van een
     andere stap vertrekt. */
  /* Een overzicht om naartoe te springen, een zoekveld en een trefferlijst zijn handelingen
     en geen inhoud; op papier kun je nergens heen springen. */
  .paginaindex, .naslagzoek, .geentreffers, .elderstreffers, .routeuitleg,
  .kop, .stapnav, .stapvoortgang, .meeloop, .toolacties, .toolwis, .wisvraag, .voet, .werkbalk, .herstelmelding, .heronder,
  .helpknop, .helptekst, .nulnoot, .skip, .cta,
  .toolkop,
  /* Navigatie hoort niet in een pdf: een menu, een kruimelpad en een plattegrond zijn
     handelingen, geen inhoud. De voet valt hierboven al weg en neemt .voetnav mee; de
     andere twee staan er expliciet bij zodat ze ook wegvallen als de voet ooit blijft. */
  .hoofdnav, .menuknop, .menuhouder, .menupaneel, .kruimel, .voetnav, .navtool, .naardetool,
  .hervat, .startkaarten, .startnaslag { display: none !important; }

  main { max-width: none; padding: 0; }

  /* alleen de uitkomst; de invoerstappen blijven buiten het document */
  .stap { display: none !important; border: none; box-shadow: none; padding: 0; }
  .stap#stap-resultaat { display: block !important; }

  /* De standenrij is op papier geen bediening maar een samenvatting: de pillen blijven staan,
     zonder de klikvorm en zonder de regel die zegt dat je erop kunt klikken. */
  .gebiedspil { border: 1px solid #999; min-height: 0; padding: 0.2rem 0.4rem; }
  .gebiedenonder { display: none !important; }

  /* Alles wat op het scherm ingeklapt mag zijn, staat op papier volledig open. De summary
     zelf valt weg, want in de rekentool is dat een bedieningsregel. Op de naslagpagina's
     draagt hij juist de TITEL van de regeling (of het opschrift boven een tabel), en dan
     zou een afdruk zonder kop overblijven — die twee blijven dus staan. */
  details > summary { display: none !important; }
  details > *:not(summary) { display: revert !important; }
  .kaart summary { display: flex !important; }
  .catvouw > summary { display: flex !important; border-bottom: 1px solid #000; }
  .diep > summary { display: block !important; color: #000; }
  .adviesmeer { border-top: none; padding-top: 0; }

  .afdrukkop { display: block; border-bottom: 2px solid #000; margin-bottom: 10pt; padding-bottom: 6pt; }
  .afdrukkop h1, .afdrukkop .afdruknaam { font-size: 16pt; font-weight: 700; margin: 0; max-width: none; color: #000; }
  /* Het beeldmerk is één lijnfiguur zonder vlak, dus hij drukt zwart-wit af zoals hij op het
     scherm staat. Zwart, niet oranje: op een zwart-witprinter wordt oranje grijs. */
  .afdrukmerk { width: 1em; height: 1em; color: #000; vertical-align: -0.1em; margin-right: 0.3em; }
  .afdrukkop p { font-size: 9pt; color: #444; margin: 2pt 0 0; max-width: none; }
  .afdrukkop .afdruknaam { font-size: 14pt; }

  .stap#stap-resultaat > h2 { display: none; }

  /* h1 en h2 dragen op het scherm het dennengroen; op een zwart-witprinter wordt dat grijs
     en verliest een kop juist zijn gewicht. Op papier is een kop dus gewoon zwart. */
  h1, h2 { color: #000; }

  p, li, .lead, .rangintro, .eindintro, .rekenvoorbehoud { max-width: none; }

  /* Geen kleurvlakken op papier: alles is al hairline of wit. */
  .marginaal, .eindtotaal, .eindkader, .aannames, .opbouw, .ontbreekt, .advies, .rekenbasis,
  .inleg, .voorbehoud, .conflict, .adviesletop, .adviseur, .uitwerking, .nogtevullen {
    background: #fff !important;
    box-shadow: none !important;
  }
  .marginaal, .eindkader, .aannames, .ontbreekt, .voorbehoud, .conflict,
  .adviesletop, .adviseur, .inleg, .kansvoorbehoud, .kansdoen, .nogtevullen { border-left: 2pt solid #999 !important; }
  .advies { border: 1px solid #999 !important; }
  /* Het uitwerkingsvlak verliest op papier zijn vulling (hierboven); zonder deze regel
     houdt het alleen zijn saliekleurige hairline over en verdwijnt het blok in zwart-wit. */
  .uitwerking { border: 1px solid #999 !important; }
  .eindtotaal { border-top: 1px solid #999 !important; border-bottom: 1px solid #999 !important; }
  .rekenbasis { border: 1px solid #ddd !important; }

  .marginaal .marggetal, .eindtotaal .eindbedrag { color: #000 !important; }
  .marginaal .marggetal span { color: #444 !important; }
  .adviesbedrag, .rangbedrag, .eindbedragklein, .inleggeen, .inleggeld, .inlegdoen, .kansbedrag { color: #000 !important; }
  tr.positief td, tr.negatief td { color: #000; }

  .tabelwrap { overflow: visible; border-color: #999; }
  table { min-width: 0 !important; page-break-inside: auto; }
  tr { page-break-inside: avoid; }
  thead { display: table-header-group; }
  thead th { background: #f0f0f0 !important; color: #000; }

  .eindgroep, .advies, .marginaal, .invoerdetails, .kans { page-break-inside: avoid; }
  /* De kansenlijst hoort op papier compleet te staan, met de kopjes van de drie groepen —
     die zijn hier juist de leeswijzer. Alleen de knoppen hebben op papier geen betekenis. */
  .kansgroep > summary { display: block !important; list-style: none; font-size: 12pt; }
  .kansgroep > summary::before { display: none; }
  .kansactie { display: none !important; }
  .kans { border: 1px solid #999 !important; background: #fff !important; box-shadow: none !important; }

  /* de onderbouwing per punt verschijnt alleen in de afdruk */
  .alleenprint { display: block !important; }
  /* Een melding "vul dit nog in", een sprongknop en een vinkje zijn handelingen: op papier
     kun je er niets mee. Wát er ontbreekt blijft wél staan — via .onbekendcontrole hierboven
     en via de rij in het invoeroverzicht. */
  .downloadbalk, .invoercontrole, .stapfout, .veldfout, .weetnietkeuze { display: none !important; }
  /* Het invulblad van de loonsverhoging-val is een handeling; de uitkomst en de uitleg
     eronder zijn inhoud en horen wél op papier. */
  .loonvalvraag, .loonvalvoorbeeld { display: none !important; }
  /* Hetzelfde voor het inlezen van je aanslag: het bestandsveld is een handeling. Wat eruit
     kwam — de posten, de berekening, de ranglijst en de herkomst per bedrag — is inhoud en
     hoort wél op papier, want dat is het vel dat je meeneemt naar je adviseur. */
  .aanslagkiezen { display: none !important; }
  .aavoorbeeld { page-break-inside: avoid; }
  .aanslagkiezen, .aanslagvooraf, .aanslagposten, .aanslagplan, .aanslaguitleg, .aanslagbronnen {
    border: none; box-shadow: none; padding: 0;
  }
  table.anutabel, table.avergelijktabel, table.auitkomst, table.aherkomsttabel { min-width: 0 !important; }
  .loonvalvraag, .loonvaluitleg, .loonvalbronnen, .lvblok { border: none; box-shadow: none; padding: 0; }
  table.lvposten, table.lvranden { min-width: 0 !important; }

  /* De updates-pagina moet als verantwoording uit te printen zijn. */
  .p-updates .updateregel { page-break-inside: avoid; }
  .p-updates .updatestand { font-size: 13pt; }
  .p-updates .bronstandtabel { min-width: 0 !important; }
  .onderbouwing { page-break-before: always; }
  .onderbouwpunt {
    page-break-inside: avoid;
    border-top: 1px solid #bbb;
    padding: 5pt 0 3pt;
    margin: 0;
  }
  .onderbouwing > h4 { font-size: 13pt; text-transform: none; letter-spacing: 0; color: #000; margin-bottom: 4pt; }
  .onderbouwpunt h5 { margin: 0 0 3pt; font-size: 10.5pt; }
  .onderbouwregel { margin: 0 0 2pt; font-size: 9pt; line-height: 1.35; max-width: none; }
  table.ranglijst { min-width: 0 !important; }
  .ranginleg { white-space: normal; }
  .ranglijstblok { page-break-before: auto; }
  .invoeroverzicht { page-break-before: always; }
  .invoerdetails summary { list-style: none; font-size: 12pt; display: block !important; }

  a { color: #000; text-decoration: none; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 7.5pt; color: #555; word-break: break-all; }
  .naslaglink { display: none; }
}