/* CMS-contentpagina (publiek): statische component-CSS. */
    .cpage-hero {
        position: relative; overflow: hidden; color: #fff; padding: clamp(3rem,5vw,4rem) 0;
        background: var(--sjk-grad-navy);
    }
    .cpage-hero h1 { color:#fff; font-weight:800; letter-spacing:-.02em; margin:0; font-size: var(--sjk-fs-title); line-height:1.1; }

    /* Twee kolommen: zijbalk + content. Op mobiel valt de zijbalk weg (hamburger dekt navigatie). */
    .cpage-cols { padding-top: clamp(1.8rem, 4vw, 2.8rem); }
    .cpage-side { position: sticky; top: 96px; }
    .cpage-side-card { background:#fff; border:1px solid var(--sjk-lijn); border-radius: var(--sjk-radius-card);
        padding:.6rem; box-shadow: var(--sjk-shadow-sm); }
    .cpage-side-title { font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; font-weight:700;
        color: var(--sjk-grijs); padding:.6rem .8rem .3rem; }
    .cpage-side a { display:flex; align-items:center; gap:.5rem; padding:.6rem .8rem; border-radius:12px;
        color: var(--sjk-inkt); text-decoration:none; font-weight:600; font-size:.95rem; }
    .cpage-side a:hover { background: var(--sjk-lavendel); color: var(--sjk-diep); }
    .cpage-side a.active { background: var(--sjk-rozetint); color: var(--sjk-koraal-diep); }
    .cpage-side a.active::before { content:""; width:4px; height:1.1rem; border-radius:3px; background: var(--sjk-koraal-diep); }
    .cpage-side a:not(.active)::before { content:""; width:4px; height:1.1rem; }

    /* Leesbare tekst uit de RichEditor */
    .cpage-body { color: var(--sjk-inkt); padding: 0 0 4rem; font-size: 1.05rem; }
    .cpage-body h2 { font-weight:800; color: var(--sjk-diep); letter-spacing:-.01em; font-size: var(--sjk-fs-h2-sub); margin: 2.6rem 0 .7rem; }
    .cpage-body h3 { font-weight:700; color: var(--sjk-diep); font-size: var(--sjk-fs-h3); margin: 1.8rem 0 .5rem; }
    .cpage-body p, .cpage-body li { line-height: 1.72; }
    .cpage-body p { margin-bottom: 1rem; }
    /* Eerste alinea als intro/lead */
    .cpage-body > p:first-child { font-size: clamp(1.1rem, .98rem + .6vw, 1.22rem); color: var(--sjk-grijs); line-height: 1.6; margin-bottom: 1.6rem; }
    .cpage-body a { color: var(--sjk-indigo); font-weight:600; text-decoration: none; }
    .cpage-body a:hover { text-decoration: underline; }
    .cpage-body strong { font-weight: 700; color: var(--sjk-diep); }
    .cpage-body img { max-width: 100%; height: auto; border-radius: 12px; }

    /* Genummerde lijsten normaal; opsommingen krijgen een koraal vinkje */
    .cpage-body ol { margin: 0 0 1.2rem 1.2rem; }
    .cpage-body ol li { margin-bottom: .45rem; }
    .cpage-body ul { list-style: none; margin: 0 0 1.2rem 0; padding: 0; }
    .cpage-body ul li { position: relative; padding-left: 1.7rem; margin-bottom: .55rem; }
    .cpage-body ul li::before {
        content: "✓"; position: absolute; left: 0; top: .02em;
        color: var(--sjk-koraal-diep); font-weight: 800;
    }

    /* Blockquote = zachte koraal-callout (bv. voor de EU-/databelofte) */
    .cpage-body blockquote {
        margin: 1.8rem 0; padding: 1.1rem 1.3rem; border: 0;
        border-left: 4px solid var(--sjk-koraal-diep);
        background: var(--sjk-rozetint); border-radius: 12px;
        color: var(--sjk-inkt);
    }
    .cpage-body blockquote p { margin: 0; }
    .cpage-body blockquote p + p { margin-top: .6rem; }