/* =====================================================================================
   Scholten One - publieke site. Huisstijl van het platform (indigo, Inter, licht/donker),
   herontworpen naar een strak, filmisch SaaS-uiterlijk: glaslagen, zachte gloed, grote
   typografie, rustige beweging. Alle kleuren via tokens, drie thema-standen (licht, donker,
   systeem), "minder beweging" overal gerespecteerd.
   ===================================================================================== */
:root {
    --ground: #f6f7fb;
    --paper: #ffffff;
    --paper-2: #f9fafc;
    --ink: #0e1120;
    --ink-soft: #5d6376;
    --ink-mute: #8b91a3;
    --line: rgba(14, 17, 32, 0.08);
    --line-strong: rgba(14, 17, 32, 0.16);
    --brand: #4f46e5;
    --brand-strong: #4338ca;
    --brand-soft: #eceefe;
    --brand-ink: #ffffff;
    --brand-glow: rgba(79, 70, 229, 0.28);
    --violet: #7c3aed;
    --teal: #0d9488;
    --chip-ground: #eef0f5;
    --hoofdspoor: #44403c;
    --meldspoor: #0f766e;
    --meldspoor-soft: #d5f5ee;
    --cbw: #5b21b6;
    --cbw-soft: #ebe5fc;
    --escalatie: #c2410c;
    --escalatie-soft: #ffe8d6;
    --canvas-ground: #f3f4f9;
    --node: #f7f8fc;
    --node-line: rgba(14, 17, 32, 0.12);
    --node-text: #0e1120;
    --shadow-sm: 0 1px 2px rgba(14, 17, 32, 0.05), 0 6px 18px rgba(14, 17, 32, 0.05);
    --shadow-lg: 0 24px 60px rgba(14, 17, 32, 0.12), 0 2px 6px rgba(14, 17, 32, 0.05);
    --glass: rgba(255, 255, 255, 0.72);
    --glass-line: rgba(255, 255, 255, 0.6);
    --radius: 18px;
    --radius-sm: 12px;
    --grad-brand: linear-gradient(120deg, #4f46e5 0%, #7c3aed 55%, #0d9488 130%);
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --ground: #090b13;
        --paper: #10131d;
        --paper-2: #151927;
        --ink: #f3f4f9;
        --ink-soft: #9aa0b4;
        --ink-mute: #6b7186;
        --line: rgba(255, 255, 255, 0.08);
        --line-strong: rgba(255, 255, 255, 0.16);
        --brand: #818cf8;
        --brand-strong: #a5b4fc;
        --brand-soft: rgba(129, 140, 248, 0.14);
        --brand-ink: #0b0d16;
        --brand-glow: rgba(129, 140, 248, 0.3);
        --violet: #a78bfa;
        --teal: #2dd4bf;
        --chip-ground: #1a1f2e;
        --hoofdspoor: #d6d3d1;
        --meldspoor: #5eead4;
        --meldspoor-soft: rgba(45, 212, 191, 0.16);
        --cbw: #c4b5fd;
        --cbw-soft: rgba(167, 139, 250, 0.18);
        --escalatie: #fb923c;
        --escalatie-soft: rgba(251, 146, 60, 0.16);
        --canvas-ground: #0c0f18;
        --node: #171b29;
        --node-line: rgba(255, 255, 255, 0.12);
        --node-text: #f3f4f9;
        --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.3);
        --shadow-lg: 0 30px 80px rgba(0, 0, 0, 0.55), 0 2px 6px rgba(0, 0, 0, 0.4);
        --glass: rgba(16, 19, 29, 0.66);
        --glass-line: rgba(255, 255, 255, 0.1);
    }
}
:root[data-theme="dark"] {
    --ground: #090b13;
    --paper: #10131d;
    --paper-2: #151927;
    --ink: #f3f4f9;
    --ink-soft: #9aa0b4;
    --ink-mute: #6b7186;
    --line: rgba(255, 255, 255, 0.08);
    --line-strong: rgba(255, 255, 255, 0.16);
    --brand: #818cf8;
    --brand-strong: #a5b4fc;
    --brand-soft: rgba(129, 140, 248, 0.14);
    --brand-ink: #0b0d16;
    --brand-glow: rgba(129, 140, 248, 0.3);
    --violet: #a78bfa;
    --teal: #2dd4bf;
    --chip-ground: #1a1f2e;
    --hoofdspoor: #d6d3d1;
    --meldspoor: #5eead4;
    --meldspoor-soft: rgba(45, 212, 191, 0.16);
    --cbw: #c4b5fd;
    --cbw-soft: rgba(167, 139, 250, 0.18);
    --escalatie: #fb923c;
    --escalatie-soft: rgba(251, 146, 60, 0.16);
    --canvas-ground: #0c0f18;
    --node: #171b29;
    --node-line: rgba(255, 255, 255, 0.12);
    --node-text: #f3f4f9;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 30px 80px rgba(0, 0, 0, 0.55), 0 2px 6px rgba(0, 0, 0, 0.4);
    --glass: rgba(16, 19, 29, 0.66);
    --glass-line: rgba(255, 255, 255, 0.1);
}

/* ===== Basis ===== */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    background: var(--ground);
    color: var(--ink);
    font-family: "Inter", "Segoe UI", system-ui, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: "cv11", "ss01", "ss03";
}
h1, h2, h3 { margin: 0; line-height: 1.1; letter-spacing: -0.03em; text-wrap: balance; font-weight: 700; }
p { margin: 0; }
a { color: var(--brand); }
img, svg, video { max-width: 100%; }
.wrap { max-width: 1160px; margin: 0 auto; padding: 0 28px; }
::selection { background: var(--brand); color: var(--brand-ink); }

.eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--brand);
}
.eyebrow::before {
    content: ""; width: 18px; height: 2px; border-radius: 2px; background: var(--grad-brand); flex: none;
}

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    text-decoration: none; font-weight: 600; font-size: 15px; line-height: 1;
    padding: 13px 22px; border-radius: 12px; border: 1px solid transparent;
    transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease, border-color 160ms ease, color 160ms ease;
    cursor: pointer; white-space: nowrap;
}
.btn:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; }
.btn-primary {
    background: var(--brand); color: var(--brand-ink);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.15) inset, 0 10px 30px -10px var(--brand-glow);
}
.btn-primary:hover { background: var(--brand-strong); transform: translateY(-1px); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.15) inset, 0 16px 36px -10px var(--brand-glow); }
.btn-ghost { border-color: var(--line-strong); color: var(--ink); background: transparent; }
.btn-ghost:hover { border-color: var(--ink-soft); background: var(--paper); transform: translateY(-1px); }

/* Lichte sfeergloed achter de hele pagina: onopvallend in licht, diep in donker. */
body::before {
    content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
    background:
        radial-gradient(60% 40% at 15% 0%, color-mix(in srgb, var(--brand) 12%, transparent) 0%, transparent 70%),
        radial-gradient(50% 40% at 90% 20%, color-mix(in srgb, var(--violet) 8%, transparent) 0%, transparent 70%);
}

/* ===== Topbar =====
   Vast bovenaan. Op de homepagina, zolang er niet gescrold is, is de balk volledig transparant en
   staan logo en links wit over de video (klasse .transparant, gezet door site.js). Daarna, en op
   elke andere pagina, wordt het een slanke glazen balk (.dicht). */
header.top {
    position: fixed; top: 0; left: 0; right: 0; z-index: 50;
    background: transparent; border-bottom: 1px solid transparent;
    transition: background 260ms ease, border-color 260ms ease, box-shadow 260ms ease;
}
header.top.dicht {
    background: color-mix(in srgb, var(--ground) 78%, transparent);
    -webkit-backdrop-filter: saturate(160%) blur(18px); backdrop-filter: saturate(160%) blur(18px);
    border-bottom-color: var(--line);
    box-shadow: 0 10px 40px -20px rgba(14, 17, 32, 0.35);
}
.top-inner { display: flex; align-items: center; gap: 36px; height: 72px; transition: height 260ms ease; }
header.top.dicht .top-inner { height: 64px; }
.logo {
    font-weight: 800; font-size: 20px; letter-spacing: -0.02em;
    color: var(--ink); text-decoration: none; display: inline-flex; align-items: center; flex: none;
}
.logo .one { color: var(--brand); }
/* Het echte merk: logo_black op licht, logo_white op donker, volgens het driestanden-thema;
   op de transparante balk altijd wit, want daar staat hij op de donkere video. */
.logo-img { display: block; height: 30px; width: auto; }
.logo-img.donker { display: none; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .logo-img.licht { display: none; }
    :root:not([data-theme="light"]) .logo-img.donker { display: block; }
}
:root[data-theme="dark"] .logo-img.licht { display: none; }
:root[data-theme="dark"] .logo-img.donker { display: block; }
header.top.transparant .logo-img.licht { display: none; }
header.top.transparant .logo-img.donker { display: block; }
footer.site .logo-img { height: 26px; }
.top-menu { display: contents; }
nav.main { display: flex; gap: 30px; margin-left: auto; }
nav.main a {
    position: relative; color: var(--ink-soft); text-decoration: none; font-size: 14.5px; font-weight: 500;
    padding: 6px 0; transition: color 160ms ease;
}
nav.main a::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px; border-radius: 2px;
    background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform 220ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
nav.main a:hover, nav.main a:focus-visible, nav.main a[aria-current="page"] { color: var(--ink); }
nav.main a:hover::after, nav.main a:focus-visible::after, nav.main a[aria-current="page"]::after { transform: scaleX(1); }
.top-acties { display: flex; align-items: center; gap: 8px; flex: none; }
.top-acties .btn { padding: 11px 18px; font-size: 14px; }
.top-acties .btn-ghost { border-color: transparent; color: var(--ink-soft); }
.top-acties .btn-ghost:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); color: var(--ink); transform: none; }
/* Transparante stand: alles wit over de video. */
header.top.transparant nav.main a { color: rgba(255, 255, 255, 0.8); }
header.top.transparant nav.main a:hover, header.top.transparant nav.main a:focus-visible, header.top.transparant nav.main a[aria-current="page"] { color: #ffffff; }
header.top.transparant .top-acties .btn-ghost { color: rgba(255, 255, 255, 0.85); }
header.top.transparant .top-acties .btn-ghost:hover { background: rgba(255, 255, 255, 0.1); color: #ffffff; }
header.top.transparant .top-acties .btn-primary { background: #6366f1; color: #ffffff; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 14px 32px -12px rgba(99, 102, 241, 0.8); }
header.top.transparant .top-acties .btn-primary:hover { background: #7c7ff5; }
/* Pagina's zonder videoheader beginnen onder de vaste balk. */
section.page:not([data-page="home"]) { padding-top: 64px; }

/* Mobiel: hamburger rechts; het menu schuift als zijpaneel van rechts in. */
.menu-knop {
    display: none; flex: none; width: 44px; height: 44px; border-radius: 12px; border: 0;
    background: transparent; cursor: pointer; position: relative; padding: 0; margin-left: auto; z-index: 2;
}
.menu-knop span {
    position: absolute; left: 11px; right: 11px; height: 2px; border-radius: 2px; background: var(--ink);
    transition: transform 220ms cubic-bezier(0.2, 0.7, 0.2, 1), top 220ms cubic-bezier(0.2, 0.7, 0.2, 1), background 200ms ease;
}
.menu-knop span:first-child { top: 17px; }
.menu-knop span:last-child { top: 25px; }
header.top.transparant .menu-knop span { background: #ffffff; }
header.top.open .menu-knop span { background: var(--ink); }
.menu-knop[aria-expanded="true"] span:first-child { top: 21px; transform: rotate(45deg); }
.menu-knop[aria-expanded="true"] span:last-child { top: 21px; transform: rotate(-45deg); }
.menu-knop:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
body.menu-open { overflow: hidden; }
body.menu-open::after {
    content: ""; position: fixed; inset: 0; z-index: 49;
    background: rgba(9, 11, 19, 0.5); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
@media (max-width: 860px) {
    .top-inner { height: 64px; gap: 16px; }
    .menu-knop { display: block; }
    .top-menu {
        display: flex; flex-direction: column; position: fixed; top: 0; right: 0; bottom: 0;
        width: min(86vw, 380px); padding: 88px 26px 28px;
        background: var(--ground); border-left: 1px solid var(--line); box-shadow: var(--shadow-lg);
        transform: translateX(104%); transition: transform 320ms cubic-bezier(0.2, 0.7, 0.2, 1);
        visibility: hidden; z-index: 1;
    }
    header.top.open .top-menu { transform: none; visibility: visible; }
    header.top.open { background: transparent; border-bottom-color: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
    nav.main { flex-direction: column; gap: 2px; margin: 0; }
    nav.main a { font-size: 24px; font-weight: 700; letter-spacing: -0.025em; padding: 12px 0; color: var(--ink); }
    nav.main a::after { display: none; }
    nav.main a[aria-current="page"] { color: var(--brand); }
    header.top.transparant nav.main a { color: var(--ink); }
    header.top.transparant nav.main a[aria-current="page"] { color: var(--brand); }
    .top-acties { flex-direction: column; align-items: stretch; gap: 10px; margin-top: auto; padding-top: 22px; border-top: 1px solid var(--line); }
    .top-acties .btn { padding: 15px 18px; font-size: 15.5px; justify-content: center; }
    .top-acties .btn-ghost { border-color: var(--line-strong); color: var(--ink); }
    header.top.transparant .top-acties .btn-ghost { color: var(--ink); }
    header.top.transparant .top-acties .btn-primary { background: var(--brand); color: var(--brand-ink); box-shadow: none; }
}
@media (prefers-reduced-motion: reduce) {
    .top-menu, header.top, .top-inner, nav.main a::after { transition: none !important; }
}

/* ===== Pagina's (hash-router) ===== */
section.page[hidden] { display: none; }

/* ===== Home: filmische videoheader =====
   Bewust één vaste avondlook in beide thema's; alle kleuren staan expliciet. */
.hero-video {
    position: relative; overflow: hidden; color: #ffffff;
    min-height: clamp(640px, 92vh, 860px); display: flex; align-items: center;
    background: #070a14;
}
.hero-poster, .hero-film {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.hero-poster { z-index: 0; }
.hero-film { z-index: 1; }
/* Drie sluiers: links donker voor de tekst, onderaan een overloop naar de paginakleur zodat de
   film in de pagina "landt", en een zachte indigo-gloed. */
.hero-sluier {
    position: absolute; inset: 0; z-index: 2;
    background:
        linear-gradient(90deg, rgba(4, 6, 14, 0.86) 0%, rgba(4, 6, 14, 0.58) 42%, rgba(4, 6, 14, 0.18) 100%),
        linear-gradient(180deg, rgba(4, 6, 14, 0.35) 0%, rgba(4, 6, 14, 0) 30%, rgba(4, 6, 14, 0) 55%, var(--ground) 100%),
        radial-gradient(70% 60% at 10% 100%, rgba(99, 102, 241, 0.32) 0%, rgba(99, 102, 241, 0) 60%);
}
.hero-video .wrap {
    position: relative; z-index: 3; width: 100%; padding-top: 180px; padding-bottom: 130px;
}
.hero-tekst { max-width: 960px; }
/* Bovenkop in de header: geen pil, een korte gradientstreep met rustig getrackte kapitalen. */
.hero-video .eyebrow { color: rgba(255, 255, 255, 0.7); font-size: 12.5px; letter-spacing: 0.18em; font-weight: 500; gap: 14px; }
.hero-video .eyebrow::before { width: 28px; background: linear-gradient(90deg, #a5b4fc, #5eead4); }
.hero-video h1 {
    font-size: clamp(40px, 5.9vw, 80px); font-weight: 800; letter-spacing: -0.04em; line-height: 1.08;
    margin: 28px 0 32px; color: #ffffff; max-width: 24ch;
}
.hero-video h1 .accent {
    background: linear-gradient(100deg, #a5b4fc 0%, #c4b5fd 45%, #5eead4 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-video .sub { font-size: clamp(17px, 1.6vw, 20px); color: rgba(255, 255, 255, 0.76); max-width: 52ch; line-height: 1.75; }
.hero-cta { display: flex; gap: 14px; margin-top: 44px; flex-wrap: wrap; }
.hero-video .btn { padding: 15px 26px; font-size: 15.5px; border-radius: 14px; }
.hero-video .btn-primary { background: #6366f1; color: #ffffff; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 18px 40px -12px rgba(99, 102, 241, 0.75); }
.hero-video .btn-primary:hover { background: #7c7ff5; }
.hero-video .btn-ghost {
    border-color: rgba(255, 255, 255, 0.2); color: #ffffff; background: rgba(255, 255, 255, 0.08);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.hero-video .btn-ghost:hover { background: rgba(255, 255, 255, 0.14); border-color: rgba(255, 255, 255, 0.4); }

@media (max-width: 1024px) {
    .hero-video .wrap { padding-top: 150px; padding-bottom: 96px; }
}
@media (max-width: 640px) {
    .hero-video { min-height: 0; }
    .hero-video .wrap { padding-top: 112px; padding-bottom: 72px; }
    .hero-video .eyebrow { font-size: 11px; letter-spacing: 0.14em; line-height: 1.5; gap: 10px; align-items: flex-start; }
    .hero-video .eyebrow::before { width: 20px; margin-top: 7px; }
    .hero-video h1 { font-size: clamp(38px, 11.5vw, 50px); line-height: 1.06; margin: 20px 0 22px; }
    .hero-video .sub { font-size: 16.5px; line-height: 1.65; }
    .hero-cta { margin-top: 32px; gap: 10px; }
    .hero-cta .btn { flex: 1 1 100%; padding: 15px 18px; }
    .hero-sluier {
        background:
            linear-gradient(180deg, rgba(4, 6, 14, 0.7) 0%, rgba(4, 6, 14, 0.62) 55%, var(--ground) 100%),
            radial-gradient(80% 50% at 10% 100%, rgba(99, 102, 241, 0.28) 0%, rgba(99, 102, 241, 0) 60%);
    }
}

/* Scrollhint onderin de header: een verticaal lijntje met een zacht deinend pijltje. */
.scroll-hint {
    position: absolute; left: 50%; bottom: 26px; z-index: 3; transform: translateX(-50%);
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    background: none; border: 0; padding: 8px; cursor: pointer; color: rgba(255, 255, 255, 0.7);
    transition: color 160ms ease;
}
.scroll-hint:hover, .scroll-hint:focus-visible { color: #ffffff; }
.scroll-hint:focus-visible { outline: 3px solid #a5b4fc; outline-offset: 2px; border-radius: 12px; }
.scroll-hint svg { width: 22px; height: 22px; display: block; animation: scrollHint 2.2s ease-in-out infinite; }
@keyframes scrollHint { 0%, 100% { transform: translateY(0); opacity: 0.7; } 50% { transform: translateY(6px); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .scroll-hint svg { animation: none; } }
@media (max-width: 640px) { .scroll-hint { bottom: 14px; } }

/* ===== Blokken (algemene sectie-opmaak) ===== */
section.blok { padding: 104px 0; position: relative; }
section.blok.tint { background: var(--paper); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.blok-kop { max-width: 62ch; margin-bottom: 44px; }
.blok-kop h2 { font-size: clamp(30px, 4vw, 46px); font-weight: 800; letter-spacing: -0.035em; margin: 16px 0 14px; line-height: 1.05; }
.blok-kop p { color: var(--ink-soft); font-size: 17px; line-height: 1.6; }
.blok-kop.midden { margin-left: auto; margin-right: auto; text-align: center; }
.blok-kop.midden .eyebrow::before { display: none; }

/* Verschijnen bij scrollen (site.js zet .reveal en .in); zonder JS of met "minder beweging"
   staat alles gewoon in beeld. */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity 700ms cubic-bezier(0.2, 0.7, 0.2, 1), transform 700ms cubic-bezier(0.2, 0.7, 0.2, 1); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

/* ===== Canvas-sectie ===== */
.canvas-sectie { padding: 96px 0 72px; }
.canvas-sectie .hero-canvas { max-width: 900px; margin: 0 auto; }
.hero-canvas {
    margin: 0; position: relative;
    background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 14px; box-shadow: var(--shadow-lg);
}
.hero-canvas::after {
    content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
    background: radial-gradient(60% 50% at 50% 0%, color-mix(in srgb, var(--brand) 14%, transparent), transparent 70%);
}
.hero-canvas .surface {
    position: relative; border-radius: 12px; padding: 18px 12px 8px; overflow: hidden;
    background-color: var(--canvas-ground);
    background-image: radial-gradient(color-mix(in srgb, var(--ink) 12%, transparent) 1px, transparent 1px);
    background-size: 22px 22px;
    border: 1px solid var(--line);
}
.hero-canvas svg { display: block; width: 100%; height: auto; position: relative; }
.hero-note { font-size: 13px; color: var(--ink-soft); margin-top: 14px; text-align: center; }
/* Het schema zelf: knopen, lijnen en badges op themakleuren. */
.cv-laan { fill: color-mix(in srgb, var(--ink) 4%, transparent); }
.cv-laankop { font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em; }
.cv-knoop { fill: var(--node); stroke: var(--node-line); stroke-width: 1; }
.cv-knoop-tekst { fill: var(--node-text); font-size: 12.5px; font-weight: 600; }
.cv-knoop-sub { fill: var(--ink-soft); font-size: 10px; font-weight: 500; }
.cv-avg { fill: var(--meldspoor-soft); stroke: color-mix(in srgb, var(--meldspoor) 45%, transparent); }
.cv-avg-tekst { fill: var(--meldspoor); }
.cv-cbw { fill: var(--cbw-soft); stroke: color-mix(in srgb, var(--cbw) 45%, transparent); }
.cv-cbw-tekst { fill: var(--cbw); }
.cv-lijn { fill: none; stroke: var(--ink-mute); stroke-width: 1.5; }
.cv-lijn.teal { stroke: var(--meldspoor); }
.cv-lijn.paars { stroke: var(--cbw); }
.cv-stroom { fill: none; stroke-width: 1.5; stroke-dasharray: 5 7; stroke-linecap: round; animation: stroom 1.4s linear infinite; }
.cv-stroom.teal { stroke: var(--meldspoor); }
.cv-stroom.paars { stroke: var(--cbw); }
@keyframes stroom { to { stroke-dashoffset: -24; } }
.cv-pijl { fill: var(--ink-mute); }
.cv-pijl.teal { fill: var(--meldspoor); }
.cv-pijl.paars { fill: var(--cbw); }
.cv-badge { font-size: 10.5px; font-weight: 700; fill: #ffffff; }
.cv-badge-avg { fill: #0d9488; }
.cv-badge-cbw { fill: #7c3aed; }
.cv-escalatie { fill: var(--escalatie-soft); stroke: var(--escalatie); stroke-width: 1; stroke-dasharray: 4 4; }
.cv-escalatie-tekst { fill: var(--escalatie); font-size: 10.5px; font-weight: 600; }
.cv-ring { fill: none; stroke: var(--brand); stroke-width: 2; animation: ring 2.6s ease-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes ring { 0% { opacity: 0.9; transform: scale(1); } 100% { opacity: 0; transform: scale(1.18); } }
.cv-actief { stroke: var(--brand); stroke-width: 1.5; }
@keyframes pulseNode { 0%, 100% { opacity: 0.45; } 50% { opacity: 1; } }
.pulse { animation: pulseNode 2.6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .pulse, .cv-stroom, .cv-ring { animation: none; opacity: 1; } }

/* ===== Klokkenstrip ===== */
.clocks { padding: 24px 0 96px; }
.clocks-inner { display: grid; grid-template-columns: 1.1fr 1fr 1fr; gap: 20px; align-items: stretch; }
@media (max-width: 900px) { .clocks-inner { grid-template-columns: 1fr; } }
.clocks h2 { font-size: clamp(24px, 2.6vw, 30px); font-weight: 800; letter-spacing: -0.03em; }
.clocks p { font-size: 15.5px; color: var(--ink-soft); margin-top: 10px; max-width: 34ch; }
.clocks-inner > div:first-child { display: flex; flex-direction: column; justify-content: center; padding-right: 12px; }
.clock-chip {
    position: relative; display: grid; gap: 14px; padding: 24px 24px 22px;
    background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm);
    overflow: hidden;
}
.clock-chip::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; }
.clock-avg::before { background: linear-gradient(90deg, #0d9488, #5eead4); }
.clock-cbw::before { background: linear-gradient(90deg, #7c3aed, #c4b5fd); }
.clock-chip::after {
    content: ""; position: absolute; width: 220px; height: 220px; border-radius: 50%; right: -90px; top: -110px; pointer-events: none;
    filter: blur(30px); opacity: 0.35;
}
.clock-avg::after { background: var(--teal); }
.clock-cbw::after { background: var(--violet); }
.clock-dial {
    font-weight: 800; font-size: clamp(38px, 4vw, 48px); letter-spacing: -0.04em; line-height: 1;
    white-space: nowrap; font-variant-numeric: tabular-nums; position: relative;
}
.clock-dial::after { content: "uur"; font-size: 13px; font-weight: 600; letter-spacing: 0.06em; margin-left: 8px; color: var(--ink-soft); text-transform: uppercase; }
.clock-avg .clock-dial { color: var(--meldspoor); }
.clock-cbw .clock-dial { color: var(--cbw); }
.clock-chip > span:last-child { position: relative; display: grid; gap: 4px; }
.clock-chip strong { font-size: 15px; font-weight: 700; }
.clock-chip small { display: block; font-size: 14px; color: var(--ink-soft); line-height: 1.5; }

/* ===== Kaartenrasters (modules, fundament) ===== */
.groep-kop {
    font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--ink-mute); margin: 40px 0 16px;
}
.groep-kop:first-of-type { margin-top: 0; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
a.mod {
    position: relative; isolation: isolate;
    background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px 22px 20px;
    display: flex; flex-direction: column; gap: 8px; text-decoration: none; color: var(--ink);
    transition: transform 220ms cubic-bezier(0.2, 0.7, 0.2, 1), border-color 220ms ease, box-shadow 220ms ease;
    overflow: hidden;
}
a.mod::before {
    content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity 220ms ease;
    background: radial-gradient(120% 80% at 0% 0%, color-mix(in srgb, var(--brand) 14%, transparent), transparent 60%);
}
section.tint a.mod { background: var(--ground); }
a.mod:hover, a.mod:focus-visible { border-color: color-mix(in srgb, var(--brand) 45%, var(--line)); transform: translateY(-4px); box-shadow: var(--shadow-lg); }
a.mod:hover::before, a.mod:focus-visible::before { opacity: 1; }
a.mod .icoon {
    width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; margin-bottom: 6px;
    background: var(--brand-soft); color: var(--brand); border: 1px solid color-mix(in srgb, var(--brand) 18%, transparent);
}
a.mod .icoon svg { width: 20px; height: 20px; display: block; }
a.mod h3 { font-size: 17px; font-weight: 700; letter-spacing: -0.02em; }
a.mod p { font-size: 14.5px; color: var(--ink-soft); line-height: 1.55; }
a.mod .verder { font-size: 13.5px; font-weight: 600; color: var(--brand); margin-top: auto; padding-top: 10px; transition: transform 200ms ease; display: inline-block; }
a.mod:hover .verder { transform: translateX(4px); }
.chip {
    align-self: flex-start; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
    padding: 4px 10px; border-radius: 999px; background: var(--chip-ground); color: var(--ink-soft);
}
.chip.teal { background: var(--meldspoor-soft); color: var(--meldspoor); }
.chip.paars { background: var(--cbw-soft); color: var(--cbw); }
.chip.oranje { background: var(--escalatie-soft); color: var(--escalatie); }
.chip.indigo { background: var(--brand-soft); color: var(--brand); }
a.mod .icoon ~ .chip { position: absolute; top: 20px; right: 18px; }

/* Fundament: vier pijlers in een bento-raster. */
.fundament-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
@media (max-width: 1000px) { .fundament-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .fundament-grid { grid-template-columns: 1fr; } }
.fundament-grid a.mod { padding: 26px 24px 22px; min-height: 230px; }
.fundament-grid a.mod .chip { position: static; }

/* ===== Vinkjeslijsten ===== */
ul.cap { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
ul.cap li { display: grid; grid-template-columns: 26px 1fr; gap: 14px; font-size: 15px; }
ul.cap li::before {
    content: "\2713"; font-weight: 700; color: var(--brand); background: var(--brand-soft);
    width: 26px; height: 26px; border-radius: 8px; display: flex; align-items: center;
    justify-content: center; font-size: 13px; margin-top: 1px;
}
ul.cap strong { display: block; font-weight: 600; }
ul.cap span { color: var(--ink-soft); font-size: 14.5px; }

/* ===== "Zo ziet het eruit": twee schermvensters in HTML ===== */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: start; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }
.scherm { margin: 0; }
.venster {
    position: relative; border-radius: 16px; overflow: hidden;
    background: var(--paper); border: 1px solid var(--line); box-shadow: var(--shadow-lg);
    transition: transform 300ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
section.tint .venster { background: var(--ground); }
.scherm:hover .venster { transform: translateY(-4px); }
.venster-balk {
    display: flex; align-items: center; gap: 6px; padding: 11px 14px;
    border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--paper) 60%, var(--ground));
    font-size: 12px; color: var(--ink-soft);
}
.venster-balk i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.venster-balk .titel { margin: 0 auto; font-weight: 500; }
.venster-body { padding: 18px 18px 16px; display: grid; gap: 8px; }
.venster-kop { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.venster-kop h3 { font-size: 15.5px; font-weight: 700; letter-spacing: -0.02em; }
.venster-kop .knop { font-size: 12px; font-weight: 600; padding: 7px 12px; border-radius: 9px; background: var(--brand); color: var(--brand-ink); }
.taak {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 11px 13px; border-radius: 12px; background: var(--paper); border: 1px solid var(--line);
}
section.tint .taak { background: var(--paper); }
.taak.actief { border-color: color-mix(in srgb, var(--brand) 55%, transparent); background: var(--brand-soft); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 10%, transparent); }
.taak strong { display: block; font-size: 13.5px; font-weight: 600; letter-spacing: -0.01em; }
.taak small { display: block; font-size: 11.5px; color: var(--ink-soft); margin-top: 2px; }
.taak .status { font-size: 11px; font-weight: 700; padding: 5px 10px; border-radius: 999px; white-space: nowrap; background: var(--chip-ground); color: var(--ink-soft); }
.taak .status.paars { background: #7c3aed; color: #ffffff; }
.taak .status.teal { background: var(--meldspoor-soft); color: var(--meldspoor); }
.taak .status.oranje { background: var(--escalatie-soft); color: var(--escalatie); }
.taak .status.cbw { background: var(--cbw-soft); color: var(--cbw); }
.klok-badge {
    display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; padding: 5px 11px; border-radius: 999px;
    background: #0d9488; color: #ffffff; font-variant-numeric: tabular-nums;
}
.klok-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #ffffff; animation: pulseNode 1.6s ease-in-out infinite; }
.venster .label { font-size: 10.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-mute); margin: 6px 0 0; }
.venster figcaption, .scherm figcaption { font-size: 13px; color: var(--ink-soft); margin-top: 12px; }

/* ===== Module-detailpagina's ===== */
.mod-kop { padding: 64px 0 40px; border-bottom: 1px solid var(--line); background: var(--paper); position: relative; overflow: hidden; }
.mod-kop::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(50% 60% at 100% 0%, color-mix(in srgb, var(--brand) 10%, transparent), transparent 70%);
}
.mod-kop .wrap { position: relative; }
.terug { font-size: 13.5px; font-weight: 600; text-decoration: none; color: var(--ink-soft); display: inline-flex; align-items: center; gap: 6px; }
.terug:hover { color: var(--brand); }
.mod-kop h1 { font-size: clamp(34px, 4.6vw, 52px); font-weight: 800; letter-spacing: -0.035em; margin: 14px 0 14px; }
.mod-kop .lede { font-size: 18px; color: var(--ink-soft); max-width: 64ch; line-height: 1.6; }
.mod-body { padding: 56px 0 80px; display: grid; grid-template-columns: 1.5fr 1fr; gap: 48px; align-items: start; }
@media (max-width: 880px) { .mod-body { grid-template-columns: 1fr; } }
.mod-body h2 { font-size: 21px; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 22px; }
.zijkaart {
    background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px;
    display: grid; gap: 10px; position: sticky; top: 90px; box-shadow: var(--shadow-sm);
}
.zijkaart h3 { font-size: 14.5px; font-weight: 700; }
.zijkaart p, .zijkaart li { font-size: 14px; color: var(--ink-soft); }
.zijkaart ul { margin: 0; padding-left: 18px; display: grid; gap: 5px; }
.zijkaart .verwant { display: flex; flex-wrap: wrap; gap: 8px; }
.zijkaart .verwant a {
    font-size: 13px; font-weight: 600; text-decoration: none; padding: 5px 12px;
    border-radius: 999px; background: var(--brand-soft); color: var(--brand);
}
.zijkaart .btn { text-align: center; margin-top: 8px; }

/* ===== CTA & footer ===== */
.cta-slot { padding: 32px 0 96px; }
.cta-inner {
    position: relative; overflow: hidden; text-align: center;
    padding: 72px 32px; border-radius: 28px;
    background: var(--paper); border: 1px solid var(--line); box-shadow: var(--shadow-lg);
}
.cta-inner::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background:
        radial-gradient(50% 70% at 20% 0%, color-mix(in srgb, var(--brand) 22%, transparent), transparent 60%),
        radial-gradient(40% 60% at 85% 100%, color-mix(in srgb, var(--teal) 16%, transparent), transparent 60%);
}
.cta-inner > * { position: relative; }
.cta-inner h2 { font-size: clamp(28px, 3.6vw, 44px); font-weight: 800; letter-spacing: -0.035em; max-width: 22ch; margin: 14px auto 0; }
.cta-inner p { color: var(--ink-soft); margin: 14px auto 30px; max-width: 52ch; font-size: 17px; }
.cta-inner .btn-ghost { margin-left: 10px; }
footer.site {
    border-top: 1px solid var(--line);
    padding: 34px 0 44px; font-size: 13.5px; color: var(--ink-soft);
}
.foot-inner { display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: center; justify-content: space-between; }
.foot-merk { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
footer.site .logo { font-size: 16px; }
footer.site nav { display: flex; gap: 20px; flex-wrap: wrap; align-items: center; }
footer.site a { color: var(--ink-soft); text-decoration: none; transition: color 140ms ease; }
footer.site a:hover { color: var(--ink); }
footer.site .link-knop { color: var(--ink-soft) !important; text-decoration: none !important; font-weight: 500 !important; font-size: 13.5px !important; }
footer.site .link-knop:hover { color: var(--ink) !important; }

/* ===== Procesdemo's: zichzelf herhalende "filmpjes" in de moduleheader =====
   Alles is CSS-animatie op een gedeelde cyclus per demo; de RUSTSTAND van elk element is de
   eindstand van de film, zodat de demo bij "bewegingsarm" als stilstaand eindbeeld verschijnt. */
.mod-kop-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 44px; align-items: center; }
@media (max-width: 920px) { .mod-kop-grid { grid-template-columns: 1fr; } }
.demo-kaart {
    margin: 0; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 12px; box-shadow: var(--shadow-lg);
}
.demo { position: relative; border-radius: 10px; overflow: hidden; background: var(--ground); border: 1px solid var(--line); }
.demo, .demo * { font-family: "Inter", sans-serif; }
.demo .balk {
    display: flex; align-items: center; gap: 6px; padding: 9px 12px;
    background: var(--chip-ground); font-size: 11px; color: var(--ink-soft);
}
.demo .balk i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.demo .balk .titel { margin: 0 auto; }
.demo .doek { position: relative; height: 250px; }
.demo .voortgang {
    position: absolute; left: 0; bottom: 0; height: 3px; background: var(--brand);
    width: 100%; transform-origin: left; z-index: 5;
}
.demo-onderschrift { font-size: 12.5px; color: var(--ink-soft); margin-top: 9px; text-align: center; }

.demo .scherm { position: absolute; inset: 0; padding: 14px 16px; }
.demo .kopregel { font-size: 13px; font-weight: 700; color: var(--ink); margin-bottom: 10px; }
.demo .veld { margin-bottom: 9px; }
.demo .veld label { display: block; font-size: 10px; font-weight: 600; color: var(--ink-soft); margin-bottom: 3px; }
.demo .invoer {
    position: relative; background: var(--paper); border: 1px solid var(--line); border-radius: 7px;
    padding: 6px 10px; font-size: 12px; color: var(--ink); min-height: 28px; overflow: hidden;
}
.demo .knop {
    display: inline-block; background: var(--brand); color: var(--brand-ink);
    font-size: 12px; font-weight: 600; padding: 7px 16px; border-radius: 7px; margin-top: 4px;
}
.demo .cursor {
    position: absolute; width: 16px; height: 16px; z-index: 6; opacity: 0; pointer-events: none;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.35));
}
.demo .cursor svg { display: block; width: 100%; height: 100%; }
.demo .toast {
    position: absolute; right: 12px; top: 10px; z-index: 4; opacity: 0;
    background: #059669; color: #ffffff; font-size: 11px; font-weight: 600;
    padding: 7px 12px; border-radius: 8px;
}
.demo .rij {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    background: var(--paper); border: 1px solid var(--line); border-radius: 7px;
    padding: 7px 10px; font-size: 11.5px; color: var(--ink); margin-bottom: 7px;
}
.demo .rij small { color: var(--ink-soft); font-size: 10px; display: block; }
.demo .status {
    font-size: 9.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px;
    background: var(--chip-ground); color: var(--ink-soft); white-space: nowrap;
}
.demo .status.groen { background: var(--meldspoor-soft); color: var(--meldspoor); }
.demo .status.oranje { background: var(--escalatie-soft); color: var(--escalatie); }
.demo .status.paars { background: var(--cbw-soft); color: var(--cbw); }
.demo .klok {
    font-size: 10px; font-weight: 700; padding: 3px 9px; border-radius: 999px; color: #ffffff;
    display: inline-block; margin-right: 6px;
}
.demo .klok.teal { background: #0d9488; }
.demo .klok.paars { background: #7c3aed; }
.demo .caret {
    display: inline-block; width: 1.5px; height: 12px; background: var(--brand);
    vertical-align: -2px; margin-left: 1px; opacity: 0;
}

@keyframes demoVoortgang { 0% { transform: scaleX(0); } 96% { transform: scaleX(1); } 100% { transform: scaleX(1); } }
@keyframes demoCaret { 0%, 100% { opacity: 0; } 50% { opacity: 1; } }
.demo .voortgang { animation: demoVoortgang var(--cyclus) linear infinite; }

@media (prefers-reduced-motion: reduce) {
    .demo *, .demo .voortgang { animation: none !important; }
    .demo .cursor { opacity: 0 !important; }
}

/* --- Demo 1: verwerking toevoegen (cyclus 14s) --- */
.demo-vwr { --cyclus: 14s; }
.demo-vwr .scherm-form { opacity: 0; animation: vwrForm var(--cyclus) infinite; }
@keyframes vwrForm { 0% { opacity: 0; } 2%, 56% { opacity: 1; } 61%, 100% { opacity: 0; } }
.demo-vwr .typtekst { display: inline-block; white-space: nowrap; overflow: hidden; max-width: 100%; animation: vwrTyp var(--cyclus) infinite; }
@keyframes vwrTyp { 0%, 6% { max-width: 0; } 22%, 100% { max-width: 100%; } }
.demo-vwr .caret { animation: demoCaret 0.9s steps(1) infinite; }
.demo-vwr .waarde2 { animation: vwrW2 var(--cyclus) infinite; }
@keyframes vwrW2 { 0%, 26% { opacity: 0; } 31%, 100% { opacity: 1; } }
.demo-vwr .waarde3 { animation: vwrW3 var(--cyclus) infinite; }
@keyframes vwrW3 { 0%, 34% { opacity: 0; transform: scale(0.9); } 38%, 100% { opacity: 1; transform: scale(1); } }
.demo-vwr .knop { animation: vwrKnop var(--cyclus) infinite; }
@keyframes vwrKnop { 0%, 49% { transform: scale(1); } 51% { transform: scale(0.94); } 53%, 100% { transform: scale(1); } }
.demo-vwr .cursor { animation: vwrCursor var(--cyclus) infinite; }
@keyframes vwrCursor {
    0%, 38% { opacity: 0; transform: translate(150px, 60px); }
    42% { opacity: 1; transform: translate(150px, 60px); }
    49% { opacity: 1; transform: translate(52px, 196px); }
    55% { opacity: 1; transform: translate(52px, 196px); }
    59%, 100% { opacity: 0; transform: translate(52px, 196px); }
}
.demo-vwr .scherm-lijst { animation: vwrLijst var(--cyclus) infinite; }
@keyframes vwrLijst { 0%, 60% { opacity: 0; } 65%, 100% { opacity: 1; } }
.demo-vwr .toast { animation: vwrToast var(--cyclus) infinite; }
@keyframes vwrToast { 0%, 62% { opacity: 0; transform: translateY(-6px); } 66%, 90% { opacity: 1; transform: translateY(0); } 95%, 100% { opacity: 0; } }
.demo-vwr .nieuw { animation: vwrNieuw var(--cyclus) infinite; }
@keyframes vwrNieuw {
    0%, 64% { background: var(--brand-soft); border-color: var(--brand); }
    86%, 100% { background: var(--paper); border-color: var(--line); }
}

/* --- Demo 2: incident melden en bevestigen (cyclus 16s) --- */
.demo-inc { --cyclus: 16s; }
.demo-inc .scherm-form { opacity: 0; animation: incForm var(--cyclus) infinite; }
@keyframes incForm { 0% { opacity: 0; } 2%, 34% { opacity: 1; } 38%, 100% { opacity: 0; } }
.demo-inc .typtekst { display: inline-block; white-space: nowrap; overflow: hidden; max-width: 100%; animation: incTyp var(--cyclus) infinite; }
@keyframes incTyp { 0%, 4% { max-width: 0; } 15%, 100% { max-width: 100%; } }
.demo-inc .caret { animation: demoCaret 0.9s steps(1) infinite; }
.demo-inc .typechip { animation: incChip var(--cyclus) infinite; }
@keyframes incChip { 0%, 17% { opacity: 0; transform: scale(0.9); } 21%, 100% { opacity: 1; transform: scale(1); } }
.demo-inc .scherm-dossier { animation: incDossier var(--cyclus) infinite; }
@keyframes incDossier { 0%, 37% { opacity: 0; } 41%, 100% { opacity: 1; } }
.demo-inc .chip-triage { position: absolute; animation: incTriage var(--cyclus) infinite; opacity: 0; }
@keyframes incTriage { 0%, 40% { opacity: 0; } 42%, 52% { opacity: 1; } 54%, 100% { opacity: 0; } }
.demo-inc .chip-behandeling { animation: incBehandeling var(--cyclus) infinite; }
@keyframes incBehandeling { 0%, 53% { opacity: 0; } 56%, 100% { opacity: 1; } }
.demo-inc .bevestigknop { animation: incKnop var(--cyclus) infinite; }
@keyframes incKnop {
    0%, 51% { transform: scale(1); opacity: 1; }
    53% { transform: scale(0.94); opacity: 1; }
    56% { transform: scale(1); opacity: 1; }
    60%, 100% { opacity: 0.35; }
}
.demo-inc .cursor { animation: incCursor var(--cyclus) infinite; }
@keyframes incCursor {
    0%, 24% { opacity: 0; transform: translate(170px, 70px); }
    27% { opacity: 1; transform: translate(170px, 70px); }
    32% { opacity: 1; transform: translate(56px, 190px); }
    35% { opacity: 1; transform: translate(56px, 190px); }
    38% { opacity: 0; transform: translate(56px, 190px); }
    44% { opacity: 0; transform: translate(210px, 64px); }
    46% { opacity: 1; transform: translate(210px, 64px); }
    51% { opacity: 1; transform: translate(120px, 92px); }
    55% { opacity: 1; transform: translate(120px, 92px); }
    59%, 100% { opacity: 0; transform: translate(120px, 92px); }
}
.demo-inc .klok-teal { animation: incKlok1 var(--cyclus) infinite; }
@keyframes incKlok1 { 0%, 58% { opacity: 0; transform: scale(0.7); } 62%, 100% { opacity: 1; transform: scale(1); } }
.demo-inc .klok-paars { animation: incKlok2 var(--cyclus) infinite; }
@keyframes incKlok2 { 0%, 62% { opacity: 0; transform: scale(0.7); } 66%, 100% { opacity: 1; transform: scale(1); } }
.demo-inc .meldrij1 { animation: incRij1 var(--cyclus) infinite; }
@keyframes incRij1 { 0%, 66% { opacity: 0; transform: translateX(14px); } 71%, 100% { opacity: 1; transform: translateX(0); } }
.demo-inc .meldrij2 { animation: incRij2 var(--cyclus) infinite; }
@keyframes incRij2 { 0%, 70% { opacity: 0; transform: translateX(14px); } 75%, 100% { opacity: 1; transform: translateX(0); } }

/* --- Demo 3: taak en notificatie (cyclus 10s) --- */
.demo-taak { --cyclus: 10s; }
.demo-taak .leeg { position: absolute; left: 16px; top: 44px; font-size: 11.5px; color: var(--ink-soft); opacity: 0; animation: taakLeeg var(--cyclus) infinite; }
@keyframes taakLeeg { 0%, 2% { opacity: 0; } 5%, 20% { opacity: 1; } 25%, 100% { opacity: 0; } }
.demo-taak .taakrij { animation: taakRij var(--cyclus) infinite; }
@keyframes taakRij { 0%, 24% { opacity: 0; transform: translateY(10px); } 31%, 100% { opacity: 1; transform: translateY(0); } }
.demo-taak .belwrap { position: absolute; right: 14px; top: 8px; }
.demo-taak .belbadge {
    position: absolute; top: -5px; right: -7px; background: #dc2626; color: #ffffff;
    font-size: 9px; font-weight: 700; width: 15px; height: 15px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    animation: taakBadge var(--cyclus) infinite;
}
@keyframes taakBadge { 0%, 34% { opacity: 0; transform: scale(0.4); } 39%, 100% { opacity: 1; transform: scale(1); } }
.demo-taak .toast { top: 34px; background: var(--brand); animation: taakToast var(--cyclus) infinite; }
@keyframes taakToast { 0%, 42% { opacity: 0; transform: translateY(-6px); } 47%, 88% { opacity: 1; transform: translateY(0); } 94%, 100% { opacity: 0; } }

/* ===== Cookiebanner en -voorkeuren (Telecommunicatiewet art. 11.7a + AVG) ===== */
.cookie-banner {
    position: fixed; z-index: 90; left: 16px; right: 16px; bottom: 16px;
    max-width: 720px; margin: 0 auto; display: none;
    background: var(--glass); border: 1px solid var(--line-strong); border-radius: 18px;
    -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%);
    box-shadow: var(--shadow-lg); padding: 22px 24px;
}
.cookie-banner.zichtbaar { display: block; }
.cookie-banner h2 { font-size: 16px; font-weight: 700; }
.cookie-banner p { font-size: 13.5px; color: var(--ink-soft); margin: 8px 0 14px; max-width: none; }
.cookie-banner p a { color: var(--brand); }
.cookie-acties { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.cookie-acties .btn { font-size: 14px; padding: 10px 18px; }
.link-knop {
    background: none; border: none; padding: 0; font: inherit; font-size: 13.5px;
    font-weight: 600; color: var(--brand); cursor: pointer; text-decoration: underline;
}
.link-knop:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }

.cookie-paneel {
    position: fixed; z-index: 95; inset: 0; display: none;
    align-items: center; justify-content: center; padding: 20px;
    background: rgba(9, 11, 19, 0.55);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.cookie-paneel.zichtbaar { display: flex; }
.cookie-paneel .kader {
    background: var(--paper); border: 1px solid var(--line); border-radius: 18px;
    max-width: 520px; width: 100%; max-height: 85vh; overflow-y: auto; padding: 26px; box-shadow: var(--shadow-lg);
}
.cookie-paneel h2 { font-size: 18px; font-weight: 700; margin-bottom: 6px; }
.cookie-paneel .uitleg { font-size: 13.5px; color: var(--ink-soft); margin-bottom: 8px; }
.cookie-cat { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 14px 0; border-top: 1px solid var(--line); }
.cookie-cat:first-of-type { border-top: none; }
.cookie-cat strong { font-size: 14px; display: block; }
.cookie-cat p { font-size: 12.5px; color: var(--ink-soft); margin-top: 3px; }
.schakel { position: relative; display: inline-block; width: 42px; height: 24px; flex: none; margin-top: 2px; }
.schakel input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.schakel .knopje {
    position: absolute; inset: 0; border-radius: 999px; background: var(--chip-ground);
    border: 1px solid var(--line); transition: background 120ms ease; pointer-events: none;
}
.schakel .knopje::after {
    content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px;
    border-radius: 50%; background: var(--paper); border: 1px solid var(--line);
    transition: transform 120ms ease;
}
.schakel input:checked + .knopje { background: var(--brand); border-color: var(--brand); }
.schakel input:checked + .knopje::after { transform: translateX(18px); }
.schakel input:focus-visible + .knopje { outline: 3px solid var(--brand); outline-offset: 2px; }
.schakel input:disabled { cursor: not-allowed; }
.schakel input:disabled + .knopje { opacity: 0.6; }
.cookie-paneel .kader .cookie-acties { margin-top: 16px; }

/* ===== Optionele componenten (Websitebeheer): mededelingsbalk, werkwijze, FAQ, citaten,
   beveiligingsstrip, contact. Standaard uit; via de builder aan te zetten. ===== */
.mededeling { background: var(--brand-soft); border-bottom: 1px solid var(--line); }
.mededeling .wrap { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; padding-top: 12px; padding-bottom: 12px; }
.mededeling p { margin: 0; font-size: 14px; color: var(--ink); }
.mededeling strong { color: var(--brand); }
.mededeling a { font-weight: 600; font-size: 14px; color: var(--brand); }

ol.stappen { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; counter-reset: stap; }
.stap { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 24px; display: grid; gap: 10px; align-content: start; box-shadow: var(--shadow-sm); }
.stapnr { width: 34px; height: 34px; border-radius: 10px; background: var(--brand-soft); color: var(--brand); font-weight: 700; font-size: 14px; display: grid; place-items: center; }
.stap h3 { margin: 0; font-size: 17px; }
.stap p { margin: 0; font-size: 14.5px; color: var(--ink-soft); }

.faq-lijst { display: grid; gap: 10px; max-width: 760px; }
.faq-item { background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 4px 20px; transition: border-color 140ms ease; }
.faq-item[open] { border-color: var(--line-strong); }
.faq-item summary { cursor: pointer; font-weight: 600; padding: 14px 28px 14px 0; list-style: none; position: relative; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; position: absolute; right: 2px; top: 50%; transform: translateY(-50%); font-weight: 700; color: var(--brand); font-size: 18px; }
.faq-item[open] summary::after { content: "\2212"; }
.faq-item p { margin: 0 0 16px; font-size: 14.5px; color: var(--ink-soft); }

.citaat { margin: 0; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; display: grid; gap: 12px; box-shadow: var(--shadow-sm); }
.citaat blockquote { margin: 0; font-size: 15.5px; line-height: 1.55; }
.citaat blockquote p { margin: 0; }
.citaat blockquote p::before { content: "\201C"; font-weight: 700; color: var(--brand); }
.citaat blockquote p::after { content: "\201D"; font-weight: 700; color: var(--brand); }
.citaat figcaption { font-size: 13px; font-weight: 600; color: var(--ink-soft); }

.beveiliging-meer { margin: 24px 0 0; }
.beveiliging-meer a { font-weight: 600; color: var(--brand); }
.contact-kader {
    position: relative; overflow: hidden;
    background: var(--paper); border: 1px solid var(--line); border-radius: 24px;
    padding: 48px 32px; max-width: 680px; margin: 0 auto; text-align: center;
    display: grid; gap: 12px; justify-items: center; box-shadow: var(--shadow-lg);
}
.contact-kader::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(60% 70% at 50% 0%, color-mix(in srgb, var(--brand) 16%, transparent), transparent 70%);
}
.contact-kader > * { position: relative; }
.contact-kader p { margin: 0; color: var(--ink-soft); }
.contact-kader p.eyebrow { color: var(--brand); }
.contact-kader h2 { margin: 0; }

/* Beeldblokken (galerij, tekst+beeld) - Websitebeheer 2026-09-16 */
.galerij-item { margin: 0; }
.galerij-item img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 14px; display: block; }
.galerij-item figcaption { margin-top: 8px; font-size: 13px; }
.beeld-figuur { margin: 0; }
.beeld-figuur img { width: 100%; border-radius: 16px; display: block; }

/* Rich-inhoud (vrije-tekstblok van de rich-teksteditor) - Websitebeheer 2026-09-16 */
.rte-inhoud > :first-child { margin-top: 0; }
.rte-inhoud ul, .rte-inhoud ol { padding-left: 1.4em; margin: .6em 0; }
.rte-inhoud ul { list-style: disc; } .rte-inhoud ol { list-style: decimal; }
.rte-inhoud blockquote { margin: .8em 0; padding: .3em 0 .3em 1em; border-left: 3px solid #6366f1; font-style: italic; }
.rte-inhoud hr { border: 0; border-top: 1px solid rgba(0,0,0,.14); margin: 1.4em 0; }
.rte-figuur { margin: 1em 0; max-width: 100%; }
.rte-figuur img { width: 100%; border-radius: 14px; display: block; }
.rte-figuur figcaption { margin-top: 6px; font-size: 13px; opacity: .75; }
.rte-figuur.fig-klein { max-width: 260px; } .rte-figuur.fig-midden { max-width: 460px; } .rte-figuur.fig-groot { max-width: 680px; } .rte-figuur.fig-vol { max-width: 100%; }
.rte-figuur.fig-links { margin-left: 0; margin-right: auto; } .rte-figuur.fig-center { margin-left: auto; margin-right: auto; } .rte-figuur.fig-rechts { margin-left: auto; margin-right: 0; }
.rte-bestand { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border: 1px solid rgba(0,0,0,.12); border-radius: 10px; text-decoration: none; }
.rte-knop { display: inline-block; padding: 10px 20px; border-radius: 10px; background: #4f46e5; color: #fff; text-decoration: none; font-weight: 600; }
.rte-info { margin: 1em 0; padding: 14px 16px; border-radius: 12px; background: rgba(99,102,241,.08); border: 1px solid rgba(99,102,241,.3); }
.rte-tabel { width: 100%; border-collapse: collapse; margin: 1em 0; }
.rte-tabel th, .rte-tabel td { border: 1px solid rgba(0,0,0,.14); padding: 9px 11px; text-align: left; }
.rte-tabel th { font-weight: 700; }
.rte-kolommen { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 1em 0; }
.rte-embed { margin: 1em 0; padding: 30px; border-radius: 14px; background: #111827; color: #e5e7eb; text-align: center; }

/* ===== Indeling per blok (ingesteld in het websitebeheer) =====
   Bewust een vaste set keuzes in plaats van vrije CSS: de redacteur kiest hoeveel kaarten er naast
   elkaar staan en hoeveel lucht een blok krijgt, maar kan de huisstijl niet loslaten. */
.blok--kol-2 .grid, .blok--kol-2 .fundament-grid, .blok--kol-2 .stappen { grid-template-columns: repeat(2, 1fr); }
.blok--kol-3 .grid, .blok--kol-3 .fundament-grid, .blok--kol-3 .stappen { grid-template-columns: repeat(3, 1fr); }
.blok--kol-4 .grid, .blok--kol-4 .fundament-grid, .blok--kol-4 .stappen { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) {
    .blok--kol-2 .grid, .blok--kol-3 .grid, .blok--kol-4 .grid,
    .blok--kol-2 .fundament-grid, .blok--kol-3 .fundament-grid, .blok--kol-4 .fundament-grid,
    .blok--kol-2 .stappen, .blok--kol-3 .stappen, .blok--kol-4 .stappen { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
    .blok--kol-2 .grid, .blok--kol-3 .grid, .blok--kol-4 .grid,
    .blok--kol-2 .fundament-grid, .blok--kol-3 .fundament-grid, .blok--kol-4 .fundament-grid,
    .blok--kol-2 .stappen, .blok--kol-3 .stappen, .blok--kol-4 .stappen { grid-template-columns: 1fr; }
}
section.blok.blok--compact { padding: 56px 0; }
section.blok.blok--ruim { padding: 148px 0; }