/* Accentkleur voor tekst op een lichte achtergrond.
   Het accent zelf is bij de bouwtak oranje (#ff6a1a) en dat haalt als tekst op
   wit maar 3,5:1, te weinig om te lezen. Met een flinke schep zwart erdoor komt
   het op 5,3:1 op wit en 4,7:1 op het lichte accentvlak, en het blijft merkkleur.
   Bij het blauwe hoofdmerk haalde het al ruim genoeg; daar wordt het alleen
   iets donkerder. Vlakken en lijnen blijven het volle accent gebruiken, alleen
   letters niet. */
:root { --blog-accent-tekst: color-mix(in srgb, var(--accent-600) 78%, #000); }

/* =========================================================
   Blog - MKB Versnellers
   Aparte stylesheet, bewust niet in styles.css. Reden: die wordt door ruim
   zeventig pagina's geladen en een fout daarin sloopt de hele site. Hier staan
   alleen de klassen die de blogpagina's zelf gebruiken. Alle kleuren, letters
   en vormen komen uit de tokens in styles.css, er wordt hier niets nieuws
   bedacht.
   ========================================================= */

/* ---------- Hero, links uitgelijnd ----------
   .cs-hero is gecentreerd. Bij een blog wil je links beginnen, want de tekst
   eronder begint ook links en anders springt het oog heen en weer. */
.blog-hero { text-align: left; padding: clamp(72px, 10vw, 118px) 0 clamp(44px, 6vw, 70px); }
.blog-hero .cs-inner { margin: 0; text-align: left; max-width: 720px; }
.blog-hero .cs-sub { margin-left: 0; margin-right: 0; max-width: 620px; }
/* Op /bouw/ heet de donkere paginakop .page-hero en de binnenkolom
   .hero-inner-2, en de tussentekst heet .lead. Zelfde bedoeling, andere namen.
   Dat is de reden dat deze stylesheet op beide sites werkt. */
.page-hero.blog-hero { padding: calc(var(--header-h) + 46px) 0 clamp(38px, 5vw, 58px); }
.page-hero.blog-hero .hero-inner-2 { max-width: 720px; }
.page-hero.blog-hero .lead { max-width: 62ch; }
/* Een artikeltitel is geen paginakop van een landingspagina. Op 3,5rem valt hij
   over drie regels en duwt hij de leestijd onder de vouw. */
.blog-hero.hero-artikel h1 { font-size: clamp(1.9rem, 3.5vw, 2.8rem); text-wrap: balance; }
.blog-hero.hero-artikel .onderwerp { margin-bottom: 16px; }
.blog-hero.hero-artikel .blog-meta { margin-top: 20px; }
/* De kruimels van /bouw/ staan al in hun eigen stylesheet, hier alleen wat lucht
   eronder zodat het label niet tegen het pad aan komt. */
.page-hero.blog-hero .breadcrumb { margin-bottom: 16px; }
.page-hero.blog-hero .onderwerp { margin-bottom: 14px; }

/* Kruimelpad. Klein, rustig, en op de donkere hero net leesbaar genoeg. */
.kruimels { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin: 0 0 18px; padding: 0; list-style: none;
  font-size: .84rem; color: #9fb2c6; }
.kruimels a { color: #c4d1de; }
.kruimels a:hover { color: #fff; text-decoration: underline; }
.kruimels li + li::before { content: "/"; margin-right: 8px; color: #5b7186; }
.kruimels [aria-current] { color: #fff; }

/* ---------- Regel met datum en leestijd ----------
   Beide staan er omdat ze de lezer iets vertellen: hoe oud is dit, en hoeveel
   tijd kost het me. Geen van beide is versiering. */
.blog-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin: 0; font-size: .86rem; color: var(--steel-500); }
.blog-meta > * { display: inline-flex; align-items: center; gap: 6px; }
.blog-meta svg { width: 15px; height: 15px; flex: none; opacity: .75; }
.blog-meta .scheid { width: 3px; height: 3px; border-radius: 50%; background: var(--steel-400); }
.cs-hero .blog-meta,
.page-hero .blog-meta { color: #9fb2c6; }
.cs-hero .blog-meta .scheid,
.page-hero .blog-meta .scheid { background: #5b7186; }
/* Op een smal scherm valt de leestijd naar de tweede regel en blijft het
   scheidingsbolletje als los puntje aan het eind van regel een hangen. */
@media (max-width: 480px) {
  .blog-meta { gap: 4px 14px; }
  .blog-meta .scheid { display: none; }
}

/* Onderwerplabel. Zegt waar het artikel over gaat, dus het mag opvallen. */
.onderwerp { display: inline-flex; align-items: center;
  font-family: var(--font-head); font-weight: 700; font-size: .72rem;
  letter-spacing: .09em; text-transform: uppercase;
  padding: 5px 11px; border-radius: 999px;
  background: var(--accent-soft); color: var(--blog-accent-tekst); }
.cs-hero .onderwerp,
.page-hero .onderwerp { background: color-mix(in srgb, var(--accent) 22%, transparent);
  color: #ffd9c2; border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); }
/* Op het blauwe hoofdmerk leest een lichtblauwe tekst beter dan een oranje. */
.cs-hero .onderwerp { color: #cfe6f5; }

/* =========================================================
   Overzichtspagina
   ========================================================= */

/* Het uitgelichte artikel. Breder dan de rest, want dat is de reden dat iemand
   op deze pagina komt: het nieuwste stuk. */
.uitgelicht {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 0;
  background: #fff; border: 1px solid var(--border); border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm); overflow: hidden; position: relative;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.uitgelicht::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--accent); z-index: 1; }
.uitgelicht:hover { transform: translateY(-4px); box-shadow: var(--shadow-md);
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); }
.uitgelicht-tekst { padding: clamp(28px, 4vw, 44px); display: flex; flex-direction: column; gap: 16px; }
.uitgelicht-kop { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.uitgelicht h2 { margin: 0; font-size: clamp(1.5rem, 3vw, 2.05rem); }
.uitgelicht h2 a { color: inherit; }
.uitgelicht h2 a:hover { color: var(--blog-accent-tekst); }
.uitgelicht p { margin: 0; color: var(--text-soft); font-size: 1.04rem; max-width: 62ch; }

/* Het zijvlak van de uitgelichte kaart. Geen stockfoto maar een citaat uit het
   artikel zelf: dat is de alinea die een zoekmachine overneemt, dus die mag hier
   ook het beeld zijn. */
.uitgelicht-citaat {
  background: linear-gradient(150deg, #16344f, #0e2339 60%, #0a1a2f);
  color: #dfe9f3; padding: clamp(28px, 4vw, 44px);
  display: flex; flex-direction: column; justify-content: center; gap: 14px;
}
.uitgelicht-citaat span {
  font-family: var(--font-head); font-weight: 700; font-size: .72rem;
  letter-spacing: .1em; text-transform: uppercase;
  color: color-mix(in srgb, var(--accent) 62%, #fff);
}
.uitgelicht-citaat p { margin: 0; color: #dfe9f3; font-size: 1.02rem; line-height: 1.62; }
@media (min-width: 900px) {
  .uitgelicht { grid-template-columns: 1.35fr 1fr; }
}

/* Het raster met de rest. Twee kolommen, niet drie: bij drie worden de kaarten
   zo smal dat de titel over vier regels valt. */
.artikel-lijst { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 22px; }
@media (min-width: 900px) { .artikel-lijst { grid-template-columns: repeat(2, 1fr); } }

.artikel-kaart {
  position: relative; display: flex; flex-direction: column; gap: 14px;
  background: #fff; border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: 26px 26px 24px; box-shadow: var(--shadow-sm); overflow: hidden;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.artikel-kaart::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px;
  background: var(--accent); opacity: 0; transition: opacity .25s var(--ease); }
.artikel-kaart:hover { transform: translateY(-5px); box-shadow: var(--shadow-md);
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); }
.artikel-kaart:hover::before { opacity: 1; }
/* De kaart is een flexkolom, dus zonder dit rekt het pilletje over de hele
   breedte uit en wordt het een balk. */
.artikel-kaart > .onderwerp { align-self: flex-start; }
.artikel-kaart h3 { margin: 0; font-size: 1.3rem; line-height: 1.24; }
.artikel-kaart h3 a { color: inherit; }
.artikel-kaart h3 a::after { content: ""; position: absolute; inset: 0; }
.artikel-kaart h3 a:hover { color: var(--blog-accent-tekst); }
.artikel-kaart p { margin: 0; color: var(--text-soft); font-size: .97rem; flex-grow: 1; }
.artikel-kaart .blog-meta { margin-top: 2px; }
.artikel-kaart:focus-within { border-color: var(--accent); }
.artikel-kaart:focus-within::before { opacity: 1; }
.artikel-kaart a:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; border-radius: 4px; }

/* Nog geen artikelen. Zolang de contentmotor niets heeft opgeleverd staat dit
   er, in plaats van een lege pagina. */
.blog-leeg { text-align: center; max-width: 520px; margin-inline: auto;
  padding: clamp(34px, 5vw, 56px) 26px; background: var(--bg-alt);
  border: 1px dashed var(--steel-200); border-radius: var(--r-lg); }
.blog-leeg h2 { font-size: 1.4rem; }
.blog-leeg p { color: var(--text-soft); margin: 0 0 22px; }

/* =========================================================
   Artikelpagina
   ========================================================= */

/* Twee kolommen op een breed scherm: inhoudsopgave links, tekst rechts. Het
   paar staat samen gecentreerd, zodat de leeskolom niet naar rechts wegzakt.
   Onder 1040px valt de inhoudsopgave gewoon boven de tekst. */
.artikel-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 30px; }
@media (min-width: 1040px) {
  .artikel-grid { grid-template-columns: 228px minmax(0, 72ch); justify-content: center; column-gap: 54px; }
}

.artikel-inhoud { align-self: start; }
@media (min-width: 1040px) {
  .artikel-inhoud { position: sticky; top: calc(var(--header-h) + 26px); }
}
/* --steel-500 haalt op het lichte vlak van het mobiele kader maar 4,25:1.
   Deze grijstint blijft even rustig en komt op 5,5:1. */
.artikel-inhoud h2 { font-size: .78rem; letter-spacing: .12em; text-transform: uppercase;
  color: #5a6575; font-family: var(--font-head); font-weight: 700; margin: 0 0 12px; }
.artikel-inhoud ol { list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 2px; }
.artikel-inhoud a { display: block; padding: 7px 12px; border-radius: 8px;
  font-size: .92rem; line-height: 1.4; color: var(--text-soft);
  border-left: 2px solid var(--border); }
.artikel-inhoud a:hover { color: var(--blog-accent-tekst); background: var(--accent-soft);
  border-left-color: var(--accent); }
/* De kop waar je nu in zit. Gezet door blog.js; zonder javascript blijft de
   inhoudsopgave gewoon een lijst met links. */
.artikel-inhoud a[aria-current="true"] { color: var(--navy-900); font-weight: 600;
  background: var(--accent-soft); border-left-color: var(--accent); }
@media (max-width: 1039px) {
  .artikel-inhoud { background: var(--bg-alt); border: 1px solid var(--border);
    border-radius: var(--r-md); padding: 20px 22px; }
}

/* Het korte antwoord. De contentmotor levert dit als apart veld en het is de
   alinea die in Google en in AI-antwoorden wordt overgenomen. Daarom staat hij
   bovenaan en ziet hij er anders uit dan de rest. */
.kort-antwoord { position: relative; margin: 0 0 34px; padding: 22px 26px 22px 30px;
  background: var(--accent-soft); border-radius: var(--r-md);
  box-shadow: inset 4px 0 0 var(--accent); }
.kort-antwoord h2 { font-size: .78rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--blog-accent-tekst); margin: 0 0 8px; }
.kort-antwoord p { margin: 0; font-size: 1.08rem; line-height: 1.6; color: var(--ink); }

/* De tekst zelf. Regellengte op ongeveer 72 tekens, want daarboven raakt het
   oog de volgende regel kwijt. */
.artikel-tekst { font-size: 1.06rem; line-height: 1.72; color: var(--ink-soft); }
.artikel-tekst > * + * { margin-top: 1.1em; }
.artikel-tekst h2 { font-size: clamp(1.35rem, 2.6vw, 1.75rem); margin-top: 1.9em; scroll-margin-top: calc(var(--header-h) + 22px); }
.artikel-tekst h3 { font-size: 1.12rem; margin-top: 1.6em; scroll-margin-top: calc(var(--header-h) + 22px); }
.artikel-tekst h2 + p, .artikel-tekst h3 + p { margin-top: .6em; }
.artikel-tekst strong { color: var(--ink); font-weight: 600; }
.artikel-tekst a { color: var(--blog-accent-tekst); text-decoration: underline; text-underline-offset: 2px; }
.artikel-tekst a:hover { color: var(--accent-600); }
.artikel-tekst ul, .artikel-tekst ol { padding-left: 1.3em; }
.artikel-tekst li + li { margin-top: .5em; }
.artikel-tekst ul { list-style: none; padding-left: 0; }
.artikel-tekst ul li { position: relative; padding-left: 26px; }
.artikel-tekst ul li::before { content: ""; position: absolute; left: 6px; top: .62em;
  width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.artikel-tekst blockquote { margin: 1.6em 0; padding: 4px 0 4px 22px;
  border-left: 3px solid var(--accent); font-size: 1.1rem; color: var(--ink); }

/* Veelgestelde vragen. Dichtgeklapt, want wie de vraag niet heeft wil hem niet
   lezen, en wie hem wel heeft vindt hem zo sneller. */
.artikel-faq { margin-top: 2.4em; }
.artikel-faq > h2 { font-size: clamp(1.35rem, 2.6vw, 1.75rem); margin-bottom: .8em; scroll-margin-top: calc(var(--header-h) + 22px); }
.vraag { border: 1px solid var(--border); border-radius: var(--r-md); background: #fff; overflow: hidden; }
.vraag + .vraag { margin-top: 10px; }
.vraag summary { list-style: none; cursor: pointer; padding: 16px 46px 16px 20px;
  position: relative; font-family: var(--font-head); font-weight: 600; font-size: 1.02rem;
  color: var(--navy-900); line-height: 1.4; }
.vraag summary::-webkit-details-marker { display: none; }
.vraag summary::after { content: ""; position: absolute; right: 20px; top: 50%;
  width: 9px; height: 9px; margin-top: -6px;
  border-right: 2px solid var(--steel-400); border-bottom: 2px solid var(--steel-400);
  transform: rotate(45deg); transition: transform .2s var(--ease); }
.vraag[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.vraag summary:hover { color: var(--blog-accent-tekst); }
.vraag summary:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
.vraag-antwoord { padding: 0 20px 18px; color: var(--text-soft); line-height: 1.68; }
.vraag-antwoord > :first-child { margin-top: 0; }

/* Wie het geschreven heeft. Staat er omdat een lezer en een zoekmachine allebei
   willen weten van wie dit komt. */
.artikel-af { display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
  margin-top: 2.6em; padding-top: 22px; border-top: 1px solid var(--border); }
.artikel-af .merkje { width: 44px; height: 44px; flex: none; border-radius: 12px;
  background: var(--navy-900); color: #fff; display: grid; place-items: center; }
.artikel-af .merkje svg { width: 24px; height: 24px; }
.artikel-af div { min-width: 0; }
.artikel-af strong { display: block; font-family: var(--font-head); color: var(--navy-900); font-size: 1rem; }
.artikel-af span { display: block; font-size: .9rem; color: var(--text-soft); }

/* Verder lezen, onderaan het artikel. */
.verder { margin-top: clamp(40px, 6vw, 64px); }
.verder h2 { font-size: 1.35rem; margin-bottom: 18px; }