/* DataGrip · blog: het overzicht en de artikelen
   Wordt na style.css en pagina.css geladen. Alle eigen klassen beginnen met "blog-".
   Het overzicht: de paginakop, het nieuwste artikel groot, en de rest als een index van haarlijnen op het lichte vlak.
   Een artikel: de donkere kop met een eigen beeld, daaronder het lichte vlak met de inhoudsopgave in een rail, de
   lopende tekst met figuren en de oproep in de rechterkolom, en onderaan vorige en volgende.
   De beelden zijn SVG in de pagina, getekend in de beeldtaal van de homepage: papier, de route, de dashboardtegel, de liniaal. */

/* ===== De vaste maten van de site staan bovenaan pagina.css en komen daarvandaan =====
   Het raster voor een pagina met een zijkolom: var(--zij) en var(--zij-gat), op 1440 breed 320 en 48, zodat de
   tekst op x 448 begint, net als bij de vragen en de privacyverklaring. De treden voor een tussenkop:
   var(--kop-2) is 40 pixels op 1440, var(--kop-3) is 32. Hieronder alleen wat het blog zelf nodig heeft.
   De tekstkolom is 612 pixels (ongeveer 68 tekens bij 18 pixels): smaller dan var(--lees), omdat de letter hier
   een pixel groter is en er rechts plek moet blijven voor de oproep.
   Papier en tint zijn de kleur van het vlak waar een onderdeel op staat: donker in de kop, licht in de tekst. */
.blog-artikel {
  --blog-tekst: 38.25rem;
  --blog-papier: var(--bg);
  --blog-tint: var(--bg-raised);
  --blog-lijn-teal: var(--line-teal);
}
.blog-artikel .licht { --blog-papier: #f0ede6; --blog-tint: #e6e2d7; --blog-lijn-teal: #0a6f69; }

/* ===== Menu: waar je bent ===== */
.menu a[aria-current="page"]:not(.btn) { color: var(--bright); }
@media (min-width: 960px) { .menu a[aria-current="page"]:not(.btn) { box-shadow: inset 0 -2px 0 var(--teal); } }
@media (max-width: 959px) { .js .menu a[aria-current="page"]:not(.btn) { color: var(--teal); } }

/* ===== Meta-regel: onderwerp, datum, leestijd, gescheiden door een middot =====
   Elk onderdeel draagt zijn middot links in de eigen marge. De regel hangt die marge naar links uit en knipt
   haar weg: zo begint een regel nooit met een los middot, ook niet na een afbreking. */
.blog-meta { display: flex; flex-wrap: wrap; margin-left: -1.3em; clip-path: inset(0 0 0 1.3em); font-size: .9375rem; line-height: 1.5; color: var(--muted); }
.blog-meta > * { position: relative; padding-left: 1.3em; white-space: nowrap; }
.blog-meta > *::before { content: "\00B7"; position: absolute; left: .5em; color: var(--line-strong); font-weight: 400; }
.blog-onderwerp { font-weight: 600; color: var(--bright); }

/* ===== De beelden: een vlakke plaat met een tekening erop =====
   De kleuren staan vast in de tekening (de plaat is altijd donker), alleen de plaatkleur zelf is een token,
   zodat een beeld ook op het verhoogde of het lichte vlak goed staat. */
.blog-beeld { margin: 0; min-width: 0; container-type: inline-size; }
.blog-beeld svg { display: block; width: 100%; height: auto; border-radius: var(--radius); background: var(--blog-vlak, #06202c); font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; font-variant-numeric: tabular-nums; }
.blog-beeld .blog-mono { font-family: 'Geist Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace; }
.blog-s-vlak { fill: var(--blog-vlak, #06202c); }
.blog-beeld figcaption { margin-top: 8px; font-size: .8125rem; line-height: 1.4; color: var(--muted); text-align: right; }
/* voorbeelddata: het merkje van de huisstijl (.merkje), direct onder het beeld, rechts */
.blog-beeld-merk { display: flex; justify-content: flex-end; }

/* Een omslag bestaat uit twee tekeningen van hetzelfde beeld. De brede (720 eenheden) heeft alle details, maar
   in een smal beeld worden haar letters te klein om te lezen. Daar staat de smalle (360 eenheden): dezelfde
   inhoud, opnieuw geschikt, met letters van minstens 14,5 eenheden (13,5 pixels op een telefoon van 375 breed).
   De grens: een scherm tot 639 pixels, of een beeld dat zelf smaller is dan 440 pixels (de kop in twee kolommen
   op een klein laptopscherm). Kent de browser geen container queries, dan blijft daar de brede tekening staan.
   De tekeningen in de lijst van het overzicht (.blog-beeld--klein) zijn een eenvoudige variant zonder kleine tekst. */
.blog-beeld .blog-smal { display: none; }
@media (max-width: 639px) {
  .blog-beeld .blog-breed { display: none; }
  .blog-beeld .blog-smal { display: block; }
}
@container (max-width: 439px) {
  .blog-beeld .blog-breed { display: none; }
  .blog-beeld .blog-smal { display: block; }
}

/* ===== De genummerde halte: deel 1 en deel 2 van het tweeluik, en de negen regelingen ===== */
.blog-halte, .blog-nr {
  position: relative; z-index: 1; flex: none; display: grid; place-items: center;
  width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid var(--teal); background: var(--bg);
  font-size: .8125rem; font-weight: 700; line-height: 1; letter-spacing: 0; color: var(--bright); font-variant-numeric: tabular-nums;
}
.licht .blog-halte, .licht .blog-nr { background: #f0ede6; }
.is-hier > .blog-halte { background: var(--teal); color: #001620; }

/* ===== Het nieuwste artikel: beeld links, titel rechts. Het hele blok is de link. ===== */
.blog-nieuw-rij { position: relative; display: grid; gap: clamp(18px, 3vw, 32px); }
.blog-etiket { font-size: .875rem; font-weight: 600; line-height: 1.4; color: var(--teal); }
.blog-nieuw-tekst .h2 { margin-top: 8px; font-size: var(--kop-2); }
.blog-nieuw-tekst .h2 a { color: inherit; text-decoration: none; }
.blog-nieuw-tekst .h2 a::after { content: ''; position: absolute; inset: 0; z-index: 2; }
.blog-nieuw-zin { margin-top: 14px; max-width: 30em; font-size: clamp(1.0625rem, 1rem + .3vw, 1.2rem); line-height: 1.5; }
.blog-nieuw-tekst .blog-meta { margin-top: 14px; }
.blog-nieuw-lees { margin-top: clamp(18px, 2.4vw, 28px); }
/* R8:B02 hover alleen bij een muis */
@media (hover: hover) and (pointer: fine) { 
  .blog-nieuw-rij:hover .blog-nieuw-lees .btn { border-color: var(--bright); }
  .blog-nieuw-rij:hover .h2 a { text-decoration: underline; text-decoration-color: var(--teal); text-decoration-thickness: 3px; text-underline-offset: 6px; }
}
@media (min-width: 900px) {
  .blog-nieuw-rij { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
}

/* ===== De index: een rij per artikel, haarlijnen ertussen =====
   Smal: het beeld boven, dan meta en titel. Vanaf 760 pixels: meta links in een vaste kolom, het beeld klein rechts.
   De kop is de gewone .h2 van de huisstijl en de tekst de gewone lopende tekst, zoals op elk licht vlak. */
.blog-meer .h2 { margin-bottom: clamp(18px, 2.6vw, 36px); }
.blog-lijst { border-top: 1.5px solid var(--line-strong); }
.blog-rij { --rij-pad: 20px; position: relative; display: grid; gap: 6px; padding: var(--rij-pad) 0 calc(var(--rij-pad) + 2px); border-bottom: 1px solid var(--line-mid); }
.blog-rij-meta { order: -1; }
.blog-rij-titel { font-size: clamp(1.25rem, 1.05rem + .9vw, 1.6rem); font-weight: 700; letter-spacing: -0.022em; line-height: 1.2; color: var(--bright); text-wrap: balance; }
.blog-rij-titel a { color: inherit; text-decoration: none; }
.blog-rij-titel a::after { content: ''; position: absolute; inset: 0; z-index: 2; }
/* R8:B02 */ @media (hover: hover) and (pointer: fine) { .blog-rij:hover .blog-rij-titel a { text-decoration: underline; text-decoration-color: var(--teal); text-decoration-thickness: 2px; text-underline-offset: 5px; } }
.blog-rij-tekst p { margin-top: 6px; max-width: 40em; }
.blog-rij > .blog-beeld { order: -2; max-width: 26rem; margin-bottom: 8px; }
.blog-rij[hidden], .blog-lijst > li[hidden] { display: none; }

/* het tweeluik: twee rijen als een groep, verbonden door de rechte teal lijn met twee haltes */
.blog-reeks { padding-top: 18px; border-bottom: 1px solid var(--line-mid); }
.blog-reeks-kop { font-size: 1rem; font-weight: 600; line-height: 1.4; color: var(--bright); }
.blog-reeks-soort { margin-right: 10px; color: var(--teal); }
/* dezelfde datumregel als in de twee artikelen, een keer voor het hele tweeluik */
.blog-reeks-stand { margin-top: 3px; font-size: .9375rem; line-height: 1.45; color: var(--muted); }
.blog-rij--deel { --rij-pad: 16px; padding-left: 44px; border-bottom: 0; }
.blog-rij--deel > .blog-halte { position: absolute; left: 0; top: var(--rij-pad); }
.blog-rij--deel:first-child::before { content: ''; position: absolute; left: 12.5px; top: calc(var(--rij-pad) + 20px); bottom: calc(-1 * var(--rij-pad)); width: 3px; background: var(--teal); }

@media (min-width: 760px) {
  .blog-rij { --rij-pad: 28px; grid-template-columns: 12.5rem minmax(0, 1fr) clamp(170px, 19vw, 260px); column-gap: clamp(20px, 3vw, 48px); align-items: start; }
  .blog-rij-meta { flex-direction: column; margin-left: 0; padding-top: 4px; clip-path: none; }
  .blog-rij-meta > * { padding-left: 0; }
  .blog-rij-meta > *::before { content: none; }
  .blog-rij > .blog-beeld { order: 0; max-width: none; margin-bottom: 0; }
  .blog-reeks { padding-top: 26px; }
  .blog-rij--deel { --rij-pad: 22px; padding-left: 0; }
  .blog-rij--deel > .blog-rij-meta { padding-left: 44px; }
  .blog-rij--deel > .blog-halte { top: calc(var(--rij-pad) + 1px); }
  .blog-rij--deel:first-child::before { top: calc(var(--rij-pad) + 24px); bottom: calc(-1 * var(--rij-pad) - 1px); }
}

/* de knop die verschijnt als de index langer wordt dan negen rijen (p-blog.js) */
.blog-meer-knop { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-top: clamp(22px, 3vw, 36px); }
.blog-meer-knop span { font-size: .9375rem; color: var(--muted); }

/* ===== Artikel: de kop (donker) ===== */
.blog-kop { padding-block: clamp(22px, 3.4vw, 52px) clamp(28px, 4vw, 56px); }
.blog-kop-rij { display: grid; gap: clamp(22px, 4vw, 40px); }
.blog-kop-tekst { min-width: 0; }
/* het kruimelpad: Home / Blog / titel. Op een smal scherm alleen Home / Blog, de titel staat er direct onder als kop. */
.blog-kop .kruimel li:last-child { min-width: 0; }
@media (max-width: 639px) { .blog-kop .kruimel li:last-child { display: none; } }
.blog-artikel .blog-kop .h1 { font-size: clamp(1.9rem, 1.15rem + 2.9vw, 3.4rem); line-height: 1.05; max-width: 20em; }
.blog-artikel .blog-kop .lede { max-width: 34em; font-size: clamp(1.0625rem, 1rem + .35vw, 1.25rem); }
.blog-kop .blog-meta { margin-top: clamp(16px, 2vw, 24px); }
/* de standregel van de twee subsidie-artikelen, direct onder de datum van het artikel. Hij moet opvallen
   (termijnen en bedragen verlopen), daarom gewone tekstkleur en het label "Stand mei 2026:" in teal.
   Geen kader en geen streep: het kader met de streep is er alleen voor een terzijde van de redactie. */
.blog-stand { margin-top: 8px; font-size: .9375rem; line-height: 1.5; color: var(--text); max-width: 34em; }
.blog-stand strong { color: var(--teal); font-weight: 600; }
@media (min-width: 1000px) {
  .blog-kop-rij { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(40px, 5vw, 80px); align-items: center; }
}

/* het tweeluik in de kop van de twee subsidie-artikelen: dezelfde lijn met twee haltes als in de index */
.blog-tweeluik { margin-top: clamp(18px, 2.4vw, 28px); padding-top: clamp(10px, 1.6vw, 14px); border-top: 1px solid var(--line-mid); max-width: 28rem; }
.blog-tweeluik-kop { font-size: .875rem; font-weight: 600; line-height: 1.4; color: var(--muted); }
.blog-delen { position: relative; display: grid; margin-top: 2px; }
.blog-delen::before { content: ''; position: absolute; left: 12.5px; top: 22px; bottom: 22px; width: 3px; background: var(--teal); }
.blog-deel, .blog-deel > a { display: flex; align-items: center; gap: 12px; min-height: 44px; font-size: 1rem; line-height: 1.3; }
.blog-deel > a { flex: 1; color: var(--bright); text-decoration: none; }
/* R8:B02 */ @media (hover: hover) and (pointer: fine) { .blog-deel > a:hover .blog-deel-naam { text-decoration: underline; text-decoration-color: var(--teal); text-decoration-thickness: 1.5px; text-underline-offset: 4px; } }
.blog-deel-naam { font-weight: 600; color: var(--bright); }
.blog-deel-hier { font-size: .875rem; color: var(--muted); }

/* ===== Artikel: de leesbalk =====
   Geen script en geen scroll-luisteraar: een CSS scroll-tijdlijn op het artikel zelf.
   Waar de browser dat niet kent, of bij verminderde beweging, is er gewoon geen balk. */
.blog-artikel { view-timeline-name: --blog-artikel; view-timeline-axis: block; view-timeline-inset: var(--kop-h) 0px; }
.blog-leesbalk { position: fixed; left: 0; right: 0; top: var(--kop-h); z-index: 41; height: 3px; pointer-events: none; background: var(--teal); transform: scaleX(0); transform-origin: 0 50%; }
/* R8:B06 de leesbalk is geen beweging maar een stand die je eigen scrollen volgt: hij blijft ook bij "minder beweging".
   Was: dezelfde regel binnen @media (prefers-reduced-motion: no-preference). Terugdraaien: die media query terugzetten. */
@supports (animation-timeline: view()) {
  /* de balk groeit zolang je in het artikel bent en verdwijnt zodra het artikel uit beeld schuift */
  .blog-leesbalk { animation: blog-lees linear both, blog-lees-weg linear both; animation-timeline: --blog-artikel, --blog-artikel; animation-range: contain 0% contain 100%, exit 0% exit 35%; }
}
@keyframes blog-lees { to { transform: scaleX(1); } }
@keyframes blog-lees-weg { to { opacity: 0; } }
.menu-open .blog-leesbalk { visibility: hidden; }
@media (max-width: 959px) { html:not(.js) .blog-leesbalk { top: 0; } }

/* ===== Artikel: het raster =====
   Het raster van elke pagina met een zijkolom (de maten staan bovenaan pagina.css), met hier een derde kolom:
   de inhoudsopgave, de tekst (hooguit 612) en de oproep die meeloopt.
   Smaller dan 1360 pixels is er geen plek voor de derde kolom: dan staat de oproep onder de tekst. */
.blog-raster { display: grid; gap: clamp(20px, 3vw, 32px); }
.blog-raster > * { min-width: 0; }
.blog-lijf { padding-block: clamp(22px, 4.4vw, 64px) clamp(40px, 6vw, 88px); }
@media (min-width: 1000px) {
  .blog-raster { grid-template-columns: var(--zij) minmax(0, 1fr); column-gap: var(--zij-gat); align-items: start; }
}
/* de tekst staat in twee stukken: tot de tweede tussenkop, en vanaf daar. Naast het tweede stuk loopt de oproep mee.
   De lucht tussen de stukken is de lucht boven een tussenkop. */
.blog-tekst { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: calc(2.2 * var(--kop-3)); }
.blog-tekst > * { min-width: 0; }
.blog-tekst > .blog-prose + .blog-prose > h2:first-child { margin-top: 0; }
@media (min-width: 1360px) {
  .blog-tekst { grid-template-columns: minmax(0, var(--blog-tekst)) minmax(0, 1fr); column-gap: var(--zij-gat); }
  .blog-tekst > .blog-prose { grid-column: 1; }
  .blog-tekst > .blog-prose--breed { grid-column: 1 / -1; }
  .blog-tekst > .blog-oproep { grid-column: 2; grid-row: 2; align-self: start; position: sticky; top: calc(var(--kop-h) + 28px); }
}

/* de inhoudsopgave: smal een uitklapper boven de tekst, breed een rail die meeloopt */
.blog-inhoud-vak summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 48px; padding: 12px 0; border-block: 1px solid var(--line-mid); font-size: 1rem; font-weight: 600; line-height: 1.3; color: var(--bright); cursor: pointer; list-style: none; }
.blog-inhoud-vak summary::-webkit-details-marker { display: none; }
.blog-inhoud-vak[open] summary { border-bottom-color: transparent; }
.blog-inhoud-vak[open] .plusje::after { transform: none; }
.blog-inhoud-vak ol { padding-bottom: 16px; border-bottom: 1px solid var(--line-mid); }
/* op een telefoon is elke regel een raakvlak van minstens 44 pixels */
.blog-inhoud-vak li a { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; min-height: 44px; padding: 6px 0 6px 14px; border-left: 2px solid var(--line-mid); font-size: .9375rem; line-height: 1.4; color: var(--text); text-decoration: none; }
/* R8:B02 */ @media (hover: hover) and (pointer: fine) { .blog-inhoud-vak li a:hover { color: var(--bright); } }
.blog-inhoud-vak li a[aria-current] { border-left-color: var(--teal); color: var(--bright); font-weight: 600; }
.blog-inhoud-vak li.blog-inhoud-sub a { padding-left: 30px; color: var(--muted); }
/* R8:B02 */ @media (hover: hover) and (pointer: fine) { .blog-inhoud-vak li.blog-inhoud-sub a:hover { color: var(--bright); } }
.blog-inhoud-nr { min-width: 1.5em; color: var(--muted); font-variant-numeric: tabular-nums; }
@media (min-width: 1000px) {
  .blog-inhoud { position: sticky; top: calc(var(--kop-h) + 28px); max-height: calc(100vh - var(--kop-h) - 56px); overflow-y: auto; }
  .blog-inhoud-vak summary { min-height: 0; padding: 0 0 12px; border: 0; font-size: .875rem; color: var(--muted); cursor: default; pointer-events: none; }
  .blog-inhoud-vak .plusje { display: none; }
  .blog-inhoud-vak ol { padding-bottom: 0; border-bottom: 0; }
  .blog-inhoud-vak li a { min-height: 0; padding-block: 7px; }
}

/* ===== Artikel: de lopende tekst (bovenop .prose uit pagina.css) ===== */
.blog-prose { max-width: none; font-size: 1.0625rem; line-height: 1.68; }
.blog-prose > * { max-width: var(--blog-tekst); }
.blog-prose > .blog-tabel { max-width: none; }     /* een tabel loopt bewust over de volle breedte, tot de rechterrand van de pagina */
@media (min-width: 700px) { .blog-prose { font-size: 1.125rem; line-height: 1.7; } }
/* lange Nederlandse samenstellingen breken liever af dan dat ze de kolom uit lopen */
.blog-artikel .h1, .blog-prose h2, .blog-prose h3, .blog-rij-titel, .blog-verder-titel, .blog-vraag h3 { overflow-wrap: break-word; }
.blog-prose h3 { text-wrap: pretty; }
.blog-lead { font-size: 1.08em; line-height: 1.55; letter-spacing: -0.008em; color: var(--bright); }
@media (min-width: 700px) { .blog-lead { font-size: 1.16em; } }
/* een anker midden in de tekst (het rekenvoorbeeld) komt vrij onder de vaste kop uit */
.blog-prose [id] { scroll-margin-top: 8px; }

/* de negen regelingen: een genummerde halte voor de kop, een haarlijn erboven */
.blog-prose h2.blog-genummerd { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; align-items: start; margin-top: 1.9em; padding-top: 1.05em; border-top: 1px solid var(--line-mid); hyphens: manual; }
.blog-tekst > .blog-prose + .blog-prose > h2.blog-genummerd:first-child { margin-top: 0; }
.blog-nr { width: 32px; height: 32px; margin-top: 1px; font-size: .9375rem; }
@media (min-width: 700px) {
  .blog-nr { width: 36px; height: 36px; margin-top: 0; font-size: 1rem; }
  /* de zachte afbreekstreepjes in lange koppen zijn er voor de telefoon; op breed breekt een kop alleen op een spatie of een echt koppelteken.
     De genummerde koppen van de regelingen zijn de uitzondering: daar staan woorden in die ook op breed niet op een regel passen. */
  .blog-prose h2:not(.blog-genummerd) { hyphens: none; }
}

/* vier stappen als een korte route: de rechte teal lijn met haltes, de laatste gevuld */
.blog-prose ul.blog-route { position: relative; gap: 0; margin-top: 1.3em; padding-left: 38px; }
.blog-prose ul.blog-route > li { padding-bottom: 1em; }
.blog-prose ul.blog-route > li:last-child { padding-bottom: 1.3em; }
.blog-prose ul.blog-route > li::before { left: -38px; top: .36em; z-index: 1; width: 14px; height: 14px; background: var(--blog-papier); border: 1.5px solid var(--teal); }
.blog-prose ul.blog-route > li:last-child::before { background: var(--teal); }
.blog-route::before { content: ''; position: absolute; left: 5.5px; top: .7em; bottom: 8px; width: 3px; background: var(--teal); }
.blog-route::after { content: ''; position: absolute; left: -1px; bottom: -2px; border-style: solid; border-width: 11px 8px 0; border-color: var(--teal) transparent transparent; }

/* tabellen: haarlijnen, de eerste kolom helder, de cellen zo groot als de tekst eromheen en de kolomkop klein en gedempt.
   Onder 640 pixels stapelt elke rij tot een blokje met labels. */
.blog-prose .blog-tabel { width: 100%; margin-top: 1.5em; border-collapse: collapse; font-size: 1em; line-height: 1.5; }
.blog-prose .blog-tabel th, .blog-prose .blog-tabel td { padding: 12px 18px 13px 0; border-bottom: 1px solid var(--line-mid); text-align: left; vertical-align: top; font-weight: 400; color: var(--text); }
.blog-prose .blog-tabel th:last-child, .blog-prose .blog-tabel td:last-child { padding-right: 0; }
.blog-prose .blog-tabel thead th { padding-block: 0 9px; border-bottom: 1.5px solid var(--line-strong); font-size: .875em; font-weight: 600; color: var(--muted); }
.blog-prose .blog-tabel tbody th, .blog-prose .blog-tabel--twee tbody td:first-child { font-weight: 600; color: var(--bright); }
.blog-tabel--vier th:first-child { width: 27%; }
.blog-tabel--vier td:nth-child(3) { width: 19%; }
.blog-tabel--vier td:nth-child(4) { width: 19%; }
.blog-tabel--twee td:first-child { width: 46%; }
@media (max-width: 639px) {
  .blog-prose .blog-tabel, .blog-tabel tbody, .blog-tabel tr, .blog-prose .blog-tabel th, .blog-prose .blog-tabel td { display: block; width: auto; }
  .blog-tabel thead { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .blog-prose .blog-tabel { border-top: 1.5px solid var(--line-strong); }
  .blog-tabel tbody tr { padding: 13px 0 14px; border-bottom: 1px solid var(--line-mid); }
  .blog-prose .blog-tabel tbody th, .blog-prose .blog-tabel tbody td { padding: 0; border: 0; overflow-wrap: break-word; }
  .blog-prose .blog-tabel tbody th, .blog-prose .blog-tabel--twee tbody td:first-child { line-height: 1.35; }
  .blog-prose .blog-tabel td[data-kolom] { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); column-gap: 10px; margin-top: 5px; }
  .blog-tabel td[data-kolom]::before { content: attr(data-kolom); padding-top: 2px; font-size: .8125rem; font-weight: 600; color: var(--muted); }
}

/* het kader met de teal streep: alleen voor een terzijde van de redactie (een tip of een samenvatting).
   Niet voor een oproep, een waarschuwing of een lijst. */
.blog-kader { margin-block: 1.9em; padding: 18px 22px 20px 26px; background: var(--blog-tint); box-shadow: inset 4px 0 0 var(--teal); }
.blog-prose > .blog-kader:first-child { margin-top: 0; }
.blog-kader p { color: var(--text); }

/* ===== Artikel: figuren in de tekst =====
   Net als de omslag: een vlakke donkere plaat met voorwerpen erop die de site al kent (het venster met een cijfer,
   het grijze Excel-blad, de kassabon, de kaart met tabs). De plaat is altijd donker, ook op het lichte vlak:
   daarom zet ze de kleuren van de huisstijl terug op hun donkere waarde. Papier draagt Geist Mono. */
.blog-figuur { margin-block: 1.9em; container-type: inline-size; }
.blog-prose h2 + .blog-figuur { margin-top: 1em; }
.blog-plaat {
  --bright: #f0ede6; --text: #d4d0c8; --muted: #9a9690; --line: #182b37; --line-mid: #2c4755; --line-strong: #527281; --teal: #4ECDC4;
  padding: clamp(16px, 4.4vw, 28px); border-radius: var(--radius); background: #06202c; color: var(--text);
  font-size: .9375rem; line-height: 1.45;
}
.blog-figuur figcaption { display: flex; align-items: baseline; justify-content: space-between; gap: 6px 16px; margin-top: 8px; font-size: .8125rem; line-height: 1.45; color: var(--muted); }
.blog-figuur figcaption .merkje { flex: none; margin-left: auto; }
.blog-figuur figcaption a { color: var(--bright); }
.blog-plaat-naam { display: block; font-size: .8125rem; font-weight: 600; line-height: 1.4; color: var(--muted); }
.blog-plaat-zin { display: block; font-size: .875rem; line-height: 1.45; color: var(--text); }

/* het venster met een cijfer */
.blog-venster { min-width: 0; border: 1.5px solid #42b0aa; border-radius: var(--radius); background: #001620; }
.blog-venster-balk { display: block; padding: 8px 14px 9px; border-bottom: 1px solid #182b37; font-size: .78125rem; font-weight: 600; line-height: 1.3; color: var(--teal); }
.blog-venster-lijf { display: grid; gap: 2px; padding: 12px 14px 14px; }
.blog-venster-label { font-size: .875rem; line-height: 1.35; color: var(--muted); }
.blog-venster-getal { font-size: clamp(1.75rem, 1.2rem + 2.4vw, 2.25rem); font-weight: 800; letter-spacing: -0.04em; line-height: 1.08; color: var(--bright); font-variant-numeric: tabular-nums; white-space: nowrap; }
.blog-venster-zin { margin-top: 6px; font-size: .875rem; line-height: 1.4; color: var(--text); }
.blog-venster-rijen { display: grid; grid-template-columns: minmax(0, 1.25fr) repeat(3, auto); column-gap: 14px; margin-top: 8px; font-size: .8125rem; line-height: 1.3; font-variant-numeric: tabular-nums; }
.blog-venster-rijen > span { padding: 6px 0; border-top: 1px solid #182b37; color: var(--text); text-align: right; white-space: nowrap; }
.blog-venster-rijen > span:nth-child(4n + 1) { text-align: left; color: var(--bright); font-weight: 600; }
.blog-venster-rijen > .k { border-top: 0; padding-top: 0; font-weight: 400; color: var(--muted); }
.blog-venster-rijen > .k:nth-child(4n + 1) { font-weight: 400; color: var(--muted); }

/* het grijze Excel-blad */
.blog-blad { min-width: 0; background: #c3c8c5; color: #35414a; font: 400 13px/1.25 'Geist Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace; letter-spacing: -0.01em; }
.blog-blad-balk { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px; padding: 8px 10px; background: #abb1ae; color: #27323a; font-size: 12px; white-space: nowrap; }
.blog-blad-rooster { display: grid; grid-template-columns: 24px minmax(0, 1.2fr) minmax(0, .8fr) minmax(0, 1.1fr); }
.blog-blad-rooster span { padding: 8px; border-right: 1px solid #a4aaa7; border-bottom: 1px solid #a4aaa7; white-space: nowrap; }
.blog-blad-rooster span:nth-child(4n), .blog-blad-rooster .breed { border-right: 0; }
.blog-blad-rooster .hk { padding-inline: 0; background: #b5bab7; color: #313c43; text-align: center; }
.blog-blad-rooster .g { text-align: right; }
.blog-blad-rooster .vet { font-weight: 600; color: #222d35; }
.blog-blad-rooster .breed { grid-column: 2 / -1; }
.blog-blad-rooster .is-fout { background: #b5bab7; color: #222d35; font-weight: 600; }

/* de kassabon: grijs en een fractie gedraaid, zoals de bon "zelf regelen" op de homepage */
.blog-bon {
  --tand: 7px;
  width: min(100%, 23rem); padding: 20px 18px 30px; background: #dcdfdb; color: #2a373e;
  font: 400 13px/1.45 'Geist Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
  -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / calc(2 * var(--tand)) 100%;
          mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / calc(2 * var(--tand)) 100%;
  transform: rotate(-1.2deg);
}
.blog-bon-kop { display: block; font-family: 'Inter', system-ui, sans-serif; font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.012em; line-height: 1.2; text-align: center; color: #17232a; }
.blog-bon-sub { display: block; padding-bottom: 11px; margin-bottom: 9px; border-bottom: 1px dashed currentColor; font-size: 12px; text-align: center; }
.blog-bon-regel { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px; padding: 2px 0; }
.blog-bon-regel i { flex: 1; min-width: 12px; border-bottom: 1.5px dotted currentColor; transform: translateY(-.28em); opacity: .5; }
.blog-bon-regel span:last-child { margin-left: auto; font-weight: 600; text-align: right; }
.blog-bon-slot { display: block; margin-top: 9px; padding-top: 10px; border-top: 1px dashed currentColor; font-weight: 600; text-align: center; }

/* figuur: het rekenvoorbeeld. Links wat het is, rechts de bon. */
.blog-reken { display: grid; gap: 18px; justify-items: center; }
.blog-reken-tekst { display: grid; gap: 6px; justify-self: stretch; }
.blog-reken-kop { font-size: clamp(1.15rem, 1.05rem + .5vw, 1.3rem); font-weight: 650; letter-spacing: -0.018em; line-height: 1.25; color: var(--bright); text-wrap: balance; }
@container (min-width: 540px) {
  .blog-reken { grid-template-columns: minmax(0, 1fr) minmax(0, 21rem); gap: 24px; align-items: center; }
}

/* figuur: de laag onder het dashboard. Drie lagen onder elkaar, de pijl wijst omhoog naar wat je ziet. */
.blog-lagen { display: grid; }
.blog-laag { position: relative; display: grid; gap: 8px; padding-block: 16px; border-top: 1px solid var(--line-mid); }
.blog-laag:first-child { padding-top: 0; border-top: 0; }
.blog-laag:last-child { padding-bottom: 0; }
.blog-laag + .blog-laag::before { content: ''; position: absolute; left: 50%; top: -6px; margin-left: -8px; border-style: solid; border-width: 0 8px 11px; border-color: transparent transparent var(--teal); }
.blog-laag .blog-venster { width: min(100%, 17rem); }
.blog-opslag { display: grid; gap: 8px; padding: 12px 14px 13px; border: 1.5px solid var(--line-strong); border-radius: var(--radius); }
.blog-opslag-kop { font-weight: 600; color: var(--bright); }
.blog-labels { display: flex; flex-wrap: wrap; gap: 6px; }
.blog-labels span { padding: 4px 9px 5px; border: 1px solid var(--line-mid); border-radius: var(--radius); font-size: .8125rem; line-height: 1.3; color: var(--text); white-space: nowrap; }
.blog-bronnen { display: flex; flex-wrap: wrap; gap: 8px; }
.blog-bronnen span { flex: 1 1 auto; padding: 8px 11px 9px; border: 1.5px solid var(--line-strong); border-radius: var(--radius); font-size: .875rem; font-weight: 600; line-height: 1.3; color: var(--bright); white-space: nowrap; }
@container (min-width: 540px) {
  .blog-laag { grid-template-columns: 9.5rem minmax(0, 1fr); gap: 16px; align-items: start; }
  .blog-laag + .blog-laag::before { left: calc(9.5rem + 16px + 28px); margin-left: 0; }
}

/* figuur: wat er verandert, en het cijfer dat dat moet doorstaan. Vijf haltes op een lijn die bij het venster uitkomt:
   smal loopt de lijn omlaag naar het venster eronder, breed buigt ze onderaan naar rechts. */
.blog-loop { display: grid; gap: 12px; }
.blog-loop-deel { position: relative; display: grid; gap: 8px; align-content: start; min-width: 0; }
.blog-stappen { position: relative; display: grid; gap: 9px; padding-bottom: 26px; }
.blog-stappen::before { content: ''; position: absolute; left: 5.25px; top: .6em; bottom: 4px; width: 1.5px; background: var(--line-strong); }
.blog-stappen::after { content: ''; position: absolute; left: 0; bottom: 0; border-style: solid; border-width: 9px 6px 0; border-color: var(--line-strong) transparent transparent; }
.blog-stap { position: relative; display: block; padding-left: 26px; font-weight: 600; line-height: 1.35; color: var(--bright); }
.blog-stap::before { content: ''; position: absolute; left: 0; top: .26em; z-index: 1; width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid var(--text); background: #06202c; }
.blog-loop .blog-venster { width: min(100%, 17rem); }
@container (min-width: 540px) {
  .blog-loop { grid-template-columns: minmax(0, 1fr) 17rem; gap: 0 22px; align-items: end; }
  .blog-stappen { padding-bottom: 38px; }
  .blog-stappen::before { bottom: 38px; }
  .blog-stappen::after { left: 5.25px; right: -12px; bottom: 37px; height: 1.5px; border: 0; background: var(--line-strong); }
  .blog-loop-deel--doel::before { content: ''; position: absolute; left: -12px; bottom: 31px; border-style: solid; border-width: 6px 0 6px 9px; border-color: transparent transparent transparent var(--line-strong); }
}

/* figuur: twee voorwerpen naast elkaar (rapporteren en sturen, de basis die niet en wel klopt) */
.blog-paar { display: grid; gap: 20px; }
.blog-paar-deel { display: grid; gap: 8px; align-content: start; min-width: 0; }
@container (min-width: 540px) {
  .blog-paar { grid-template-columns: minmax(0, 5fr) minmax(0, 8fr); gap: 20px; align-items: start; }
  .blog-paar--basis { grid-template-columns: minmax(0, 8fr) minmax(0, 5fr); }
}

/* op de smalste telefoon (een figuur van minder dan 300 pixels) krijgt het Excel-blad de maat van het blad op de homepage */
@container (max-width: 299px) {
  .blog-blad { font-size: 11.5px; }
  .blog-blad-balk { font-size: 11px; }
  .blog-blad-rooster { grid-template-columns: 20px minmax(0, 1.2fr) minmax(0, .8fr) minmax(0, 1.1fr); }
  .blog-blad-rooster span { padding: 7px 5px; }
}

/* figuur: de kaart met negen tabs, een per regeling. Het tabje van de regeling waar je bent, hoort bij de kaart. */
.blog-plaat--kaart { padding-block: clamp(16px, 4vw, 22px) clamp(18px, 4.4vw, 26px); }
.blog-kaart { max-width: 31rem; margin-inline: auto; color: #1d2a2f; font: 400 13.5px/1.45 'Geist Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace; }
.blog-kaart-tabs { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: clamp(3px, 1cqi, 6px); padding-inline: 14px; }
.blog-kaart-tabs span { padding: 5px 0 9px; margin-bottom: -4px; border-radius: 4px 4px 0 0; background: #b0b6b2; color: #35414a; text-align: center; line-height: 1.3; }
.blog-kaart-tabs .is-aan { position: relative; z-index: 1; background: #dcdfdb; color: #0f1c21; font-weight: 600; }
.blog-kaart-vel { position: relative; padding: 16px 18px 14px; border-top: 5px solid #b0b6b2; background: #dcdfdb; }
.blog-kaart-kop { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 14px; padding-bottom: 11px; border-bottom: 1px dashed #6f7b7f; }
.blog-kaart-kop strong { font-family: 'Inter', system-ui, sans-serif; font-size: clamp(1.15rem, 1rem + .8vw, 1.375rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; color: #0f1c21; }
.blog-kaart-kop span { font-size: 12.5px; color: #35414a; white-space: nowrap; }
.blog-kaart-rijen { margin: 9px 0 0; }
.blog-kaart-rijen > div { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px; padding: 3px 0; }
.blog-kaart-rijen dt { display: flex; flex: 1; align-items: baseline; gap: 6px; min-width: 5.5em; white-space: nowrap; }
.blog-kaart-rijen dt::after { content: ''; flex: 1; min-width: 14px; border-bottom: 1.5px dotted #6f7b7f; transform: translateY(-.28em); }
.blog-kaart-rijen dd { margin: 0 0 0 auto; max-width: 100%; font-weight: 600; text-align: right; }
.blog-kaart-voet { margin-top: 9px; padding-top: 9px; border-top: 1px dashed #6f7b7f; font-size: 12.5px; color: #35414a; }

/* ===== Artikel: de oproep =====
   De enige van de pagina (de vaste afsluiter vervalt hier). Breed: in de rechterkolom, meelopend vanaf de tweede
   tussenkop. Smaller: onder de tekst. Altijd tussen twee teal lijnen, met de gevulde hoofdknop. */
.blog-oproep { max-width: var(--blog-tekst); padding-block: 20px 24px; border-block: 1.5px solid var(--blog-lijn-teal); }
.blog-oproep-kop { font-size: clamp(1.3rem, 1.1rem + .8vw, 1.6rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; color: var(--bright); text-wrap: balance; }
.blog-oproep p { margin-top: 8px; max-width: 32em; line-height: 1.55; }
.blog-oproep .acties { margin-top: 18px; }
.blog-oproep .link { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
@media (min-width: 1360px) {
  .blog-oproep { max-width: none; padding-block: 16px 14px; }
  .blog-oproep-kop { font-size: 1.25rem; }
  .blog-oproep p { font-size: .9375rem; line-height: 1.5; }
  .blog-oproep .acties { display: grid; gap: 4px; margin-top: 16px; }
  .blog-oproep .btn { width: 100%; padding-inline: 10px; }
  .blog-oproep .link { font-size: .9375rem; }
}
/* in een heel laag venster past de oproep niet onder de vaste kop: dan loopt ze niet mee */
@media (min-width: 1360px) and (max-height: 560px) { .blog-tekst > .blog-oproep { position: static; } }

/* ===== Artikel: veelgestelde vragen, op hetzelfde lichte vlak als de tekst ===== */
.blog-faq { padding-block: clamp(36px, 6.4vw, 96px); }
.blog-vel.licht + .blog-faq { padding-top: 0; }
.blog-vel.licht + .blog-faq > .wrap { padding-top: clamp(32px, 5vw, 72px); border-top: 1px solid var(--line-mid); }
.blog-faq .h2 { font-size: var(--kop-2); }
.blog-vragen { max-width: var(--blog-tekst); border-top: 1.5px solid var(--line-strong); }
.blog-vraag { padding: 18px 0 20px; border-bottom: 1px solid var(--line-mid); }
.blog-vraag h3 { font-size: clamp(1.1rem, 1.02rem + .4vw, 1.25rem); font-weight: 650; letter-spacing: -0.014em; line-height: 1.3; color: var(--bright); text-wrap: balance; }
.blog-vraag p { margin-top: 6px; font-size: 1.0625rem; line-height: 1.6; }

/* ===== Artikel: vorige en volgende ===== */
/* delen: een regel tussen het artikel en "verder lezen" */
.blog-doorsturen { padding-top: clamp(24px, 4vw, 44px); }
.blog-doorsturen-rij { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 26px; }
.blog-doorsturen-kop { font-size: .9375rem; font-weight: 600; color: var(--muted); }
.blog-doorsturen .link { padding-block: 6px; font-weight: 600; }
.blog-kopieer { padding-inline: 0; background: none; border: 0; font: inherit; font-weight: 600; cursor: pointer; }
.blog-doorsturen-status { flex: 1 0 100%; min-height: 1.5em; font-size: .9375rem; color: var(--text); }
.blog-doorsturen + .blog-verder { padding-top: clamp(8px, 1.4vw, 16px); }
.blog-verder { padding-block: clamp(28px, 5vw, 72px); }
/* een artikel zonder vragen dat donker eindigt: dan volgt vorige en volgende er dichter op, zonder extra lijn.
   Staat de tekst op het lichte vlak, dan is de wissel van licht naar donker zelf de scheiding. */
.blog-artikel--donker:not(:has(.blog-vel.licht)) .blog-lijf { padding-bottom: clamp(28px, 4.4vw, 60px); }
.blog-artikel--donker:not(:has(.blog-vel.licht)) + .blog-verder { padding-top: 0; }
.blog-artikel:has(.blog-vel.licht) + .blog-verder .blog-verder-rij { border-top: 0; }
.blog-verder-rij { display: grid; border-top: 1.5px solid var(--line-strong); }
.blog-verder-link { display: grid; align-content: start; gap: 5px; padding: 18px 0 20px; border-bottom: 1px solid var(--line-mid); color: var(--text); text-decoration: none; }
.blog-verder-label { display: flex; align-items: center; gap: 9px; font-size: .875rem; font-weight: 600; line-height: 1.4; color: var(--muted); }
.blog-pijl { flex: none; width: 12px; height: 14.5px; fill: var(--teal); }
.blog-pijl--terug { transform: scaleX(-1); }
.blog-verder-titel { font-size: clamp(1.2rem, 1.05rem + .7vw, 1.5rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; color: var(--bright); text-wrap: balance; }
.blog-verder-zin { max-width: 34em; font-size: .9375rem; line-height: 1.5; text-wrap: pretty; }
/* R8:B02 */ @media (hover: hover) and (pointer: fine) { .blog-verder-link:hover .blog-verder-titel { text-decoration: underline; text-decoration-color: var(--teal); text-decoration-thickness: 2px; text-underline-offset: 5px; } }
@media (min-width: 760px) {
  .blog-verder-rij { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .blog-verder-link { padding: 24px clamp(20px, 3vw, 44px) 28px 0; }
  .blog-verder-link + .blog-verder-link { padding-left: clamp(20px, 3vw, 44px); padding-right: 0; border-left: 1px solid var(--line-mid); }
}

/* ══════════ Ronde 8 · blog en artikelen (team 3) ══════════
   Elk blok hoort bij één voorstel en draagt zijn merkteken. Terugdraaien is het blok weghalen (en waar genoemd
   de html terugzetten). De hoverregels van R8:B02 en de leesbalk van R8:B06 staan op hun eigen plek hierboven. */

/* R8:A05 de regelbreuk na de dubbele punt in de kop van "Van losse systemen" pas vanaf 768; smaller loopt de kop door.
   (de spans .regel en de vaste spatie staan in de html) */
@media (max-width: 767px) { .blog-kop .h1 .regel { display: inline; } }

/* R8:A06 de kop van een artikel op dezelfde hoogte als op de andere vervolgpagina's: dezelfde bovenruimte als
   .pagina-kop in pagina.css (op 1440 kruimelpad op y 159 in plaats van 122). Bovenaan uitgelijnd, zodat de hoogte
   van de tekening er niets aan verandert. */
@media (min-width: 1000px) {
  .blog-kop { padding-top: clamp(36px, 6vw, 92px); }
  .blog-kop-rij { align-items: start; }
}

/* R8:A07 een label boven een kop is grijs, 13 px, 600 (zoals .label in basis.css): "Nieuwste artikel" en "Tweeluik" */
.blog-etiket { font-size: var(--label-maat, .8125rem); font-weight: 600; color: var(--muted); }
.blog-reeks-soort { font-size: var(--label-maat, .8125rem); font-weight: 600; color: var(--muted); }

/* R8:A11 onderaan een artikel een punthaak in plaats van de gevulde blokpijl: ‹ voor "Overzicht", › na "Volgend artikel",
   dezelfde als "Volgende ›" in het venster (venster.css). De svg blijft in de html staan en wordt verborgen.
   Terugdraaien: dit blok weg. */
.blog-pijl { display: none; }
.blog-verder-label:has(.blog-pijl--terug)::before,
.blog-verder-label:has(.blog-pijl:not(.blog-pijl--terug))::after {
  content: ''; flex: none; width: 9px; height: 9px; border-top: 2px solid var(--teal); border-right: 2px solid var(--teal);
}
.blog-verder-label:has(.blog-pijl--terug)::before { margin-left: 3px; transform: rotate(-135deg); }
.blog-verder-label:has(.blog-pijl:not(.blog-pijl--terug))::after { margin-right: 3px; transform: rotate(45deg); }

/* R8:A16 "Veelgestelde vragen" onder een artikel op de maat van de andere tussenkoppen (--kop-3, 32 op 1440), op een regel */
.blog-faq .h2 { font-size: var(--kop-3); font-weight: 800; letter-spacing: -0.025em; line-height: 1.15; }

/* R8:A17 de inhoudsopgave precies zoals die van de privacyverklaring (p-privacy.css, zelfde merkteken):
   label 13 px, 600, gedempt; 24 px eronder de lijst; elk item 16 px naast een lijn van 2 px; het actieve item een teal streep. */
@media (min-width: 1000px) {
  .blog-inhoud-vak summary { margin: 0 0 24px; padding: 0; font-size: .8125rem; font-weight: 600; line-height: 1.3; color: var(--muted); }
  .blog-inhoud-vak li a { padding: 7px 0 7px 16px; border-left: 2px solid var(--line-mid); }
  .blog-inhoud-vak li.blog-inhoud-sub a { padding-left: 32px; }
}

/* R8:B04 drukfeedback: de kop van de inhoudsopgave op een telefoon krijgt een vlak zodra de vinger landt.
   Het vlak is var(--druk) uit basis.css (team 4; op het lichte vlak een tint dieper). */
.blog-inhoud-vak summary { transition: background-color var(--t-druk, 160ms) ease; }
.blog-inhoud-vak summary:active { background-color: var(--druk, #e4e0d6); transition-duration: 0ms; }

/* R8:D02 in de regelingkaart loopt het label niet meer door de waarde: het label krimpt niet onder zijn eigen breedte.
   Past de waarde er niet naast, dan zakt ze naar de regel eronder, rechts uitgelijnd. Was: flex: 1; min-width: 5.5em. */
.blog-kaart-rijen dt { flex: 1 0 auto; min-width: 0; }

/* R8:D03 de vragen onder een artikel zijn op een telefoon uitklappers, dicht, zoals "Wat ondernemers ons vooraf vragen".
   p-blog.js zet de knoppen er tot 759 pixels in (klasse blog-vragen--dicht). Zonder script en vanaf 760 alles open.
   Terugdraaien: dit blok weg en in p-blog.js de functie vragenDicht. */
.blog-vragen--dicht .blog-vraag { padding: 0; }
.blog-vraag-knop {
  display: flex; align-items: center; justify-content: space-between; gap: 20px; width: 100%; min-height: 44px;
  padding: 16px 0; background: none; border: 0; font: inherit; letter-spacing: inherit; line-height: inherit;
  text-align: left; color: inherit; cursor: pointer;
  transition: background-color var(--t-druk, 160ms) ease;
}
.blog-vraag-knop:active { background-color: var(--druk, #e4e0d6); transition-duration: 0ms; }
.blog-vraag-in { padding: 0 44px 18px 0; }
.blog-vraag-in > p:first-child { margin-top: 0; }

/* R8:D05 deel 2 op een telefoon: de kaartenbak bovenaan weg (dezelfde kaart staat een scherm later), en de regelingkaarten
   zonder de rij tabjes en de voetregel ("1 van 9" staat al in de kaartkop, "mei 2026" bovenaan het artikel). */
@media (max-width: 759px) {
  .blog-kop-beeld--kaart { display: none; }
  .blog-kaart-tabs, .blog-kaart-voet { display: none; }
  .blog-kaart-vel { border-top: 0; border-radius: 4px; }
}

/* R8:D06 het blogoverzicht op een telefoon: het kleine beeld rechts naast de tekst (104 breed) in plaats van erboven.
   Het grote beeld bij "Nieuwste artikel" blijft. In het tweeluik blijft de lijn met 1 en 2 links. */
@media (max-width: 639px) {
  .blog-rij { grid-template-columns: minmax(0, 1fr) 104px; column-gap: 16px; align-items: start; }
  .blog-rij > .blog-rij-meta { grid-column: 1; grid-row: 1; }
  /* meta en titel naast het beeld, de inleiding eronder over de volle breedte: zo blijft de titel kort van regel */
  .blog-rij > .blog-rij-tekst { display: contents; }
  .blog-rij > .blog-rij-tekst > .blog-rij-titel { grid-column: 1; grid-row: 2; }
  .blog-rij > .blog-rij-tekst > p { grid-column: 1 / -1; grid-row: 3; margin-top: 0; }
  .blog-rij > .blog-beeld { grid-column: 2; grid-row: 1 / span 2; order: 0; width: 104px; max-width: none; margin: 4px 0 0; }
  .blog-rij > .blog-beeld svg { border-radius: var(--radius); }
}

/* R8:D12 raakvlakken van minstens 44 pixels op een telefoon, zonder dat de opmaak verandert */
.blog-doorsturen .link { display: inline-flex; align-items: center; min-height: 44px; padding-block: 0; }
.blog-figuur figcaption a { display: inline-block; padding-block: 12px; margin-block: -12px; font-size: 14px; }
.blog-prose .blog-tabel td a { display: inline-block; padding-block: 12px; margin-block: -12px; }

/* R8:E06 de tekeningen hebben hun verhouding al voordat ze getekend zijn: er verspringt niets tijdens het laden */
.blog-beeld svg.blog-breed { aspect-ratio: 720 / 420; }
.blog-beeld svg.blog-smal { aspect-ratio: 360 / 270; }
.blog-beeld--klein svg { aspect-ratio: 360 / 210; }

/* ===== Het margeblog (marge per klant berekenen, 28-10-2026) =====
   De grafiek: op een breed beeld omzet en bijdrage naast elkaar, op een telefoon onder elkaar (dezelfde grens als
   de omslag: 639 pixels, of een figuur die zelf smaller is dan 440). Zo blijft de tekst minstens 14,5 eenheden.
   De tabellen: getallen breken niet af, en een tweede regel (percentage, aantal) staat klein en gedempt. */
.blog-marge-figuur svg { display: block; width: 100%; height: auto; border-radius: var(--radius); background: #06202c; font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; font-variant-numeric: tabular-nums; }
.blog-marge-figuur svg.marge-breed { aspect-ratio: 720 / 290; }
.blog-marge-figuur svg.marge-smal { aspect-ratio: 360 / 500; display: none; }
@media (max-width: 639px) {
  .blog-marge-figuur svg.marge-breed { display: none; }
  .blog-marge-figuur svg.marge-smal { display: block; }
}
@container (max-width: 439px) {
  .blog-marge-figuur svg.marge-breed { display: none; }
  .blog-marge-figuur svg.marge-smal { display: block; }
}
.blog-tabel-figuur .blog-tabel { margin-top: 0; }
.blog-prose .blog-tabel--getallen td { font-variant-numeric: tabular-nums; white-space: nowrap; }
.blog-tabel-sub { display: block; font-size: .8125em; line-height: 1.35; color: var(--muted); white-space: nowrap; }
.blog-prose .blog-tabel--getallen th, .blog-prose .blog-tabel--getallen td { padding-right: 14px; }
.blog-prose .blog-tabel--klanten, .blog-prose .blog-tabel--berekening { font-size: .9375em; }
.blog-kader ul { margin-top: .6em; }
/* "In het kort": het voorbeeld begint snel daarna (de standaard ruimte voor een h2 is hier te royaal) */
.blog-prose .blog-kader--samenvatting { margin-bottom: 0; }
.blog-prose .blog-kader--samenvatting + h2 { margin-top: 1.6em; }
/* één uitgelicht getal: een rustpunt halverwege, anders dan het kader (geen vlak, alleen het getal en een zin) */
.blog-prose .blog-uitgelicht { display: grid; gap: 4px; margin-block: 1.6em; padding-left: 18px; border-left: 3px solid var(--teal); }
.blog-uitgelicht-getal { font-size: clamp(2rem, 1.6rem + 1.6vw, 2.6rem); font-weight: 800; letter-spacing: -0.035em; line-height: 1.05; color: var(--bright); font-variant-numeric: tabular-nums; }
.blog-uitgelicht-zin { font-size: .9375em; line-height: 1.5; color: var(--text); text-wrap: pretty; }
@media (max-width: 639px) {
  .blog-prose .blog-tabel--getallen td { white-space: normal; }
  .blog-tabel--getallen .blog-tabel-sub { display: inline; margin-left: 8px; }
  .blog-prose .blog-tabel--getallen td[data-kolom] { grid-template-columns: 8.5rem minmax(0, 1fr); align-items: baseline; }
}