/* artikel.css — het sjabloon Artikel (fase 3 stap 5, #209, #306): de beroepspagina's en /website-per-branche, daarna de pillars,
   de lokale pagina's en (stap 6) de blog. Laadt na /assets/plekk.css en /assets/kern.css: de vragen (.faq), de prijzen (.tiers) en
   "Pak je plekk" (.price__cap) komen daaruit, zodat een artikel dezelfde blokken draagt als de homepage en /prijzen.
   Elke sectie is een kopkolom, zoals op de kernpagina's: de kop links (op een breed scherm blijft hij staan terwijl je leest), de
   tekst rechts op leesbreedte. Lange tekst staat op licht, in inkt (guide §8). Opmaak per pagina: scripts/artikel.mjs zet hem om
   en leidt de vragen en het kruimelpad in de JSON-LD af uit wat er op de pagina staat. */

/* ---------- hero: wie het schreef (guide §15, E-E-A-T) ---------- */
.art-door{margin-top:1rem;font-size:var(--fs-meta);line-height:1.5;color:var(--c-fg-2)}
.art-door a{color:var(--c-fg)}

/* ---------- de secties ---------- */
.art{padding-bottom:clamp(1rem,3vw,2rem)}
.art__sec{border-top:1px solid var(--c-line)}
.art__sec:first-child{border-top:0}
.art__rij{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:1.25rem var(--gutter);align-items:start;padding-top:clamp(2.75rem,5.5vw,4.75rem);padding-bottom:clamp(2.75rem,5.5vw,4.75rem)}  /* niet de shorthand: de zijkanten zijn de goot van .wrap */
.art__h{grid-column:1 / span 5;position:sticky;top:112px;font-size:clamp(1.55rem,2.3vw,2.2rem);font-weight:var(--fw-licht);letter-spacing:-.03em;line-height:1.12;text-wrap:balance;hyphens:manual}
.art__tekst{grid-column:7 / span 6;max-width:40em}  /* zelfde lijn als .kopkolom__tekst en .faq__list */
@media (max-width:860px){.art__h,.art__tekst{grid-column:1 / -1}.art__h{position:static}}

/* lopende tekst */
.art__tekst > * + *{margin-top:1.1rem}
.art__tekst p{text-wrap:pretty}
.art__tekst h3{margin-top:2.25rem;font-size:1.125rem;font-weight:500;letter-spacing:-.01em;line-height:1.3}
.art__tekst h3 + *{margin-top:.5rem}
.art__tekst ul,.art__tekst ol{list-style:none;padding:0}
.art__tekst li{position:relative}
.art__tekst li + li{margin-top:.55rem}
.art__tekst ul > li{padding-left:1.4rem}
.art__tekst ul > li::before{content:"";position:absolute;left:0;top:calc(.8em - .5px);width:.6rem;height:1px;background:var(--c-fg)}
.art__tekst ol{counter-reset:art}
.art__tekst ol > li{counter-increment:art;padding-left:2.4rem}
.art__tekst ol > li::before{content:counter(art,decimal-leading-zero);position:absolute;left:0;top:.2em;font-size:var(--fs-meta);color:var(--c-fg-2);font-variant-numeric:tabular-nums}
.art__tekst strong{font-weight:500}

/* punten: wat er op een goede site hoort (was een raster met pictogrammen) */
.art__tekst .art__punten{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.75rem var(--gutter);margin-top:2rem}
.art__tekst .art__punten > li{margin:0;padding:0}
.art__tekst .art__punten > li::before{display:none}
.art__punten h3{margin:0;padding-top:.8rem;border-top:1px solid var(--c-fg);font-size:1.0625rem;font-weight:500;line-height:1.3}
.art__tekst .art__punten h3 + p{margin-top:.45rem;color:var(--c-fg-2)}
@media (max-width:640px){.art__tekst .art__punten{grid-template-columns:minmax(0,1fr)}}

/* één zin tussendoor met een vervolgstap, in de taal van "Pak je plekk": een lijn erboven, geen kader eromheen */
.art__tekst .art__stap{margin-top:2.25rem;padding:1.15rem 0 1.25rem;border-top:1px solid var(--c-fg);border-bottom:1px solid var(--c-line)}
.art__stap p{font-size:1.125rem;line-height:1.45}
.art__stap p + p{margin-top:.4rem;font-size:var(--fs-body)}

/* kort antwoord en andere kernzinnen: dezelfde lijn erboven, geen kader (pillars, guide §15: het antwoord in de eerste zin) */
.art__tekst .art__noot{padding:1.1rem 0 1.2rem;border-top:1px solid var(--c-fg);border-bottom:1px solid var(--c-line)}
.art__noot p + p{margin-top:.6rem}

/* de inhoudsopgave (afgeleid uit de koppen, scripts/artikel.mjs): genummerd zoals de stappen op de homepage */
.art__tekst .art__inhoud{columns:2;column-gap:var(--gutter);counter-reset:art}
.art__tekst .art__inhoud > li{break-inside:avoid;margin:0 0 .55rem}
@media (max-width:640px){.art__tekst .art__inhoud{columns:1}}

/* stappen: nummer, kop, uitleg, zoals "Hoe het werkt" (kern.css .steps) */
.art__tekst .art__stappen > li{padding:1.1rem 0 1.15rem 3.25rem;border-top:1px solid var(--c-line);margin:0}
.art__tekst .art__stappen > li:last-child{border-bottom:1px solid var(--c-line)}
.art__tekst .art__stappen > li::before{top:1.35rem}
.art__tekst .art__stappen h3{margin:0;font-size:1.0625rem}
.art__tekst .art__stappen h3 + p{margin-top:.35rem;color:var(--c-fg-2)}

/* een optie met pluspunten en minpunten (/website-kosten) */
.art__optie h3{margin-top:0;font-size:clamp(1.25rem,1.9vw,1.6rem);font-weight:var(--fw-licht);letter-spacing:-.025em;font-variant-numeric:tabular-nums}
.art__optie .art__optie-sub{margin-top:.4rem;color:var(--c-fg-2)}
.art__optie > p + p{margin-top:.75rem}
.art__twee{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.25rem var(--gutter);margin-top:1.25rem}
.art__label{font-size:var(--fs-meta);color:var(--c-fg-2);padding-top:.7rem;border-top:1px solid var(--c-fg);margin-bottom:.6rem}
.art__twee ul li{font-size:.9375rem}
@media (max-width:640px){.art__twee{grid-template-columns:minmax(0,1fr)}}
/* meerdere opties onder één kop (blog: een top 5, drie routes): een dunne lijn en lucht ertussen */
.art__tekst .art__optie + .art__optie{margin-top:2.75rem;padding-top:2.25rem;border-top:1px solid var(--c-line)}

/* de blog (stap 6): de alinea's vóór de eerste kop, een vak met een eigen kop, een beeld van opgeleverd werk */
.art__sec--opening .art__tekst{font-size:1.0625rem}
.art__noot > h3:first-child,.art__noot > .art__label:first-child{margin-top:0}
.art__beeld img{display:block;width:100%;height:auto;border:1px solid var(--c-line)}

/* tabellen (pillars): een lijn onder de kop, dunne lijnen ertussen; op een smal scherm schuift alleen de tabel */
.art__scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.art__tabel{width:100%;border-collapse:collapse;font-size:.9375rem;line-height:1.45;font-variant-numeric:tabular-nums}
.art__tabel th,.art__tabel td{padding:.7rem 1rem .7rem 0;text-align:left;vertical-align:top;border-bottom:1px solid var(--c-line)}
.art__tabel th{font-weight:500;border-bottom-color:var(--c-fg)}

/* een index van pagina's (/website-per-branche): rijen zoals de diensten op /diensten, de hele rij is de link */
.art__rijen{list-style:none;padding:0;border-bottom:1px solid var(--c-line)}
.art__tekst .art__rijen > li{margin:0;padding:0}
.art__tekst .art__rijen > li::before{display:none}
.art__rijen a{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.25rem 1.5rem;align-items:baseline;padding:1.15rem 0;border-top:1px solid var(--c-line);text-decoration:none}
.art__rijen b{font-size:clamp(1.25rem,1.9vw,1.6rem);font-weight:var(--fw-licht);letter-spacing:-.025em;line-height:1.15}
.art__rijen span{grid-column:1;color:var(--c-fg-2)}
.art__rijen i{grid-column:2;grid-row:1 / span 2;align-self:center;font-style:normal;font-size:var(--fs-meta);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.24em;text-decoration-color:color-mix(in srgb,currentColor 35%,transparent)}
@media (hover:hover){.art__rijen:hover a:not(:hover){opacity:.35}.art__rijen a{transition:opacity 300ms var(--ease-snap)}}
.art__rijen a:focus-visible{outline:2px solid var(--c-fg);outline-offset:4px}

/* de vragen en de prijzen volgen het artikel; de prijzen sluiten af met "Pak je plekk" */
.art + .faq{border-top:1px solid var(--c-line)}
.art-prijs{border-top:1px solid var(--c-line)}
.art-prijs .price__head p .link{white-space:nowrap}

/* blog: een nummer boven de kop van een stap ("Stap 1"), en een afvinklijst met een leeg vakje in plaats van een streepje */
.art__tekst h3 .art__nr{display:block;margin-bottom:.25rem;font-size:var(--fs-meta);font-weight:400;letter-spacing:0;color:var(--c-fg-2);font-variant-numeric:tabular-nums}
.art__tekst ul.art__vink > li::before{top:.42em;width:.62rem;height:.62rem;background:none;border:1px solid var(--c-fg)}
.art__tekst .art__twee + .art__optie-sub{margin-top:1.25rem}

/* ---------- juridisch (stap 7, #210, #325): alleen de vorm, de tekst blijft tot fase 5. Het nummer van een artikel klein boven de titel,
   de inhoud en de leden genummerd zoals de tekst ernaar verwijst ("art. 5.2"), minder lucht tussen zeventien artikelen ---------- */
.art--juridisch .art__rij{padding-top:clamp(2.25rem,4.5vw,3.75rem);padding-bottom:clamp(2.25rem,4.5vw,3.75rem)}
.art--juridisch .art__h{grid-column:1 / span 4;font-size:clamp(1.45rem,2vw,1.9rem)}
/* een tabel met vier kolommen (privacy §2, §4) past niet in zes kolommen: de tekst krijgt er acht, alinea's en lijsten houden hun leesbreedte */
.art--juridisch .art__tekst{grid-column:5 / span 8;max-width:none}
.art--juridisch .art__tekst > :not(.art__scroll){max-width:42.5rem}  /* rem: een label is 13 px, 40em zou het veld smaller maken dan de keuzes */
/* /herroep en /dsa-melding: de uitleg, de bevestiging, het formulier en wat er daarna gebeurt staan in eigen blokken met dezelfde secties;
   één lijn ertussen, geen dubbele ruimte. De uitleg staat buiten <form>, zodat hij ook in de Markdown-spiegel staat (formulieren vallen daar weg) */
.art--juridisch:has(+ .art--juridisch){padding-bottom:0}
.art--juridisch + .art--juridisch > .art__sec:first-child{border-top:1px solid var(--c-line)}
@media (max-width:860px){.art--juridisch .art__h,.art--juridisch .art__tekst{grid-column:1 / -1}}
.art__nr{display:block;margin-bottom:.45rem;font-size:var(--fs-meta);font-weight:400;letter-spacing:0;line-height:1.4;color:var(--c-fg-2);font-variant-numeric:tabular-nums}
/* de inhoud van een juridische pagina is een <ul>: het nummer is tekst (artikel.mjs), op de plek van de teller */
.art__tekst ul.art__inhoud > li{padding-left:2.4rem}
.art__tekst ul.art__inhoud > li::before{display:none}
.art__inhoud-nr{position:absolute;left:0;top:.2em;font-size:var(--fs-meta);color:var(--c-fg-2);font-variant-numeric:tabular-nums}
.art__tekst ol.art__leden{counter-reset:lid}
.art__tekst ol.art__leden > li{counter-increment:lid;padding-left:2.9rem}
.art__tekst ol.art__leden > li::before{content:counter(lid)}
.art__tekst ol.art__leden[style] > li::before{content:var(--art) "." counter(lid)}
.art__tekst li > ul,.art__tekst li > ol{margin-top:.55rem}
.art__tekst code{font:inherit;font-variant-numeric:tabular-nums;padding:.05em .3em;border-radius:3px;background:var(--c-surface)}

/* /voor-ai-agents (stap 8, #330): een codeblok (een verzoek, een curl). Archivo heeft geen vaste breedte; de inspringing van JSON leest
   alleen in een letter met vaste breedte. Die van het systeem: geen download en geen tweede display-letter (guide §7). Een lange regel schuift. */
.art__tekst pre{margin:1rem 0 1.25rem;padding:1rem 1.1rem;overflow-x:auto;-webkit-overflow-scrolling:touch;background:var(--c-surface);border-radius:4px;
  font:400 .8125rem/1.6 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;tab-size:2}
.art__tekst pre code{padding:0;background:none;font:inherit}