/* Blog: eigen opmaak bovenop de stijl van de site. Geen inline stijl nodig (CSP). */
:root { --b-accent: var(--bordeaux); --b-ink: var(--inkt); --b-muted: var(--grijs); --b-line: var(--zand); --b-panel: var(--papier); --b-soft: var(--bordeaux-licht); --b-kop: var(--kop); --b-knoptekst: #fff; }

.blog { max-width: 760px; margin: 0 auto; padding: 8px 16px 48px; box-sizing: border-box; color: var(--b-ink); line-height: 1.6; }
.blog h1, .blog h2, .blog h3 { font-family: var(--b-kop); line-height: 1.2; color: var(--b-ink); }
.blog h1 { font-size: clamp(28px, 5vw, 40px); margin: 12px 0 12px; }
.blog h2 { font-size: clamp(21px, 3.4vw, 26px); margin: 32px 0 10px; }
.blog h3 { font-size: 19px; margin: 22px 0 8px; }
.blog p, .blog li { font-size: 17px; }
.blog a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.blog-kruimel ol { list-style: none; padding: 0; margin: 16px 0 0; display: flex; flex-wrap: wrap; gap: 4px; font-size: 14px; color: var(--b-muted); }
.blog-kruimel li + li::before { content: "›"; margin-right: 4px; }
.blog-eyebrow { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--b-muted); margin: 18px 0 0; }
.blog-lead { font-size: 19px !important; color: var(--b-ink); }
.blog-meta { font-size: 14px !important; color: var(--b-muted); border-bottom: 1px solid var(--b-line); padding-bottom: 14px; }
.blog-body ul, .blog-body ol { padding-left: 1.3em; }
.blog-body li { margin: 4px 0; }
.blog-bron { font-size: 14px !important; color: var(--b-muted); }
.blog-tip { background: var(--b-soft); border-left: 4px solid var(--b-accent); border-radius: 8px; padding: 12px 16px; margin: 18px 0; }
.blog-tip p { margin: 4px 0; }
.blog table { border-collapse: collapse; width: 100%; margin: 12px 0; font-size: 16px; }
.blog th, .blog td { border-bottom: 1px solid var(--b-line); padding: 8px 6px; text-align: left; vertical-align: top; }
.blog-tabel { overflow-x: auto; }
.blog-faq details { border: 1px solid var(--b-line); border-radius: 10px; padding: 10px 14px; margin: 8px 0; background: var(--b-panel); }
.blog-faq summary { cursor: pointer; font-weight: 700; }
.blog-faq details p { margin: 8px 0 2px; }
.blog-cta { margin: 32px 0 8px; padding: 20px; border-radius: 14px; background: var(--b-soft); border: 1px solid var(--b-line); }
.blog-cta h2 { margin-top: 0; }
.blog-knop { display: inline-block; background: var(--b-accent); color: var(--b-knoptekst) !important; text-decoration: none !important; font-weight: 700; padding: 12px 20px; border-radius: 10px; margin: 6px 8px 0 0; }
.blog-knop:focus-visible, .blog a:focus-visible { outline: 3px solid var(--b-ink); outline-offset: 2px; }
.blog-meer { border-top: 1px solid var(--b-line); margin-top: 28px; padding-top: 8px; }
.blog-meer ul { padding-left: 1.2em; }
.blog-kaarten { list-style: none; padding: 0; display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.blog-kaart { border: 1px solid var(--b-line); border-radius: 14px; padding: 16px; background: var(--b-panel); }
.blog-kaart h2 { font-size: 20px; margin: 6px 0 8px; }
.blog-kaart p { margin: 6px 0; font-size: 16px; }
.blog-kaart .blog-eyebrow { margin: 0; font-size: 12px; }