/* ═══════════════════════════════════════════════════════════════════════════
   world.css — "Van nacht naar dag" (cyclorama-lichtplan), v0.19.0
   De pagina is één cycloramawand: nacht → kobalt → roze → dageraad → dag,
   afgesloten met een blackout. Status = lichtstand. Laadt NA styles.css
   en bezit de volledige look van de startpagina; detailpagina's volgen
   in fase 2 met ditzelfde systeem.
   ═══════════════════════════════════════════════════════════════════════════ */

@font-face {
  font-family: "Saira Stencil One";
  src: url("fonts/saira-stencil-one.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --nacht: #050506;
  --kobalt: #0a2bff;
  --rose-gather: #7a4df5;
  --rose-licht: #8d6bff;
  --dageraad: #d9d4ff;
  --dag: #ffffff;
  --stencil: "Saira Stencil One", "Arial Black", sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace;
  --band-pad: clamp(1.1rem, 2.4vw, 1.8rem);
}

body.world-cyclorama { background: var(--nacht); }

/* ── Banden — elke band eindigt in de kleur waar de volgende begint ─────── */
.band { padding: var(--band-pad) 0; position: relative; }
.band-nacht {
  background: linear-gradient(180deg, var(--nacht) 0%, var(--nacht) 62%, #060a24 88%, #071033 100%);
  color: var(--dag);
  padding-top: 0;
}
.band-kobalt {
  background: linear-gradient(180deg, #071033 0%, #0a2bff 34%, #4136f7 78%, #7a41f7 100%);
  color: var(--dag);
}
/* MATERIAL: fine grain op de donkere banden (matte cyclorama-korrel) */
.band-nacht::after,
.band-kobalt::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
.band-nacht > *, .band-kobalt > * { position: relative; z-index: 1; }
.band-rose {
  background: linear-gradient(180deg, #7a41f7 0%, var(--rose-gather) 30%, #8a5cf0 68%, var(--rose-licht) 100%);
  color: #120a2e;
}
.band-dageraad {
  background: linear-gradient(180deg, var(--rose-licht) 0%, var(--dageraad) 55%, #f0edff 100%);
  color: #120a2e;
}
.band-dag {
  background: linear-gradient(180deg, #f0edff 0%, var(--dag) 22%, var(--dag) 100%);
  color: #0b0e13;
}
.band-blackout {
  background: linear-gradient(180deg, var(--dag) 0%, #2a2030 12%, var(--nacht) 40%, var(--nacht) 100%);
  color: var(--text-dim);
}

/* ── Cue-labels (mono, de taal van het lichtplan) ───────────────────────── */
.cue-label {
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 0.55rem;
}
.band-nacht .cue-label { color: #7d92ff; }
.band-kobalt .cue-label { color: #cfd8ff; }
.band-rose .cue-label { color: #1d1440; }
.band-dageraad .cue-label { color: #4a3a8c; }
.band-dag .cue-label { color: #6a5a8a; }

/* ── Header & nav op de nachtband ───────────────────────────────────────── */
.world-cyclorama .site-header { background: transparent; border: 0; }
.world-cyclorama .site-header .header-inner { padding-top: 1.1rem; }
.world-cyclorama .brand-mark,
.world-cyclorama .brand-sub { font-family: var(--stencil); font-weight: 400; }
.world-cyclorama .brand-mark { color: var(--dag); }
.world-cyclorama .brand-sub { color: var(--rose-licht); }
.world-cyclorama .site-nav { background: transparent; border-bottom: 1px solid rgba(125, 146, 255, 0.25); }
.world-cyclorama .nav-inner { flex-wrap: wrap; overflow: visible; row-gap: 0.3rem; }
.world-cyclorama .site-nav a {
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #9aa8e8;
}
.world-cyclorama .site-nav a:hover { color: var(--dag); }
.world-cyclorama .site-nav a.actief,
.world-cyclorama .site-nav a.nav-start.actief { color: var(--rose-licht); }

/* ── Hero (JE BENT HIER + titel + dageraad-motief) ──────────────────────── */
.hero-cyc { position: relative; overflow: hidden; padding-bottom: clamp(1.2rem, 3vw, 2.2rem); }
.hero-cyc-horizon {
  position: absolute; inset: auto 0 0 0; height: 60%;
  background:
    radial-gradient(120% 100% at 50% 100%, rgba(141, 107, 255, 0.35) 0%, rgba(122, 77, 245, 0.22) 34%, rgba(10, 43, 255, 0.18) 62%, transparent 100%);
  pointer-events: none;
  animation: dageraad 2s cubic-bezier(0.16, 1, 0.3, 1) 1 both;
}
@keyframes dageraad {
  from { opacity: 0; transform: translateY(35%); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-cyc-horizon { animation: none; }
}
.je-bent-hier {
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #7d92ff;
  margin: 0.6rem 0;
}
.je-bent-hier strong { color: var(--rose-licht); }
.hero-cyc h1 {
  font-family: var(--stencil);
  font-weight: 400;
  font-size: clamp(1.5rem, 3.4vw, 2.3rem);
  line-height: 1.06;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  max-width: 28ch;
  margin-bottom: 0.5rem;
  background: linear-gradient(92deg, #7d92ff 0%, var(--rose-gather) 55%, var(--rose-licht) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero-cyc .hero-onder {
  color: #b9c2ea;
  font-size: 0.85rem;
  max-width: 68ch;
  line-height: 1.5;
}

/* ── Nog in de nacht (gates) ────────────────────────────────────────────── */
.nacht-gates { position: relative; z-index: 1; margin-top: 0.9rem; }
.gate-rij {
  display: block;
  text-decoration: none;
  color: inherit;
  border: 1px solid rgba(141, 107, 255, 0.35);
  background: rgba(141, 107, 255, 0.05);
  border-radius: 10px;
  padding: 0.55rem 0.9rem;
  margin-bottom: 0.45rem;
  transition: border-color 0.2s, background 0.2s;
}
.gate-rij:hover { border-color: var(--rose-licht); background: rgba(141, 107, 255, 0.1); }
.gate-rij .gate-cue {
  font-family: var(--mono);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--rose-licht);
}
.gate-rij h3 { display: inline; font-size: 0.95rem; font-weight: 750; color: var(--dag); margin: 0 0 0 0.5rem; }
.gate-rij p { font-size: 0.8rem; color: #b9c2ea; line-height: 1.5; margin: 0.2rem 0 0; }

/* ── Console-rijen (WAT BEWEEGT, kobaltband) ────────────────────────────── */
#wat-beweegt {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 2.2rem;
}
@media (max-width: 700px) { #wat-beweegt { grid-template-columns: 1fr; } }
.console-rij {
  border-top: 1px solid rgba(255, 255, 255, 0.22);
  padding: 0.5rem 0 0.6rem;
}
.console-kop { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem 1.2rem; }
.console-label {
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #cfd8ff;
}
.console-waarde {
  font-family: var(--stencil);
  font-weight: 400;
  font-size: clamp(1.15rem, 2.2vw, 1.55rem);
  color: var(--dag);
  font-variant-numeric: tabular-nums;
}
.console-toelichting { font-size: 0.78rem; color: #dfe5ff; line-height: 1.5; max-width: 62ch; margin-top: 0.15rem; }
.console-rij .kaart-waarom { border-top: 0; margin-top: 0.45rem; padding-top: 0; }
.console-rij .kaart-waarom summary { color: #d9d4ff; font-family: var(--mono); letter-spacing: 0.08em; }
.console-rij .kaart-waarom p { color: #eef1ff; max-width: 62ch; }
.console-actie {
  display: inline-block;
  margin-top: 0.35rem;
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dag);
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 999px;
  padding: 0.38rem 0.9rem;
  transition: background 0.2s, color 0.2s;
}
.console-actie:hover { background: var(--dag); color: var(--kobalt); }

/* ── De cue-lijst (alle delen, roseband) ────────────────────────────────── */
.cue-lijst { display: flex; flex-direction: column; gap: 0.3rem; }
.cue-rij {
  display: grid;
  grid-template-columns: 6.4rem 1fr auto;
  gap: 0.15rem 1rem;
  align-items: center;
  text-decoration: none;
  border-radius: 8px;
  padding: 0.45rem 0.85rem;
  border: 1px solid transparent;
  transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.18s;
}
.cue-rij:hover { transform: translateX(0.35rem); border-color: currentColor; }
.cue-stand {
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  white-space: nowrap;
}
.cue-naam {
  font-family: var(--stencil);
  font-weight: 400;
  font-size: 0.95rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  line-height: 1.2;
}
.cue-simpel { grid-column: 2 / 3; font-size: 0.76rem; line-height: 1.4; opacity: 0.85; }
.cue-open {
  grid-row: 1 / 3; grid-column: 3;
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
}
.cue-gate {
  grid-column: 2 / 3;
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #ffdce9;
  background: var(--nacht);
  border-radius: 6px;
  padding: 0.3rem 0.55rem;
  justify-self: start;
  margin-top: 0.15rem;
}
/* lichtstanden */
.cue-50 { background: var(--dag); color: #0b0e13; }
.cue-40 { background: var(--dageraad); color: #120a2e; }
.cue-30 { background: var(--rose-licht); color: #120a2e; }
.cue-20 { background: var(--rose-gather); color: var(--dag); }
.cue-10 { background: var(--kobalt); color: var(--dag); }

/* ── Dageraadband: laatst gewijzigd ─────────────────────────────────────── */
.band-dageraad .laatst-gewijzigd-lijst li a { color: #1d1440; }
.band-dageraad .laatst-gewijzigd-lijst li a:hover { color: #4a3a8c; }
.band-dageraad .badge-nieuw,
.band-dageraad .badge-gewijzigd { border: 1px solid #4a3a8c; color: #4a3a8c; background: transparent; }
.band-dageraad .dash-toon-alles { color: #4a3a8c; border-color: #a89ad7; }
.band-dageraad .dash-toon-alles:hover { border-color: #4a3a8c; }

/* ── Dagband: vaste stukken, zwart op wit ───────────────────────────────── */
.band-dag h2 { color: #0b0e13; }
.band-dag .snel-link { color: #0b0e13; background: transparent; border-color: #ccc2d8; }
.band-dag .snel-link:hover { border-color: var(--kobalt); color: var(--kobalt); }
.band-dag .dash-snel-uitleg { color: #6b5560; }
.band-dag .dash-context { background: #fff; border-color: #ddd5e7; }
.band-dag .dash-context > summary h2 { color: #0b0e13; }
.band-dag .dash-context-hint { color: #a8848f; }
.band-dag .dash-context p,
.band-dag .dash-context li { color: #2c2228; }
.band-dag .www-titel { color: #0b0e13; }
.band-dag .www-pad, .band-dag .www-noot { color: #6b5560; }
.band-dag .www-regel { color: #2c2228; }
.band-dag .mono { color: #4a3a8c; }
.band-dag .pdf-overzicht-lijst a { color: var(--kobalt); }

/* ── Blackout (footer) ──────────────────────────────────────────────────── */
.band-blackout .footer-version .version-badge {
  font-family: var(--mono);
  background: transparent;
  border: 1px solid #7d92ff;
  color: #7d92ff;
}
.band-blackout .footer-note { color: #5c6780; }
.band-blackout .changelog summary { color: #9aa8e8; }

/* ── Responsief ─────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .cue-rij { grid-template-columns: 1fr auto; }
  .cue-stand { grid-column: 1; order: -1; }
  .cue-naam { grid-column: 1; }
  .cue-simpel { grid-column: 1 / 2; }
  .cue-open { grid-row: auto; grid-column: 2; align-self: start; }
  .console-label { flex-basis: 100%; }
}

/* ═══ v0.19.1 — verdichtingspas ═══ */
.band-dageraad .laatst-gewijzigd-lijst { display: flex; flex-direction: column; gap: 0.15rem; }
.band-dageraad .laatst-gewijzigd-lijst li { margin: 0; }
.band-dageraad .laatst-gewijzigd-lijst li a { font-size: 0.8rem; line-height: 1.45; }
.band-dag .dash-context { padding: 0.55rem 0.9rem; margin-bottom: 0.45rem; }
.band-dag .dash-context > summary h2 { font-size: 0.9rem; }
.band-dag .dash-blok-titel { font-size: 0.95rem; margin-bottom: 0.4rem; }
.band-dag .dash-snel-blok { margin-bottom: 1rem; }
.band-dag .dash-snel-uitleg { font-size: 0.74rem; margin-top: 0.4rem; }
.band-blackout { padding: 1rem 0; }
.world-cyclorama .site-nav a { font-size: 0.66rem; }
.world-cyclorama .header-inner { padding-top: 0.5rem; padding-bottom: 0.2rem; }

/* ═══ v0.21.0 — lichtplan-frame voor de detailpagina's ═══ */
.world-cyclorama .kruimel {
  font-family: var(--mono); font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: #7d92ff;
  border-bottom: 1px solid rgba(125, 146, 255, 0.18);
  padding-top: 0.5rem; padding-bottom: 0.5rem;
}
.world-cyclorama .kruimel a { color: #9aa8e8; }
.world-cyclorama .kruimel span { color: var(--rose-licht); }
.world-cyclorama .deel-letter {
  font-family: var(--mono); font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase; color: #7d92ff;
}
.world-cyclorama .deel > .wrap > h2,
.world-cyclorama main > .wrap > h2 {
  font-family: var(--stencil); font-weight: 400; text-transform: uppercase;
  font-size: clamp(1.3rem, 2.8vw, 1.9rem); letter-spacing: 0.02em; color: var(--dag);
}
.world-cyclorama .site-footer { border-top: 1px solid rgba(125, 146, 255, 0.18); }
.world-cyclorama .version-badge { font-family: var(--mono); background: transparent; border: 1px solid #7d92ff; color: #7d92ff; }

/* ═══ v0.22.0 — "Simpel gezegd"-blokken (16-jarigen-uitleg, overal) ═══ */
.g-simpel {
  border: 1px solid rgba(125, 146, 255, 0.35);
  background: rgba(10, 43, 255, 0.1);
  border-radius: 10px;
  padding: 0.6rem 0.9rem;
  margin: 0.5rem 0 0.7rem;
  font-size: 0.84rem;
  line-height: 1.6;
  color: #dfe5ff;
  max-width: 78ch;
}
.g-simpel strong { color: #d9d4ff; }
.world-cyclorama .hero h1 {
  font-family: var(--stencil); font-weight: 400; text-transform: uppercase;
  font-size: clamp(1.4rem, 3vw, 2rem); letter-spacing: 0.02em; color: var(--dag);
}

/* ═══ v0.23.2 — De Kaart als leesverhaal + rustige uitleg/feedback ═══ */
.strategie-blok {
  border: 1px solid rgba(125, 146, 255, 0.3);
  background: rgba(10, 43, 255, 0.08);
  border-radius: 10px;
  padding: 0.7rem 1rem;
  margin: 0.8rem 0 1.2rem;
  max-width: 72ch;
}
.strategie-blok p { font-size: 0.9rem; line-height: 1.65; color: #dfe5ff; }

.lagen-verhaal { margin: 1rem 0 1.4rem; max-width: 76ch; }
.laag-rij {
  border: 1px solid rgba(125, 146, 255, 0.28);
  background: rgba(255, 255, 255, 0.025);
  border-radius: 12px;
  padding: 0.9rem 1.15rem;
}
.laag-rij .laag-stap {
  font-family: var(--mono); font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; color: #9db0ff;
}
.laag-rij h3 {
  font-family: var(--stencil); font-weight: 400; text-transform: uppercase;
  font-size: 1.05rem; letter-spacing: 0.02em; color: var(--dag); margin: 0.25rem 0 0.4rem;
}
.laag-rij .laag-simpel { font-size: 0.88rem; line-height: 1.65; color: #cdd5f2; }
.laag-af {
  text-align: center; font-size: 1.3rem; color: #7a4df5;
  margin: 0.25rem 0; line-height: 1;
}

/* Use case-uitleg: gewone zichtbare tekst, geen klap-element, geen doos-in-doos */
div.blok-meer {
  border-top: 1px solid rgba(125, 146, 255, 0.22);
  margin-top: 0.7rem; padding-top: 0.6rem;
}
div.blok-meer p { font-size: 0.84rem; line-height: 1.6; color: #b9c2ea; max-width: 72ch; }
div.blok-meer strong { color: #d9d4ff; }

/* Feedback-rij: aanwezig maar stil */
.world-cyclorama .feedback-rij { opacity: 0.55; transition: opacity 0.15s; margin-top: 0.6rem; }
.world-cyclorama .feedback-rij:hover, .world-cyclorama .feedback-rij:focus-within { opacity: 1; }
.world-cyclorama .feedback-rij .feedback-label { font-size: 0.66rem; }
.world-cyclorama .feedback-rij button { font-size: 0.68rem; padding: 0.2rem 0.55rem; }

/* ═══ v0.24.0 — alle deel-pagina's: één leeskolom, rustige blokken ═══ */
.world-cyclorama .bewijsmuur,
.world-cyclorama .blokken,
.world-cyclorama .g-themas { display: block; max-width: 78ch; }
.world-cyclorama .bewijsmuur > *,
.world-cyclorama .blokken > .blok,
.world-cyclorama .g-themas > .g-thema {
  margin-bottom: 0.8rem;
  border: 1px solid rgba(125, 146, 255, 0.28);
  background: rgba(255, 255, 255, 0.025);
  border-radius: 12px;
  padding: 0.9rem 1.15rem;
}
.world-cyclorama .blok h3,
.world-cyclorama .g-thema h3,
.world-cyclorama .bewijsmuur h3 {
  font-family: var(--stencil); font-weight: 400; text-transform: uppercase;
  font-size: 1rem; letter-spacing: 0.02em; color: var(--dag);
}
.bm-label {
  font-family: var(--mono); font-size: 0.66rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: #9db0ff;
  margin-bottom: 0.25rem;
}
@media (min-width: 700px) {
  .world-cyclorama .bewijsmuur { grid-template-columns: 1fr; }
  .world-cyclorama .blokken { grid-template-columns: 1fr; }
}

/* ═══ v0.24.1 — nul uitklap-elementen: alles permanent zichtbaar ═══ */
.dash-context > h2 { font-size: 0.95rem; margin-bottom: 0.6rem; }
.dash-context .dash-context-hint { font-weight: 400; margin-left: 0.4rem; }
.kaart-waarom { margin-top: 0.35rem; }
.kaart-waarom p:not(.bm-label) { font-size: 0.8rem; line-height: 1.55; max-width: 62ch; }
.changelog-kop { font-size: 0.85rem; color: #9aa8e8; margin-bottom: 0.5rem; }
.band-blackout .changelog ul { list-style: none; padding: 0; }
.band-blackout .changelog li { font-size: 0.76rem; color: #8a93b8; line-height: 1.55; margin-bottom: 0.45rem; }

/* ═══ v0.24.2 — gekleurde menutabs: elk deel zijn kleur, actief = kleurvlak ═══ */
.world-cyclorama .site-nav a { border-radius: 7px; padding: 0.28rem 0.55rem; }
.world-cyclorama .site-nav a[href^="fundament"] { color: #3ecf8e; }
.world-cyclorama .site-nav a[href^="kaart"] { color: #7d92ff; }
.world-cyclorama .site-nav a[href^="strategie"] { color: #f5b83d; }
.world-cyclorama .site-nav a[href^="bouwblokken"] { color: #b48ef5; }
.world-cyclorama .site-nav a[href^="radar"] { color: #4ad0c8; }
.world-cyclorama .site-nav a[href^="niet-doen"] { color: #e0a1a1; }
.world-cyclorama .site-nav a[href^="archief"],
.world-cyclorama .site-nav a[href^="juridisch"] { color: #9db0ff; }
.world-cyclorama .site-nav a[href^="functionaliteit"] { color: #d9d4ff; }
.world-cyclorama .site-nav a[href^="dream"] { color: #c9a7ff; }
.world-cyclorama .site-nav a[href^="blauwdruk"] { color: #8d6bff; }
.world-cyclorama .site-nav a[href^="sleutels"] { color: #f0d060; }
.world-cyclorama .site-nav a[href^="index"] { color: #e8ecf4; }
.world-cyclorama .site-nav a.actief[href^="index"] { background: #e8ecf4; color: #0b0e13; }
.world-cyclorama .site-nav a.actief[href^="fundament"] { background: #3ecf8e; color: #04140c; }
.world-cyclorama .site-nav a.actief[href^="kaart"] { background: #7d92ff; color: #060a24; }
.world-cyclorama .site-nav a.actief[href^="strategie"] { background: #f5b83d; color: #1f1503; }
.world-cyclorama .site-nav a.actief[href^="bouwblokken"] { background: #b48ef5; color: #150a28; }
.world-cyclorama .site-nav a.actief[href^="radar"] { background: #4ad0c8; color: #04201d; }
.world-cyclorama .site-nav a.actief[href^="niet-doen"] { background: #e0a1a1; color: #240a0a; }
.world-cyclorama .site-nav a.actief[href^="archief"],
.world-cyclorama .site-nav a.actief[href^="juridisch"] { background: #0a2bff; color: #ffffff; }
.world-cyclorama .site-nav a.actief[href^="functionaliteit"] { background: #d9d4ff; color: #120a2e; }
.world-cyclorama .site-nav a.actief[href^="dream"] { background: #c9a7ff; color: #1c0a33; }
.world-cyclorama .site-nav a.actief[href^="blauwdruk"] { background: #8d6bff; color: #0d0524; }
.world-cyclorama .site-nav a.actief[href^="sleutels"] { background: #f0d060; color: #1f1801; }

/* ═══ Print (de Nele-export): wit papier, zwarte inkt, geen chrome ═══ */
/* A4, niet US Letter — dit gaat naar een Belgisch advocatenkantoor. */
@page { size: A4; margin: 14mm 12mm; }
@media print {
  .ccc-bar, .site-nav, .kruimel, .feedback-rij, .deel-nav,
  .site-footer, .header-actions, .je-bent-hier { display: none !important; }
  /* Scherm-instructies horen niet op papier: het tredefilter, de
     voortgangsteller en elke "klik hier"-aanwijzing verdwijnen in de PDF. */
  .laag-filter, .vb-overzicht:not(.nele-paneel), .alleen-scherm { display: none !important; }
  body, .band, .deel, main { background: #fff !important; color: #111 !important; }
  .world-cyclorama .hero h1, .deel h2, .g-thema h3 { color: #111 !important; -webkit-text-fill-color: #111; background: none !important; }
  .g-simpel, .sl-simpel { background: #f2f2f8 !important; border-color: #999 !important; color: #222 !important; }
  .g-simpel strong { color: #111 !important; }
  .g-thema, .prio { border: 1px solid #bbb !important; background: #fff !important; break-inside: avoid; }
  p, li { color: #222 !important; }
  .badge { border: 1px solid #666 !important; color: #333 !important; background: #fff !important; }
  a { color: #223 !important; text-decoration: none; }
}

/* Dossier-stempel: zichtbaar op scherm én op de PDF */
.dossier-stempel { font-family: var(--mono); font-size: 0.72rem; color: #9db0ff; margin: 0.2rem 0 0.6rem; }
.dossier-stempel strong { color: #d9d4ff; }
@media print { .dossier-stempel { display: block !important; color: #333 !important; } .dossier-stempel strong { color: #000 !important; } }

/* ═══ v0.24.4 — de pagina draagt de kleur van zijn tab (je zit in dié kamer) ═══ */
body.deelkleur-a { --deelkleur: #3ecf8e; } body.deelkleur-b { --deelkleur: #7d92ff; }
body.deelkleur-c { --deelkleur: #f5b83d; } body.deelkleur-d { --deelkleur: #b48ef5; }
body.deelkleur-e { --deelkleur: #4ad0c8; } body.deelkleur-f { --deelkleur: #e0a1a1; }
body.deelkleur-g { --deelkleur: #9db0ff; } body.deelkleur-fx { --deelkleur: #d9d4ff; }
body.deelkleur-dr { --deelkleur: #c9a7ff; } body.deelkleur-wzw { --deelkleur: #e8ecf4; }
body.deelkleur-bd { --deelkleur: #8d6bff; } body.deelkleur-sl { --deelkleur: #f0d060; }

[class*="deelkleur-"] .kruimel { border-bottom: 2px solid var(--deelkleur); }
[class*="deelkleur-"] .kruimel span { color: var(--deelkleur); }
[class*="deelkleur-"] .deel-letter,
[class*="deelkleur-"] .je-bent-hier strong { color: var(--deelkleur); }
[class*="deelkleur-"] .deel > .wrap > h2,
[class*="deelkleur-"] main > .wrap > h2,
[class*="deelkleur-"] .hero h1 { color: var(--deelkleur); }
[class*="deelkleur-"] .bewijsmuur > *,
[class*="deelkleur-"] .blokken > .blok,
[class*="deelkleur-"] .g-themas > .g-thema,
[class*="deelkleur-"] .laag-rij {
  border-color: color-mix(in srgb, var(--deelkleur) 45%, transparent);
}
[class*="deelkleur-"] .bm-label,
[class*="deelkleur-"] .laag-stap { color: var(--deelkleur); }
@media print { [class*="deelkleur-"] .hero h1 { color: #111 !important; } }

/* De ACHTERGROND van de pagina draagt de deelkleur — klik groen, zit in het groen. */
body[class*="deelkleur-"] {
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--deelkleur) 42%, #08080f) 0%,
      color-mix(in srgb, var(--deelkleur) 16%, #06060c) 34rem,
      #050506 72rem);
}
body[class*="deelkleur-"] .site-header,
body[class*="deelkleur-"] .site-nav { background: rgba(5, 5, 6, 0.35); }

/* Compact dashboard: waarom-opklapje klein en stil */
details.kaart-waarom summary { cursor: pointer; list-style: none; font-family: var(--mono); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--deelkleur, #9db0ff); }
details.kaart-waarom summary::-webkit-details-marker { display: none; }
details.kaart-waarom summary::before { content: "▸ "; }
details.kaart-waarom[open] summary::before { content: "▾ "; }

/* Voorstellen/feedback-kaarten op de witte dagband: wit met donkere inkt — leesbaar */
.band-dag .voorstel-kaart, .band-dag .feedback-overzicht-kaart {
  background: #fff !important; border: 1px solid #ddd5e7 !important; color: #2c2228 !important;
}
.band-dag .voorstel-kaart *, .band-dag .feedback-overzicht-kaart * { color: #2c2228; }
.band-dag .voorstel-kaart .badge, .band-dag .voorstel-kaart button { color: inherit; }
.band-dag #voorstellen-overzicht p, .band-dag #feedback-overzicht p { color: #2c2228; }

/* Eén "Meer"-verzamelblok i.p.v. vijf losse uitklappers */
.dash-sub { border-top: 1px solid #e7dff0; padding: 0.7rem 0; }
.dash-sub > h2 { font-size: 0.9rem; color: #0b0e13; margin-bottom: 0.4rem; }

/* KM aan boeken -> compacte leesregels in het Meer-blok */
.dash-sub p, .dash-sub li { font-size: 0.78rem; line-height: 1.5; }
.dash-sub .vandaag-lijst li { margin-bottom: 0.25rem; }
.band-dag .voorstel-kaart { padding: 0.5rem 0.75rem !important; margin-bottom: 0.45rem; }
.band-dag .voorstel-kaart p { font-size: 0.75rem !important; line-height: 1.45 !important;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.band-dag .voorstel-kaart p:hover { -webkit-line-clamp: unset; }
.band-dag .voorstel-kaart button { font-size: 0.68rem; padding: 0.18rem 0.5rem; }

/* ═══ v0.25.2 — bovenkant Start compact: gates éénregelig, status strak ═══ */
.gate-rij { display: flex; align-items: baseline; gap: 0.6rem; padding: 0.4rem 0.8rem; margin-bottom: 0.35rem; }
.gate-rij .gate-cue { flex: 0 0 auto; }
.gate-rij h3 { flex: 0 0 auto; font-size: 0.9rem; margin: 0; }
.gate-rij p { flex: 1 1 auto; margin: 0; font-size: 0.75rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gate-rij:hover p { white-space: normal; }
.nacht-gates { margin-top: 0.5rem; }
.console-rij { padding: 0.35rem 0 0.45rem; }
.console-toelichting { font-size: 0.74rem; margin-top: 0.05rem;
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.console-rij:hover .console-toelichting { -webkit-line-clamp: unset; }
.console-actie { margin-top: 0.25rem; padding: 0.22rem 0.7rem; font-size: 0.66rem; }
.console-waarde { font-size: clamp(1.05rem, 2vw, 1.35rem); }
.hero-cyc h1 { font-size: clamp(1.3rem, 2.6vw, 1.8rem); }
.dash-hero-badges { margin-bottom: 0.5rem; }

/* ═══ v0.27.0 — vraagblokken: uitklapbaar + werkstatus + voortgang ═══ */
details.vraagblok { border: 1px solid rgba(125, 146, 255, 0.28); background: rgba(255,255,255,0.025); border-radius: 12px; padding: 0; margin-bottom: 0.55rem; }
details.vraagblok > summary { display: flex; align-items: center; gap: 0.7rem; cursor: pointer; list-style: none; padding: 0.55rem 0.95rem; }
details.vraagblok > summary::-webkit-details-marker { display: none; }
details.vraagblok > summary::before { content: "▸"; color: var(--deelkleur, #9db0ff); font-size: 0.8rem; }
details.vraagblok[open] > summary::before { content: "▾"; }
details.vraagblok > summary h3 { display: inline; font-size: 0.92rem; margin: 0; flex: 1; }
details.vraagblok .vraagblok-body { padding: 0 0.95rem 0.8rem; }
.vb-chip { font-family: var(--mono); font-size: 0.62rem; font-weight: 800; letter-spacing: 0.1em; border: 1px solid; border-radius: 999px; padding: 0.12rem 0.5rem; display: none; white-space: nowrap; }
.vb-status-rij { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; padding: 0.4rem 0 0.6rem; border-bottom: 1px dashed rgba(125,146,255,0.25); margin-bottom: 0.6rem; }
.vb-status-label { font-family: var(--mono); font-size: 0.64rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #8a93b8; }
.vb-knop { font-size: 0.7rem; font-weight: 700; cursor: pointer; background: transparent; border: 1px solid rgba(125,146,255,0.4); border-radius: 999px; padding: 0.2rem 0.6rem; color: #cdd5f2; }
.vb-knop:hover { border-color: #fff; }
.vb-knop.vb-actief { background: var(--deelkleur, #7d92ff); color: #060a24; border-color: transparent; }
.vb-overzicht { border: 1px solid rgba(125,146,255,0.35); background: rgba(10,43,255,0.08); border-radius: 12px; padding: 0.7rem 1rem; margin: 0.8rem 0 0.4rem; }
.vb-tellers { font-size: 0.8rem; }
.vb-nele, .vb-zoek { font-size: 0.78rem; line-height: 1.6; margin-top: 0.45rem; }
.vb-nele a, .vb-zoek a { color: #d9d4ff; }
@media print {
  details.vraagblok { border: 1px solid #bbb !important; }
  .vb-status-rij, .vb-knop, .vb-overzicht button { display: none !important; }
  /* Het uitklap-driehoekje had één punt te weinig gewicht tegen de [open]-regel
     hierboven en bleef als "▾" in de PDF staan. (herstel wo9) */
  details.vraagblok > summary::before,
  details.vraagblok[open] > summary::before { content: "" !important; }
}

/* Kleurcodering dossier-labels */
.lbl-vnr { font-family: var(--mono); font-size: 0.72rem; font-weight: 800; color: #060a24; background: var(--deelkleur, #9db0ff); border-radius: 6px; padding: 0.08rem 0.45rem; margin-right: 0.35rem; }
.lbl-antwoord { color: #3ecf8e; font-weight: 800; }
.lbl-cond { color: #f5b83d; font-weight: 800; }
.lbl-adv { color: #ff5d5d; font-weight: 800; }
.lbl-hoog { color: #3ecf8e; font-weight: 700; }
.lbl-middel { color: #f5b83d; font-weight: 700; }
.lbl-laag { color: #ff5d5d; font-weight: 700; }
.lbl-nele { color: #060a24; background: #9db0ff; font-weight: 800; font-size: 0.72rem; letter-spacing: 0.06em; border-radius: 6px; padding: 0.08rem 0.45rem; }
.lbl-scharnier { color: #ffd76a; font-weight: 900; }
@media print {
  .lbl-antwoord { color: #1a7a4d !important; } .lbl-cond, .lbl-middel { color: #8a6d0a !important; }
  .lbl-adv, .lbl-laag { color: #b3261e !important; } .lbl-hoog { color: #1a7a4d !important; }
  .lbl-vnr, .lbl-nele { background: #ddd !important; color: #111 !important; }
}

/* Gekleurde titelbalken per vragenblok (cue-lijst-stijl) */
details.vraagblok > summary { border-radius: 11px 11px 0 0; }
details.vraagblok:not([open]) > summary { border-radius: 11px; }
summary.vbk-groen  { background: #3ecf8e; } summary.vbk-groen h3, summary.vbk-groen::before { color: #04140c !important; }
summary.vbk-kobalt { background: #0a2bff; } summary.vbk-kobalt h3, summary.vbk-kobalt::before { color: #fff !important; }
summary.vbk-violet { background: #8d6bff; } summary.vbk-violet h3, summary.vbk-violet::before { color: #0d0524 !important; }
summary.vbk-amber  { background: #f5b83d; } summary.vbk-amber h3, summary.vbk-amber::before { color: #1f1503 !important; }
summary.vbk-geel   { background: #f0d060; } summary.vbk-geel h3, summary.vbk-geel::before { color: #1f1801 !important; }
summary.vbk-rood   { background: #ff5d5d; } summary.vbk-rood h3, summary.vbk-rood::before { color: #240404 !important; }
summary.vbk-grijs  { background: #e8ecf4; } summary.vbk-grijs h3, summary.vbk-grijs::before { color: #0b0e13 !important; }
summary[class*="vbk-"] .badge { border-color: currentColor; background: rgba(255,255,255,0.25); }
summary.vbk-kobalt .badge { color: #fff; }
@media print { summary[class*="vbk-"] { background: #eee !important; } summary[class*="vbk-"] h3 { color: #111 !important; } }

/* ═══ v0.27.1 — lucht in het dossier: zachte kaarten, leesbreedte, ademruimte ═══ */
details.vraagblok { margin-bottom: 0.75rem; }
details.vraagblok .vraagblok-body {
  background: rgba(125, 146, 255, 0.06);
  padding: 0.9rem 1.1rem 1rem;
  border-radius: 0 0 11px 11px;
}
.vo-item {
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(125, 146, 255, 0.18);
  border-radius: 10px;
  padding: 0.65rem 0.9rem 0.5rem;
  margin-bottom: 0.55rem;
}
.vo-item p { max-width: 82ch; line-height: 1.7; }
.vraagblok-body > p { max-width: 82ch; line-height: 1.7; margin-bottom: 0.6rem; }
.vraagblok-body .g-vragen { max-width: 80ch; }
.vraagblok-body .g-vragen li { margin-bottom: 0.4rem; line-height: 1.65; }
.vo-item .feedback-rij { border-top: 1px dashed rgba(125,146,255,0.2); margin-top: 0.45rem; padding-top: 0.35rem; }
@media print { .vo-item, details.vraagblok .vraagblok-body { background: #fff !important; } }

/* ═══ v0.27.2 — blokken in LICHTE varianten van de hoofdkleur (donkere inkt) ═══ */
details.vraagblok .vraagblok-body {
  background: color-mix(in srgb, var(--deelkleur, #9db0ff) 20%, #ffffff);
  color: #1c1836;
}
details.vraagblok .vraagblok-body p,
details.vraagblok .vraagblok-body li,
details.vraagblok .vraagblok-body .g-status { color: #262148; }
.vo-item {
  background: color-mix(in srgb, var(--deelkleur, #9db0ff) 8%, #ffffff);
  border-color: color-mix(in srgb, var(--deelkleur, #9db0ff) 40%, #ffffff);
}
.vo-item p { color: #262148; }
.vraagblok-body .g-simpel {
  background: color-mix(in srgb, var(--deelkleur, #9db0ff) 32%, #ffffff);
  border-color: color-mix(in srgb, var(--deelkleur, #9db0ff) 55%, #ffffff);
  color: #1c1836;
}
.vraagblok-body .g-simpel strong { color: #0a1c8f; }
.vraagblok-body .lbl-hoog, .vraagblok-body .lbl-antwoord { color: #147a4a; }
.vraagblok-body .lbl-middel, .vraagblok-body .lbl-cond { color: #8a5f06; }
.vraagblok-body .lbl-laag, .vraagblok-body .lbl-adv { color: #b3261e; }
.vraagblok-body .lbl-scharnier { color: #8a5f06; }
.vraagblok-body .feedback-rij, .vraagblok-body .feedback-label { color: #5a5478; }
.vraagblok-body .feedback-rij button { color: #262148; border-color: #b9b2d8; background: #fff; }
.vraagblok-body .vb-status-label { color: #5a5478; }
.vraagblok-body .vb-knop { color: #262148; border-color: #b9b2d8; background: #fff; }
.vraagblok-body .vb-knop.vb-actief { background: var(--deelkleur, #7d92ff); color: #060a24; }
.vraagblok-body a { color: #0a1c8f; }
.vraagblok-body .badge { border-color: #5a5478; color: #3a3560; background: transparent; }

/* ═══ v0.27.3 — luchtigheid overal: alle inhoudsblokken licht met donkere inkt ═══ */
[class*="deelkleur-"] .bewijsmuur > *,
[class*="deelkleur-"] .blokken > .blok,
[class*="deelkleur-"] .laag-rij,
[class*="deelkleur-"] .kluis,
[class*="deelkleur-"] .zetten .zet,
[class*="deelkleur-"] .strategie-blok,
[class*="deelkleur-"] .simpel-lead,
[class*="deelkleur-"] main .g-simpel,
[class*="deelkleur-"] .sl-sectie .sl-simpel,
[class*="deelkleur-"] .sl-sectie .sl-groen,
[class*="deelkleur-"] .dash-sub,
[class*="deelkleur-"] .prio {
  background: color-mix(in srgb, var(--deelkleur, #9db0ff) 16%, #ffffff);
  border-color: color-mix(in srgb, var(--deelkleur, #9db0ff) 45%, #ffffff);
  color: #262148;
}
[class*="deelkleur-"] .bewijsmuur > * *:not(.badge):not(.mono):not(a):not(.lbl-vnr),
[class*="deelkleur-"] .blokken > .blok *:not(.badge):not(.mono):not(a),
[class*="deelkleur-"] .laag-rij *:not(.mono):not(a),
[class*="deelkleur-"] .kluis *:not(.mono):not(a),
[class*="deelkleur-"] .zetten .zet *:not(.badge):not(.mono):not(a),
[class*="deelkleur-"] .strategie-blok *,
[class*="deelkleur-"] .simpel-lead *,
[class*="deelkleur-"] main .g-simpel,
[class*="deelkleur-"] .prio * { color: #262148; }
[class*="deelkleur-"] main .g-simpel strong,
[class*="deelkleur-"] .simpel-lead strong,
[class*="deelkleur-"] .kluis-termen strong { color: #0a1c8f; }
[class*="deelkleur-"] .blok h3, [class*="deelkleur-"] .laag-rij h3,
[class*="deelkleur-"] .kluis h3, [class*="deelkleur-"] .zet h3,
[class*="deelkleur-"] .bewijsmuur h3 { color: #14102e; }
[class*="deelkleur-"] .blok .badge, [class*="deelkleur-"] .zet .badge,
[class*="deelkleur-"] .bewijsmuur .badge { border-color: #5a5478; color: #3a3560; background: #fff; }
/* Codevakjes op de lichte deelkleur-pagina's: altijd donkere inkt op een licht
   vlak. Stond eerder alleen in .blok-meer/.cli-antwoord/.bewijs-kaart, waardoor
   elk ander .mono-vakje de donkere --bg-soft hield en onleesbaar werd. */
body[class*="deelkleur-"] .mono {
  color: #3d1a8f !important;
  background: #efeaff !important;
  border: 1px solid #c9bdf0 !important;
  border-radius: 4px;
  padding: 0.05rem 0.3rem;
}
[class*="deelkleur-"] .blok a, [class*="deelkleur-"] .bewijsmuur a,
[class*="deelkleur-"] .zet a, [class*="deelkleur-"] .kluis a { color: #0a1c8f; }
[class*="deelkleur-"] .blok-noot, [class*="deelkleur-"] .laag-simpel { color: #3d3766 !important; }
[class*="deelkleur-"] .feedback-rij, [class*="deelkleur-"] .feedback-label { color: #5a5478; }
[class*="deelkleur-"] .feedback-rij button { color: #262148; border-color: #b9b2d8; background: #fff; }
[class*="deelkleur-"] div.blok-meer { border-top-color: color-mix(in srgb, var(--deelkleur, #9db0ff) 45%, #fff); }
[class*="deelkleur-"] div.blok-meer p { color: #3d3766; }
[class*="deelkleur-"] div.blok-meer strong { color: #14102e; }
[class*="deelkleur-"] .bm-label { color: #6a1fd0; }
/* alarm blijft rood, maar licht */
[class*="deelkleur-"] .alarm-uitleg {
  background: color-mix(in srgb, #ff5d5d 14%, #ffffff);
  border-color: #d98686; color: #5c1512;
}
[class*="deelkleur-"] .alarm-uitleg .alarm-kop { color: #b3261e; }
[class*="deelkleur-"] .alarm-uitleg li, [class*="deelkleur-"] .alarm-uitleg p { color: #5c1512; }
/* schema-panelen bewust donker (lichtgraphics) */
.bd-schema, .sl-schema { background: #0d1220 !important; }

/* Kleine tint-variaties per blok/vraag (3-staps ritme op de hoofdkleur) */
.vo-item:nth-of-type(3n+1) { background: color-mix(in srgb, var(--deelkleur, #9db0ff) 7%, #fff); }
.vo-item:nth-of-type(3n+2) { background: color-mix(in srgb, var(--deelkleur, #9db0ff) 14%, #fff); }
.vo-item:nth-of-type(3n)   { background: color-mix(in srgb, var(--deelkleur, #9db0ff) 21%, #fff); }
details.vraagblok:nth-of-type(even) .vraagblok-body { background: color-mix(in srgb, var(--deelkleur, #9db0ff) 14%, #fff); }
details.vraagblok:nth-of-type(odd) .vraagblok-body  { background: color-mix(in srgb, var(--deelkleur, #9db0ff) 24%, #fff); }
[class*="deelkleur-"] .blokken > .blok:nth-of-type(3n+1),
[class*="deelkleur-"] .bewijsmuur > *:nth-of-type(3n+1),
[class*="deelkleur-"] .zetten .zet:nth-of-type(3n+1) { background: color-mix(in srgb, var(--deelkleur, #9db0ff) 9%, #fff); }
[class*="deelkleur-"] .blokken > .blok:nth-of-type(3n+2),
[class*="deelkleur-"] .bewijsmuur > *:nth-of-type(3n+2),
[class*="deelkleur-"] .zetten .zet:nth-of-type(3n+2) { background: color-mix(in srgb, var(--deelkleur, #9db0ff) 17%, #fff); }
[class*="deelkleur-"] .blokken > .blok:nth-of-type(3n),
[class*="deelkleur-"] .bewijsmuur > *:nth-of-type(3n),
[class*="deelkleur-"] .zetten .zet:nth-of-type(3n) { background: color-mix(in srgb, var(--deelkleur, #9db0ff) 25%, #fff); }
.vraagblok-body .g-vragen li:nth-child(even) { background: color-mix(in srgb, var(--deelkleur, #9db0ff) 10%, #fff); border-radius: 6px; padding: 0.25rem 0.45rem; }

/* Nooit tegen de rand: vraagblokken en overzicht hard gecentreerd */
details.vraagblok, .vb-overzicht, #vraagblok-overzicht {
  max-width: var(--wrap-max, 68rem);
  margin-left: auto !important;
  margin-right: auto !important;
}
#vraagblok-overzicht, .deel > .wrap, main > .wrap { padding-left: 1.25rem; padding-right: 1.25rem; }
@media (min-width: 1400px) { details.vraagblok, .vb-overzicht { max-width: 74rem; } }

/* Vragenkaarten ZELF ook hard gecentreerd — nooit tegen de rand */
.vo-item {
  max-width: var(--wrap-max, 68rem);
  margin-left: auto !important;
  margin-right: auto !important;
}
@media (min-width: 1400px) { .vo-item { max-width: 74rem; } }

/* ═══ v0.28.0 — nieuwe vragen als simpele gekleurde balken met OK-vink ═══ */
details.vo-row { background: transparent; border: 1px solid rgba(125,146,255,0.25); }
details.vo-row > summary { gap: 0.55rem; }
details.vo-row > summary .vo-kort { flex: 1; font-weight: 700; font-size: 0.84rem; }
summary.vok-groen { background: #3ecf8e; } summary.vok-groen .vo-kort, summary.vok-groen::before { color: #04140c !important; }
summary.vok-amber { background: #f5b83d; } summary.vok-amber .vo-kort, summary.vok-amber::before { color: #1f1503 !important; }
summary.vok-rood  { background: #ff5d5d; } summary.vok-rood .vo-kort, summary.vok-rood::before { color: #240404 !important; }
.vo-ok { display: inline-flex; align-items: center; gap: 0.3rem; font-family: var(--mono); font-size: 0.7rem; font-weight: 800; background: rgba(255,255,255,0.85); color: #0b0e13; border-radius: 999px; padding: 0.15rem 0.6rem; cursor: pointer; }
.vo-ok input { accent-color: #147a4a; }
details.vo-afgevinkt > summary { opacity: 0.55; }
details.vo-afgevinkt > summary .vo-kort { text-decoration: line-through; }
details.vo-row .vo-item { border: 0; background: transparent !important; margin: 0; max-width: none; }
@media print { .vo-ok { display: none !important; } }

/* Vraag & antwoord-log */
.vraaglog-item { border: 1px solid rgba(125,146,255,0.3); border-radius: 10px; padding: 0.7rem 0.95rem; background: color-mix(in srgb, #9db0ff 10%, #fff); color: #262148; margin-bottom: 0.6rem; }
.vraaglog-item p { color: #262148; max-width: 82ch; line-height: 1.65; }
.vraaglog-item .bm-label { color: #6a1fd0; }

/* → NELE SOMERS-markering: dít moet naar de advocaat, de rest is afvinkwerk */
.nele-chip {
  font-family: var(--mono); font-size: 0.64rem; font-weight: 800; letter-spacing: 0.08em;
  background: #0a2bff; color: #fff; border-radius: 999px; padding: 0.18rem 0.6rem;
  white-space: nowrap; box-shadow: 0 0 0 2px rgba(255,255,255,0.7);
}
@media print { .nele-chip { background: #ddd !important; color: #111 !important; box-shadow: none; } }

/* Nele-agenda + filter */
.nele-paneel { border-color: #0a2bff; background: color-mix(in srgb, #0a2bff 12%, #fff); color: #14102e; }
.nele-paneel .cue-label { color: #0a1c8f; }
.nele-lijst { padding-left: 1.3rem; margin: 0.4rem 0 0.6rem; }
.nele-lijst li { margin-bottom: 0.3rem; font-size: 0.84rem; }
.nele-lijst a { color: #0a1c8f; font-weight: 700; }
/* De agendarijen zijn klonen: ze dragen zelf geen .heeft-nele en werden daardoor
   door dezelfde regel weggefilterd — de gespreks-PDF kwam eruit zónder de agenda
   die er de hele reden voor is. Ze staan nu expliciet uitgezonderd. (herstel wo9) */
body.nele-filter details.vraagblok:not(.heeft-nele):not(.nele-agenda-rij) { display: none; }
body.nele-filter .vb-overzicht:not(.nele-paneel) { display: none; }

/* Mooie eindlijsten: afvink-chips + genummerde agenda */
.lijst-paneel { border-radius: 12px; padding: 0.85rem 1.1rem; margin: 0.7rem auto; max-width: var(--wrap-max, 68rem); }
.lijst-zelf { background: color-mix(in srgb, #3ecf8e 18%, #fff); border: 1px solid #3ecf8e; color: #04140c; }
.lijst-nele { background: color-mix(in srgb, #0a2bff 12%, #fff); border: 1px solid #0a2bff; color: #14102e; }
.lijst-paneel h3 { font-size: 0.95rem; margin-bottom: 0.5rem; color: inherit; }
.lijst-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.lijst-chips a { font-family: var(--mono); font-weight: 800; font-size: 0.8rem; background: #fff; color: #04140c; border: 1px solid #1a7a4d; border-radius: 8px; padding: 0.22rem 0.6rem; text-decoration: none; }
.lijst-chips a:hover { background: #1a7a4d; color: #fff; }
.lijst-agenda { padding-left: 1.3rem; }
.lijst-agenda li { margin-bottom: 0.35rem; font-size: 0.86rem; line-height: 1.6; }
.lijst-agenda a { color: #0a1c8f; font-weight: 800; }
.lijst-noot { font-size: 0.74rem; opacity: 0.75; margin-top: 0.45rem; }
@media (min-width: 1400px) { .lijst-paneel { max-width: 74rem; } }

/* Gespreks-PDF-modus (?nele=1): alleen agenda, uitleg en chip-vragen */
body.nele-print .g-themas, body.nele-print #top-10 { display: none; }
body.nele-print details.vo-row:not(.heeft-nele) { display: none; }
body.nele-print .lijst-zelf, body.nele-print #wijzigingen-lijst { display: none; }

/* ═══ wo11 · A2 — van tweede exemplaar naar échte gesprekskaart ═══════════════
   Gemeten vóór deze ingreep: 255 van de 255 zinnen in R4M-NELE-GESPREK.pdf
   kwamen letterlijk óók in het volledige dossier voor. Nul eigen inhoud, achttien
   pagina's papier. Wat een kaart wél moet dragen, en verder niets:
     · R4M in 60 seconden (#voor-de-advocaat) — de brief voor aan tafel;
     · de agenda, maar dan per punt teruggebracht tot nummer + de vraag die je
       stelt (.kaart-vraag) in plaats van het volledige standpunt;
     · de acht kernpunten mét de uitspreek-test (.lijst-nele).
   Wat eruit gaat is niet weg — het staat integraal in R4M-JURIDISCH-DOSSIER.pdf,
   dat naast de kaart blijft bestaan. */
body.nele-print #de-vier-lagen, body.nele-print #legenda { display: none; }
body.nele-print .nele-agenda-noot { display: none; }
body.nele-print .hero .pagina-kop,
body.nele-print .hero .je-bent-hier,
body.nele-print .hero .hero-note,
body.nele-print .hero .g-simpel:not(.kaart-intro) { display: none; }
.kaart-vraag { display: none; }
body.nele-print .nele-agenda-rij.heeft-kaartvraag > summary { display: none !important; }
body.nele-print .nele-agenda-rij.heeft-kaartvraag .vraagblok-body > *:not(.kaart-vraag) { display: none !important; }
body.nele-print .kaart-vraag {
  display: block !important; margin: 0; line-height: 1.65;
  break-inside: avoid; page-break-inside: avoid;
}

/* Agenda-rijen: openen ter plekke, kompakt */
.nele-agenda details.nele-agenda-rij { max-width: none; margin-bottom: 0.4rem; }
.nele-agenda .vraagblok-body { padding-top: 0.6rem; }
.nele-agenda .vraagblok-body .vo-item { max-width: none; }
summary.vbk-kobalt .vo-kort { color: #fff !important; }
/* Op papier moet de agenda de vólledige vraag dragen: de balktitel is afgekapt
   en zonder body blijft er in de PDF een halve zin over. De afgekapte balktekst
   zelf vervalt dan — het vraagnummer is de kop, de volle vraag staat eronder.
   (herstel wo9) */
@media print {
  .nele-agenda details > .vraagblok-body { display: block !important; }
  .nele-agenda-rij > summary .vo-kort { display: none !important; }
  /* wo11 · A2 — verfijning op de regel hierboven. Die verborg álle balktekst in de
     agenda en liet daardoor twee dingen achter: bij een vraagrij een kaal nummer,
     bij een blokrij een lege balk. Nu per soort:
       agenda-vraag → de hele kop weg; de body eronder begint zelf met het nummer
                      en draagt de volledige tekst. Niets gaat verloren, de
                      herhaling verdwijnt.
       agenda-blok  → de kop is de volledige, niet-afgekapte h3-titel: die blijft. */
  .nele-agenda-rij.agenda-vraag > summary { display: none !important; }
  .nele-agenda-rij.agenda-blok > summary .vo-kort { display: inline !important; }
}

/* ═══ wo11 · A2 + B3.3 — de PDF's herhaalden zichzelf ═══════════════════════
   Drie ingrepen, elk met een reden. De Nele-agenda zelf blijft ONGEMOEID: dat
   is de managementsamenvatting vooraan die wo9 juist leesbaar maakte.

   1 · de agendakop per soort — zie het blok hierboven (.agenda-vraag/.agenda-blok).
   2 · details.vo-row > summary — de gegenereerde uitklapper-kop in het hoofd-
       dossier. Hij toont een op 72 tekens afgekapte preview van tekst die er
       direct ónder volledig staat; op papier is dat pure herhaling die midden
       in een zin afbreekt. De kop vervalt, de volle tekst blijft.
   3 · li.vraag-balk is een flexbox; op A4-breedte viel het nummerchipje als los
       flex-item op een eigen regel — vraagnummer boven, vraag eronder. In print
       wordt de balk een gewone blokregel met het nummer inline. Er verdwijnt
       niets: hetzelfde nummer, dezelfde vraag, één regel in plaats van twee. */
@media print {
  details.vo-row > summary { display: none !important; }
  .g-vragen li.vraag-balk { display: block !important; }
  .g-vragen li.vraag-balk .lbl-vnr { display: inline !important; margin-right: 0.4rem; }
}

/* Kruisverwijzing-links in vraagteksten */
a.v-link { font-weight: 800; color: #0a1c8f; text-decoration: underline; text-underline-offset: 2px; }
.vraagblok-body a.v-link:hover { background: #0a2bff; color: #fff; border-radius: 4px; }

/* ═══ v0.30.0 — elke losse vraag als uniforme balk met OK + eigen CLI-veld ═══ */
.g-vragen li.vraag-balk {
  list-style: none;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem;
  background: #fff; border: 1px solid color-mix(in srgb, var(--deelkleur, #9db0ff) 45%, #fff);
  border-radius: 9px; padding: 0.45rem 0.7rem !important; margin-bottom: 0.45rem !important;
}
.g-vragen li.vraag-balk .lbl-vnr { flex: 0 0 auto; }
.g-vragen li.vraag-balk .vo-ok { margin-left: auto; border: 1px solid #b9b2d8; }
.g-vragen li.vraag-balk .feedback-rij { flex-basis: 100%; }
.g-vragen li.vraag-balk.vo-afgevinkt { opacity: 0.55; }
.g-vragen li.vraag-balk.vo-afgevinkt { text-decoration: line-through; }
.g-vragen { padding-left: 0 !important; }

/* Losse vragen in dezelfde kleurtaal als de bovenste balken */
.g-vragen li.vraag-balk.vb-groen { background: #3ecf8e; border-color: #2aa970; color: #04140c; }
.g-vragen li.vraag-balk.vb-amber { background: #f5b83d; border-color: #d09a1e; color: #1f1503; }
.g-vragen li.vraag-balk.vb-nele  { background: #0a2bff; border-color: #0a2bff; color: #fff; }
.g-vragen li.vraag-balk.vb-grijs { background: #e8ecf4; border-color: #c5cbdd; color: #0b0e13; }
.g-vragen li.vraag-balk.vb-nele .badge { color: #fff; border-color: #fff; background: transparent; }
.g-vragen li.vraag-balk .feedback-rij { color: inherit; }
.g-vragen li.vraag-balk.vb-nele .feedback-label { color: #cfd8ff; }
@media print { .g-vragen li.vraag-balk { background: #fff !important; color: #111 !important; } }

/* PREP-vink: eigen voorbereiding vóór het gesprek */
.vo-prep { background: #ffe9b3; }
.vo-prep input { accent-color: #8a5f06; }
.in-prep > summary .vo-kort::after, li.in-prep .lbl-vnr::after { content: " 🔍"; }
.vb-preplijst a { color: #8a5f06; font-weight: 800; }
@media print { .vo-prep { display: none !important; } }

/* ═══ v0.30.3 — zelfde kaart-frame als de thema's, overal ═══ */
details.vraagblok { padding: 0.4rem; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(125, 146, 255, 0.35); border-radius: 14px; }
details.vraagblok > summary { border-radius: 10px !important; }
details.vraagblok .vraagblok-body { border-radius: 10px; margin-top: 0.4rem; }
details.vo-row { max-width: var(--wrap-max, 68rem); margin-left: auto !important; margin-right: auto !important; }
@media (min-width: 1400px) { details.vo-row { max-width: 74rem; } }
.vo-vraag { background: #fff; }
@media print { .vo-vraag { display: none !important; } }

/* ═══ v0.30.4 — ÉÉN uniforme balkbreedte voor alles (zoals de thema's) ═══ */
details.vraagblok, details.vo-row, .vb-overzicht, #vraagblok-overzicht,
.nele-agenda, .lijst-paneel, .vo-item, .g-simpel, #wie-doet-wat {
  max-width: 65.5rem !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
details.vo-row > summary { padding: 0.4rem 0.8rem; }
details.vo-row > summary .vo-kort { font-size: 0.8rem; }

/* ═══ v0.30.5 — bewerkbaar op gsm: grote tikdoelen, nette omloop ═══ */
@media (max-width: 700px) {
  details.vo-row > summary, .g-vragen li.vraag-balk { flex-wrap: wrap; row-gap: 0.35rem; }
  details.vo-row > summary .vo-kort { flex-basis: calc(100% - 4rem); }
  .vo-ok, .vo-prep, .vo-vraag { padding: 0.35rem 0.8rem; font-size: 0.78rem; }
  .vo-ok input { width: 1.1rem; height: 1.1rem; }
  .nele-chip { order: 5; }
  .feedback-rij button { padding: 0.45rem 0.8rem; font-size: 0.8rem; }
  .feedback-vraag { font-size: 16px; } /* voorkomt iOS-zoom bij typen */
  .vb-status-rij .vb-knop { padding: 0.4rem 0.8rem; }
  details.vraagblok > summary h3 { font-size: 0.84rem; }
}

/* ═══ v0.31.0 — zoekfunctie per pagina ═══ */
.zoek-houder { display: flex; align-items: center; gap: 0.7rem; margin: 0.7rem auto 0.3rem; max-width: 65.5rem !important; }
#max-zoek {
  flex: 1; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(125, 146, 255, 0.4);
  color: var(--text, #e8ecf4); border-radius: 999px; padding: 0.55rem 1.1rem; font-size: 16px; outline: none;
}
#max-zoek:focus { border-color: var(--deelkleur, #7d92ff); box-shadow: 0 0 0 3px color-mix(in srgb, var(--deelkleur, #7d92ff) 25%, transparent); }
.zoek-teller { font-family: var(--mono); font-size: 0.72rem; font-weight: 700; color: var(--deelkleur, #9db0ff); white-space: nowrap; }
.zoek-weg { display: none !important; }
@media print { .zoek-houder { display: none !important; } }

/* ═══ v0.31.1 — de voorkant-look op ALLE pagina's: rijke kleurreis, geen zwarte vlakken ═══ */
body[class*="deelkleur-"] {
  background-color: color-mix(in srgb, var(--deelkleur, #7d92ff) 40%, #0c0a1a);
  background-image: linear-gradient(180deg,
    #050506 0rem,
    color-mix(in srgb, var(--deelkleur, #7d92ff) 30%, #08070f) 14rem,
    color-mix(in srgb, var(--deelkleur, #7d92ff) 62%, #14102e) 42rem,
    color-mix(in srgb, var(--deelkleur, #7d92ff) 78%, #241c48) 85rem,
    color-mix(in srgb, var(--deelkleur, #7d92ff) 40%, #0c0a1a) 130rem);
  background-repeat: no-repeat;
  background-size: 100% 130rem;
}
/* losse tekst op de gekleurde ondergrond: altijd licht en leesbaar */
body[class*="deelkleur-"] main { color: #f0f2ff; }
body[class*="deelkleur-"] main > .wrap > p,
body[class*="deelkleur-"] .deel > .wrap > p,
body[class*="deelkleur-"] .deel-regel,
body[class*="deelkleur-"] .hero-note,
body[class*="deelkleur-"] .g-status { color: #eef0ff; }
body[class*="deelkleur-"] .cue-label { color: #ffffff; opacity: 0.85; }
body[class*="deelkleur-"] .je-bent-hier { color: #dfe4ff; }
body[class*="deelkleur-"] .je-bent-hier strong { color: #ffffff; }
body[class*="deelkleur-"] .deel > .wrap > h2,
body[class*="deelkleur-"] main > .wrap > h2,
body[class*="deelkleur-"] .hero h1 { color: #ffffff; }
body[class*="deelkleur-"] .kruimel { color: #dfe4ff; }
body[class*="deelkleur-"] .kruimel a { color: #ffffff; }
body[class*="deelkleur-"] .site-footer { background: #0b0916; }

/* ═══ v0.31.2 — LEESBAARHEID: alle oude donkere sub-panelen worden licht ═══ */
body[class*="deelkleur-"] :is(.bewijs-kaart, .blok-meer, details.blok-meer, .strategie-laag,
  .matrix, .matrix-blok, .matrix-scroll, .radar-blok, .radar-kop, .radar-werkwijze,
  .wzw-kaart, .wzw-lijst, .wzw-noot, .wzw-vast, .voorstel-kaart, .voorstellen-lijst,
  .voorstellen-blok, .feedback-blok, .laatst-gewijzigd, .prio, .eu-kaart, .eu-land,
  .land, .cli-antwoord, .stroom, .flow, .laag, .overzicht-kaart, .bewijsmuur table,
  .g-vragen, .kluis, .fijn, .blok-voorbeeld) {
  background: rgba(255, 255, 255, 0.88) !important;
  color: #262148 !important;
  border-color: rgba(38, 33, 72, 0.25) !important;
}
body[class*="deelkleur-"] :is(.bewijs-kaart, .blok-meer, details.blok-meer, .strategie-laag,
  .matrix, .matrix-blok, .radar-blok, .radar-werkwijze, .wzw-kaart, .voorstel-kaart,
  .eu-kaart, .eu-land, .land, .cli-antwoord, .stroom, .flow, .laag, .overzicht-kaart,
  .kluis, .blok-voorbeeld) :is(p, li, span, div, summary, h3, h4, strong, em, td, th, b, i) {
  color: #262148 !important;
}
body[class*="deelkleur-"] :is(.blok-meer, .strategie-laag) summary { color: #6a1fd0 !important; font-weight: 800; }
body[class*="deelkleur-"] .eu-land, body[class*="deelkleur-"] .land {
  background: #fff !important; border: 1px solid #b9b2d8 !important; color: #262148 !important;
}
body[class*="deelkleur-"] :is(.matrix th, .matrix td, table th, table td) {
  border-color: #c5bede !important; color: #262148 !important; background: #fff !important;
}
body[class*="deelkleur-"] :is(.blok-meer, .cli-antwoord, .bewijs-kaart) .mono { color: #6a1fd0 !important; background: #efeaff; border-radius: 4px; padding: 0 0.25rem; }
body[class*="deelkleur-"] :is(.blok-meer, .bewijs-kaart, .wzw-kaart) a { color: #0a1c8f !important; }
body[class*="deelkleur-"] .badge { background: #fff !important; color: #3a3560 !important; border-color: #5a5478 !important; }
body[class*="deelkleur-"] .badge-prio-a { color: #0a1c8f !important; border-color: #0a1c8f !important; }

/* intro-boxen winnen altijd: donkere inkt op lichte g-simpel, waar hij ook staat */
body[class*="deelkleur-"] p.g-simpel, body[class*="deelkleur-"] .g-simpel {
  color: #1c1836 !important;
}
body[class*="deelkleur-"] .g-simpel strong { color: #0a1c8f !important; }

/* Niet-doen: regels als witte kaarten met donkere inkt */
body[class*="deelkleur-"] .niet-doen li {
  background: rgba(255, 255, 255, 0.9) !important;
  border: 1px solid rgba(38, 33, 72, 0.25) !important;
  border-radius: 10px;
  color: #262148 !important;
}
body[class*="deelkleur-"] .niet-doen li * { color: #262148; }
body[class*="deelkleur-"] .niet-doen .feedback-label { color: #5a5478 !important; }

/* ═══ v0.32.0 — Use cases: eigen kleur + brainstorm ═══ */
body.deelkleur-uc { --deelkleur: #f08c3c; }
.world-cyclorama .site-nav a[href^="use-cases"] { color: #f0a76a; }
.world-cyclorama .site-nav a.actief[href^="use-cases"] { background: #f08c3c; color: #241102; }
.brainstorm-blok textarea {
  width: 100%; border-radius: 10px; border: 1px solid #b9b2d8; padding: 0.7rem 0.9rem;
  font-size: 16px; font-family: inherit; margin: 0.5rem 0; background: #fff; color: #262148;
}
.bs-idee { background: #fff; border: 1px solid #e0b98c; border-radius: 10px; padding: 0.6rem 0.85rem; margin-top: 0.5rem; }
.bs-idee p { color: #262148; max-width: 82ch; }
.bs-weg { margin-top: 0.3rem; }
body.deelkleur-x4 { --deelkleur: #4a9fe0; }
.world-cyclorama .site-nav a[href^="x401"] { color: #7fbcec; }
.world-cyclorama .site-nav a.actief[href^="x401"] { background: #4a9fe0; color: #04182a; }
body.deelkleur-iot { --deelkleur: #56c46a; }
.world-cyclorama .site-nav a[href^="iot"] { color: #8adf9a; }
.world-cyclorama .site-nav a.actief[href^="iot"] { background: #56c46a; color: #06210c; }

/* ═══ v0.34.0 — Use cases-hub met sub-tabs ═══ */
body.deelkleur-x2 { --deelkleur: #e0784a; }
.sub-nav { display: flex; flex-wrap: wrap; gap: 0.45rem; padding: 0.6rem 1.25rem; max-width: 65.5rem !important; margin: 0 auto; }
.sub-nav a {
  font-family: var(--mono); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em;
  text-transform: uppercase; text-decoration: none; color: #ffffffcc;
  border: 1px solid rgba(255,255,255,0.35); border-radius: 999px; padding: 0.35rem 0.85rem;
}
.sub-nav a:hover { border-color: #fff; color: #fff; }
.sub-nav a.actief { background: #fff; color: #1a1030; border-color: #fff; }

/* ═══ v0.35.2 — Definitie-blok: overal exact even breed als de blokken eronder ═══ */
.world-cyclorama .blokken, .world-cyclorama .bewijsmuur, .world-cyclorama .g-themas {
  max-width: 65.5rem !important; margin-left: auto !important; margin-right: auto !important;
}
.g-simpel.definitie { border-width: 2px; }
.g-simpel.definitie .def-label {
  display: inline-block; font-family: var(--mono); font-size: 0.66rem; font-weight: 800;
  letter-spacing: 0.14em; background: #0a2bff; color: #fff; border-radius: 6px;
  padding: 0.12rem 0.5rem; margin-right: 0.45rem;
}
body.deelkleur-kl { --deelkleur: #e05a8a; }

/* ═══ v0.37.1 — invulvelden altijd leesbaar: wit met donkere inkt ═══ */
body[class*="deelkleur-"] textarea,
body[class*="deelkleur-"] input[type="text"],
body[class*="deelkleur-"] .feedback-vraag,
body[class*="deelkleur-"] .voorstel-vraag-veld,
.world-cyclorama textarea,
.world-cyclorama .feedback-vraag {
  background: #ffffff !important;
  color: #1c1836 !important;
  border: 1px solid #8c86ad !important;
  border-radius: 10px !important;
  font-size: 16px !important;
  line-height: 1.55;
  padding: 0.6rem 0.8rem !important;
  -webkit-text-fill-color: #1c1836;
  caret-color: #0a2bff;
}
body[class*="deelkleur-"] textarea::placeholder,
.world-cyclorama textarea::placeholder { color: #6b6590 !important; opacity: 1; }
body[class*="deelkleur-"] textarea:focus,
.world-cyclorama textarea:focus {
  outline: none;
  border-color: #0a2bff !important;
  box-shadow: 0 0 0 3px rgba(10, 43, 255, 0.18);
}
/* verstuurknop en melding ernaast leesbaar */
body[class*="deelkleur-"] .feedback-verstuur,
body[class*="deelkleur-"] .feedback-opslaan button {
  background: #0a2bff !important; color: #fff !important; border: 0 !important;
  border-radius: 999px; padding: 0.4rem 0.9rem; font-weight: 700;
}
body[class*="deelkleur-"] .feedback-melding { color: #3d3766 !important; font-weight: 700; }
body[class*="deelkleur-"] .feedback-melding.wacht { color: #8a5f06 !important; }

/* ═══ v0.39.0 — vraag & antwoord-log per blok ═══ */
.vraaglog-blok {
  border-top: 2px dashed color-mix(in srgb, var(--deelkleur, #9db0ff) 55%, #fff);
  margin-top: 0.7rem; padding-top: 0.6rem;
}
.vl-entry { background: rgba(255,255,255,0.7); border: 1px solid #b9b2d8; border-radius: 9px; padding: 0.55rem 0.8rem; margin-bottom: 0.45rem; }
.vl-datum { font-family: var(--mono); font-size: 0.64rem; font-weight: 800; letter-spacing: 0.1em; color: #6a1fd0; }
.vl-vraag, .vl-antwoord { font-size: 0.8rem; line-height: 1.6; color: #262148; max-width: 82ch; margin-top: 0.25rem; }
.vl-vraag strong { color: #0a1c8f; }
.vl-antwoord strong { color: #147a4a; }
.vl-noot { font-size: 0.72rem; color: #5a5478; font-style: italic; margin-top: 0.2rem; }
@media print { .vl-noot { display: none; } }
.verkoopactie {
  background: color-mix(in srgb, #f0d060 30%, #fff);
  border: 1px solid #d8b53a; border-radius: 9px;
  padding: 0.5rem 0.8rem; margin-top: 0.5rem;
  font-size: 0.82rem; line-height: 1.6; color: #2a2205; max-width: 82ch;
}
.verkoopactie strong { color: #6b5200; }

/* ═══ v0.40.0 — use cases inklapbaar met verkoopstatus ═══ */
details.uc-blok > summary { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.uc-titel { font-family: var(--stencil); font-weight: 400; text-transform: uppercase; font-size: 0.95rem; letter-spacing: 0.02em; color: #fff; flex: 1; }
.uc-badges { display: inline-flex; gap: 0.3rem; flex-wrap: wrap; }
.uc-badges .badge { font-size: 0.6rem; }
.uc-overzicht-paneel { background: rgba(255,255,255,0.9); color: #14102e; border-color: #b9b2d8; }
.uc-overzicht-paneel .cue-label { color: #0a1c8f; }
.uc-overzicht-paneel .vb-knop { color: #262148; border-color: #b9b2d8; background: #fff; }
details.uc-blok .vraagblok-body { background: color-mix(in srgb, var(--deelkleur, #9db0ff) 14%, #fff); }
@media print { details.uc-blok { border: 1px solid #bbb !important; } details.uc-blok > summary { background: #eee !important; } .uc-titel { color: #111 !important; } }
body.deelkleur-vk { --deelkleur: #d8a33a; }
body.deelkleur-och { --deelkleur: #e8a33d; }

/* ═══ v0.43.0 — GTM-catalogus: use cases als in- en uitklapbare balken ═══ */
body.deelkleur-gtm { --deelkleur: #f0a03c; }
.gtm-paneel { max-width: 65.5rem; margin: 0 auto 1rem; background: #fff; border: 1px solid rgba(35,53,216,0.18); border-radius: 14px; padding: 0.85rem 1.1rem; color: #1c1836; }
.gtm-paneel-kop { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: #5b5b7a; margin: 0 0 0.35rem; }
#gtm-tellers { font-size: 0.95rem; line-height: 1.75; color: #1c1836; margin: 0 0 0.5rem; }
.gtm-nacht-teller { color: #6b3fd4; font-weight: 700; }
.gtm-paneel-knoppen { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0; }
.gtm-paneel-knoppen button { font-size: 0.82rem; padding: 0.3rem 0.7rem; border-radius: 999px; border: 1px solid rgba(35,53,216,0.3); background: #f3f2ff; color: #2335d8; cursor: pointer; font-weight: 600; }
.gtm-paneel-knoppen button:hover { background: #2335d8; color: #fff; }
.gtm-nacht-melding { font-size: 0.84rem; color: #5b5b7a; margin: 0.45rem 0 0; }

.gtm-groep-kop { max-width: 65.5rem; margin: 1.5rem auto 0.15rem; border-radius: 12px; padding: 0.55rem 1.05rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.gtm-groep-kop h3 { margin: 0; font-size: 1rem; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.25); }
.gtm-groep-kop span { font-family: var(--mono); font-size: 0.72rem; color: rgba(255,255,255,0.92); white-space: nowrap; }
.gtm-groep-uitleg { max-width: 65.5rem; margin: 0 auto 0.6rem; font-size: 0.88rem; color: #3a3556; line-height: 1.65; }
.gtm-groep { max-width: 65.5rem; margin: 0 auto; }

details.gtm-case { max-width: 65.5rem; margin: 0 auto 0.45rem; background: #fff; border: 1px solid color-mix(in srgb, var(--gk, #2335d8) 42%, #e6e4f2); border-radius: 12px; }
details.gtm-case[open] { border-color: color-mix(in srgb, var(--gk, #2335d8) 68%, #e6e4f2); }
details.gtm-case > summary { display: flex; align-items: center; gap: 0.55rem; flex-wrap: wrap; cursor: pointer; list-style: none; padding: 0.6rem 0.9rem; }
details.gtm-case > summary::-webkit-details-marker { display: none; }
details.gtm-case > summary::before { content: "▸"; color: var(--gk, #2335d8); font-size: 0.8rem; }
details.gtm-case[open] > summary::before { content: "▾"; }
.gtm-nr { font-family: var(--mono); font-size: 0.72rem; font-weight: 800; color: #fff; background: var(--gk, #2335d8); border-radius: 6px; padding: 0.1rem 0.45rem; }
.gtm-titel { flex: 1; min-width: 12rem; font-weight: 700; font-size: 0.95rem; color: #1c1836; }
.gtm-badge { font-family: var(--mono); font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.05em; border-radius: 5px; padding: 0.1rem 0.4rem; }
.gtm-skelet { background: #f0efff; color: #6b6890; border: 1px solid #ddd9f5; }
.gtm-klaar-badge { background: #e4f7ec; color: #1c7a48; border: 1px solid #bce6cf; }
.gtm-nacht-badge { background: #efe6ff; color: #6b3fd4; border: 1px solid #d8c8ff; }
.gtm-status-chip { font-size: 0.76rem; color: #5b5b7a; white-space: nowrap; }
.gtm-body { padding: 0.2rem 1rem 0.9rem; color: #1c1836; }
.gtm-body p, .gtm-body li { color: #1c1836; line-height: 1.7; }
.gtm-pitch { font-size: 0.95rem; margin: 0.3rem 0 0.5rem; }
.gtm-meta { font-size: 0.82rem; color: #4a4668; margin: 0 0 0.7rem; }
.gtm-mv { font-family: var(--mono); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; color: #7a7799; }
/* ── ochtendrapport-uitklappers — per item een kleur (18-08-2026) ──
   Dicht = één regel (label + kern), open = alle detail. Kleur per soort item
   zodat het oog leert: blauw = identificatie, groen = geld, paars = lijnen,
   oranje = prospects, teal = app, rood = alarm, goud = acties. */
.och-uitklap { border-radius: 10px; border: 1px solid rgba(0,0,0,0.1); margin: 0 0 0.5rem; padding: 0; background: #fff; }
.och-uitklap > summary { cursor: pointer; padding: 0.5rem 0.8rem; list-style: none; display: block; border-radius: 10px; }
.och-uitklap > summary::-webkit-details-marker { display: none; }
.och-uitklap > summary::before { content: "▸ "; font-size: 0.8em; opacity: 0.6; }
.och-uitklap[open] > summary::before { content: "▾ "; }
.och-uitklap[open] > summary { border-bottom: 1px dashed rgba(0,0,0,0.12); border-radius: 10px 10px 0 0; }
.och-label { font-weight: 800; font-size: 0.9rem; }
.och-teaser { font-size: 0.82rem; color: #4a4668; }
.och-uitklap > *:not(summary) { margin: 0.5rem 0.8rem 0.6rem; }
.och-chips { display: inline-flex; flex-wrap: wrap; gap: 0.25rem; margin-left: 0.45rem; vertical-align: middle; }
.och-chips .gk-chip { font-size: 0.62rem; padding: 0.12rem 0.45rem; }
.och-id    { background: #eef6ff; border-color: #cfe2f7; } .och-id  > summary .och-label { color: #1b5a92; }
.och-geld  { background: #eefaf1; border-color: #cdebd8; } .och-geld > summary .och-label { color: #1c7a48; }
.och-lijn  { background: #f2eeff; border-color: #ddd3f8; } .och-lijn > summary .och-label { color: #5b3fc4; }
.och-pros  { background: #fdf1e6; border-color: #f2d9bd; } .och-pros > summary .och-label { color: #a05716; }
.och-app   { background: #e9f7f6; border-color: #c8e8e6; } .och-app > summary .och-label { color: #12707a; }
.och-rood  { background: #fdeeee; border-color: #f2cfcf; } .och-rood > summary .och-label { color: #a52a2a; }
.och-werk  { background: #fff8e0; border-color: #f0dfa8; } .och-werk > summary .och-label { color: #8a6a12; }
.och-actie { background: #fff4d6; border-color: #ecd995; } .och-actie > summary .och-label { color: #7a5c00; }
.och-dream { background: #f3f1f7; border-color: #dcd7e6; } .och-dream > summary .och-label { color: #5f5680; }
.och-vorm  { background: #edf0ff; border-color: #cfd6f7; } .och-vorm > summary .och-label { color: #2b3fae; }
.och-open  { background: #f4f3f0; border-color: #ddd9d2; } .och-open > summary .och-label { color: #5b5b7a; }

/* chips op de gtm-aanpak-kaart — de lijnen direct zichtbaar */
.gk-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0.45rem 0 0.55rem; }
.gk-chip { font-family: var(--mono); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.04em; border-radius: 999px; padding: 0.22rem 0.65rem; border: 1px solid; white-space: nowrap; }
.gk-r4m    { background: #14102e; color: #fff; border-color: #14102e; }
.gk-x401   { background: #f2eeff; color: #5b3fc4; border-color: #cbb9f2; }
.gk-x402   { background: #eefaf1; color: #1c7a48; border-color: #b9e2c8; }
.gk-iot    { background: #eef6ff; color: #1b5a92; border-color: #bcd8f2; }
.gk-agents { background: #f6e9ff; color: #7a2fb8; border-color: #e0c4f5; }
.gk-idn    { background: #fdf6e3; color: #8a6a12; border-color: #ecd995; }
.gk-vormc  { background: #edf0ff; color: #2b3fae; border-color: #c4cdf5; }
.gk-nu     { background: #e4f7ec; color: #1c7a48; border-color: #bce6cf; }
.gk-test   { background: #fff4d6; color: #7a5c00; border-color: #ecd995; }
.gk-prio   { background: #fdeeee; color: #a52a2a; border-color: #f2cfcf; }
details.gtm-deel { border-radius: 10px; border: 1px solid rgba(0,0,0,0.08); margin: 0 0 0.5rem; }
details.gtm-deel > summary { cursor: pointer; padding: 0.45rem 0.8rem; font-weight: 700; font-size: 0.88rem; list-style: none; }
details.gtm-deel > summary::-webkit-details-marker { display: none; }
details.gtm-deel > summary::before { content: "▸ "; font-size: 0.8em; opacity: 0.6; }
details.gtm-deel[open] > summary::before { content: "▾ "; }
details.gtm-deel > .gtm-vak { margin: 0 0.5rem 0.5rem; }
.gtm-deel-probleem { background: #fbf4ec; border-color: #eedcc6; } .gtm-deel-probleem > summary { color: #8a5a1b; }
.gtm-deel-oplossing { background: #eefaf1; border-color: #cdebd8; } .gtm-deel-oplossing > summary { color: #1c7a48; }
.gtm-deel-bouw { background: #fff8e0; border-color: #f0dfa8; } .gtm-deel-bouw > summary { color: #8a6a12; }
.gtm-deel-simpel { background: #eef6ff; border-color: #cfe2f7; } .gtm-deel-simpel > summary { color: #1b5a92; }
.gtm-deel-klant { background: #eef6ff; border-color: #cfe2f7; } .gtm-deel-klant > summary { color: #1b5a92; }

/* ── de aanpak-kaart — vast vierluik bovenaan elke case (18-08-2026) ──
   Altijd dezelfde vier vakken op dezelfde plek: 🎯 bij wie · 🔌 hoe ·
   🧩 wat ze afnemen · 🔧 wat jij doet. Eén oogopslag, elk bedrijf. */
.gtm-aanpak { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin: 0.55rem 0 0.75rem; }
@media (max-width: 640px) { .gtm-aanpak { grid-template-columns: 1fr; } }
.ak-vak { border-radius: 10px; padding: 0.55rem 0.8rem; border: 1px solid rgba(0,0,0,0.08); background: #fff; }
.ak-kop { font-family: var(--mono); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 800; margin: 0 0 0.3rem; }
.ak-vak p, .ak-vak li { font-size: 0.85rem; line-height: 1.55; color: #1c1836; margin: 0 0 0.25rem; }
.ak-vak ul { list-style: none; margin: 0; padding: 0; }
.ak-vorm { font-weight: 700; }
.ak-geld { margin-top: 0.35rem; border-top: 1px dashed rgba(0,0,0,0.12); padding-top: 0.35rem; }
.ak-meer { font-size: 0.76rem; color: #6b6890; font-style: italic; }
.ak-leeg { color: #6b6890; font-style: italic; }
.ak-wie  { background: #eef6ff; border-color: #cfe2f7; } .ak-wie .ak-kop { color: #1b5a92; }
.ak-hoe  { background: #f2eeff; border-color: #ddd3f8; } .ak-hoe .ak-kop { color: #5b3fc4; }
.ak-mix  { background: #eefaf1; border-color: #cdebd8; } .ak-mix .ak-kop { color: #1c7a48; }
.ak-jij  { background: #fff8e0; border-color: #f0dfa8; } .ak-jij .ak-kop { color: #8a6a12; }

.gtm-vak { border-radius: 10px; padding: 0.6rem 0.85rem; margin: 0 0 0.55rem; border: 1px solid rgba(0,0,0,0.07); }
.gtm-vak-kop { font-family: var(--mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; margin: 0 0 0.35rem; font-weight: 700; }
.gtm-vak p, .gtm-vak li { font-size: 0.9rem; }
.gtm-vak ul, .gtm-vak ol { margin: 0.2rem 0 0 1.1rem; }
.gtm-vak li { margin-bottom: 0.4rem; }
.gtm-vak-klant { background: #eef6ff; border-color: #cfe2f7; }
.gtm-vak-klant .gtm-vak-kop { color: #1b5a92; }
.gtm-vak-nu { background: #fbf4ec; border-color: #eedcc6; }
.gtm-vak-nu .gtm-vak-kop { color: #8a5a1b; }
.gtm-vak-r4m { background: #f2eeff; border-color: #ddd3f8; }
.gtm-vak-r4m .gtm-vak-kop { color: #5b3fc4; }
.gtm-vak-bouw { background: #fff8e0; border-color: #f0dfa8; }
.gtm-vak-bouw .gtm-vak-kop { color: #8a6a12; }
.gtm-leeg { font-size: 0.86rem; color: #6b6890; font-style: italic; }
.gtm-acties { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; margin-top: 0.6rem; padding-top: 0.55rem; border-top: 1px dashed rgba(0,0,0,0.12); }
.gtm-acties-label { font-family: var(--mono); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.06em; color: #7a7799; margin-right: 0.2rem; }
.gtm-knop { font-size: 0.8rem; padding: 0.25rem 0.6rem; border-radius: 999px; border: 1px solid rgba(35,53,216,0.25); background: #fff; color: #3a3556; cursor: pointer; }
.gtm-knop:hover { border-color: #2335d8; }
.gtm-knop.aan { background: #2335d8; color: #fff; border-color: #2335d8; font-weight: 600; }
.gtm-nachtknop.aan { background: #6b3fd4; border-color: #6b3fd4; }
details.gtm-log { margin-top: 0.6rem; }
details.gtm-log > summary { cursor: pointer; font-size: 0.8rem; color: #5b5b7a; }
details.gtm-log ul { margin: 0.35rem 0 0 1rem; }
details.gtm-log li { font-size: 0.84rem; color: #4a4668; margin-bottom: 0.25rem; }
.gtm-log-d { font-family: var(--mono); font-size: 0.72rem; color: #7a7799; }
@media (max-width: 640px) {
  .gtm-titel { min-width: 100%; order: 3; }
  .gtm-acties { gap: 0.3rem; }
  .gtm-knop { font-size: 0.76rem; }
}

/* ═══ v0.44.0 — GTM-bril: één bron, meerdere vensters ═══ */
.bril-sectie { max-width: 65.5rem; margin: 1.6rem auto 0; }
.bril-kop { background: #fff; border: 1px solid rgba(35,53,216,0.18); border-radius: 14px; padding: 0.8rem 1.05rem; margin-bottom: 0.6rem; color: #1c1836; }
.bril-kop h3 { margin: 0 0 0.3rem; font-size: 1rem; color: #1c1836; }
.bril-kop p { margin: 0; font-size: 0.88rem; line-height: 1.7; color: #3a3556; }
.bril-lijst { list-style: none; margin: 0; padding: 0; }
.bril-rij { background: #fff; border: 1px solid color-mix(in srgb, var(--bk, #2335d8) 34%, #e6e4f2); border-radius: 12px; padding: 0.6rem 0.9rem; margin-bottom: 0.4rem; }
.bril-rij > a { text-decoration: none; display: inline-flex; align-items: center; gap: 0.45rem; }
.bril-nr { font-family: var(--mono); font-size: 0.72rem; font-weight: 800; color: #fff; background: var(--bk, #2335d8); border-radius: 6px; padding: 0.1rem 0.45rem; }
.bril-titel { font-weight: 700; font-size: 0.94rem; color: #1c1836; }
.bril-rij > a:hover .bril-titel { text-decoration: underline; }
.bril-groep { font-family: var(--mono); font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.05em; color: #6b6890; margin-left: 0.5rem; }
.bril-badge { font-family: var(--mono); font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.05em; background: #f0efff; color: #6b6890; border: 1px solid #ddd9f5; border-radius: 5px; padding: 0.1rem 0.4rem; margin-left: 0.4rem; }
.bril-badge-sterk { background: #e4f7ec; color: #1c7a48; border-color: #bce6cf; }
.bril-pitch { margin: 0.35rem 0 0; font-size: 0.89rem; line-height: 1.7; color: #1c1836; }
.bril-klant { margin: 0.3rem 0 0; font-size: 0.83rem; color: #4a4668; line-height: 1.7; }
.bril-klant a, .bril-org a { color: #2335d8; }
.bril-orgnaam { font-weight: 700; font-size: 0.96rem; color: #1c1836; }
.bril-org { border-color: rgba(35,53,216,0.2); }

/* ═══ v0.45.0 — hoofdmenu in twee groepen (verzoek Franky 12-08) ═══
   Boven: het dossier (Start + A t/m G) in één koele lila tint.
   Onder: de werkruimte (Use cases, GTM, Archief) in amber — waar je wérkt,
   niet leest. De ⌂ Start-knop houdt bewust zijn eigen felle behandeling.   */
.world-cyclorama .site-nav a[href^="fundament"],
.world-cyclorama .site-nav a[href^="kaart"],
.world-cyclorama .site-nav a[href^="strategie"],
.world-cyclorama .site-nav a[href^="bouwblokken"],
.world-cyclorama .site-nav a[href^="radar"],
.world-cyclorama .site-nav a[href^="niet-doen"],
.world-cyclorama .site-nav a[href^="archief"],
.world-cyclorama .site-nav a[href^="juridisch"] {
  color: #b9c4ff;
  background: rgba(125, 146, 255, 0.09);
  border: 1px solid rgba(125, 146, 255, 0.22);
}
.world-cyclorama .site-nav a[href^="fundament"]:hover,
.world-cyclorama .site-nav a[href^="kaart"]:hover,
.world-cyclorama .site-nav a[href^="strategie"]:hover,
.world-cyclorama .site-nav a[href^="bouwblokken"]:hover,
.world-cyclorama .site-nav a[href^="radar"]:hover,
.world-cyclorama .site-nav a[href^="niet-doen"]:hover,
.world-cyclorama .site-nav a[href^="archief"]:hover,
.world-cyclorama .site-nav a[href^="juridisch"]:hover {
  color: #fff;
  background: rgba(125, 146, 255, 0.2);
  border-color: rgba(125, 146, 255, 0.5);
}
.world-cyclorama .site-nav a[href^="main-use-cases"],
.world-cyclorama .site-nav a[href^="use-cases"],
.world-cyclorama .site-nav a[href^="gtm"],
.world-cyclorama .site-nav a[href^="x401"],
.world-cyclorama .site-nav a[href^="x402"],
.world-cyclorama .site-nav a[href^="iot"],
.world-cyclorama .site-nav a[href^="functionaliteit"],
.world-cyclorama .site-nav a[href^="dream"],
.world-cyclorama .site-nav a[href^="klanten"],
.world-cyclorama .site-nav a[href^="verkoopkit"],
.world-cyclorama .site-nav a[href^="ochtendrapport"],
.world-cyclorama .site-nav a[href^="integratabs"],
.world-cyclorama .site-nav a[href^="lagen"] {
  color: #ffbe6a;
  background: rgba(240, 160, 60, 0.12);
  border: 1px solid rgba(240, 160, 60, 0.34);
}
.world-cyclorama .site-nav a[href^="main-use-cases"]:hover,
.world-cyclorama .site-nav a[href^="use-cases"]:hover,
.world-cyclorama .site-nav a[href^="gtm"]:hover,
.world-cyclorama .site-nav a[href^="x401"]:hover,
.world-cyclorama .site-nav a[href^="x402"]:hover,
.world-cyclorama .site-nav a[href^="iot"]:hover,
.world-cyclorama .site-nav a[href^="functionaliteit"]:hover,
.world-cyclorama .site-nav a[href^="dream"]:hover,
.world-cyclorama .site-nav a[href^="klanten"]:hover,
.world-cyclorama .site-nav a[href^="verkoopkit"]:hover,
.world-cyclorama .site-nav a[href^="ochtendrapport"]:hover ,
.world-cyclorama .site-nav a[href^="integratabs"]:hover,
.world-cyclorama .site-nav a[href^="lagen"]:hover {
  color: #fff;
  background: rgba(240, 160, 60, 0.26);
  border-color: rgba(240, 160, 60, 0.62);
}
/* actieve tab wint altijd, binnen de kleur van zijn eigen groep */
.world-cyclorama .site-nav a.actief[href^="fundament"],
.world-cyclorama .site-nav a.actief[href^="kaart"],
.world-cyclorama .site-nav a.actief[href^="strategie"],
.world-cyclorama .site-nav a.actief[href^="bouwblokken"],
.world-cyclorama .site-nav a.actief[href^="radar"],
.world-cyclorama .site-nav a.actief[href^="niet-doen"],
.world-cyclorama .site-nav a.actief[href^="archief"],
.world-cyclorama .site-nav a.actief[href^="juridisch"] {
  color: #0a1030; background: #b9c4ff; border-color: #b9c4ff; font-weight: 700;
}
.world-cyclorama .site-nav a.actief[href^="main-use-cases"],
.world-cyclorama .site-nav a.actief[href^="use-cases"],
.world-cyclorama .site-nav a.actief[href^="gtm"],
.world-cyclorama .site-nav a.actief[href^="x401"],
.world-cyclorama .site-nav a.actief[href^="x402"],
.world-cyclorama .site-nav a.actief[href^="iot"],
.world-cyclorama .site-nav a.actief[href^="functionaliteit"],
.world-cyclorama .site-nav a.actief[href^="dream"],
.world-cyclorama .site-nav a.actief[href^="klanten"],
.world-cyclorama .site-nav a.actief[href^="verkoopkit"],
.world-cyclorama .site-nav a.actief[href^="ochtendrapport"] {
  color: #2a1500; background: #ffbe6a; border-color: #ffbe6a; font-weight: 700;
}
/* de thuisknop blijft ongemoeid herkenbaar */
.world-cyclorama .site-nav a.nav-start {
  color: #e8ecf4; background: transparent; border: 1px solid rgba(232, 236, 244, 0.28);
}
.world-cyclorama .site-nav a.nav-start.actief { color: #0a1030; background: #e8ecf4; border-color: #e8ecf4; }

/* v0.46.0 — de Start-knop is weg; de titel R4M maX ís nu de weg naar huis. */
.world-cyclorama .brand-link { border-radius: 8px; padding: 0.1rem 0.4rem; margin-left: -0.4rem; transition: background 0.15s ease; }
.world-cyclorama .brand-link:hover { background: rgba(125, 146, 255, 0.16); }
.world-cyclorama .brand-link:hover .brand-mark { color: #fff; }
.world-cyclorama .brand-link::after { content: "⌂"; font-size: 0.72rem; color: rgba(217, 212, 255, 0.45); margin-left: 0.4rem; vertical-align: 0.1em; }
.world-cyclorama .brand-link:hover::after { color: #fff; }

/* v0.47.0 — één navigatie: de use-cases-familie staat voluit in rij 2 van het
   hoofdmenu, de losse sub-navigatie eronder is vervallen. Rij 2 mag afbreken
   over meerdere regels; de amber tint houdt de groep bij elkaar.            */
.world-cyclorama .nav-inner { align-items: center; }

/* ═══ v0.48.0 — Main Use Cases: verplaatsen zonder verliezen ═══ */
body.deelkleur-main { --deelkleur: #f5c542; }
.main-balk { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem; margin-top: 0.6rem; padding-top: 0.55rem; border-top: 1px dashed rgba(0,0,0,0.12); }
.main-knop { font-size: 0.8rem; padding: 0.28rem 0.7rem; border-radius: 999px; border: 1px solid rgba(196,140,20,0.4); background: #fff8e0; color: #7a5c0e; cursor: pointer; font-weight: 600; }
.main-knop:hover { background: #f5c542; color: #2a1f00; border-color: #f5c542; }
.main-hint { font-size: 0.78rem; color: #6b6890; }
.main-verplaatst { font-family: var(--mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; color: #7a5c0e; background: #fff2c4; border: 1px solid #eed98a; border-radius: 5px; padding: 0.14rem 0.5rem; }
.main-link { font-size: 0.8rem; color: #2335d8; }
/* Een blok dat op de werkbank staat, is herkenbaar aan een warme rand rondom
   en een lichte goudtint — niet aan een streep langs één kant. De chip in de
   balk zegt het al met zoveel woorden; dit is de stille bevestiging.        */
.is-verplaatst { border-color: #e8c766 !important; background: #fffdf5 !important; }
.main-bronkop { max-width: 65.5rem; margin: 1.2rem auto 0.35rem; font-family: var(--mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: #6b6890; }
details.main-item { max-width: 65.5rem; margin: 0 auto 0.45rem; background: #fff; border: 1px solid rgba(196,140,20,0.34); border-radius: 12px; }
details.main-item > summary { display: flex; align-items: center; gap: 0.55rem; flex-wrap: wrap; cursor: pointer; list-style: none; padding: 0.6rem 0.9rem; }
details.main-item > summary::-webkit-details-marker { display: none; }
details.main-item > summary::before { content: "▸"; color: #c48c14; font-size: 0.8rem; }
details.main-item[open] > summary::before { content: "▾"; }
.main-titel { flex: 1; min-width: 12rem; font-weight: 700; font-size: 0.95rem; color: #1c1836; }
.main-bron { font-family: var(--mono); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.05em; color: #7a5c0e; background: #fff2c4; border: 1px solid #eed98a; border-radius: 5px; padding: 0.1rem 0.4rem; }
.main-datum { font-family: var(--mono); font-size: 0.7rem; color: #7a7799; }
.main-inhoud { padding: 0.2rem 1rem 0.9rem; color: #1c1836; }
.main-inhoud p, .main-inhoud li { color: #1c1836; line-height: 1.7; }
.main-herkomst { margin-top: 0.7rem; padding-top: 0.55rem; border-top: 1px dashed rgba(0,0,0,0.12); font-size: 0.84rem; color: #4a4668; display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.main-leeg { max-width: 65.5rem; margin: 0 auto; background: #fff; border: 1px solid rgba(35,53,216,0.16); border-radius: 12px; padding: 0.9rem 1.1rem; color: #1c1836; line-height: 1.75; font-size: 0.92rem; }

/* ═══ v0.49.0 — MUC: selectieknop, labels, filters, zelf toevoegen ═══ */
.main-sel-knop { position: absolute; z-index: 9999; font-size: 0.82rem; font-weight: 700; padding: 0.35rem 0.8rem; border-radius: 999px; border: 1px solid #c48c14; background: #f5c542; color: #2a1f00; cursor: pointer; box-shadow: 0 4px 14px rgba(0,0,0,0.28); }
.main-sel-knop:hover { background: #ffd75e; }
.main-filterkop { font-family: var(--mono); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.06em; color: #7a7799; margin: 0.7rem 0 0.3rem; }
.main-filters { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.main-filter { font-size: 0.8rem; padding: 0.25rem 0.65rem; border-radius: 999px; border: 1px solid rgba(196,140,20,0.35); background: #fff; color: #4a4668; cursor: pointer; }
.main-filter:hover { border-color: #c48c14; }
.main-filter.aan { background: #f5c542; color: #2a1f00; border-color: #f5c542; font-weight: 700; }
.main-soort { font-family: var(--mono); font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.05em; color: #6b6890; background: #f0efff; border: 1px solid #ddd9f5; border-radius: 4px; padding: 0.08rem 0.35rem; }
.main-labelchips { display: inline-flex; flex-wrap: wrap; gap: 0.25rem; }
.main-chip { font-size: 0.68rem; background: #fff2c4; border: 1px solid #eed98a; color: #7a5c0e; border-radius: 5px; padding: 0.08rem 0.35rem; }
.main-labelrij { display: flex; flex-wrap: wrap; gap: 0.3rem; align-items: center; margin-top: 0.7rem; padding-top: 0.55rem; border-top: 1px dashed rgba(0,0,0,0.12); }
.main-labelrij-kop { font-family: var(--mono); font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.06em; color: #7a7799; margin-right: 0.2rem; }
.main-labelknop { font-size: 0.78rem; padding: 0.2rem 0.55rem; border-radius: 999px; border: 1px solid rgba(35,53,216,0.22); background: #fff; color: #4a4668; cursor: pointer; }
.main-labelknop:hover { border-color: #2335d8; }
.main-labelknop.aan { background: #2335d8; color: #fff; border-color: #2335d8; font-weight: 600; }
.main-uitblok { font-size: 0.8rem; color: #6b6890; font-style: italic; margin-bottom: 0.5rem; }
.main-zonder { color: #b5651d; font-weight: 600; }
.main-toevoegen { max-width: 65.5rem; margin: 1.6rem auto 0; background: #fff; border: 1px dashed rgba(196,140,20,0.5); border-radius: 12px; padding: 0.9rem 1.1rem; }
.main-toevoeg-kop { font-weight: 700; color: #1c1836; margin: 0 0 0.2rem; }
.main-toevoeg-uitleg { font-size: 0.86rem; color: #4a4668; margin: 0 0 0.7rem; }
.main-veld { display: block; margin-bottom: 0.6rem; }
.main-veld span { display: block; font-family: var(--mono); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.06em; color: #7a7799; margin-bottom: 0.2rem; }
.main-veld input, .main-veld textarea { width: 100%; background: #fff !important; color: #1c1836 !important; border: 1px solid rgba(35,53,216,0.25); border-radius: 8px; padding: 0.45rem 0.6rem; font-size: 16px; font-family: inherit; }
.main-toevoeg-knop { font-weight: 700; }

/* v0.51.0 — labelhulp: voorstel met reden, en uitleg per label */
.main-voorstel { font-size: 0.84rem; color: #4a4668; margin: 0.5rem 0 0; padding: 0.5rem 0.7rem; background: #f6f4ff; border: 1px solid #ddd6f8; border-radius: 8px; line-height: 1.7; }
.main-voorstel-leeg { background: #f7f7fa; border-color: #e4e4ee; color: #6b6890; font-style: italic; }
.main-voorstelknop { font-size: 0.8rem; padding: 0.2rem 0.55rem; margin: 0 0.1rem; border-radius: 999px; border: 1px solid #7a4df5; background: #fff; color: #5b3fc4; cursor: pointer; font-weight: 600; }
.main-voorstelknop:hover { background: #7a4df5; color: #fff; }
.main-voorstel-waarom { color: #6b6890; font-size: 0.8rem; }
.main-labeluitleg { max-width: 65.5rem; margin: 0 auto 0.8rem; }
.main-labeluitleg summary { cursor: pointer; font-size: 0.86rem; color: #2335d8; padding: 0.4rem 0; }
.main-labeluitleg .lu-inhoud { background: #fff; border: 1px solid rgba(35,53,216,0.16); border-radius: 12px; padding: 0.85rem 1.1rem; color: #1c1836; }
.main-labeluitleg dl { margin: 0.5rem 0 0; }
.main-labeluitleg dt { font-weight: 700; margin-top: 0.5rem; color: #1c1836; }
.main-labeluitleg dd { margin: 0.1rem 0 0 1.1rem; font-size: 0.9rem; color: #3a3556; line-height: 1.65; }
.lu-groep { font-family: var(--mono); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.06em; color: #7a7799; margin: 0.7rem 0 0; }

/* v0.52.0 — MUC: uitwerken per item (geen twee bedrijven dezelfde weg) */
.main-werk { margin-top: 0.7rem; padding: 0.7rem 0.85rem; background: #f7fbff; border: 1px solid #cfe2f7; border-radius: 10px; }
.main-werk-kop { font-family: var(--mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: #1b5a92; font-weight: 700; margin: 0 0 0.45rem; }
.main-werk-leeg { font-size: 0.85rem; color: #5b6b80; font-style: italic; margin: 0 0 0.55rem; }
.main-notities { margin: 0 0 0.6rem 1.1rem; padding: 0; }
.main-notities li { font-size: 0.89rem; color: #1c1836; line-height: 1.7; margin-bottom: 0.4rem; }
.main-notitie-d { font-family: var(--mono); font-size: 0.7rem; color: #7a7799; margin-right: 0.25rem; }
.main-notitie-weg { border: none; background: none; color: #b06; cursor: pointer; font-size: 0.78rem; padding: 0 0.2rem; opacity: 0.55; }
.main-notitie-weg:hover { opacity: 1; }
.main-werk-knoppen { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-bottom: 0.4rem; }
.main-werkknop { font-size: 0.78rem; padding: 0.2rem 0.55rem; border-radius: 999px; border: 1px solid #b3d1ec; background: #fff; color: #1b5a92; cursor: pointer; }
.main-werkknop:hover { background: #1b5a92; color: #fff; border-color: #1b5a92; }
.main-werk-veld { width: 100%; background: #fff !important; color: #1c1836 !important; border: 1px solid #cfe2f7; border-radius: 8px; padding: 0.45rem 0.6rem; font-size: 16px; font-family: inherit; margin-bottom: 0.4rem; }
.main-werk-bewaar { font-weight: 700; }

/* v0.52.0 — de koppelbeslissing per bedrijf */
.main-koppel { margin-top: 0.7rem; padding: 0.7rem 0.85rem; background: #fdf6ff; border: 1px solid #e5d3f5; border-radius: 10px; }
.main-koppelrij { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-bottom: 0.45rem; }
.main-koppelknop { font-size: 0.79rem; padding: 0.22rem 0.6rem; border-radius: 999px; border: 1px solid #d3bdea; background: #fff; color: #5b3fc4; cursor: pointer; }
.main-koppelknop:hover { border-color: #7a4df5; }
.main-koppelknop.aan { background: #7a4df5; color: #fff; border-color: #7a4df5; font-weight: 600; }
.main-koppel-leeg { font-size: 0.85rem; color: #6b6890; font-style: italic; margin: 0; }
.main-koppel-uitleg { font-size: 0.85rem; color: #3a3556; line-height: 1.65; margin: 0.2rem 0 0; }

/* v0.69.0 — de samenvatting in gewone taal, vóór het technische werk.
   Warm en rustig: dit is wat je leest als je het dossier weer opent. */
.main-vatting { margin-top: 0.7rem; padding: 0.8rem 1rem; background: #fffdf5; border: 1px solid #eed98a; border-radius: 10px; }
.main-vatting-kop { font-family: var(--mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: #8a6a12; font-weight: 700; margin: 0 0 0.5rem; }
.main-vatting-laag { font-size: 0.87rem; line-height: 1.65; color: #3a3220; margin: 0 0 0.55rem; padding-bottom: 0.5rem; border-bottom: 1px dashed #f0e3b8; }
.mvl-chip { display: inline-block; font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.05em; background: #8a6a12; color: #fffdf5 !important; padding: 0.12rem 0.45rem; border-radius: 999px; text-decoration: none; font-weight: 700; margin-right: 0.35rem; }
.mvl-chip:hover { background: #6d540e; }
.main-vatting-kern { font-size: 0.97rem; line-height: 1.7; color: #2b2410; margin: 0 0 0.6rem; font-weight: 600; }
.main-vatting-punten { margin: 0 0 0.6rem; padding-left: 1.1rem; }
.main-vatting-punten li { font-size: 0.9rem; line-height: 1.7; color: #3a3220; margin-bottom: 0.35rem; }
.main-vatting-punten li:last-child { margin-bottom: 0; }
.main-vatting-stap { font-size: 0.9rem; line-height: 1.7; color: #2b2410; margin: 0; padding-top: 0.55rem; border-top: 1px solid #f0e3b8; }
.main-vatting-plek { margin: 0 0 0.65rem; padding: 0.7rem 0.9rem; background: #f5fbf7; border: 1px solid #bce6cf; border-radius: 8px; }
.main-vatting-plek-kop { font-family: var(--mono); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; color: #1c7a48; font-weight: 700; margin: 0 0 0.5rem; }
.mvp-regel { font-size: 0.89rem; line-height: 1.7; color: #21301f; margin: 0 0 0.45rem; }
.mvp-label { display: inline-block; font-family: var(--mono); font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.05em; color: #1c7a48; font-weight: 700; margin-right: 0.35rem; }
.mvp-lijstkop { display: block; margin: 0.6rem 0 0.3rem; }
.mvp-lijst { margin: 0 0 0.5rem; padding-left: 1.3rem; }
.mvp-lijst li { font-size: 0.88rem; line-height: 1.65; color: #21301f; margin-bottom: 0.32rem; }
.mvp-lijst li:last-child { margin-bottom: 0; }
.mvp-bewijs { margin: 0; padding-top: 0.5rem; border-top: 1px solid #d6ecdf; }
.main-vatting-letop { margin: 0 0 0.65rem; padding: 0.6rem 0.8rem; background: #fff5f5; border: 1px solid #f0c2c2; border-radius: 8px; }
.main-vatting-letop-kop { font-family: var(--mono); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; color: #9c2b2b; font-weight: 700; margin: 0 0 0.4rem; }
.main-vatting-letop ul { margin: 0; padding-left: 1.1rem; }
.main-vatting-letop li { font-size: 0.88rem; line-height: 1.65; color: #4a2020; margin-bottom: 0.3rem; }
.main-vatting-letop li:last-child { margin-bottom: 0; }

/* v0.53.0 — voorstellen die de CLI klaarzet */
#main-voorstellen:not(:empty) { max-width: 65.5rem; margin: 0 auto 1rem; background: #f2eeff; border: 1px solid #d3bdea; border-radius: 12px; padding: 0.8rem 1.05rem; }
.mv-kop { font-family: var(--mono); font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.06em; color: #5b3fc4; font-weight: 700; margin: 0 0 0.5rem; }
.mv-item { background: #fff; border: 1px solid #ddd3f8; border-radius: 9px; padding: 0.55rem 0.75rem; margin-bottom: 0.4rem; }
.mv-rij { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.mv-titel { flex: 1; min-width: 12rem; font-weight: 700; color: #1c1836; font-size: 0.93rem; }
.mv-neem { background: #7a4df5 !important; color: #fff !important; border-color: #7a4df5 !important; font-weight: 700; }
.mv-neem:hover { background: #6b3fd4 !important; }
.mv-weg { border: none; background: none; color: #8a86a8; cursor: pointer; font-size: 0.9rem; padding: 0 0.3rem; }
.mv-weg:hover { color: #b06; }
.mv-sub { font-size: 0.8rem; color: #6b6890; margin: 0.3rem 0 0; }
.main-notitie-cli { background: #f6f4ff; border-radius: 6px; padding: 0.2rem 0.4rem; margin-left: -0.4rem; }
.main-notitie-bron { font-family: var(--mono); font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.05em; color: #5b3fc4; background: #e6dcff; border-radius: 4px; padding: 0.05rem 0.3rem; margin-right: 0.25rem; }
details.main-thema { margin-bottom: 0.5rem; border: 1px solid #dbe8f5; border-radius: 8px; background: #fff; }
details.main-thema > summary { cursor: pointer; list-style: none; padding: 0.4rem 0.7rem; font-weight: 700; font-size: 0.86rem; color: #1b5a92; }
details.main-thema > summary::-webkit-details-marker { display: none; }
details.main-thema > summary::before { content: "▾ "; font-size: 0.75rem; }
details.main-thema:not([open]) > summary::before { content: "▸ "; }
.main-thema-n { font-family: var(--mono); font-size: 0.68rem; color: #fff; background: #1b5a92; border-radius: 999px; padding: 0.05rem 0.4rem; margin-left: 0.3rem; }
details.main-thema .main-notities { margin: 0 0 0.5rem 1.4rem; }
.mv-intro { font-size: 0.86rem; color: #4a4668; margin: 0 0 0.6rem; line-height: 1.65; }
.mv-neem { font-size: 0.9rem !important; padding: 0.4rem 1rem !important; }

/* v0.55.0 — M2MUC: tekst die al op de werkbank staat, herkenbaar op de bronpagina */
/* Geen zijstreep maar een zachte rand rondom — zelfde keuze als bij de
   MUC-markering op blokken (v0.48.1) en de GTM-balken (v0.43.1).          */
.m2muc-wrap { background: #fffaeb; border: 2px solid #e8c766; padding: 0.45rem 0.7rem; border-radius: 8px; box-shadow: 0 1px 4px rgba(201,162,39,0.18); }
.m2muc-chip { display: inline-block; font-family: var(--mono); font-size: 0.64rem; font-weight: 800; letter-spacing: 0.04em; color: #2a1f00; background: #f5c542; border: 1px solid #c9a227; border-radius: 5px; padding: 0.1rem 0.45rem; margin-right: 0.5rem; text-decoration: none; vertical-align: 0.1em; white-space: nowrap; }
.m2muc-chip:hover { background: #ffd75e; text-decoration: none; }

/* selectie-popup met twee knoppen + dossier-picker */
.main-sel-box { position: absolute; z-index: 9999; display: flex; flex-wrap: wrap; gap: 0.3rem; background: #fff; border: 1px solid #c9a227; border-radius: 10px; padding: 0.35rem; box-shadow: 0 6px 20px rgba(0,0,0,0.28); }
.main-sel-knop { font-size: 0.8rem; font-weight: 700; padding: 0.32rem 0.7rem; border-radius: 999px; cursor: pointer; border: 1px solid #c9a227; }
.main-sel-nieuw { background: #f5c542; color: #2a1f00; }
.main-sel-nieuw:hover { background: #ffd75e; }
.main-sel-link { background: #fff; color: #5b3fc4; border-color: #d3bdea; }
.main-sel-link:hover { background: #7a4df5; color: #fff; border-color: #7a4df5; }
.main-sel-picker { flex-basis: 100%; max-height: 240px; overflow-y: auto; margin-top: 0.2rem; }
.main-sel-pk, .main-sel-leeg { font-size: 0.76rem; color: #5b5b7a; margin: 0.2rem 0.3rem; }
.main-sel-optie { display: block; width: 100%; text-align: left; font-size: 0.82rem; padding: 0.35rem 0.5rem; border: none; background: none; cursor: pointer; color: #1c1836; border-radius: 6px; }
.main-sel-optie:hover { background: #f2eeff; }
.main-sel-nr { font-family: var(--mono); font-size: 0.66rem; font-weight: 800; color: #fff; background: #7a4df5; border-radius: 4px; padding: 0.05rem 0.35rem; margin-right: 0.3rem; }

/* v0.59.0 — leverplan-banner bovenaan elk MUC-dossier */
.main-leverplan { background: #eef6ff; border: 1px solid #9dc0e8; border-radius: 10px; padding: 0.75rem 0.95rem; margin: 0 0 0.9rem; }
.main-lp-kop { font-family: var(--mono); font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.06em; color: #1b3a92; font-weight: 700; margin: 0 0 0.5rem; }
.main-lp-tag { font-family: var(--mono); font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; color: #fff; background: #2335d8; border-radius: 5px; padding: 0.1rem 0.4rem; margin-right: 0.4rem; }
.main-lp-tag-test { background: #c48c14; }
.main-lp-vorm { font-size: 0.92rem; color: #1c1836; margin: 0 0 0.55rem; font-weight: 600; }
.main-lp-sub { font-family: var(--mono); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.05em; color: #5b6b80; margin: 0 0 0.2rem; }
.main-lp-lijst { margin: 0 0 0.55rem 1.2rem; padding: 0; }
.main-lp-lijst li { font-size: 0.89rem; color: #1c1836; line-height: 1.65; margin-bottom: 0.3rem; }
.main-lp-test { font-size: 0.88rem; color: #3a3556; line-height: 1.65; margin: 0; padding-top: 0.5rem; border-top: 1px dashed rgba(0,0,0,0.12); }
.main-notitie-vraag { border: none; background: none; color: #2335d8; cursor: pointer; font-size: 0.72rem; padding: 0 0.2rem; opacity: 0.7; }
.main-notitie-vraag:hover { opacity: 1; text-decoration: underline; }
.main-vraag-veld { margin: 0.4rem 0 0.2rem; }
.main-vraag-veld textarea { width: 100%; background: #fff !important; color: #1c1836 !important; border: 1px solid #b9d4ef; border-radius: 8px; padding: 0.4rem 0.55rem; font-size: 16px; font-family: inherit; margin-bottom: 0.3rem; }
.main-notitie-vraagregel { background: #eef6ff; border-radius: 6px; padding: 0.2rem 0.4rem; margin-left: -0.4rem; }
.main-notitie-vraagregel::marker { color: #2335d8; }

/* v0.61.0 — pauze + M2MUC-schakelaar */
details.main-item-pauze { opacity: 0.6; filter: grayscale(0.4); }
details.main-item-pauze .main-titel { text-decoration: line-through; text-decoration-color: rgba(0,0,0,0.3); }
.main-pauze-chip { font-family: var(--mono); font-size: 0.64rem; text-transform: uppercase; letter-spacing: 0.05em; color: #7a5c0e; background: #fff2c4; border: 1px solid #eed98a; border-radius: 5px; padding: 0.08rem 0.4rem; }
.main-pauze { background: #fff8e0 !important; color: #7a5c0e !important; border-color: #eed98a !important; }
.main-pauze:hover { background: #f5c542 !important; color: #2a1f00 !important; }
.main-pauze-teller { color: #8a6a12; font-weight: 600; }
.m2muc-toggle { position: fixed; right: 1rem; bottom: 1rem; z-index: 9998; font-size: 0.78rem; font-weight: 700; padding: 0.4rem 0.8rem; border-radius: 999px; border: 1px solid #c9a227; background: #f5c542; color: #2a1f00; cursor: pointer; box-shadow: 0 4px 14px rgba(0,0,0,0.28); }
.m2muc-toggle:hover { background: #ffd75e; }
body.m2muc-verborgen .m2muc-wrap { background: transparent; border-color: transparent; box-shadow: none; padding: 0; }
body.m2muc-verborgen .m2muc-chip { display: none; }

/* v0.62.0 — doctrine-blokken uit de GTM R4M-tab (Spine, Face, Eerlijk, Free/itsme, Lagen) */
.blok.doctrine { border-left: none; }
.spine-flow { background: #f3f6ff; border: 1px solid #cfd8f5; border-radius: 10px; padding: 0.8rem 1rem; font-family: var(--mono); font-size: 0.8rem; line-height: 1.7; color: #1b2a6b; overflow-x: auto; margin: 0.6rem 0; }
.face-lagen { margin: 0.3rem 0 0.6rem 1.1rem; }
.face-lagen li { margin-bottom: 0.35rem; line-height: 1.6; }
.face-lagen code, .plaat, code.plaat { font-family: var(--mono); background: #eef2ff; color: #2335d8; border-radius: 5px; padding: 0.08rem 0.4rem; }
.meeting-zin { background: #fff8e0; border: 1px solid #eed98a; border-radius: 10px; padding: 0.7rem 0.95rem; font-size: 0.95rem; color: #1c1836; margin: 0.7rem 0; }
.eerlijk-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; margin-top: 0.6rem; }
.eerlijk-kaart { background: #fff; border: 1px solid rgba(0,0,0,0.1); border-radius: 10px; padding: 0.7rem 0.85rem; }
.eerlijk-wel { background: #eef9f1; border-color: #bfe6cd; }
.eerlijk-niet { background: #fdf4ec; border-color: #eedcc6; }
.ek-chip { font-family: var(--mono); font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: #3a3556; }
.eerlijk-kaart p { font-size: 0.88rem; color: #1c1836; margin: 0.35rem 0 0; line-height: 1.6; }
.lagen-tabel { overflow-x: auto; margin-top: 0.6rem; }
.lagen-tabel table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.lagen-tabel th { text-align: left; font-family: var(--mono); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; color: #7a7799; padding: 0.4rem 0.5rem; border-bottom: 1px solid rgba(0,0,0,0.12); }
.lagen-tabel td { padding: 0.45rem 0.5rem; border-bottom: 1px solid rgba(0,0,0,0.08); color: #1c1836; vertical-align: top; }
.lagen-tabel td.mono { font-family: var(--mono); font-size: 0.78rem; color: #4a4668; }
@media (max-width: 640px) { .eerlijk-grid { grid-template-columns: 1fr; } }


/* v0.64.0 — 4 InteGraTabs: analyse-werkbank */
body.deelkleur-it { --deelkleur: #9a6bd8; }
.it-status { font-family: var(--mono); font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; border-radius: 5px; padding: 0.12rem 0.45rem; margin-left: 0.4rem; }
.it-done { background: #e4f7ec; color: #1c7a48; border: 1px solid #bce6cf; }
.it-todo { background: #f0efff; color: #5b3fc4; border: 1px solid #d8c8ff; }
.it-skip { background: #fdf4ec; color: #8a5a1b; border: 1px solid #eedcc6; }
.it-crypto { background: #fff2c4; color: #7a5c0e; border: 1px solid #eed98a; }
.it-waar { font-size: 0.82rem; color: #2335d8; margin: 0.2rem 0 0.5rem; }
.it-waar.it-niet { color: #8a6a12; }
.it-waar a { color: #2335d8; font-weight: 600; }
.v-verwant { font-size: 0.82rem; color: #4a4668; margin: 0.35rem 0 0; padding-top: 0.35rem; border-top: 1px dashed rgba(0,0,0,0.1); }
.v-verwant .v-link { color: #2335d8; }
.it-tag { display: inline-block; font-family: var(--mono); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.03em; color: #6b3fd4; background: #f2eeff; border: 1px solid #d8c8ff; border-radius: 5px; padding: 0.1rem 0.45rem; margin-left: 0.4rem; text-decoration: none; vertical-align: 0.08em; white-space: nowrap; }
.it-tag:hover { background: #6b3fd4; color: #fff; border-color: #6b3fd4; text-decoration: none; }
.doctrine-vak { background: #f7f4ff; border: 1px solid #ddd3f8; border-radius: 10px; padding: 0.65rem 0.9rem; margin: 0.6rem 0; }
.dv-kop { font-family: var(--mono); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; color: #5b3fc4; margin: 0 0 0.3rem; }
.doctrine-vak p:not(.dv-kop) { font-size: 0.9rem; color: #1c1836; margin: 0; line-height: 1.65; }
.main-sel-nieuw-dossier { color: #1c7a48 !important; font-weight: 700; }
.main-sel-nieuw-dossier:hover { background: #e4f7ec !important; }

/* v0.73.0 — juridische lagen: chips op de vragenblokken + filterbalk */
.laag-chip { display: inline-block; font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.04em; padding: 0.1rem 0.42rem; border-radius: 999px; text-decoration: none; font-weight: 700; margin-left: 0.45rem; white-space: nowrap; vertical-align: middle; }
.laag-chip.laag-t1 { background: #0f5f66; color: #f2fcfd !important; }
.laag-chip.laag-t2 { background: #1c7a48; color: #f5fbf7 !important; }
.laag-chip.laag-t3 { background: #1b5a92; color: #f2f8fd !important; }
.laag-chip.laag-t4 { background: #8a6a12; color: #fffdf5 !important; }
.laag-chip.laag-t5 { background: #7a3b8f; color: #fdf6ff !important; }
.laag-chip.laag-dw { background: #6b6b6b; color: #fafafa !important; }
.laag-chip:hover { filter: brightness(1.15); }
.laag-filter { margin: 0 0 1rem; padding: 0.85rem 1rem; background: #f2f6fb; border: 1px solid #cfe2f7; border-radius: 10px; }
.lf-kop { font-family: var(--mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: #1b5a92; font-weight: 700; margin: 0 0 0.55rem; }
.lf-knoppen { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-bottom: 0.5rem; }
.lf-knop { font-size: 0.82rem; padding: 0.26rem 0.65rem; border-radius: 999px; border: 1px solid #b9d4ee; background: #fff; color: #1b5a92; cursor: pointer; font-family: inherit; }
.lf-knop:hover { border-color: #1b5a92; }
.lf-knop.aan { background: #1b5a92; color: #fff; border-color: #1b5a92; font-weight: 700; }
.lf-uitleg { font-size: 0.86rem; line-height: 1.65; color: #2c3e50; margin: 0; }

/* v0.74.0 — hoe je het bij de klant binnenbrengt */
.main-vatting-aanpak { margin: 0 0 0.65rem; padding: 0.7rem 0.9rem; background: #f7f4ff; border: 1px solid #d9cdf2; border-radius: 8px; }
.mva-kop { font-family: var(--mono); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; color: #5b3fc4; font-weight: 700; margin: 0 0 0.5rem; }
.mva-regel { font-size: 0.89rem; line-height: 1.7; color: #241f38; margin: 0 0 0.45rem; }
.mva-regel:last-child { margin-bottom: 0; }
.mva-label { display: inline-block; font-family: var(--mono); font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.05em; color: #5b3fc4; font-weight: 700; margin-right: 0.35rem; }
.mva-opening { padding: 0.55rem 0.75rem; background: #fff; border: 1px solid #d9cdf2; border-radius: 6px; font-style: italic; }
.mva-niet .mva-label { color: #9c2b2b; }

/* v0.75.0 — de lagen als inklapbare kaarten: eerst de structuur, dan de diepte */
.laag-blok { background: #fff; border: 1px solid #d9d3ea; border-radius: 12px; margin-bottom: 0.6rem; overflow: hidden; }
.laag-blok[open] { border-color: #b9afd8; }
.laag-summary { cursor: pointer; padding: 0.7rem 0.95rem; list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.55rem; }
.laag-summary::-webkit-details-marker { display: none; }
.laag-summary::before { content: "▸"; color: #7a4df5; font-size: 0.8rem; flex: none; }
.laag-blok[open] > .laag-summary::before { content: "▾"; }
.laag-summary:hover { background: #faf8ff; }
.lb-titel { font-weight: 700; color: #1c1836; font-size: 0.99rem; flex: 1 1 14rem; }
.lb-badges { display: inline-flex; flex-wrap: wrap; gap: 0.3rem; }
.laag-body { padding: 0 0.95rem 0.9rem; border-top: 1px solid #eee9f7; }
.laag-body > p:first-child { margin-top: 0.7rem; }
.laag-knoppen { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0 0 0.7rem; }
body.deelkleur-lagen { --deelkleur: #b39bff; }

/* v0.77.0 — de lagen visueel: een ladder die stapelt + een matrix die toont
   welke dwarsdimensie op welke trede speelt. Tekst beschrijft, dit toont. */
.ladder { margin: 0 0 1.4rem; }
.ladder-rij { display: grid; grid-template-columns: 8.5rem 1fr; gap: 0.7rem; align-items: center; margin-bottom: 0.4rem; }
.ladder-naam { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.04em; color: #4a4468; text-align: right; line-height: 1.35; }
.ladder-naam strong { display: block; font-size: 0.78rem; color: #1c1836; }
.ladder-balk { display: flex; gap: 2px; height: 2.5rem; }
.lb-seg { flex: 1; border-radius: 4px; display: flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: 0.62rem; color: #fff; letter-spacing: 0.03em; overflow: hidden; white-space: nowrap; }
.lb-seg.leeg { background: #ece8f6; }
.lb-t1 { background: #4a9d6e; } .lb-t2 { background: #1c7a48; }
.lb-t3 { background: #1b5a92; } .lb-t4 { background: #8a6a12; } .lb-t5 { background: #7a3b8f; }
.ladder-legenda { font-size: 0.84rem; color: #3a3556; line-height: 1.6; margin: 0.5rem 0 0; }
.ladder-hier { display: inline-block; background: #1c7a48; color: #fff; font-family: var(--mono); font-size: 0.62rem; padding: 0.1rem 0.4rem; border-radius: 999px; letter-spacing: 0.04em; }

.matrix-wrap { overflow-x: auto; margin: 0 0 1rem; -webkit-overflow-scrolling: touch; }
table.matrix { border-collapse: collapse; width: 100%; min-width: 46rem; font-size: 0.85rem; }
table.matrix th, table.matrix td { border: 1px solid #ddd6ef; padding: 0.45rem 0.55rem; text-align: left; vertical-align: top; }
table.matrix thead th { background: #f2eeff; font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.04em; text-transform: uppercase; color: #3f3663; font-weight: 700; text-align: center; }
table.matrix thead th:first-child { text-align: left; min-width: 13rem; }
table.matrix tbody th { background: #faf8ff; font-weight: 600; color: #1c1836; font-size: 0.86rem; }
table.matrix td { text-align: center; font-size: 1rem; }
table.matrix tbody tr:hover th, table.matrix tbody tr:hover td { background: #f7f4ff; }
.mx-ja { color: #1c7a48; font-weight: 700; }
.mx-nee { color: #b9b2cc; }
.mx-soms { color: #8a6a12; font-weight: 700; }
.matrix-uitleg { font-size: 0.85rem; line-height: 1.7; color: #3a3556; margin: 0; }
.matrix-uitleg span { font-weight: 700; }

/* v0.78.0 — per trede één kolom met alles wat daar speelt. Dimensies mogen
   gerust in meerdere kolommen terugkomen: dat ís de werkelijkheid. */
.tredes { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.55rem; margin: 0 0 1rem; }
@media (max-width: 60rem) { .tredes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 34rem) { .tredes { grid-template-columns: 1fr; } }
.tk { border: 1px solid #ddd6ef; border-radius: 10px; overflow: hidden; background: #fff; display: flex; flex-direction: column; }
.tk-hier { border-color: #1c7a48; box-shadow: 0 0 0 2px rgba(28,122,72,0.13); }
.tk-kop { padding: 0.5rem 0.6rem; color: #fff; }
.tk-1 { background: #4a9d6e; } .tk-2 { background: #1c7a48; } .tk-3 { background: #1b5a92; }
.tk-4 { background: #8a6a12; } .tk-5 { background: #7a3b8f; }
.tk-nr { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.05em; opacity: 0.9; display: block; }
.tk-naam { font-weight: 700; font-size: 0.88rem; line-height: 1.3; display: block; margin-top: 0.1rem; }
.tk-body { padding: 0.55rem 0.6rem; flex: 1; }
.tk-label { font-family: var(--mono); font-size: 0.58rem; text-transform: uppercase; letter-spacing: 0.05em; color: #6b6890; display: block; margin: 0 0 0.25rem; }
.tk-recht { font-size: 0.8rem; line-height: 1.5; color: #1c1836; margin: 0 0 0.6rem; font-weight: 600; }
.tk-dims { list-style: none; margin: 0; padding: 0; }
.tk-dims li { font-size: 0.76rem; line-height: 1.45; margin-bottom: 0.25rem; }
.tk-dims a { color: #3a3556; text-decoration: none; display: block; padding: 0.16rem 0.35rem; border-radius: 5px; border: 1px solid #e8e3f5; }
.tk-dims a:hover { background: #f5f1ff; border-color: #c9bce8; }
.tk-dims li.nieuw a { border-color: #bce6cf; background: #f5fbf7; font-weight: 600; }
.tk-dims li.voorwaarde a { border-color: #eed98a; background: #fffdf5; }
.tk-nieuwvlag { font-family: var(--mono); font-size: 0.54rem; color: #1c7a48; letter-spacing: 0.04em; }
.tk-voet { padding: 0.4rem 0.6rem; border-top: 1px solid #eee9f7; font-size: 0.73rem; color: #6b6890; line-height: 1.45; }
.tk-hier .tk-voet { background: #f5fbf7; color: #1c7a48; font-weight: 600; }

/* v0.78.0 — elke dwarsdimensie een eigen kleur, zodat je hem over de kolommen
   heen herkent. Dezelfde kleur in de kolommen, de matrix en de kaarten. */
.d1 { --dk: #c2410c; } .d2 { --dk: #0369a1; } .d3 { --dk: #7c3aed; } .d4 { --dk: #b45309; }
.d5 { --dk: #0f766e; } .d6 { --dk: #be123c; } .d7 { --dk: #4d7c0f; } .d8 { --dk: #a21caf; }
.tk-dims a { border-color: var(--dk, #e8e3f5); }
.dim-stip { display: inline-block; width: 0.62rem; height: 0.62rem; border-radius: 50%; background: var(--dk); margin-right: 0.35rem; vertical-align: -0.02rem; flex: none; }
table.matrix tbody th .dim-stip { vertical-align: 0.02rem; }
.laag-blok.dim { border-color: var(--dk, #d9d3ea); }
.laag-blok.dim > .laag-summary::before { color: var(--dk, #7a4df5); }
.dim-legenda { display: flex; flex-wrap: wrap; gap: 0.3rem 0.7rem; margin: 0 0 0.9rem; font-size: 0.78rem; }
.dim-legenda span { display: inline-flex; align-items: center; color: #3a3556; }

/* v0.78.0 — de mindmap: de hele structuur in één beeld */
.mindmap-wrap { overflow-x: auto; margin: 0 0 1.2rem; -webkit-overflow-scrolling: touch; }
.mindmap { width: 100%; min-width: 44rem; height: auto; display: block; }
.mm-titel { font-family: var(--mono); font-size: 13px; letter-spacing: 0.05em; fill: #3f3663; font-weight: 700; }
.mm-nr { font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em; fill: rgba(255,255,255,0.85); }
.mm-naam { font-size: 15px; font-weight: 700; fill: #fff; }
.mm-sub { font-family: var(--mono); font-size: 10px; fill: rgba(255,255,255,0.9); letter-spacing: 0.03em; }
.mm-hier { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.05em; fill: #1c7a48; font-weight: 700; }
.mm-bandtitel { font-family: var(--mono); font-size: 11px; letter-spacing: 0.05em; fill: #5b3fc4; font-weight: 700; }
.mm-klein { font-size: 12.5px; fill: #4a4468; }
.mm-dimtxt { font-size: 13px; fill: #241f38; font-weight: 600; }

/* v0.79.0 — de techniekkaart: wat eerst moet, wat erop staat, en welke vorm de
   klant aanraakt. Drie verdiepingen, want de volgorde ís het punt. */
.tk-vloer { border: 1px solid #ddd6ef; border-radius: 10px; padding: 0.75rem 0.9rem; margin-bottom: 0.55rem; background: #fff; }
.tkv-kop { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem; margin: 0 0 0.15rem; }
.tkv-nr { font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.05em; color: #fff; background: #5b3fc4; padding: 0.12rem 0.45rem; border-radius: 999px; }
.tkv-titel { font-weight: 700; color: #1c1836; font-size: 0.95rem; }
.tkv-uitleg { font-size: 0.85rem; line-height: 1.65; color: #3a3556; margin: 0.2rem 0 0.55rem; }
.tkv-items { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.tkv-item { font-size: 0.79rem; padding: 0.22rem 0.6rem; border-radius: 7px; border: 1px solid #ddd6ef; background: #fafafa; color: #3a3556; }
.tkv-item.draait { border-color: #bce6cf; background: #f5fbf7; color: #17603a; }
.tkv-item.ontbreekt { border-color: #f0c2c2; background: #fff5f5; color: #9c2b2b; font-weight: 600; }
.tkv-item.later { border-color: #eed98a; background: #fffdf5; color: #7a5c10; }
.tkv-item b { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.04em; display: block; opacity: 0.85; font-weight: 700; }
.tkv-blok { text-align: center; font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.05em; color: #9c95b8; margin: 0.1rem 0 0.55rem; }
.mvp-stekker { background: #fff; border: 1px solid #d6ecdf; border-radius: 6px; padding: 0.5rem 0.7rem; }

/* v0.79.1 — LEESBAARHEIDSFIX. De tekening, de balken en de legenda's stonden
   met donkere tekst rechtstreeks op de donkere pagina-achtergrond. Ze krijgen
   nu een lichte kaart, zodat de kleuren doen wat ze moeten doen. */
.mindmap-wrap { background: #fff; border: 1px solid #d9d3ea; border-radius: 12px; padding: 0.9rem 1rem; }
.ladder { background: #fff; border: 1px solid #d9d3ea; border-radius: 12px; padding: 0.9rem 1rem 1rem; }
.dim-legenda { background: #fff; border: 1px solid #d9d3ea; border-radius: 10px; padding: 0.7rem 0.9rem; }
.matrix-wrap { background: #fff; border: 1px solid #d9d3ea; border-radius: 12px; padding: 0.7rem 0.8rem; }
table.matrix { min-width: 44rem; }
/* losse uitleg-alinea's staan wél op de donkere pagina: die moeten licht zijn */
.deel .ladder-legenda, .deel .matrix-uitleg { color: #e6e1f5; }
.deel .ladder-legenda strong, .deel .matrix-uitleg strong { color: #fff; }
.deel .ladder-legenda em, .deel .matrix-uitleg em { color: #f0ecff; }
/* binnen een lichte kaart blijft de tekst donker */
.ladder .ladder-legenda, .mindmap-wrap .ladder-legenda { color: #3a3556; }
.tkv-blok { color: #cfc7e8; }

/* v0.80.0 — in de KOP van elk dossier: op welke trede het zit en wat je er
   technisch brengt. Zichtbaar bij het scannen, niet pas na drie keer openklappen. */
.main-trede { display: inline-block; font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.04em; background: #1c7a48; color: #fff; padding: 0.14rem 0.45rem; border-radius: 999px; font-weight: 700; margin-right: 0.3rem; white-space: nowrap; }
.main-stekkerchip { display: inline-block; font-size: 0.74rem; background: #f2f6fb; color: #1b5a92; border: 1px solid #b9d4ee; padding: 0.12rem 0.5rem; border-radius: 999px; font-weight: 600; margin-right: 0.3rem; white-space: nowrap; }

/* v0.80.1 — actieve navigatiekleur voor de twee tabs die er nog geen hadden.
   Zonder deze regel vielen ze terug op de flauwe standaardkleur. */
.world-cyclorama .site-nav a.actief[href^="lagen"] {
  color: #1a0f38; background: #b39bff; border-color: #b39bff; font-weight: 700;
}
.world-cyclorama .site-nav a.actief[href^="integratabs"] {
  color: #1a0f38; background: #c3a6f0; border-color: #c3a6f0; font-weight: 700;
}

/* v0.81.0 — inklapbare tekstblokken: eerst het beeld, de uitleg op aanvraag */
.vouwtekst { margin: 0 0 0.7rem; }
.vouwtekst-kop { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 0.4rem;
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.04em; color: #1a0f38;
  background: #cfc4f0; border: 1px solid #b3a3e0; border-radius: 999px; padding: 0.3rem 0.8rem; font-weight: 700; }
.vouwtekst-kop::-webkit-details-marker { display: none; }
.vouwtekst-kop::before { content: "▸"; }
.vouwtekst[open] > .vouwtekst-kop::before { content: "▾"; }
.vouwtekst-kop:hover { background: #ddd4f7; }
.vouwtekst > *:not(summary) { margin-top: 0.5rem; }

/* v0.83.0 — vangnet: ook zonder JS moet ingeklapte inhoud mee de PDF in */
@media print {
  details > summary { list-style: none; }
  details:not([open]) > *:not(summary) { display: block !important; }
  .laag-blok, .vouwtekst { break-inside: avoid; }
  /* Papier klapt niet open of dicht: geen ▾-driehoekjes en geen knoppenbalk.
     De [open]-varianten staan er expliciet bij, anders wint hun specificiteit
     en blijft het driehoekje toch in de PDF staan. (herstel wo9) */
  .laag-blok > .laag-summary::before, .laag-blok[open] > .laag-summary::before,
  .vouwtekst > .vouwtekst-kop::before, .vouwtekst[open] > .vouwtekst-kop::before,
  details.kaart-waarom[open] summary::before,
  details.gtm-case[open] > summary::before,
  details.main-item[open] > summary::before,
  details.main-thema > summary::before { content: "" !important; }
  .laag-knoppen { display: none !important; }
}
.pdf-stempel { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.03em; color: rgba(255,255,255,0.62); align-self: center; margin-left: 0.2rem; }
.pdf-stempel strong { color: rgba(255,255,255,0.88); }
@media print { .pdf-stempel { color: #333 !important; } .pdf-stempel strong { color: #000 !important; } }

/* v0.86.0 — de inbox op InteGraTabs: materiaal dat nog getoetst moet worden */
.inbox-blok { max-width: 65.5rem; margin: 1.4rem auto 0; background: #fff; border: 1px solid #d9d3ea; border-radius: 12px; padding: 1rem 1.15rem; }
.inbox-uitleg { font-size: 0.88rem; line-height: 1.7; color: #3a3556; margin: 0 0 0.8rem; }
.inbox-leeg { font-size: 0.88rem; color: #6b6890; font-style: italic; margin: 0 0 0.8rem; line-height: 1.7; }
.inbox-item { border: 1px solid #ddd6ef; border-radius: 10px; padding: 0.6rem 0.75rem; margin-bottom: 0.5rem; background: #faf8ff; }
.inbox-kop { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: baseline; margin-bottom: 0.4rem; }
.inbox-titel { font-weight: 700; color: #1c1836; flex: 1; min-width: 10rem; }
.inbox-datum { font-family: var(--mono); font-size: 0.66rem; color: #6b6890; }
.inbox-statusrij { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-bottom: 0.45rem; }
.inbox-statusknop { font-size: 0.75rem; padding: 0.16rem 0.5rem; border-radius: 999px; border: 1px solid #d3bdea; background: #fff; color: #5b3fc4; cursor: pointer; }
.inbox-statusknop.aan { background: #5b3fc4; color: #fff; border-color: #5b3fc4; font-weight: 600; }
.inbox-tekst > summary { cursor: pointer; font-size: 0.8rem; color: #5b3fc4; }
.inbox-tekst pre { white-space: pre-wrap; word-break: break-word; font-size: 0.8rem; line-height: 1.6; background: #fff; border: 1px solid #e8e3f5; border-radius: 8px; padding: 0.6rem 0.75rem; margin: 0.4rem 0 0; color: #241f38; }
.inbox-acties { margin: 0.45rem 0 0; }
.inbox-weg { font-size: 0.75rem; padding: 0.16rem 0.5rem; border-radius: 6px; border: 1px solid #f0c2c2; background: #fff5f5; color: #9c2b2b; cursor: pointer; }
.inbox-invoer { border-top: 1px solid #eee9f7; padding-top: 0.8rem; margin-top: 0.6rem; }
.inbox-veld { display: block; margin-bottom: 0.55rem; }
.inbox-veld span { display: block; font-family: var(--mono); font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.05em; color: #6b6890; margin-bottom: 0.2rem; }
.inbox-veld input, .inbox-veld textarea { width: 100%; background: #fff; color: #1c1836; border: 1px solid #d9d3ea; border-radius: 8px; padding: 0.45rem 0.6rem; font-size: 16px; font-family: inherit; }
.inbox-knop { background: #5b3fc4; color: #fff; border: 1px solid #5b3fc4; border-radius: 8px; padding: 0.4rem 0.9rem; font-weight: 700; cursor: pointer; font-family: inherit; }
body.deelkleur-depot { --deelkleur: #d4a24c; }
.world-cyclorama .site-nav a[href^="depot"] { color: #ffbe6a; background: rgba(240,160,60,0.12); border: 1px solid rgba(240,160,60,0.34); }
.world-cyclorama .site-nav a.actief[href^="depot"] { color: #2a1500; background: #e8bd7a; border-color: #e8bd7a; font-weight: 700; }
.depot-citaat { margin: 0 0 1rem; padding: 0.9rem 1.1rem; background: #fff; border: 1px solid #d9d3ea; border-radius: 10px; font-size: 0.95rem; line-height: 1.75; color: #1c1836; font-style: italic; }

/* v0.89.1 — LEESBAARHEID: een lichte kaart moet altijd donkere tekst hebben.
   Zonder deze regel erft een paneel de lichte paginakleur en wordt het
   onleesbaar op de donkere achtergrond. */
.lijst-paneel { color: #1c1836; }
.lijst-paneel p, .lijst-paneel li, .lijst-paneel dd, .lijst-paneel dt { color: #1c1836; }
.lijst-paneel .lijst-noot { color: #3a3556; }
.lijst-paneel strong { color: #0f0b23; }
.lijst-paneel a { color: #5b3fc4; }

/* v0.91.1 — STRUCTURELE LEESBAARHEIDSREGEL.
   Oorzaak van een terugkerende fout: de pagina heeft lichte tekst op een donkere
   achtergrond, maar losse kaarten hebben een WITTE achtergrond. Zonder eigen
   kleur erft de tekst daar de lichte paginakleur en wordt ze onleesbaar.
   Hier staat het één keer goed voor élke lichte kaart, zodat het niet telkens
   opnieuw per blok gerepareerd moet worden. */
.laag-blok, .laag-body, .laag-summary,
.g-simpel, .definitie, .lijst-paneel, .inbox-blok, .inbox-item,
.tk-vloer, .mindmap-wrap, .ladder, .matrix-wrap, .dim-legenda,
.main-vatting, .depot-citaat, .vouwtekst > *:not(summary) {
  color: #1c1836;
}
.laag-blok p, .laag-body p, .laag-body li, .laag-body dd, .laag-body dt,
.g-simpel p, .definitie p, .inbox-blok p, .tk-vloer p,
.main-vatting p, .main-vatting li {
  color: #1c1836;
}
.laag-body .lijst-noot, .laag-blok .lijst-noot, .g-simpel .lijst-noot,
.lijst-paneel .lijst-noot, .tk-vloer .lijst-noot {
  color: #3a3556;
}
.laag-blok strong, .laag-body strong, .g-simpel strong, .definitie strong,
.lijst-paneel strong, .inbox-blok strong, .tk-vloer strong { color: #0f0b23; }
.laag-blok em, .laag-body em, .g-simpel em, .lijst-paneel em { color: #2b2647; }
.laag-blok a, .laag-body a, .g-simpel a, .inbox-blok a, .tk-vloer a { color: #5b3fc4; }
.lb-titel, .lb-badges { color: #1c1836; }
/* de voettekst stond op 3,48 — te laag om comfortabel te lezen */
.site-footer .footer-note { color: rgba(255,255,255,0.78); }

/* 🆔 ID account — eigen deelkleur (teal), zelfde patroon als depot */
body.deelkleur-ida { --deelkleur: #3fb8a6; }
.world-cyclorama .site-nav a[href^="id-account"] { color: #6fe6d2; background: rgba(63,184,166,0.12); border: 1px solid rgba(63,184,166,0.34); }
.world-cyclorama .site-nav a.actief[href^="id-account"] { color: #00251f; background: #7fe9d8; border-color: #7fe9d8; font-weight: 700; }

/* Radar-ronde: bronvermelding per regel (audit 14-08-2026 — elke claim draagt zijn bron) */
/* wo11 · C5b — afvinkstatus per radar-opdracht. Kleuren bewust uit de bestaande
   palet-set van deze site (vok-groen #3ecf8e, vok-amber #f5b83d): dit is een
   nieuw element, geen nieuwe kleurtaal. De opsmukronde staat los. */
.radar-status {
  display: inline-block; font-family: var(--mono); font-size: 0.7rem; font-weight: 800;
  letter-spacing: 0.05em; border-radius: 6px; padding: 0.1rem 0.5rem; white-space: nowrap;
}
.radar-open  { background: #f5b83d; color: #1f1503; }
.radar-klaar { background: #3ecf8e; color: #04140c; }
@media print { .radar-open { background: #eee !important; color: #111 !important; }
               .radar-klaar { background: #eee !important; color: #111 !important; } }
.radar-bron { display: inline-block; margin-left: 0.35rem; font-size: 0.78rem; white-space: nowrap; }
.radar-bron a { color: #5a3fd0; text-decoration: underline; text-underline-offset: 2px; }
.radar-bron a:hover { color: #3a1f9e; }
.gtm-teller-label { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.75; }

/* ─────────────────────────────────────────────────────────────────────────
   LEESBAARHEIDSVLOER OP LICHTE CONTAINERS — structureel, niet per geval.
   Gemeten 14-08-2026: 346 tekstplekken stonden op bijna-witte tekst op een
   witte kaart (contrast tot 1.11). Oorzaak is altijd dezelfde: een lichte
   kaart erft de lichte tekstkleur van de donkere pagina eromheen. Deze regel
   zet de vloer per container in plaats van per element, zodat een nieuw blok
   in zo'n kaart het probleem niet opnieuw meebrengt.
   ───────────────────────────────────────────────────────────────────────── */
.wzw-kaart, .gtm-case, .strategie-blok, .vb-overzicht,
.vraagblok-body, .vraag-balk.vb-amber, .bril-rij {
  color: #241f47;
}
.wzw-kaart p, .wzw-kaart li, .wzw-kaart dd, .wzw-kaart dt, .wzw-kaart span,
.gtm-case p, .gtm-case li, .gtm-case span, .gtm-case td, .gtm-case th,
.strategie-blok p, .vb-overzicht p, .vb-overzicht li, .vb-overzicht span,
.vraagblok-body p, .vraagblok-body li, .vraagblok-body span,
.vraag-balk.vb-amber, .vraag-balk.vb-amber span,
.bril-rij, .bril-rij span, .bril-rij a { color: #241f47; }
.wzw-kaart strong, .gtm-case strong, .strategie-blok strong,
.vb-overzicht strong, .vraagblok-body strong, .vraag-balk.vb-amber strong,
.bril-rij strong { color: #14102e; }
.wzw-kaart em, .gtm-case em, .vraagblok-body em { color: #3d3766; }
/* Panelen met een lichte eigen achtergrond binnen een donkere pagina: tekstvloer.
   Los van de containerregel hierboven, want deze krijgen hun achtergrond inline. */
.sl-sectie .lijst-noot[style*="#fff5f5"],
.sl-sectie .lijst-noot[style*="fff5f5"] { color: #5c1512; }
.sl-sectie .lijst-noot[style*="fff5f5"] strong { color: #7a1c17; }
/* Overzichtspanelen zijn licht: alles erin krijgt de donkere vloer, ook labels
   die elders wit zijn (.cue-label) en losse tellers zonder eigen klasse. */
.vb-overzicht, .vb-overzicht * { color: #241f47; }
.vb-overzicht strong, .vb-overzicht .cue-label { color: #14102e; }
.vb-overzicht a { color: #5a3fd0; }

/* ─────────────────────────────────────────────────────────────────────────
   HOOFDOORZAAK VAN DE ONLEESBARE LABELS (gevonden 14-08-2026).
   Regel 942, `body[class*="deelkleur-"] .cue-label { color:#ffffff }`, is
   bedoeld voor labels op de donkere pagina-achtergrond, maar overstemt door
   zijn specificiteit óók elke .cue-label die in een LICHT paneel staat —
   wit op wit, contrast 1.00. Dezelfde oorzaak trof .dash-sub en .meeting-zin.
   Deze regels matchen die specificiteit en zetten de vloer terug.
   ───────────────────────────────────────────────────────────────────────── */
body[class*="deelkleur-"] .vb-overzicht .cue-label,
body[class*="deelkleur-"] .nele-paneel .cue-label,
body[class*="deelkleur-"] .uc-overzicht-paneel .cue-label,
body[class*="deelkleur-"] .dash-sub .cue-label,
body[class*="deelkleur-"] .meeting-zin .cue-label,
body[class*="deelkleur-"] .inbox-blok .cue-label,
body[class*="deelkleur-"] .strategie-blok .cue-label,
body[class*="deelkleur-"] .g-simpel .cue-label,
body[class*="deelkleur-"] .gtm-paneel .cue-label,
body[class*="deelkleur-"] .lu-inhoud .cue-label { color: #14102e; opacity: 1; }

body[class*="deelkleur-"] .vb-overzicht,
body[class*="deelkleur-"] .vb-overzicht *,
body[class*="deelkleur-"] .strategie-blok,
body[class*="deelkleur-"] .strategie-blok *,
body[class*="deelkleur-"] .meeting-zin,
body[class*="deelkleur-"] .meeting-zin *,
body[class*="deelkleur-"] .inbox-blok,
body[class*="deelkleur-"] .inbox-blok *,
body[class*="deelkleur-"] .dash-sub,
body[class*="deelkleur-"] .dash-sub * { color: #241f47; }

body[class*="deelkleur-"] .vb-overzicht strong,
body[class*="deelkleur-"] .strategie-blok strong,
body[class*="deelkleur-"] .meeting-zin strong,
body[class*="deelkleur-"] .inbox-blok strong,
body[class*="deelkleur-"] .dash-sub strong { color: #14102e; }

body[class*="deelkleur-"] .vb-overzicht a,
body[class*="deelkleur-"] .strategie-blok a,
body[class*="deelkleur-"] .meeting-zin a,
body[class*="deelkleur-"] .inbox-blok a,
body[class*="deelkleur-"] .dash-sub a { color: #5a3fd0; }

body[class*="deelkleur-"] .dash-sub p,
body[class*="deelkleur-"] .dash-sub li { color: #2e2952; }
/* Laatste resten uit de contrastmeting van 14-08-2026: statuskleuren, links en
   grijstinten die op een licht paneel te bleek werden. Kleuren blijven herkenbaar
   (amber blijft amber), alleen donker genoeg om te lezen. */
body[class*="deelkleur-"] .vb-overzicht span[style*="245, 184"],
body[class*="deelkleur-"] .vb-overzicht span { color: #4a3a10; }
body[class*="deelkleur-"] .g-simpel a,
body[class*="deelkleur-"] .definitie a,
body[class*="deelkleur-"] .lijst-paneel a { color: #4b2fbd; }
body[class*="deelkleur-"] .gtm-paneel .main-filterkop,
body[class*="deelkleur-"] .lu-inhoud .lu-groep { color: #4a4570; }
body[class*="deelkleur-"] .mv-item .mv-weg { color: #6b6690; }
/* Noot onder de Nele-agenda die uitlegt hoe 21 en 8 zich verhouden. */
.nele-paneel .nele-agenda-noot { margin: 0.4rem 0 0; font-size: 0.82rem; line-height: 1.6; color: #2e2952; }
body[class*="deelkleur-"] .nele-paneel .nele-agenda-noot { color: #2e2952; }
body[class*="deelkleur-"] .nele-paneel .nele-agenda-noot strong { color: #14102e; }
/* Harde stopmarkering op een klantdossier dat nog niet de deur uit mag. */
.kl-stop { display:inline-block; background:#b3261e; color:#fff; font-weight:700; padding:0.15rem 0.5rem; border-radius:6px; margin-right:0.35rem; }
/* Ankercijfer dat nooit tegen een primaire bron is gelegd. Zichtbaar, niet weggemoffeld. */
.onbevestigd { display:inline-block; font-size:0.7rem; font-family:var(--mono); text-transform:uppercase; letter-spacing:0.06em;
  background:#fff1c9; color:#7a5a00; border:1px solid #e0c56a; border-radius:5px; padding:0.02rem 0.35rem; margin-left:0.25rem; vertical-align:middle; }

/* ═══════════════════════════════════════════════════════════════════════════
   WERKORDER 6 (v0.91.0, 14-08-2026) — DUIDELIJKHEID
   Structuur boven stijl: conclusie eerst, bewijs eronder, expertmateriaal in
   een uitklapper. Niets van de bestaande opmaak is vervangen; dit komt erbij.
   ═══════════════════════════════════════════════════════════════════════════ */

/* (A1) De drie-zinnen-kop. Staat direct onder "Je bent hier" op élke pagina:
   wat is dit · voor wie · wat moet je hier doen. Geen enkele pagina mag nog
   met een logboeknotitie of een tabel beginnen. */
.pagina-kop {
  border: 1px solid rgba(125, 146, 255, 0.4);
  border-left: 4px solid #7d92ff;
  background: rgba(10, 43, 255, 0.13);
  border-radius: 10px;
  padding: 0.75rem 1rem;
  margin: 0.4rem 0 1.1rem;
  max-width: 82ch;
}
.pagina-kop p { margin: 0 0 0.35rem; font-size: 0.92rem; line-height: 1.65; color: #e6eaff; }
.pagina-kop p:last-child { margin-bottom: 0; }
.pagina-kop .pk-wat strong { color: #fff; }
.pagina-kop .pk-doen { font-weight: 600; color: #d9d4ff; }
.pagina-kop .pk-label {
  display: inline-block; font-family: var(--mono); font-size: 0.64rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: #7d92ff; margin-right: 0.45rem;
}
body[class*="deelkleur-"] .pagina-kop { background: #eef0ff; border-color: #b9c0f0; border-left-color: var(--deelkleur, #4b2fbd); }
body[class*="deelkleur-"] .pagina-kop p { color: #23204a; }
body[class*="deelkleur-"] .pagina-kop .pk-wat strong,
body[class*="deelkleur-"] .pagina-kop .pk-doen { color: #14102e; }
body[class*="deelkleur-"] .pagina-kop .pk-label { color: #4b2fbd; }
body[class*="deelkleur-"] .pagina-kop a { color: #4b2fbd; }
@media print { .pagina-kop { background: #f4f4fa !important; border-color: #999 !important; } .pagina-kop p { color: #111 !important; } }

/* (A4) Uitklapper voor expertmateriaal: curl-voorbeelden, wetsartikelen,
   tabelbewijs, protocoldetail. Wie het wil, klikt. Wie het niet wil, leest door. */
details.expert {
  border: 1px dashed rgba(125, 146, 255, 0.42);
  border-radius: 10px;
  margin: 0.5rem 0 0.8rem;
  background: rgba(255, 255, 255, 0.02);
  max-width: 82ch;
}
details.expert > summary {
  cursor: pointer; list-style: none; padding: 0.45rem 0.8rem;
  font-family: var(--mono); font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: #9db0ff;
}
details.expert > summary::-webkit-details-marker { display: none; }
details.expert > summary::before { content: "▸ "; }
details.expert[open] > summary::before { content: "▾ "; }
details.expert > *:not(summary) { padding: 0 0.9rem; }
details.expert > *:last-child { padding-bottom: 0.7rem; }
body[class*="deelkleur-"] details.expert { border-color: #b9c0f0; background: #f7f7fc; }
body[class*="deelkleur-"] details.expert > summary { color: #4b2fbd; }
@media print { details.expert { border: 1px solid #bbb !important; background: #fff !important; } details.expert > summary::before { content: ""; } }

/* (B2) Een jargonwoord bij eerste gebruik: stippellijn + link naar de woordenlijst. */
a.jargon, .jargon {
  border-bottom: 1px dotted currentColor;
  text-decoration: none;
  cursor: help;
}

/* (B1) De woordenlijst zelf. */
.wl-lijst { max-width: 84ch; margin: 0.6rem 0 1.4rem; }
.wl-term {
  border: 1px solid rgba(125, 146, 255, 0.28);
  border-radius: 10px;
  padding: 0.65rem 0.9rem;
  margin-bottom: 0.5rem;
  background: rgba(255, 255, 255, 0.025);
}
.wl-term h3 { margin: 0 0 0.3rem; font-size: 0.98rem; color: #fff; }
.wl-term h3 .wl-tel {
  font-family: var(--mono); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.08em;
  color: #9db0ff; margin-left: 0.45rem;
}
.wl-term p { margin: 0 0 0.3rem; font-size: 0.9rem; line-height: 1.65; color: #dfe5ff; }
.wl-term p:last-child { margin-bottom: 0; }
.wl-term .wl-nietzeggen { font-size: 0.83rem; color: #ffcf9b; }
.wl-term .wl-nietzeggen strong { color: #ffb45f; }
body[class*="deelkleur-"] .wl-term { background: #fff; border-color: #ccd0ee; }
body[class*="deelkleur-"] .wl-term h3 { color: #14102e; }
body[class*="deelkleur-"] .wl-term p { color: #2e2952; }
body[class*="deelkleur-"] .wl-term .wl-nietzeggen { color: #7a4a00; }
body[class*="deelkleur-"] .wl-term .wl-nietzeggen strong { color: #7a3a00; }
.wl-zoek {
  width: 100%; max-width: 30rem; padding: 0.5rem 0.7rem; border-radius: 8px;
  border: 1px solid rgba(125, 146, 255, 0.4); background: rgba(255,255,255,0.06);
  color: inherit; font: inherit; margin: 0.3rem 0 0.9rem;
}
body[class*="deelkleur-"] .wl-zoek { background: #fff; border-color: #b9c0f0; color: #14102e; }

/* (D1) "In mijn woorden" — de uitspreek-test onder een PRIO A-vraag.
   Spreektaal, geen jargon: dit is de zin die Franky aan tafel hardop stelt. */
.imw {
  border-left: 3px solid #2fae6a;
  background: rgba(47, 174, 106, 0.1);
  border-radius: 0 8px 8px 0;
  padding: 0.45rem 0.75rem;
  margin: 0.4rem 0 0.6rem;
  font-size: 0.9rem;
  line-height: 1.7;
  color: #d9f3e4;
  max-width: 82ch;
}
.imw .imw-label {
  display: block; font-family: var(--mono); font-size: 0.63rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: #4fd39a; margin-bottom: 0.15rem;
}
body[class*="deelkleur-"] .imw { background: #e8f8ef; border-left-color: #1d7a48; color: #14402a; }
body[class*="deelkleur-"] .imw .imw-label { color: #1d7a48; }
@media print { .imw { background: #eef8f2 !important; color: #111 !important; } }

/* (C1/C3) "Stand vandaag" versus "Logboek" — de scheiding tussen wat nu geldt
   en wat geschiedenis is. Geen inhoud weg; wel uit de leesweg. */
.stand-vandaag-kop, .logboek-kop {
  font-family: var(--mono); font-size: 0.66rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; margin: 0.7rem 0 0.35rem;
}
.stand-vandaag-kop { color: #4fd39a; }
.logboek-kop { color: #9db0ff; }
details.logboek {
  border: 1px solid rgba(125, 146, 255, 0.22);
  border-radius: 10px; margin: 0.7rem 0 0.4rem; background: rgba(255,255,255,0.015);
}
details.logboek > summary {
  cursor: pointer; list-style: none; padding: 0.45rem 0.8rem;
  font-family: var(--mono); font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: #9db0ff;
}
details.logboek > summary::-webkit-details-marker { display: none; }
details.logboek > summary::before { content: "▸ "; }
details.logboek[open] > summary::before { content: "▾ "; }
details.logboek > .logboek-body { padding: 0 0.85rem 0.7rem; }
body[class*="deelkleur-"] details.logboek { border-color: #ccd0ee; background: #fafaff; }
body[class*="deelkleur-"] details.logboek > summary { color: #4b2fbd; }
@media print { details.logboek { border: 1px solid #bbb !important; } details.logboek > summary::before { content: ""; } }


/* ═══════════════════════════════════════════════════════════════════════════
   v0.93.0 — werkorder 7: Bouwboek (🔧) en Testboek (✅).
   Twee pagina's die de applicatie van binnen uitleggen en aantonen wat er
   getest is. Bewust dezelfde tabelbasis als .lagen-tabel, zodat er geen
   tweede tabelstijl op de site ontstaat.
   ═════════════════════════════════════════════════════════════════════════ */

body.deelkleur-bb { --deelkleur: #5aa9e6; }   /* bouwboek — blauw, "de machine" */
body.deelkleur-tb { --deelkleur: #3ecf8e; }   /* testboek — groen, "afgevinkt" */

/* ── Gedeelde statuswoorden ─────────────────────────────────────────────── */
.bb-groen { color: #1c7a48; font-weight: 600; }
.bb-rood  { color: #b3261e; font-weight: 600; }
.bb-onbev {
  display: inline-block; font-family: var(--mono); font-size: 0.66rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em;
  background: #fdf4ec; color: #8a5a1b; border: 1px solid #eedcc6;
  border-radius: 5px; padding: 0.08rem 0.4rem; vertical-align: 0.06em;
}

/* ── Bouwboek ───────────────────────────────────────────────────────────── */
.bb-subkop {
  font-size: 0.82rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  color: #4a4668; margin: 1.1rem 0 0.4rem; padding-top: 0.6rem;
  border-top: 1px dashed rgba(0,0,0,0.12);
}
.bb-lijst { margin: 0.4rem 0 0.6rem; padding-left: 1.1rem; }
.bb-lijst > li { margin-bottom: 0.4rem; line-height: 1.55; }
.bb-lijst-twee { columns: 2; column-gap: 2rem; }
@media (max-width: 640px) { .bb-lijst-twee { columns: 1; } }

.bb-noot-klein { font-size: 0.8rem; color: #6a6688; margin: 0.2rem 0 0.5rem; }

/* Het waarschuwingsvak — wat er níét is, of wat bewust rood staat. */
.bb-let-op {
  background: #fdf6ee; border: 1px solid #eedcc6; border-left: 4px solid #d98f2b;
  border-radius: 8px; padding: 0.7rem 0.95rem; margin: 0.8rem 0;
}
.bb-let-op > p { margin: 0 0 0.45rem; }
.bb-let-op > p:last-child, .bb-let-op > ul:last-child { margin-bottom: 0; }
.bb-let-op .bb-lijst { margin-bottom: 0; }

/* Het bewijsvak — wat wél aantoonbaar is. */
.bb-bewezen {
  background: #f0faf4; border: 1px solid #c7e8d5; border-left: 4px solid #1c7a48;
  border-radius: 8px; padding: 0.7rem 0.95rem; margin: 0.8rem 0;
}
.bb-bewezen > p { margin: 0; }

/* Statuspil rechts in de blok-kop. */
.bb-status {
  font-family: var(--mono); font-size: 0.64rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em;
  border-radius: 5px; padding: 0.14rem 0.5rem; margin-left: 0.45rem; white-space: nowrap;
}
.bb-status-live  { background: #e4f7ec; color: #1c7a48; border: 1px solid #bce6cf; }
.bb-status-deels { background: #fdf4ec; color: #8a5a1b; border: 1px solid #eedcc6; }
.bb-status-rood  { background: #fdecec; color: #a32020; border: 1px solid #f0c9c9; }

/* ── Testboek: de afvinktabel ───────────────────────────────────────────── */
.tb-tabel { overflow-x: auto; margin-top: 0.6rem; }
.tb-tabel table { width: 100%; border-collapse: collapse; font-size: 0.86rem; }
.tb-tabel th {
  text-align: left; font-family: var(--mono); font-size: 0.68rem;
  text-transform: uppercase; letter-spacing: 0.05em; color: #7a7799;
  padding: 0.45rem 0.55rem; border-bottom: 1px solid rgba(0,0,0,0.14); white-space: nowrap;
}
.tb-tabel td {
  padding: 0.6rem 0.55rem; border-bottom: 1px solid rgba(0,0,0,0.08);
  color: #1c1836; vertical-align: top; line-height: 1.5;
}
.tb-tabel tbody tr:hover { background: rgba(62,207,142,0.05); }
.tb-tabel td.mono { font-family: var(--mono); font-size: 0.78rem; color: #4a4668; }
.tb-tabel .cel-noot { display: block; margin-top: 0.25rem; font-size: 0.76rem; color: #6a6688; line-height: 1.45; }

/* Uitslagwoorden in de resultaatkolom. */
.tb-ok, .tb-let, .tb-open, .tb-rood-cel {
  display: inline-block; font-family: var(--mono); font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.02em; border-radius: 5px; padding: 0.14rem 0.45rem;
}
.tb-ok       { background: #e4f7ec; color: #1c7a48; border: 1px solid #bce6cf; }
.tb-let      { background: #fdf4ec; color: #8a5a1b; border: 1px solid #eedcc6; }
.tb-open     { background: #f0efff; color: #5b3fc4; border: 1px solid #d8c8ff; }
.tb-rood-cel { background: #fdecec; color: #a32020; border: 1px solid #f0c9c9; }

/* Het herhaal-commando: altijd selecteerbaar, breekt netjes af. */
.tb-cmd {
  display: block; font-family: var(--mono); font-size: 0.72rem; line-height: 1.5;
  background: #f6f5fb; border: 1px solid #ddd9f0; border-radius: 6px;
  padding: 0.4rem 0.5rem; color: #33305c;
  white-space: pre-wrap; overflow-wrap: anywhere; user-select: all;
}
.tb-cmd-inline { font-size: 0.78rem; font-weight: 600; color: #4a4668; }
.tb-tabel-open tbody tr:hover { background: rgba(91,63,196,0.05); }

/* Op papier moeten de commando's leesbaar blijven, ook zonder achtergrond. */
@media print {
  .tb-cmd { background: #fff !important; border: 1px solid #999 !important; }
  .bb-let-op, .bb-bewezen { background: #fff !important; }
}

/* ═══ v0.96.0 (werkorder 10) — geen zijwaartse schuif meer op een telefoon ═══
   De kopregel van een vraagblok is een flexrij zonder omslag: titel + tredechip
   + dwarsdimensiechip + NELE-chip. De chips dragen white-space: nowrap (bewust —
   een pil die middenin afbreekt is geen pil meer), en flexitems krimpen niet
   onder hun min-content. Op 390 px duwde dat de pagina naar 695 px: je kon de
   hele rechterhelft alleen bereiken door zijwaarts te schuiven.
   Oplossing is de rij laten breken, niet de pil: op smal scherm krijgt de titel
   een eigen regel en gaan de chips eronder. De pillen blijven heel.            */
@media (max-width: 700px) {
  details.vraagblok > summary { flex-wrap: wrap; row-gap: 0.3rem; }
  details.vraagblok > summary h3 { flex: 1 1 100%; }
  /* de eerste chip staat dan aan het begin van zijn eigen regel */
  details.vraagblok > summary .laag-chip:first-of-type { margin-left: 0; }
  /* laatste redmiddel: een chip die zelfs alleen niet past, breekt dan wél af
     in plaats van de pagina mee te trekken */
  .laag-chip, .nele-chip { max-width: 100%; overflow-wrap: anywhere; }
}

/* ═══ v0.96.0 (werkorder 10) — waar ben ik geland? ═══
   anker.js klapt het doelblok open en schuift het onder de plakkende kop. In
   een lijst van honderd balken is dat nog steeds zoeken, dus licht het blok
   twee seconden op. Puur navigatie: geen inhoud, geen blijvende markering.   */
@keyframes anker-pulse {
  0%   { box-shadow: 0 0 0 3px rgba(125, 146, 255, 0.85); }
  70%  { box-shadow: 0 0 0 3px rgba(125, 146, 255, 0.55); }
  100% { box-shadow: 0 0 0 3px rgba(125, 146, 255, 0); }
}
.anker-gevonden { animation: anker-pulse 2.2s ease-out 1; border-radius: 12px; }
@media (prefers-reduced-motion: reduce) {
  .anker-gevonden { animation: none; box-shadow: 0 0 0 3px rgba(125, 146, 255, 0.7); }
}
@media print { .anker-gevonden { animation: none !important; box-shadow: none !important; } }

/* Werkorder 10 — de uitlegregel in het GTM-paneel, en een badge die op een wit
   paneel leesbaar blijft (zelfde behandeling als in .vraagblok-body).        */
.gtm-paneel-uitleg { font-size: 0.84rem; line-height: 1.6; color: #5b5b7a; margin: 0 0 0.55rem; }
.gtm-paneel .badge { border-color: #5a5478; color: #3a3560; background: transparent; }

/* ═══ v0.98.7 — Definitiedag: de variantenbak onder de vaste definitie ═══
   Elke zondag komt er één extra uitleg bij van hetzelfde begrip, met een
   nieuwe metafoor. De vaste definitie blijft altijd bovenaan staan; deze bak
   groeit eronder. Gestippelde rand plus een eigen labelkleur, zodat een lezer
   in één oogopslag ziet: dit is dezelfde uitleg anders verteld — geen nieuw
   feit en geen tweede waarheid.                                            */
.def-varianten { margin: 0 0 1.1rem; }
.def-varianten-kop {
  font-family: var(--mono); font-size: 0.66rem; font-weight: 800;
  letter-spacing: 0.1em; text-transform: uppercase;
  /* Let op: deze kop staat BUITEN een lichte kaart, dus rechtstreeks op de
     donkerblauwe paginaband. Donkere inkt (#3a3556) gaf hier 1,3:1 en was
     onleesbaar; dit is dezelfde lichte inkt als .je-bent-hier erboven.      */
  color: #cfd6ff; margin: 0 0 0.4rem; max-width: 78ch; line-height: 1.5;
}
.g-simpel.definitie.def-variant { border-style: dashed; }
.g-simpel.definitie.def-variant .def-label { background: #6b4bd6; }

/* ═══ v0.99.9 — mobiel: geen tekst meer buiten beeld (audit 19-08-2026) ═══
   Gemeten op 375px: 13 tekstelementen op 7 pagina's stonden rechts buiten het
   scherm zonder scrollbare voorouder — dus onbereikbaar, niet alleen lelijk.  */
@media (max-width: 640px) {
  /* lange URL's, hashes en commando's mogen afbreken (bouwboek, waar-zit-wat, klanten) */
  .mono { overflow-wrap: anywhere; word-break: break-word; white-space: normal; }
  .bril-rij a, .bril-rij { overflow-wrap: anywhere; }

  /* label dat op desktop bewust op één regel staat (archief) */
  .dash-context-hint { white-space: normal; }

  /* gate-rij (index): kop mocht niet krimpen, waardoor de uitleg-p op 0px stond */
  .gate-rij { flex-wrap: wrap; }
  .gate-rij h3 { flex: 1 1 auto; min-width: 0; }
  .gate-rij p { flex: 1 1 100%; white-space: normal; overflow: visible; text-overflow: clip; }

  /* ladderbalk (lagen): segmenten mogen onder hun tekstbreedte krimpen —
     ze hebben zelf al overflow:hidden, dus de balk blijft een balk */
  .ladder-rij { grid-template-columns: 1fr; }
  .ladder-naam { text-align: left; min-width: 0; }
  .ladder-balk { min-width: 0; }
  .lb-seg { min-width: 0; }
}

/* ═══ v0.99.10 — mobiel: klikdoelen op WCAG 2.5.8 AA (24px) ═══
   Gemeten op 375px over 37 pagina's: 1543 controls onder 24px, waarvan 720 de
   oordeelknoppen in .feedback-rij. Links in lopende tekst blijven ongemoeid —
   die zijn vrijgesteld en groter maken breekt de zin.                        */
@media (max-width: 640px) {
  /* de knoppen die Franky het vaakst indrukt: ✔ Houden / ✘ Eruit / ❓ Vraag */
  .feedback-rij button { min-height: 32px; padding-block: 0.35rem; }

  /* losstaande links: een heel <li> of meta-regel die één link is */
  .lijst-noot a,
  .gtm-meta a,
  .footer-terug a,
  .v-verwant .v-link { display: inline-block; min-height: 24px; padding-block: 0.3rem; }

  /* filter- en tellerchips: echte controls, geen tekstlinks */
  .vb-tellers .vb-knop,
  .laag-chip { min-height: 24px; padding-block: 0.25rem; }
}

/* ═══ v0.99.15 — mobiel: de laatste echte controls op 24px ═══
   Na v0.99.10 bleven er 136 over, verspreid over 35 klassen. Deze vier selectors
   dekken er 95: kruimelpad-links (13-20px), de ✕-sluitknop van 16px, de
   InteGraTab-tags die 2px tekortkwamen, en de kopieerknop. De rest is een staart
   van ~31 klassen met gemiddeld één treffer — die laten we bewust staan.       */
@media (max-width: 640px) {
  .wrap > a { display: inline-block; min-height: 24px; padding-block: 0.3rem; }
  .mv-rij .mv-weg { min-height: 24px; min-width: 24px; }
  .blok-kop .it-tag { min-height: 24px; padding-block: 0.15rem; }
  .wzw-kopieer { min-height: 24px; padding-block: 0.2rem; }
  /* links die als blok/flex renderen in een lijst (archief); op een inline link
     doet min-height niets, dus tekstlinks blijven ongemoeid */
  li > a { min-height: 24px; }
}