/* ═══════════════════════════════════════════════════════════
   PrismPass — Design System v5
   Eén stylesheet voor alle pagina's. Geen inline styles nodig.
   ═══════════════════════════════════════════════════════════ */

/* ──────────────────────────────────────────
   1. DESIGN TOKENS
────────────────────────────────────────── */
:root {
  /* Product kleuren */
  --pp-pass:   #1E5BFF;
  --pp-shield: #1F9D3A;
  --pp-id:     #FF7A00;
  --pp-add:    #2E9E44;
  --pp-pin:    #6F2DBD;
  --pp-air:    #1F6BFF;
  --pp-shop:   #2E9E44;
  --pp-tap:    #4E3A8C;

  /* Accentkleur (links, interactief) */
  --pp-accent:       #1E5BFF;
  --pp-accent-light: #eef3ff;

  /* Neutrale kleuren */
  --pp-navy:   #0B2A6F;
  --pp-black:  #0B2A6F;
  --pp-dark:   #1a1a1a;
  --pp-grey-1: #444444;
  --pp-grey-2: #666666;
  --pp-grey-3: #999999;
  --pp-grey-4: #cccccc;
  --pp-grey-5: #e5e5e5;
  --pp-grey-6: #f2f2f2;
  --pp-white:  #ffffff;

  /* Achtergrond & panelranden */
  --pp-bg:     #ffffff;
  --pp-panel:  #C8D7FF;

  /* Ko-fi */
  --pp-kofi:   #ff5e5b;

  /* Typografie */
  --pp-font: "Inter", system-ui, sans-serif;
  --pp-mono: "JetBrains Mono", monospace;

  /* Layout */
  --pp-max:     1200px;
  --pp-gap:     24px;
  --pp-section: 64px;
  --pp-radius:  14px;

  /* Alias — oudere pagina's die deze namen nog gebruiken */
  --zwart:    #0B2A6F;
  --g1:       #444444;
  --g2:       #666666;
  --g3:       #999999;
  --g4:       #cccccc;
  --g5:       #e5e5e5;
  --g6:       #f2f2f2;
  --mono:     "JetBrains Mono", monospace;
  --blauw:    #1E5BFF;
  --blauw-bg: #eef3ff;
  --blauw-rand: #C8D7FF;
  --rood:      #c0392b;
  --rood-bg:   #fde8e8;
  --rood-rand: #f5c6c2;
  --groen:     #1a6e2e;
  --groen-bg:  #e6f4ea;
  --groen-rand:#a8d5b5;
  --g7:        #ffffff;
  --g9:        #fafafa;
  --rand:      1.5px solid var(--pp-panel);
}

/* ──────────────────────────────────────────
   2. RESET
────────────────────────────────────────── */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html { scroll-behavior: smooth; }

body {
  font-family: var(--pp-font);
  background: var(--pp-bg);
  color: var(--pp-dark);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--pp-accent);
  text-decoration: none;
}

img {
  max-width: 100%;
  display: block;
}

/* ──────────────────────────────────────────
   3. LAYOUT HELPERS
────────────────────────────────────────── */
.pp-section {
  padding: var(--pp-section) 0;
}

.pp-section__inner,
.pp-header__inner,
.pp-footer__inner,
.pp-hero__inner {
  width: 100%;
  max-width: var(--pp-max);
  margin: 0 auto;
  padding: 0 32px;
}

.pp-main { background: var(--pp-bg); }

.pp-hero__update {
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--pp-grey-2);
  margin-top: 0.5rem;
}

/* ──────────────────────────────────────────
   4. HEADER
────────────────────────────────────────── */
.pp-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--pp-white);
  border-bottom: 1px solid var(--pp-panel);
  box-shadow: 0 2px 12px rgba(11,42,111,.07);
}

.pp-header__inner {
  display: flex;
  align-items: center;
  height: 64px;
  gap: 24px;
}

.pp-header__right {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* Logo */
.pp-logo {
  font-family: var(--pp-mono);
  font-weight: 700;
  font-size: 18px;
  color: var(--pp-navy);
  text-decoration: none;
  letter-spacing: -.02em;
  flex-shrink: 0;
}

/* Kleur splitsen via ::first-letter werkt niet voor meerdere letters;
   gebruik span.pp-logo__prism / .pp-logo__pass in nieuwe HTML,
   voor bestaande HTML kleurt het logo marineblauw als geheel. */
.pp-logo__prism { color: var(--pp-pass); }
.pp-logo__pass  { color: var(--pp-navy); }

/* Nav */
.pp-nav {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 1;
}

.pp-nav__item {
  font-size: 13px;
  font-weight: 500;
  color: var(--pp-grey-1);
  padding: 6px 11px;
  border-radius: 6px;
  text-decoration: none;
  transition: background .15s, color .15s;
  white-space: nowrap;
}

.pp-nav__item:hover {
  background: var(--pp-bg);
  color: var(--pp-navy);
}

.pp-nav__item--accent { color: var(--pp-pass); font-weight: 600; }

.pp-nav__item--dev {
  font-family: var(--pp-mono);
  font-size: 11px;
  font-weight: 700;
  background: var(--pp-navy);
  color: var(--pp-white);
  border-radius: 6px;
  padding: 6px 12px;
}
.pp-nav__item--dev:hover {
  background: var(--pp-pass);
  color: var(--pp-white);
}

.pp-header__profile {
  margin-left: auto;
  font-family: var(--pp-mono);
  font-size: 11px;
  color: var(--pp-grey-3);
  text-decoration: none;
  flex-shrink: 0;
  transition: color .15s;
}
.pp-header__profile:hover { color: var(--pp-navy); }

/* ──────────────────────────────────────────
   4b. SUB-NAVIGATIE (product tabs onder header)
────────────────────────────────────────── */
.pp-subnav {
  background: var(--pp-white);
  border-bottom: 1px solid var(--pp-panel);
}

.pp-subnav__inner {
  max-width: var(--pp-max);
  margin: 0 auto;
  padding: 0 32px;
  display: flex;
  gap: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.pp-subnav__item {
  display: inline-block;
  padding: 11px 16px;
  font-size: 13px;
  font-weight: 500;
  color: var(--pp-grey-2);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: color .15s, border-color .15s;
}

.pp-subnav__item:hover {
  color: var(--pp-navy);
}

.pp-subnav__item--active {
  color: var(--pp-navy);
  border-bottom-color: var(--pp-pass);
  font-weight: 700;
}

/* Tabellen — consistente stijl */
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

thead tr,
tr.pp-tabel-header {
  background: #EEF3FF;
}

th {
  font-family: var(--pp-mono);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--pp-navy);
  padding: 10px 16px;
  text-align: left;
  border-bottom: 2px solid var(--pp-panel);
}

td {
  padding: 10px 16px;
  border-bottom: 1px solid var(--pp-panel);
  color: var(--pp-grey-1);
  vertical-align: top;
}

tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: #F7FAFF; }

/* Vergelijk-grids en stat-grids — hogere specificiteit om inline styles te overrullen */
body .vergelijk-grid {
  border: 1.5px solid var(--pp-panel) !important;
  border-radius: var(--pp-radius);
  overflow: hidden;
}

body .vergelijk-grid__col:first-child {
  border-right: 1.5px solid var(--pp-panel) !important;
}

body .stat-grid {
  border: 1.5px solid var(--pp-panel) !important;
  border-radius: var(--pp-radius);
  overflow: hidden;
}

body .stat-grid__cel {
  border-right: 1px solid var(--pp-panel) !important;
}

body .stat-grid__getal {
  color: var(--pp-navy) !important;
}

body .tagline-blok {
  border-top: 2px solid var(--pp-panel) !important;
}

body .quote-blok {
  border-left: 4px solid var(--pp-pass) !important;
  background: #EEF3FF !important;
  border-radius: 0 var(--pp-radius) var(--pp-radius) 0;
}

body .openingsquote {
  border-left: 4px solid var(--pp-pass) !important;
  background: #EEF3FF !important;
}

body .inzicht {
  border: 1.5px solid var(--pp-panel) !important;
  background: #EEF3FF !important;
}

body .zkp-num {
  background: var(--pp-pass) !important;
}

/* Scenario blok */
body .scenario {
  border: 1.5px solid var(--pp-panel) !important;
  border-radius: var(--pp-radius) !important;
}

body .scenario-vraag {
  background: var(--pp-navy) !important;
}

/* Info-banner variant van pp-panel */
.pp-panel--info {
  background: #EEF3FF;
  border: 1.5px solid var(--pp-panel);
  border-left: 4px solid var(--pp-pass);
  color: var(--pp-navy);
  padding: 14px 18px;
  border-radius: var(--pp-radius);
  font-size: 14px;
  font-weight: 500;
}

/* ──────────────────────────────────────────
   5. HERO
────────────────────────────────────────── */
.pp-hero {
  padding: 64px 0 48px;
  background: var(--pp-white);
  border-bottom: 1px solid var(--pp-panel);
}

.pp-hero__eyebrow {
  font-family: var(--pp-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--pp-grey-3);
  margin-bottom: 16px;
}

.pp-hero__title {
  font-size: clamp(28px, 4vw, 46px);
  font-weight: 700;
  line-height: 1.2;
  color: var(--pp-navy);
  max-width: 640px;
  margin-bottom: 20px;
  letter-spacing: -.02em;
}

.pp-hero__subtitle {
  max-width: 560px;
  font-size: 17px;
  color: var(--pp-grey-1);
  line-height: 1.7;
  margin-bottom: 32px;
}

.pp-hero__tagline {
  font-size: 16px;
  color: var(--pp-grey-1);
  margin-top: 8px;
}

.pp-hero__brand {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 20px;
}

.pp-hero__brand img {
  height: 48px;
  width: auto;
}

.pp-hero__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 64px;
  flex-wrap: nowrap;
}

.pp-hero__text { flex: 1; min-width: 0; }

.pp-hero__logo-large img {
  height: 480px;
  max-width: 560px;
  width: auto;
}

.pp-hero-tagline { text-align: center; }

/* Slogan band — achter de hero */
.pp-slogan-band {
  background: var(--pp-navy);
  padding: 18px 32px;
  text-align: center;
}
.pp-slogan-band p {
  font-size: 16px;
  font-weight: 600;
  color: var(--pp-white);
  max-width: var(--pp-max);
  margin: 0 auto;
}

/* ──────────────────────────────────────────
   6. PRODUCT GRID
────────────────────────────────────────── */
.pp-product-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--pp-gap);
}

/* Basis kaart */
.pp-card {
  background: var(--pp-white);
  border: 1.5px solid var(--pp-panel);
  border-radius: var(--pp-radius);
  padding: 28px 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
  overflow: hidden;
  transition: box-shadow .2s, transform .18s;
}

.pp-card:hover {
  box-shadow: 0 8px 32px rgba(11,42,111,.10);
  transform: translateY(-3px);
}

/* Gekleurde topstreep per product (via nth-child in de product grid) */
.pp-card--product::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  border-radius: var(--pp-radius) var(--pp-radius) 0 0;
  background: var(--pp-pass);
}

.pp-product-grid .pp-card--product:nth-child(1)::before { background: var(--pp-pass); }
.pp-product-grid .pp-card--product:nth-child(2)::before { background: var(--pp-shield); }
.pp-product-grid .pp-card--product:nth-child(3)::before { background: var(--pp-id); }
.pp-product-grid .pp-card--product:nth-child(4)::before { background: var(--pp-add); }

/* Kaarttitel kleur per product */
.pp-product-grid .pp-card--product:nth-child(1) .pp-card__title { color: var(--pp-pass); }
.pp-product-grid .pp-card--product:nth-child(2) .pp-card__title { color: var(--pp-shield); }
.pp-product-grid .pp-card--product:nth-child(3) .pp-card__title { color: var(--pp-id); }
.pp-product-grid .pp-card--product:nth-child(4) .pp-card__title { color: var(--pp-add); }

.pp-card__tag {
  font-family: var(--pp-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--pp-grey-3);
}

/* Status badges */
.pp-card__status {
  font-family: var(--pp-mono);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: 3px 8px;
  border-radius: 4px;
  width: fit-content;
}

.pp-card__status--proven {
  background: rgba(31,157,58,.12);
  color: #1a7a30;
  border: 1px solid rgba(31,157,58,.25);
}

.pp-card__status--hypothesis {
  background: rgba(255,170,0,.12);
  color: #996600;
  border: 1px solid rgba(255,170,0,.3);
}

.pp-card__status--architecture {
  background: rgba(30,91,255,.10);
  color: var(--pp-pass);
  border: 1px solid var(--pp-panel);
}

.pp-card__title {
  font-size: 22px;
  font-weight: 700;
  color: var(--pp-navy);
  letter-spacing: -.01em;
}

.pp-card__title--accent { color: var(--pp-pass); }

.pp-card__text {
  font-size: 14px;
  color: var(--pp-grey-1);
  line-height: 1.65;
}

.pp-card__links {
  margin-top: auto;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding-top: 12px;
  border-top: 1px solid var(--pp-grey-5);
}

.pp-card__link {
  font-family: var(--pp-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--pp-grey-2);
  padding: 4px 10px;
  border: 1px solid var(--pp-grey-5);
  border-radius: 5px;
  text-decoration: none;
  transition: background .15s, color .15s, border-color .15s;
}
.pp-card__link:hover {
  background: var(--pp-bg);
  color: var(--pp-navy);
  border-color: var(--pp-panel);
}

/* ──────────────────────────────────────────
   7. SECTIES
────────────────────────────────────────── */
.pp-section__title {
  font-size: clamp(20px, 2.5vw, 32px);
  font-weight: 700;
  color: var(--pp-navy);
  letter-spacing: -.02em;
  line-height: 1.25;
  margin-bottom: 20px;
}

.pp-section__lead {
  font-size: 16px;
  color: var(--pp-grey-1);
  max-width: 700px;
  line-height: 1.75;
  margin-bottom: 32px;
}

/* ──────────────────────────────────────────
   8. PANEL (relay / triptych)
────────────────────────────────────────── */
.pp-panel {
  border: 1.5px solid var(--pp-panel);
  border-radius: var(--pp-radius);
  overflow: hidden;
  background: var(--pp-white);
}

.pp-panel__header {
  background: var(--pp-navy);
  color: var(--pp-white);
  padding: 18px 24px;
  display: flex;
  align-items: baseline;
  gap: 16px;
}

.pp-panel__eyebrow {
  font-family: var(--pp-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: rgba(255,255,255,.6);
}

.pp-panel__title {
  font-size: 20px;
  font-weight: 700;
  color: var(--pp-white);
}

.pp-panel__body {
  padding: 24px;
}

.pp-panel__body--split {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.pp-panel__col {
  padding: 24px;
  border-right: 1px solid var(--pp-grey-5);
}

.pp-panel__col:last-child { border-right: none; }

.pp-panel__text {
  font-size: 14px;
  line-height: 1.8;
  color: var(--pp-grey-1);
  margin-bottom: 16px;
}

.pp-panel__text--muted { color: var(--pp-grey-2); }

.pp-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pp-list__item {
  display: flex;
  gap: 12px;
  font-size: 13px;
}

.pp-list__label {
  font-family: var(--pp-mono);
  color: var(--pp-grey-3);
  flex-shrink: 0;
}

.pp-list__text { color: var(--pp-grey-1); }

.pp-panel__meta {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--pp-grey-5);
  font-family: var(--pp-mono);
  font-size: 11px;
  color: var(--pp-grey-3);
}

.pp-panel__subtitle {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 6px;
  color: var(--pp-navy);
}

/* Triptych */
.pp-panel--triptych {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1.5px solid var(--pp-panel);
}

.pp-panel--triptych .pp-panel__col {
  border-right: 1px solid var(--pp-grey-5);
}

.pp-panel--triptych .pp-panel__col:last-child {
  border-right: none;
}

/* ──────────────────────────────────────────
   9. DOC GRID
────────────────────────────────────────── */
.pp-doc-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--pp-gap);
}

.pp-doc-card {
  border: 1.5px solid var(--pp-panel);
  border-radius: var(--pp-radius);
  padding: 24px;
  background: var(--pp-white);
  transition: box-shadow .2s;
}

.pp-doc-card:hover {
  box-shadow: 0 4px 20px rgba(11,42,111,.08);
}

.pp-doc-card__title {
  font-size: 16px;
  font-weight: 700;
  color: var(--pp-navy);
}

.pp-doc-card__text {
  font-size: 14px;
  color: var(--pp-grey-2);
  margin-top: 6px;
}

/* ──────────────────────────────────────────
   10. FOOTER
────────────────────────────────────────── */
.pp-footer {
  background: var(--pp-navy);
  border-top: none;
  padding: 56px 0 0;
}

.pp-footer__inner {
  max-width: var(--pp-max);
  margin: 0 auto;
  padding: 0 32px 48px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  color: rgba(255,255,255,.65);
}

.pp-footer__link {
  color: rgba(255,255,255,.5);
  font-size: 13px;
  text-decoration: none;
  transition: color .15s;
}
.pp-footer__link:hover { color: var(--pp-white); }

/* ──────────────────────────────────────────
   11. HELPERS & UTILITIES
────────────────────────────────────────── */
.tekst-groen { color: #1a7a30; }
.tekst-rood  { color: #b01c1c; }
.tekst-grijs { color: var(--pp-grey-3); }
.tekst-mono  { font-family: var(--pp-mono); font-size: 12px; }
.mono        { font-family: var(--pp-mono); }
.klik        { cursor: pointer; }

/* ──────────────────────────────────────────
   12. TABS
────────────────────────────────────────── */
.tabs {
  display: flex;
  border-bottom: 2px solid var(--pp-panel);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--pp-white);
}

.tab {
  flex: 0 0 auto;
  padding: 10px 18px;
  font-size: 13px;
  cursor: pointer;
  border: none;
  background: none;
  color: var(--pp-grey-3);
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  white-space: nowrap;
  font-family: var(--pp-font);
  transition: color .15s;
}

.tab:hover  { color: var(--pp-navy); }
.tab.active {
  color: var(--pp-navy);
  border-bottom-color: var(--pp-pass);
  font-weight: 700;
}

.pane        { display: none; }
.pane.active { display: block; }

/* ──────────────────────────────────────────
   13. API-SPECIFIEK
────────────────────────────────────────── */
.api-url-block {
  background: var(--pp-navy);
  color: var(--pp-white);
  padding: 14px 18px;
  font-family: var(--pp-mono);
  font-size: 14px;
  letter-spacing: .04em;
  border-radius: var(--pp-radius);
  margin-bottom: 32px;
}

.api-endpoint { margin-bottom: 20px; }

.api-endpoint__header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--pp-grey-5);
  background: var(--pp-bg);
  border-radius: var(--pp-radius) var(--pp-radius) 0 0;
}

.api-method {
  font-family: var(--pp-mono);
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 4px;
  flex-shrink: 0;
}
.api-method.post { background: var(--pp-navy); color: var(--pp-white); }
.api-method.sdk  { background: var(--pp-grey-2); color: var(--pp-white); }

.api-path   { font-family: var(--pp-mono); font-size: 14px; font-weight: 700; color: var(--pp-navy); }
.api-status { margin-left: auto; font-family: var(--pp-mono); font-size: 11px; flex-shrink: 0; }

.api-code-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.api-code-label {
  font-family: var(--pp-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--pp-grey-3);
  margin-bottom: 6px;
}

.api-pre {
  background: var(--pp-bg);
  border: 1px solid var(--pp-panel);
  padding: 12px;
  font-family: var(--pp-mono);
  font-size: 12px;
  overflow-x: auto;
  margin: 0;
  line-height: 1.6;
  white-space: pre;
  border-radius: 6px;
}

.api-note {
  margin-top: 12px;
  padding: 10px 12px;
  background: var(--pp-accent-light);
  border-left: 3px solid var(--pp-pass);
  font-family: var(--pp-mono);
  font-size: 12px;
  color: var(--pp-grey-2);
  line-height: 1.5;
}

.api-error-row {
  display: grid;
  grid-template-columns: 80px 180px 1fr;
  align-items: center;
  padding: 10px 24px;
  border-bottom: 1px solid var(--pp-grey-5);
  gap: 12px;
}
.api-error-row:last-child { border-bottom: none; }
.api-error-row--alt       { background: var(--pp-bg); }
.api-error-code  { font-family: var(--pp-mono); font-size: 13px; font-weight: 700; color: #b01c1c; }
.api-error-name  { font-family: var(--pp-mono); font-size: 12px; color: var(--pp-grey-2); }
.api-error-desc  { font-size: 13px; color: var(--pp-grey-2); margin: 0; }

/* ──────────────────────────────────────────
   14. VISUALS-SPECIFIEK
────────────────────────────────────────── */
.visual-pane        { display: none; }
.visual-pane.active { display: block; }

.phones-row {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 28px;
  flex-wrap: wrap;
}

.phone-col { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.phone-caption { font-family: var(--pp-mono); font-size: 12px; color: var(--pp-grey-3); text-align: center; }

.phone {
  width: 120px;
  border: 2px solid var(--pp-panel);
  border-radius: 16px;
  padding: 12px 10px 16px;
  background: var(--pp-white);
  cursor: pointer;
  transition: border-color .15s;
}
.phone.klik:hover { background: var(--pp-bg); border-color: var(--pp-pass); }

.phone-notch { width: 32px; height: 6px; background: var(--pp-navy); border-radius: 3px; margin: 0 auto 10px; }
.driehoek-wrap { display: flex; justify-content: center; margin-bottom: 8px; }
.status-label { font-family: var(--pp-mono); font-size: 9px; color: var(--pp-grey-3); text-align: center; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 6px; }
.app-naam   { font-size: 13px; font-weight: 700; text-align: center; margin-bottom: 4px; color: var(--pp-navy); }
.app-bedrag { font-family: var(--pp-mono); font-size: 15px; text-align: center; margin-bottom: 8px; }
.phone-btn  { font-size: 11px; background: var(--pp-pass); color: var(--pp-white); text-align: center; padding: 5px 8px; border-radius: 4px; margin-bottom: 6px; }
.phone-status-ok   { font-family: var(--pp-mono); font-size: 10px; color: #1a7a30; text-align: center; margin-bottom: 2px; }
.phone-status-warn { font-family: var(--pp-mono); font-size: 10px; color: #996600; text-align: center; margin-bottom: 2px; }
.phone-status-red  { font-family: var(--pp-mono); font-size: 10px; color: #b01c1c; text-align: center; margin-bottom: 2px; }
.phone-sub  { font-size: 9px; color: var(--pp-grey-3); text-align: center; font-style: italic; }
.phone-popup { border: 1px solid #c8a000; background: #fffbe6; padding: 7px 8px; font-size: 11px; margin-bottom: 6px; text-align: center; }
.phone-popup p { font-size: 10px; color: var(--pp-grey-2); margin: 3px 0 0; }
.emoji { font-size: 18px; margin-top: 4px; }

.pijl-wrap { display: flex; align-items: center; padding-top: 60px; }
.pijl-lijn { font-family: var(--pp-mono); font-size: 10px; color: var(--pp-grey-3); writing-mode: vertical-rl; letter-spacing: .08em; }

.duress-sectie { border: 1.5px solid var(--pp-panel); padding: 20px; margin-bottom: 20px; border-radius: var(--pp-radius); background: var(--pp-white); }
.duress-sectie h3 { font-size: 14px; font-weight: 700; margin-bottom: 16px; color: var(--pp-navy); }
.duress-inner { display: grid; grid-template-columns: 1fr 260px; gap: 20px; align-items: start; }

.stappen-rij { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; flex-wrap: wrap; }
.step-num { width: 28px; height: 28px; border: 2px solid var(--pp-grey-4); display: flex; align-items: center; justify-content: center; font-size: 12px; font-family: var(--pp-mono); cursor: pointer; flex-shrink: 0; border-radius: 6px; transition: border-color .15s, background .15s; }
.step-num.done { border-color: var(--pp-pass); background: var(--pp-pass); color: var(--pp-white); }
.step-num.klik:hover { background: var(--pp-bg); border-color: var(--pp-pass); }
.stap-pijl { font-size: 12px; color: var(--pp-grey-4); }

.centroid-lagen { border: 1.5px solid var(--pp-panel); padding: 14px; border-radius: var(--pp-radius); background: var(--pp-white); }
.centroid-lagen h4 { font-family: var(--pp-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 8px; color: var(--pp-grey-2); }
.centroid-laag { padding: 7px 10px; font-size: 12px; margin-bottom: 4px; cursor: pointer; border: 1px solid var(--pp-panel); border-radius: 4px; }
.centroid-laag.groen { border-color: #8bc88b; color: #1a7a30; background: #f3fdf3; }
.centroid-laag.amber { border-color: #c8a000; color: #996600; background: #fffbe6; }
.centroid-laag.rood  { border-color: #e88;    color: #b01c1c; background: #fff5f5; }

.info-paneel { display: none; border: 1.5px solid var(--pp-panel); padding: 16px 18px; margin-bottom: 20px; background: var(--pp-white); border-radius: var(--pp-radius); }
.info-paneel.zichtbaar { display: block; }
.info-paneel-header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.info-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px; }
.info-tag { font-family: var(--pp-mono); font-size: 10px; padding: 2px 7px; border: 1px solid var(--pp-panel); color: var(--pp-grey-3); text-transform: uppercase; letter-spacing: .06em; border-radius: 4px; }
.close-btn { font-family: var(--pp-mono); font-size: 11px; cursor: pointer; color: var(--pp-grey-3); background: none; border: none; }

.legenda { display: flex; gap: 20px; flex-wrap: wrap; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--pp-grey-5); }
.leg-item { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--pp-grey-2); }
.leg-kleur { width: 14px; height: 14px; border: 1px solid; flex-shrink: 0; border-radius: 2px; }

.prismid-layout { display: flex; gap: 24px; align-items: flex-start; flex-wrap: wrap; margin-bottom: 20px; }
.prismid-phone { width: 160px; border: 2px solid var(--pp-panel); border-radius: 16px; padding: 14px 12px; flex-shrink: 0; background: var(--pp-white); }
.prismid-header-bar { text-align: center; margin-bottom: 10px; }
.prismid-header-bar h3 { font-size: 14px; font-weight: 700; color: var(--pp-navy); }
.prismid-id-box { border: 1px solid var(--pp-panel); padding: 10px; text-align: center; margin-bottom: 12px; border-radius: 6px; }
.tri  { font-size: 20px; color: var(--pp-grey-3); margin-bottom: 4px; }
.lbl  { font-family: var(--pp-mono); font-size: 9px; text-transform: uppercase; letter-spacing: .08em; color: var(--pp-grey-3); margin-bottom: 4px; }
.naam { font-size: 11px; color: var(--pp-grey-3); margin-bottom: 6px; }
.id-bar { height: 4px; background: var(--pp-pass); border-radius: 2px; }
.prismid-sectie-titel { font-family: var(--pp-mono); font-size: 10px; text-transform: uppercase; letter-spacing: .1em; color: var(--pp-grey-3); margin-bottom: 6px; }
.prismid-attribuut { display: flex; justify-content: space-between; padding: 6px 8px; font-size: 12px; border-bottom: 1px solid var(--pp-grey-5); cursor: pointer; }
.prismid-attribuut:hover { background: var(--pp-bg); }
.prismid-voetnoot { font-family: var(--pp-mono); font-size: 10px; color: var(--pp-grey-3); line-height: 1.5; margin-top: 10px; text-align: center; }
.prismid-tagline { text-align: center; font-size: 13px; font-style: italic; color: var(--pp-grey-3); padding: 16px 0; border-top: 1px solid var(--pp-grey-5); margin-top: 16px; }
.prismid-pijl { display: flex; flex-direction: column; align-items: center; padding-top: 80px; font-family: var(--pp-mono); font-size: 12px; color: var(--pp-grey-3); gap: 4px; }
.pijl-groot { font-size: 20px; color: var(--pp-grey-4); }

.cases-col { flex: 1; min-width: 240px; display: flex; flex-direction: column; gap: 12px; }
.case-kaart { border: 1.5px solid var(--pp-panel); padding: 14px 16px; cursor: pointer; border-radius: var(--pp-radius); background: var(--pp-white); transition: box-shadow .15s; }
.case-kaart:hover { box-shadow: 0 4px 16px rgba(11,42,111,.08); }
.case-header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.case-header h4 { font-size: 13px; font-weight: 700; color: var(--pp-navy); }
.case-risico { font-family: var(--pp-mono); font-size: 10px; padding: 2px 7px; border: 1px solid; text-transform: uppercase; letter-spacing: .06em; border-radius: 4px; }
.case-risico.laag   { border-color: #8bc88b; color: #1a7a30; }
.case-risico.middel { border-color: #c8a000; color: #996600; }
.case-risico.hoog   { border-color: #e88;    color: #b01c1c; }
.case-rij        { font-size: 12px; color: var(--pp-grey-2); margin-bottom: 3px; }
.case-rij--muted { font-size: 11px; color: var(--pp-grey-3); margin-bottom: 3px; }

.interesse-layout { display: flex; gap: 24px; flex-wrap: wrap; margin-bottom: 20px; }
.interesse-kaart { flex: 1; min-width: 220px; border: 1.5px solid var(--pp-panel); padding: 18px; border-radius: var(--pp-radius); background: var(--pp-white); }
.interesse-kaart h3 { font-size: 15px; font-weight: 700; margin-bottom: 4px; color: var(--pp-navy); }
.interesse-kaart .sub { font-family: var(--pp-mono); font-size: 11px; color: var(--pp-grey-3); margin-bottom: 14px; }
.interesse-tagline { text-align: center; font-size: 13px; font-style: italic; color: var(--pp-grey-3); padding: 16px 0; border-top: 1px solid var(--pp-grey-5); }

.wallet-box { border: 1.5px solid var(--pp-panel); padding: 12px; margin-bottom: 14px; border-radius: 6px; background: var(--pp-white); }
.wallet-titel { font-size: 12px; font-weight: 700; margin-bottom: 2px; color: var(--pp-navy); }
.wallet-sub { font-family: var(--pp-mono); font-size: 10px; color: var(--pp-grey-3); margin-bottom: 10px; }
.wallet-item { display: flex; justify-content: space-between; padding: 5px 0; font-size: 12px; border-bottom: 1px solid var(--pp-grey-5); cursor: pointer; }
.wallet-item.aan .vinkje { color: #1a7a30; }
.wallet-item.uit .vinkje { color: var(--pp-grey-4); }
.wallet-garanties { font-size: 11px; color: var(--pp-grey-3); line-height: 1.6; margin-bottom: 10px; }
.wallet-tech { font-family: var(--pp-mono); font-size: 10px; color: var(--pp-grey-3); line-height: 1.6; border-top: 1px solid var(--pp-grey-5); padding-top: 8px; margin-top: 8px; }
.wallet-voetnoot { font-size: 10px; color: var(--pp-grey-3); font-style: italic; margin-top: 8px; }

.voordelen-titel { font-family: var(--pp-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--pp-grey-3); margin-bottom: 8px; margin-top: 14px; }
.voordeel-item { font-size: 12px; color: var(--pp-grey-2); padding: 5px 0; border-bottom: 1px solid var(--pp-grey-5); }

.token-midden { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 0 12px; }
.token-badge { font-family: var(--pp-mono); font-size: 11px; padding: 6px 10px; border: 1.5px solid var(--pp-pass); text-align: center; border-radius: 6px; color: var(--pp-pass); }
.token-lbl { font-family: var(--pp-mono); font-size: 10px; color: var(--pp-grey-3); text-align: center; }
.token-stippel { height: 20px; border-left: 1px dashed var(--pp-grey-4); }
.token-ok { font-family: var(--pp-mono); font-size: 10px; color: #1a7a30; }
.token-knop { font-size: 11px; padding: 6px 12px; border: 1.5px solid var(--pp-panel); background: var(--pp-white); cursor: pointer; margin-top: 4px; border-radius: 6px; transition: border-color .15s; }
.token-knop:hover { border-color: var(--pp-pass); color: var(--pp-pass); }

.vs-box { border: 1.5px solid var(--pp-panel); padding: 16px; border-radius: var(--pp-radius); margin-top: 14px; background: var(--pp-white); }
.vs-rij { display: flex; justify-content: space-between; padding: 5px 0; font-size: 12px; border-bottom: 1px solid var(--pp-grey-5); }
.adv-rij { display: flex; justify-content: space-between; font-size: 12px; color: var(--pp-grey-2); padding: 5px 0; border-bottom: 1px solid var(--pp-grey-5); }
.adv-token-ontvangen { font-family: var(--pp-mono); font-size: 10px; color: #1a7a30; margin-bottom: 12px; }
.richting { font-family: var(--pp-mono); font-size: 10px; color: var(--pp-grey-3); }
.rondje { width: 8px; height: 8px; border-radius: 50%; background: #1a7a30; display: inline-block; margin-right: 4px; }
.wie  { font-family: var(--pp-mono); font-size: 10px; color: var(--pp-grey-3); }
.ja   { color: #1a7a30; font-family: var(--pp-mono); font-size: 11px; }
.vb   { color: var(--pp-grey-3); font-family: var(--pp-mono); font-size: 11px; }
.plus { color: var(--pp-pass); font-family: var(--pp-mono); font-size: 11px; }

/* ──────────────────────────────────────────
   15. OBSERVER
────────────────────────────────────────── */
.obs-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: calc(100vh - 65px);
}

.obs-panel {
  padding: 24px 28px;
  border-right: 1px solid var(--pp-panel);
  overflow-y: auto;
  background: var(--pp-white);
}
.obs-panel:last-child { border-right: none; }

.obs-panel__title {
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--pp-grey-3);
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--pp-panel);
}

.obs-log-item {
  padding: 9px 0;
  border-bottom: 1px solid var(--pp-grey-5);
  font-family: var(--pp-mono);
  font-size: 12px;
}

.obs-tag {
  display: inline-block;
  font-size: 10px;
  padding: 1px 6px;
  border: 1px solid;
  margin-right: 8px;
  border-radius: 3px;
}
.obs-tag.ziet      { border-color: var(--pp-navy); color: var(--pp-navy); }
.obs-tag.ziet-niet { border-color: var(--pp-grey-4); color: var(--pp-grey-3); }
.obs-tag.stap      { border-color: var(--pp-grey-1); color: var(--pp-grey-1); }
.obs-tag.aanval    { border-color: #b01c1c; color: #b01c1c; }

.obs-tijd { color: var(--pp-grey-4); font-size: 11px; margin-right: 6px; }
.obs-data { color: var(--pp-grey-3); font-size: 11px; margin-top: 2px; word-break: break-all; }

.obs-uitleg { margin-bottom: 20px; }
.obs-uitleg h3 { font-size: 13px; font-weight: 700; margin-bottom: 5px; color: var(--pp-navy); }
.obs-uitleg p  { font-size: 12px; color: var(--pp-grey-2); line-height: 1.7; }
.obs-uitleg code {
  font-family: var(--pp-mono);
  font-size: 11px;
  background: var(--pp-bg);
  border: 1px solid var(--pp-panel);
  padding: 1px 4px;
  border-radius: 3px;
}

.obs-footer {
  padding: 12px 32px;
  border-top: 1px solid var(--pp-panel);
  font-size: 11px;
  color: var(--pp-grey-3);
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.obs-ft {
  display: inline-block;
  font-size: 10px;
  padding: 1px 5px;
  border: 1px solid;
  margin-right: 5px;
  border-radius: 3px;
  font-family: var(--pp-mono);
}

/* ──────────────────────────────────────────
   16. LANDING / LOGIN
────────────────────────────────────────── */
.lnd-wrap { max-width: 620px; margin: 0 auto; padding: 48px 24px; }
.lnd-scherm { display: none; }
.lnd-scherm.actief { display: block; }

.lnd-hero { text-align: center; padding: 40px 0 32px; }
.lnd-hero h2 { font-size: 28px; font-weight: 700; margin-bottom: 12px; color: var(--pp-navy); }
.lnd-hero p  { font-size: 15px; color: var(--pp-grey-2); max-width: 440px; margin: 0 auto 28px; }

.lnd-uitleg-rijen { margin-bottom: 36px; }
.lnd-uitleg-rij {
  display: flex;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--pp-grey-5);
  align-items: baseline;
}
.lnd-uitleg-rij:first-child { border-top: 1px solid var(--pp-grey-5); }
.lnd-stap-nr { font-family: var(--pp-mono); font-size: 12px; color: var(--pp-grey-4); flex-shrink: 0; width: 20px; }
.lnd-uitleg-rij p { font-size: 13px; color: var(--pp-grey-2); margin: 0; }

.lnd-login-stap {
  border: 1.5px solid var(--pp-panel);
  border-radius: var(--pp-radius);
  padding: 24px;
  margin-bottom: 16px;
  background: var(--pp-white);
}
.lnd-login-stap h3 { font-size: 15px; font-weight: 700; margin-bottom: 6px; display: flex; align-items: center; gap: 10px; color: var(--pp-navy); }
.lnd-login-stap p  { font-size: 13px; color: var(--pp-grey-2); margin-bottom: 14px; }

.lnd-stap-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: 1.5px solid var(--pp-panel);
  border-radius: 50%;
  font-size: 12px;
  font-family: var(--pp-mono);
  flex-shrink: 0;
}
.lnd-stap-badge.done   { background: var(--pp-pass); color: var(--pp-white); border-color: var(--pp-pass); }
.lnd-stap-badge.active { border-color: var(--pp-pass); color: var(--pp-pass); }

.lnd-voortgang {
  margin-bottom: 28px;
  padding: 12px 16px;
  background: var(--pp-accent-light);
  border: 1px solid var(--pp-panel);
  border-radius: 8px;
  font-size: 13px;
  color: var(--pp-grey-2);
}

.lnd-nonce-display {
  margin-bottom: 14px;
  padding: 12px;
  background: var(--pp-bg);
  border: 1px solid var(--pp-panel);
  border-radius: 8px;
  font-family: var(--pp-mono);
  font-size: 12px;
  display: none;
}
.lnd-nonce-code { font-size: 18px; letter-spacing: 3px; margin: 6px 0 4px; color: var(--pp-pass); }

.lnd-label {
  display: block;
  font-size: 12px;
  color: var(--pp-grey-3);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 6px;
  font-family: var(--pp-mono);
}
.lnd-input {
  width: 100%;
  padding: 10px 12px;
  border: 1.5px solid var(--pp-panel);
  border-radius: 8px;
  font-family: var(--pp-mono);
  font-size: 14px;
  margin-bottom: 16px;
  outline: none;
  color: var(--pp-dark);
  background: var(--pp-white);
  transition: border-color .15s;
}
.lnd-input:focus { border-color: var(--pp-pass); }

.lnd-btn {
  padding: 10px 20px;
  border: 1.5px solid var(--pp-panel);
  border-radius: 8px;
  background: var(--pp-white);
  color: var(--pp-navy);
  cursor: pointer;
  font-size: 13px;
  font-family: var(--pp-font);
  font-weight: 600;
  margin-right: 8px;
  margin-bottom: 8px;
  transition: background .15s, color .15s, border-color .15s;
}
.lnd-btn:hover { background: var(--pp-pass); color: var(--pp-white); border-color: var(--pp-pass); }
.lnd-btn.primair { background: var(--pp-pass); color: var(--pp-white); border-color: var(--pp-pass); }
.lnd-btn.primair:hover { background: #1750e0; border-color: #1750e0; }
.lnd-btn.gevaar { border-color: #b01c1c; color: #b01c1c; background: var(--pp-white); }
.lnd-btn.gevaar:hover { background: #b01c1c; color: var(--pp-white); }
.lnd-btn:disabled { border-color: var(--pp-grey-5); color: var(--pp-grey-4); cursor: not-allowed; background: var(--pp-white); }

.lnd-welkom-kaart {
  border: 1.5px solid var(--pp-panel);
  border-radius: var(--pp-radius);
  padding: 32px;
  margin-bottom: 20px;
  background: var(--pp-white);
}
.lnd-welkom-kaart h2 { font-size: 22px; font-weight: 700; margin-bottom: 8px; color: var(--pp-navy); }
.lnd-welkom-kaart p  { font-size: 14px; color: var(--pp-grey-2); margin-bottom: 20px; }

.lnd-formulier-kaart {
  border: 1.5px solid var(--pp-panel);
  border-radius: var(--pp-radius);
  padding: 24px;
  margin-bottom: 16px;
  background: var(--pp-white);
}
.lnd-formulier-kaart h3 { font-size: 15px; font-weight: 700; margin-bottom: 14px; color: var(--pp-navy); }

.lnd-server-info {
  margin-top: 20px;
  padding: 14px;
  background: var(--pp-bg);
  border: 1px solid var(--pp-panel);
  border-radius: 8px;
  font-family: var(--pp-mono);
  font-size: 12px;
}
.lnd-server-info-rij { display: flex; gap: 12px; margin-bottom: 6px; }
.lnd-si-lbl { color: var(--pp-grey-3); font-size: 10px; text-transform: uppercase; letter-spacing: .07em; width: 100px; flex-shrink: 0; }
.lnd-si-val { color: var(--pp-dark); }
.lnd-si-val.nee { color: #b01c1c; text-decoration: line-through; }
.lnd-si-val.ja  { color: #1a7a30; }

.lnd-log-blok {
  border: 1.5px solid var(--pp-panel);
  border-radius: var(--pp-radius);
  overflow: hidden;
  margin-top: 20px;
  background: var(--pp-white);
}
.lnd-log-blok-header {
  padding: 10px 14px;
  border-bottom: 1px solid var(--pp-panel);
  font-family: var(--pp-mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--pp-grey-3);
  display: flex;
  justify-content: space-between;
  background: var(--pp-bg);
}
.lnd-log-item {
  padding: 7px 14px;
  border-bottom: 1px solid var(--pp-grey-5);
  font-family: var(--pp-mono);
  font-size: 12px;
}
.lnd-log-item:last-child { border-bottom: none; }

.lnd-tag {
  font-size: 10px;
  padding: 1px 5px;
  border: 1px solid;
  margin-right: 6px;
  border-radius: 3px;
  font-family: var(--pp-mono);
  font-weight: 700;
  text-transform: uppercase;
}
.lnd-tag.ziet      { border-color: var(--pp-navy); color: var(--pp-navy); }
.lnd-tag.ziet-niet { border-color: var(--pp-grey-4); color: var(--pp-grey-3); }
.lnd-tag.stap      { border-color: var(--pp-grey-1); color: var(--pp-grey-1); }
.lnd-tag.aanval    { border-color: #b01c1c; color: #b01c1c; }
.lnd-tijd { color: var(--pp-grey-4); font-size: 11px; margin-right: 5px; }
.lnd-data { color: var(--pp-grey-3); font-size: 11px; margin-top: 2px; word-break: break-all; padding-left: 80px; }

.lnd-zkp-status {
  display: none;
  margin-top: 14px;
  border: 1.5px solid var(--pp-panel);
  border-radius: 8px;
  padding: 12px 14px;
  font-family: var(--pp-mono);
  font-size: 12px;
  line-height: 2.2;
  background: var(--pp-bg);
}
.lnd-zkp-rij { display: flex; gap: 10px; align-items: center; color: var(--pp-grey-4); }
.lnd-zkp-uitleg {
  display: none;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--pp-panel);
  font-family: var(--pp-font);
  font-size: 11px;
  color: var(--pp-grey-3);
  font-style: italic;
  line-height: 1.5;
}

/* ──────────────────────────────────────────
   17. DEMO-BRUG BANNERS
────────────────────────────────────────── */
.demo-brug { width: 100%; padding: 0 24px; }
.demo-brug__inner { max-width: 1200px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; flex-wrap: wrap; }
.demo-brug__tekst { display: flex; align-items: center; gap: 12px; font-size: 14px; font-weight: 500; line-height: 1.4; }
.demo-brug__oogmerk { font-family: var(--pp-mono); font-size: 10px; text-transform: uppercase; letter-spacing: .1em; font-weight: 700; padding: 3px 8px; flex-shrink: 0; border-radius: 4px; }
.demo-brug__knop { font-family: var(--pp-mono); font-size: 12px; font-weight: 700; letter-spacing: .04em; text-decoration: none; padding: 8px 18px; border: 2px solid; white-space: nowrap; flex-shrink: 0; border-radius: 6px; transition: background .15s, color .15s; }
.demo-brug--a { background: var(--pp-accent-light); border-top: 1px solid var(--pp-panel); border-bottom: 1px solid var(--pp-panel); }
.demo-brug--a .demo-brug__oogmerk { background: var(--pp-pass); color: var(--pp-white); }
.demo-brug--a .demo-brug__tekst { color: var(--pp-navy); }
.demo-brug--a .demo-brug__knop { color: var(--pp-pass); border-color: var(--pp-pass); background: transparent; }
.demo-brug--a .demo-brug__knop:hover { background: var(--pp-pass); color: var(--pp-white); }
.demo-brug--b { background: var(--pp-bg); border-top: 1px solid var(--pp-panel); border-bottom: 1px solid var(--pp-panel); }
.demo-brug--b .demo-brug__oogmerk { background: var(--pp-navy); color: var(--pp-white); }
.demo-brug--b .demo-brug__tekst { color: var(--pp-grey-1); }
.demo-brug--b .demo-brug__knop { color: var(--pp-navy); border-color: var(--pp-navy); background: transparent; }
.demo-brug--b .demo-brug__knop:hover { background: var(--pp-navy); color: var(--pp-white); }

/* ──────────────────────────────────────────
   18. TOOLTIPS
────────────────────────────────────────── */
.w-noot {
  cursor: pointer;
  color: var(--pp-accent);
  font-size: 11px;
  position: relative;
}
.w-noot::after {
  content: attr(data-tip);
  display: none;
  position: absolute;
  bottom: 140%;
  left: 50%;
  transform: translateX(-50%);
  background: var(--pp-navy);
  color: var(--pp-white);
  font-size: 12px;
  line-height: 1.6;
  padding: 10px 14px;
  width: 260px;
  border-radius: 6px;
  font-family: var(--pp-mono);
  font-weight: 400;
  z-index: 10;
  white-space: normal;
}
.w-noot:hover::after,
.w-noot:focus::after { display: block; }

/* ──────────────────────────────────────────
   19. ANIMATIES
────────────────────────────────────────── */
@keyframes spin { to { transform: rotate(360deg); } }

/* ──────────────────────────────────────────
   20. RESPONSIVE
────────────────────────────────────────── */
@media (max-width: 1100px) {
  .pp-product-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  :root { --pp-section: 40px; }
  .pp-hero__row { flex-direction: column; gap: 32px; }
  .pp-hero__logo-large { display: none; }
}

@media (max-width: 600px) {
  .pp-product-grid { grid-template-columns: 1fr; }
  .pp-nav { display: none; }
  .pp-doc-grid { grid-template-columns: 1fr; }
  .phones-row { flex-direction: column; align-items: center; }
  .pijl-wrap { display: none; }
  .prismid-layout { flex-direction: column; }
  .interesse-layout { flex-direction: column; }
  .duress-inner { grid-template-columns: 1fr; }
  .api-code-grid { grid-template-columns: 1fr; }
  .api-error-row { grid-template-columns: 60px 1fr; }
  .api-error-desc { grid-column: 1 / -1; }
  .demo-brug__inner { flex-direction: column; align-items: flex-start; }
}

/* ===========================================================
   CSS ALIAS-VARIABELEN — bridgen oude page-vars naar tokens
   =========================================================== */
:root {
  --zwart:      var(--pp-black);
  --wit:        var(--pp-white);
  --g1:         var(--pp-grey-1);
  --g2:         var(--pp-grey-2);
  --g3:         var(--pp-grey-3);
  --g4:         var(--pp-grey-4);
  --g5:         var(--pp-grey-5);
  --g6:         var(--pp-grey-6);
  --mono:       var(--pp-mono);
  --blauw:      var(--pp-pass);
  --blauw-bg:   #EEF3FF;
  --blauw-rand: var(--pp-panel);
  --oranje:     var(--pp-id);
  --paars:      var(--pp-pin);
  --teal:       #1a7a6a;
  --teal-bg:    #f0faf8;
}

/* ===========================================================
   CANONIEKE GEDEELDE COMPONENTEN
   Uniform voor alle pagina's — design tokens overal
   =========================================================== */

/* --- Kleur-utiliteiten --- */
.rood  { color: #c0392b; }
.groen { color: var(--pp-shield); }
.blauw { color: var(--pp-pass); }
/* LET OP: generieke .actief { background:navy; color:white } is hier bewust verwijderd —
   class="actief" wordt nergens los gebruikt, en de regel "lekte" door naar
   .scenario-panel.actief, .sub-tab.actief, .demo-tab.actief e.d. (navy-op-navy /
   volledig blauw vlak). Specifieke .xxx.actief-regels verderop in dit bestand
   bepalen hun eigen achtergrond/kleur. */

/* --- Tags / badges --- */
.tag {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-family: var(--pp-mono);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.tag-blauw  { background: #EEF3FF; color: var(--pp-pass); border: 1px solid var(--pp-panel); }
.tag-groen  { background: #f0faf4; color: var(--pp-shield); border: 1px solid #a8d5bb; }
.tag-oranje { background: #fff5ee; color: var(--pp-id); border: 1px solid #ffd0a0; }
.tag-rood   { background: #fdf0ef; color: #c0392b; border: 1px solid #f5c0b8; }
.tag-grijs  { background: var(--pp-grey-6); color: var(--pp-grey-2); border: 1px solid var(--pp-grey-5); }

/* Ja / Nee --- */
.ja  { color: var(--pp-shield); font-weight: 700; }
.nee { color: #c0392b; font-weight: 700; }

/* --- Sim-banner (simulatie-indicator bovenaan demo-pagina's) --- */
.sim-banner {
  background: var(--pp-navy);
  color: var(--pp-white);
  font-family: var(--pp-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .1em;
  padding: 10px 20px;
  margin-bottom: 28px;
  border-radius: var(--pp-radius);
}

/* --- Knop --- */
.btn {
  display: inline-block;
  padding: 11px 22px;
  border-radius: var(--pp-radius);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  border: none;
  background: var(--pp-pass);
  color: var(--pp-white);
  text-decoration: none;
  transition: opacity .15s;
}
.btn:hover { opacity: .85; }
.btn--outline {
  background: transparent;
  border: 1.5px solid var(--pp-pass);
  color: var(--pp-pass);
}
.btn--groen { background: var(--pp-shield); }
.btn--rood  { background: #c0392b; }

/* --- Stap-nummer (cirkel met nummer voor stappenlijst) --- */
.stap-nr {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--pp-pass);
  color: var(--pp-white);
  font-family: var(--pp-mono);
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
}

/* --- Stat-balk (statistiekenrij) --- */
.stat-balk {
  display: flex;
  gap: 0;
  border: 1.5px solid var(--pp-panel);
  border-radius: var(--pp-radius);
  margin-bottom: 28px;
  overflow: hidden;
}
.stat-item {
  flex: 1;
  padding: 18px 20px;
  border-right: 1px solid var(--pp-panel);
  text-align: center;
  background: var(--pp-white);
}
.stat-item:last-child { border-right: none; }
.stat-getal {
  font-size: 32px;
  font-weight: 700;
  font-family: var(--pp-mono);
  color: var(--pp-navy);
  line-height: 1.1;
  margin-bottom: 4px;
}
.stat-getal.rood  { color: #c0392b; }
.stat-getal.groen { color: var(--pp-shield); }
.stat-lbl {
  font-size: 11px;
  color: var(--pp-grey-2);
  font-family: var(--pp-mono);
  text-transform: uppercase;
  letter-spacing: .06em;
}
@media (max-width: 480px) {
  .stat-balk { flex-direction: column; }
  .stat-item { border-right: none; border-bottom: 1px solid var(--pp-panel); }
  .stat-item:last-child { border-bottom: none; }
}

/* --- Stat-grid (als .stat-balk maar in grid) --- */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0;
  border: 1.5px solid var(--pp-panel);
  border-radius: var(--pp-radius);
  margin-bottom: 28px;
  overflow: hidden;
}
.stat-grid .stat-item { border-bottom: 1px solid var(--pp-panel); }

/* --- Tabs --- */
.tabs {
  display: flex;
  gap: 0;
  border: 1.5px solid var(--pp-panel);
  border-bottom: none;
  border-radius: var(--pp-radius) var(--pp-radius) 0 0;
  overflow: hidden;
}
.tab {
  flex: 1;
  padding: 13px 16px;
  background: var(--pp-white);
  border: none;
  border-right: 1px solid var(--pp-panel);
  cursor: pointer;
  text-align: left;
  font-family: var(--pp-font);
  font-size: 13px;
  font-weight: 600;
  color: var(--pp-grey-2);
  line-height: 1.3;
  transition: background .12s;
}
.tab:last-child { border-right: none; }
.tab:hover { background: #EEF3FF; }
.tab.actief {
  background: var(--pp-navy);
  color: var(--pp-white);
}
.tab-cat {
  font-size: 10px;
  font-family: var(--pp-mono);
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--pp-grey-3);
  padding-bottom: 4px;
}
.tab.actief .tab-cat { color: var(--pp-panel); }
.tab-panel {
  border: 1.5px solid var(--pp-panel);
  border-top: none;
  border-radius: 0 0 var(--pp-radius) var(--pp-radius);
  margin-bottom: 28px;
  background: var(--pp-white);
}

/* --- Openingsquote / citaat --- */
.openingsquote,
.citaat,
.quote-blok {
  border-left: 4px solid var(--pp-pass);
  background: #EEF3FF;
  padding: 18px 22px;
  border-radius: 0 var(--pp-radius) var(--pp-radius) 0;
  font-style: italic;
  color: var(--pp-navy);
  margin-bottom: 28px;
  font-size: 15px;
  line-height: 1.75;
}

/* --- Inzicht-blok --- */
.inzicht {
  border: 1.5px solid var(--pp-panel);
  border-left: 4px solid var(--pp-pass);
  background: #EEF3FF;
  padding: 16px 20px;
  border-radius: var(--pp-radius);
  margin-bottom: 20px;
  font-size: 14px;
  color: var(--pp-navy);
  line-height: 1.7;
}

/* --- Vergelijk-grid (voor/na, oud/nieuw) --- */
.vergelijk-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border: 1.5px solid var(--pp-panel);
  border-radius: var(--pp-radius);
  overflow: hidden;
  margin-bottom: 24px;
}
.vergelijk-kant {
  padding: 20px 24px;
  font-size: 13px;
  color: var(--pp-grey-1);
  line-height: 1.8;
}
.vergelijk-kant + .vergelijk-kant {
  border-left: 1px solid var(--pp-panel);
  background: #f0faf4;
}
.vk-label {
  font-family: var(--pp-mono);
  font-size: 10px;
  letter-spacing: .1em;
  color: var(--pp-grey-3);
  margin-bottom: 10px;
  text-transform: uppercase;
}
.vk-label.groen { color: var(--pp-shield); }
.vk-label.rood  { color: #c0392b; }
@media (max-width: 600px) { .vergelijk-grid { grid-template-columns: 1fr; } .vergelijk-kant + .vergelijk-kant { border-left: none; border-top: 1px solid var(--pp-panel); } }

/* --- Scenario-box --- */
.scenario {
  border: 1.5px solid var(--pp-panel);
  border-radius: var(--pp-radius);
  overflow: hidden;
  margin-bottom: 24px;
}
.scenario-vraag {
  background: var(--pp-navy);
  color: var(--pp-white);
  padding: 14px 20px;
  font-size: 14px;
  font-weight: 700;
}
.scenario-antwoord {
  padding: 16px 20px;
  font-size: 14px;
  color: var(--pp-grey-1);
  line-height: 1.75;
  background: var(--pp-white);
}

/* --- Prism-actie (blauwe actiebalk in tab-panel) --- */
.prism-actie {
  padding: 14px 24px;
  background: #EEF3FF;
  border-bottom: 1px solid var(--pp-panel);
  font-size: 13px;
  color: var(--pp-pass);
}
.prism-actie-label {
  font-family: var(--pp-mono);
  font-size: 10px;
  color: var(--pp-pass);
  letter-spacing: .08em;
  margin-bottom: 4px;
  text-transform: uppercase;
}

/* --- Infra-tabel (speciaal formaat tabel met bold eerste kolom) --- */
.infra-tabel {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  margin-bottom: 20px;
}
.infra-tabel th {
  background: #EEF3FF;
  padding: 9px 14px;
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  font-family: var(--pp-mono);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--pp-navy);
  border-bottom: 2px solid var(--pp-panel);
}
.infra-tabel td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--pp-panel);
  vertical-align: top;
  color: var(--pp-grey-1);
}
.infra-tabel td:first-child {
  font-weight: 700;
  background: #EEF3FF;
  color: var(--pp-navy);
  width: 30%;
}
.infra-tabel tr:last-child td { border-bottom: none; }

/* --- Essay-sectie (lange tekstpagina's) --- */
.essay-sectie { margin-bottom: 24px; }
.essay-sectie h3 {
  font-size: 15px;
  font-weight: 700;
  margin: 0 0 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--pp-panel);
  color: var(--pp-navy);
}
.essay-sectie p {
  font-size: 14px;
  color: var(--pp-grey-1);
  line-height: 1.85;
  margin-bottom: 14px;
}
.essay-sectie p:last-child { margin-bottom: 0; }

/* --- Bronnen-lijst --- */
.bronnen-lijst {
  font-size: 12px;
  color: var(--pp-grey-2);
  line-height: 1.7;
  padding-left: 18px;
}
.bronnen-lijst li { margin-bottom: 6px; }
.bronnen-lijst a { color: var(--pp-pass); text-decoration: none; }

/* --- Timeline --- */
.tl-wrap { position: relative; padding-left: 28px; }
.tl-wrap::before {
  content: '';
  position: absolute;
  left: 9px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--pp-panel);
}
.tl-item { position: relative; margin-bottom: 20px; }
.tl-dot {
  position: absolute;
  left: -24px;
  top: 3px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--pp-pass);
  border: 2px solid var(--pp-white);
  box-shadow: 0 0 0 2px var(--pp-panel);
}
.tl-datum {
  font-family: var(--pp-mono);
  font-size: 10px;
  color: var(--pp-grey-3);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 3px;
}
.tl-titel {
  font-size: 14px;
  font-weight: 700;
  color: var(--pp-navy);
  margin-bottom: 4px;
}
.tl-tekst {
  font-size: 13px;
  color: var(--pp-grey-1);
  line-height: 1.7;
}

/* --- Twee-kolom layout --- */
.twee-kolom {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 28px;
}
@media (max-width: 680px) { .twee-kolom { grid-template-columns: 1fr; } }

/* --- Vier-kolom layout --- */
.vier-kolom {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 28px;
}
@media (max-width: 800px) { .vier-kolom { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .vier-kolom { grid-template-columns: 1fr; } }

/* --- Verhaal-blok (narratief langere tekst) --- */
.verhaal {
  border-left: 3px solid var(--pp-panel);
  padding: 16px 20px;
  margin-bottom: 20px;
  font-size: 14px;
  color: var(--pp-grey-1);
  line-height: 1.8;
}

/* --- Scope-blok --- */
.scope {
  border: 1.5px solid var(--pp-panel);
  border-radius: var(--pp-radius);
  padding: 16px 20px;
  margin-bottom: 20px;
  background: var(--pp-white);
}
.scope-titel {
  font-size: 12px;
  font-family: var(--pp-mono);
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--pp-grey-3);
  margin-bottom: 8px;
}

/* --- Slotwoord / conclusie --- */
.slotwoord,
.conclusie {
  background: #EEF3FF;
  border: 1.5px solid var(--pp-panel);
  border-top: 4px solid var(--pp-pass);
  padding: 20px 24px;
  border-radius: var(--pp-radius);
  margin-bottom: 28px;
  font-size: 14px;
  color: var(--pp-navy);
  line-height: 1.8;
}
.conclusie-groen {
  background: #f0faf4;
  border: 1.5px solid #a8d5bb;
  border-top: 4px solid var(--pp-shield);
  padding: 20px 24px;
  border-radius: var(--pp-radius);
  margin-bottom: 28px;
  font-size: 14px;
  color: #1a4a2a;
  line-height: 1.8;
}

/* --- Tagline-blok --- */
.tagline,
.tagline-blok {
  border-top: 2px solid var(--pp-panel);
  padding-top: 20px;
  margin-top: 28px;
  font-size: 15px;
  font-style: italic;
  color: var(--pp-grey-2);
  text-align: center;
}

/* --- Aanvraag-blok (prismchat) --- */
.aanvraag-blok {
  border: 1.5px solid var(--pp-panel);
  border-radius: var(--pp-radius);
  overflow: hidden;
  margin-bottom: 20px;
}
.aanvraag-blok__header {
  background: var(--pp-navy);
  color: var(--pp-white);
  padding: 12px 18px;
  font-size: 13px;
  font-weight: 700;
}
.aanvraag-blok__body {
  padding: 16px 18px;
  font-size: 14px;
  color: var(--pp-grey-1);
  line-height: 1.7;
}
.aanvraag-eis {
  font-size: 13px;
  padding: 6px 0;
  border-bottom: 1px solid var(--pp-panel);
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.aanvraag-eis:last-child { border-bottom: none; }
.aanvraag-knop {
  display: block;
  width: 100%;
  padding: 13px;
  background: var(--pp-pass);
  color: var(--pp-white);
  border: none;
  border-radius: var(--pp-radius);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  margin-top: 14px;
  text-align: center;
}
.aanvraag-knop:hover { opacity: .85; }
.aanvraag-vereisten {
  font-size: 12px;
  color: var(--pp-grey-3);
  margin-top: 8px;
}

/* --- Interesse-grid (PrismAdd) --- */
.interesse-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  margin-bottom: 24px;
}
.interesse-item {
  border: 1.5px solid var(--pp-panel);
  border-radius: var(--pp-radius);
  padding: 14px;
  cursor: pointer;
  text-align: center;
  font-size: 13px;
  background: var(--pp-white);
  transition: border-color .15s, background .15s;
}
.interesse-item:hover,
.interesse-item.aan { border-color: var(--pp-pass); background: #EEF3FF; }
.interesse-item.aan { font-weight: 700; color: var(--pp-navy); }

/* --- Diagram-blok --- */
.diagram {
  border: 1.5px solid var(--pp-panel);
  border-radius: var(--pp-radius);
  padding: 24px;
  margin-bottom: 24px;
  text-align: center;
  background: var(--pp-white);
}

/* --- ZKP stappen --- */
.zkp-stap {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 18px;
}
.zkp-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--pp-pass);
  color: var(--pp-white);
  font-family: var(--pp-mono);
  font-size: 14px;
  font-weight: 700;
  flex-shrink: 0;
}

/* --- Vier-vragen grid --- */
.vier-vragen {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 28px;
}
.vier-vragen__item {
  border: 1.5px solid var(--pp-panel);
  border-radius: var(--pp-radius);
  padding: 18px 20px;
  background: var(--pp-white);
}
.vier-vragen__item:nth-child(1) { border-top-color: var(--pp-pass); border-top-width: 3px; }
.vier-vragen__item:nth-child(2) { border-top-color: var(--pp-shield); border-top-width: 3px; }
.vier-vragen__item:nth-child(3) { border-top-color: var(--pp-id); border-top-width: 3px; }
.vier-vragen__item:nth-child(4) { border-top-color: var(--pp-pin); border-top-width: 3px; }
@media (max-width: 600px) { .vier-vragen { grid-template-columns: 1fr; } }

/* --- Uitleg-blok --- */
.uitleg-blok {
  background: #EEF3FF;
  border: 1.5px solid var(--pp-panel);
  border-radius: var(--pp-radius);
  padding: 18px 22px;
  margin-bottom: 20px;
  font-size: 14px;
  color: var(--pp-navy);
  line-height: 1.75;
}

/* --- Voordelen-grid --- */
.voordelen-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-bottom: 28px;
}
.voordeel {
  border: 1.5px solid var(--pp-panel);
  border-radius: var(--pp-radius);
  padding: 18px 20px;
  background: var(--pp-white);
  font-size: 14px;
  color: var(--pp-grey-1);
  line-height: 1.7;
}

/* --- Risico-tabel stijlen --- */
.risico-laag   { color: var(--pp-shield); font-weight: 700; }
.risico-middel { color: #d97706; font-weight: 700; }
.risico-hoog   { color: #c0392b; font-weight: 700; }

/* --- Aanpak-badge (prismair) --- */
.aanpak-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  font-family: var(--pp-mono);
  text-transform: uppercase;
  letter-spacing: .06em;
  background: var(--pp-pass);
  color: var(--pp-white);
}

/* --- Observer log stijlen --- */
.obs-log-item {
  display: flex;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--pp-panel);
  font-size: 13px;
  align-items: flex-start;
}
.obs-log-item:last-child { border-bottom: none; }
.obs-tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 10px;
  font-family: var(--pp-mono);
  font-weight: 700;
  text-transform: uppercase;
  flex-shrink: 0;
}

/* --- A-labels (PrismID bewijs) --- */
.a-lbl {
  font-size: 11px;
  font-family: var(--pp-mono);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--pp-grey-3);
  margin-bottom: 3px;
}
.a-val {
  font-size: 14px;
  font-weight: 700;
  color: var(--pp-navy);
}
.a-sub {
  font-size: 12px;
  color: var(--pp-grey-2);
  margin-top: 2px;
}

/* --- Centroid-live stijlen --- */
.centroid-cirkel {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  border: 3px solid var(--pp-panel);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  flex-direction: column;
  text-align: center;
  transition: border-color .3s;
}
.centroid-cirkel.actief { border-color: var(--pp-shield); }
.centroid-cirkel.alarm  { border-color: #c0392b; }

/* --- Profiel-kaart stijlen --- */
.profiel-ring {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--pp-pass), var(--pp-pin));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  margin: 0 auto 16px;
}

/* --- NFC-landing stijlen --- */
.nfc-kring {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  border: 3px solid var(--pp-panel);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  font-size: 48px;
  animation: nfc-pulse 2s ease-in-out infinite;
}
@keyframes nfc-pulse {
  0%, 100% { border-color: var(--pp-panel); transform: scale(1); }
  50%       { border-color: var(--pp-pass); transform: scale(1.06); }
}

/* --- Aanval-indicator (inlog-pagina) --- */
.aanval {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 700;
  background: #fdf0ef;
  color: #c0392b;
  border: 1px solid #f5c0b8;
  font-family: var(--pp-mono);
}

/* --- Over-mij stijlen --- */
.foto-blok {
  text-align: center;
  padding: 24px;
}
.foto-ring {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--pp-pass), var(--pp-pin));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
  margin: 0 auto 12px;
}

/* --- Tekst-utiliteiten --- */
.tekst-groen { color: var(--pp-shield); }
.tekst-rood  { color: #c0392b; }
.tekst-blauw { color: var(--pp-pass); }
.tekst-grijs { color: var(--pp-grey-2); }
.tekst-mono  { font-family: var(--pp-mono); }
.vet         { font-weight: 700; }

/* --- Prism-actie-indicator --- */
.prism-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-family: var(--pp-mono);
  font-weight: 700;
  background: var(--pp-navy);
  color: var(--pp-white);
}

/* --- FAQ-stijlen --- */
.faq-item {
  border-bottom: 1px solid var(--pp-panel);
  padding: 18px 0;
}
.faq-vraag {
  font-size: 15px;
  font-weight: 700;
  color: var(--pp-navy);
  margin-bottom: 8px;
  cursor: pointer;
}
.faq-antwoord {
  font-size: 14px;
  color: var(--pp-grey-1);
  line-height: 1.75;
}

/* --- Praktijk-pagina stijlen --- */
.stap-blok {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 16px 0;
  border-bottom: 1px solid var(--pp-panel);
}
.stap-blok:last-child { border-bottom: none; }
.stap-inhoud h4 {
  font-size: 14px;
  font-weight: 700;
  color: var(--pp-navy);
  margin-bottom: 6px;
}
.stap-inhoud p {
  font-size: 13px;
  color: var(--pp-grey-1);
  line-height: 1.7;
}

/* --- Aquapass stijlen --- */
.aqua-kleur { color: #0077b6; }
.aqua-bg    { background: #e8f4fd; }
.aqua-rand  { border-color: #90caf9; }

/* ===========================================================
   RESPONSIEF — aanvullend voor migrated componenten
   =========================================================== */
@media (max-width: 680px) {
  .vergelijk-grid { grid-template-columns: 1fr; }
  .vier-vragen    { grid-template-columns: 1fr; }
  .tabs           { flex-direction: column; }
  .tab            { border-right: none; border-bottom: 1px solid var(--pp-panel); }
}

/* ===========================================================
   WELKOM-PAGINA COMPONENTEN (.w-*)
   =========================================================== */

/* Label boven titels */
.w-label {
  font-family: var(--pp-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--pp-grey-2);
  margin-bottom: 10px;
}

/* Sectietitel */
.w-titel {
  font-size: clamp(22px, 3vw, 32px);
  font-weight: 700;
  color: var(--pp-navy);
  margin-bottom: 28px;
  line-height: 1.25;
}

/* Hero sectie */
.w-hero {
  background: linear-gradient(135deg, #EEF3FF 0%, #ffffff 60%);
  border-bottom: 1px solid var(--pp-panel);
  padding: 72px 24px 64px;
}
.w-hero h1 {
  font-size: clamp(28px, 4.5vw, 52px);
  font-weight: 800;
  color: var(--pp-navy);
  line-height: 1.18;
  margin-bottom: 24px;
  max-width: 640px;
}
.w-hero h1 span {
  color: var(--pp-accent);
}

/* Knoppen-rij in hero */
.w-knoppen {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}
.w-knop {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--pp-navy);
  color: #fff;
  font-family: var(--pp-mono);
  font-size: 13px;
  font-weight: 600;
  padding: 12px 24px;
  text-decoration: none;
  border: 2px solid var(--pp-navy);
  transition: background .15s, color .15s;
}
.w-knop:hover {
  background: var(--pp-accent);
  border-color: var(--pp-accent);
}
.w-knop--ghost {
  background: transparent;
  color: var(--pp-navy);
}
.w-knop--ghost:hover {
  background: var(--pp-navy);
  color: #fff;
}

/* Afbeelding-logo in hero */
.pp-hero__logo-large {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.pp-hero__logo-large img {
  max-width: 200px;
  width: 100%;
  height: auto;
}

/* 3-koloms grid (herkenningsblokken) */
.w-grid-3 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 20px;
  margin-bottom: 32px;
}
.w-grid-3__item {
  border: 1px solid var(--pp-panel);
  border-radius: var(--pp-radius, 8px);
  padding: 20px;
  background: var(--pp-white);
}
.w-grid-3__emoji {
  font-size: 28px;
  display: block;
  margin-bottom: 10px;
}
.w-grid-3__kop {
  font-size: 14px;
  font-weight: 700;
  color: var(--pp-navy);
  margin-bottom: 8px;
}
.w-grid-3__tekst {
  font-size: 13px;
  color: var(--pp-grey-1);
  line-height: 1.65;
  margin-bottom: 10px;
}
.w-grid-3__keuze {
  font-size: 13px;
  color: var(--pp-accent);
  font-style: italic;
  line-height: 1.55;
  margin: 0;
}

/* Vergelijkingstabel */
.w-tabel {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  margin-bottom: 28px;
}
.w-tabel th {
  background: var(--pp-navy);
  color: #fff;
  font-family: var(--pp-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .08em;
  padding: 10px 14px;
  text-align: left;
  font-weight: 600;
}
.w-tabel td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--pp-panel);
  vertical-align: top;
  line-height: 1.6;
  color: var(--pp-grey-1);
}
.w-tabel td.nu {
  color: var(--pp-grey-2);
}
.w-tabel td.prism {
  color: var(--pp-navy);
  font-weight: 500;
}
.w-tabel tr:last-child td { border-bottom: none; }

/* Vier producten grid */
.w-producten {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 20px;
  margin-top: 8px;
}
.w-product {
  border: 1px solid var(--pp-panel);
  border-radius: var(--pp-radius, 8px);
  padding: 22px;
  background: var(--pp-white);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.w-product__naam {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.w-product__naam strong {
  font-size: 16px;
  font-weight: 700;
  color: var(--pp-navy);
}
.w-product__naam span {
  font-family: var(--pp-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--pp-grey-2);
}
.w-product__tekst {
  font-size: 13px;
  color: var(--pp-grey-1);
  line-height: 1.65;
  flex: 1;
}
.w-product__link {
  font-size: 13px;
  color: var(--pp-accent);
  text-decoration: none;
  font-weight: 600;
  margin-top: auto;
}
.w-product__link:hover { text-decoration: underline; }

/* Afbeelding-blok */
.w-afb {
  text-align: center;
  margin: 0;
}
.w-afb figcaption {
  font-size: 12px;
  color: var(--pp-grey-2);
  margin-top: 10px;
  font-style: italic;
}

/* Principe-quote balk */
.w-principe {
  background: var(--pp-navy);
  color: #fff;
  padding: 40px 24px;
  text-align: center;
}
.w-principe p {
  font-size: clamp(16px, 2.5vw, 22px);
  font-style: italic;
  font-weight: 500;
  max-width: 700px;
  margin: 0 auto;
  line-height: 1.5;
}

/* CTA twee kolommen */
.w-cta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.w-cta__blok {
  border: 1px solid var(--pp-panel);
  border-radius: var(--pp-radius, 8px);
  padding: 28px;
  background: var(--pp-white);
}
.w-cta__blok h3 {
  font-size: 20px;
  font-weight: 700;
  color: var(--pp-navy);
  margin: 8px 0 12px;
}
.w-cta__blok p {
  font-size: 14px;
  color: var(--pp-grey-1);
  line-height: 1.65;
  margin-bottom: 20px;
}

/* Responsief welkom */
@media (max-width: 680px) {
  .w-grid-3         { grid-template-columns: 1fr; }
  .w-producten      { grid-template-columns: 1fr; }
  .w-cta            { grid-template-columns: 1fr; }
  .w-hero h1        { font-size: 26px; }
  .pp-hero__row     { flex-direction: column; }
  .pp-hero__logo-large { display: none; }
}

/* ===========================================================
   ADOPTIELAGEN — lagen.html (.laag-*, .apparaat-*, etc.)
   =========================================================== */

.lagen-nav {
  display: flex;
  gap: 0;
  margin-bottom: 0;
  border: 1px solid var(--pp-panel);
  border-radius: 8px 8px 0 0;
  overflow: hidden;
}
.laag-knop {
  flex: 1;
  background: var(--pp-grey-6);
  border: none;
  border-right: 1px solid var(--pp-panel);
  padding: 12px 16px;
  cursor: pointer;
  text-align: left;
  transition: background .15s;
}
.laag-knop:last-child { border-right: none; }
.laag-knop.actief {
  background: var(--pp-navy);
  color: #fff;
}
.laag-knop-inner { display: flex; flex-direction: column; gap: 2px; }
.laag-nr   { font-family: var(--pp-mono); font-size: 10px; text-transform: uppercase; letter-spacing: .08em; opacity: .75; }
.laag-naam { font-size: 14px; font-weight: 700; }
.laag-wie  { font-size: 11px; opacity: .7; }
.laag-knop.actief .laag-nr,
.laag-knop.actief .laag-naam,
.laag-knop.actief .laag-wie { color: #fff; opacity: 1; }
.laag-knop:not(.actief) .laag-naam { color: var(--pp-navy); }
.laag-knop:not(.actief) .laag-nr,
.laag-knop:not(.actief) .laag-wie  { color: var(--pp-grey-2); }

.laag-panel {
  display: none;
  border: 1px solid var(--pp-panel);
  border-top: none;
  border-radius: 0 0 8px 8px;
  background: var(--pp-white);
  margin-bottom: 32px;
}
.laag-panel.actief { display: block; }

.laag-1-accent { border-top: 3px solid var(--pp-pass); }
.laag-2-accent { border-top: 3px solid var(--pp-shield); }
.laag-3-accent { border-top: 3px solid var(--pp-id); }

/* Apparaten-grid in laag 1 */
.apparaten-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
  padding: 16px 22px;
}
.apparaat-kaart {
  border: 1px solid var(--pp-panel);
  border-radius: 8px;
  padding: 14px;
  cursor: pointer;
  background: var(--pp-white);
  transition: border-color .15s, box-shadow .15s;
  position: relative;
}
.apparaat-kaart:hover { border-color: var(--pp-accent); }
.apparaat-kaart.gekozen {
  border-color: var(--pp-accent);
  box-shadow: 0 0 0 2px var(--pp-accent-light);
}
.apparaat-check {
  position: absolute;
  top: 8px;
  right: 10px;
  font-size: 13px;
  color: var(--pp-accent);
  font-weight: 700;
}
.apparaat-icoon { font-size: 24px; margin-bottom: 6px; }
.apparaat-naam  { font-size: 13px; font-weight: 700; color: var(--pp-navy); margin-bottom: 4px; }
.apparaat-prijs { font-size: 11px; color: var(--pp-grey-2); font-family: var(--pp-mono); }

/* Config resultaat */
.config-resultaat {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-top: 1px solid var(--pp-panel);
}
.config-links, .config-rechts {
  padding: 16px 22px;
}
.config-rechts { border-left: 1px solid var(--pp-panel); }
.config-kop {
  font-family: var(--pp-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--pp-grey-3);
  margin-bottom: 10px;
}
.config-status {
  font-size: 15px;
  font-weight: 700;
  color: var(--pp-navy);
  margin-bottom: 6px;
}
.config-sub { font-size: 13px; color: var(--pp-grey-1); line-height: 1.6; }

/* Mogelijkheden lijst */
.mogelijkheden {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.mogelijkheden li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--pp-grey-1);
  line-height: 1.4;
}
.mog-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.mog-dot.ja  { background: var(--pp-shield); }
.mog-dot.nee { background: var(--pp-grey-4); }

/* Split uitleg */
.split-uitleg {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-top: 1px solid var(--pp-panel);
}
.uitleg-kant {
  padding: 16px 22px;
}
.uitleg-kant:last-child { border-left: 1px solid var(--pp-panel); }
.uitleg-kop {
  font-size: 12px;
  font-weight: 700;
  color: var(--pp-navy);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 12px;
}
.markt-item {
  font-size: 13px;
  color: var(--pp-grey-1);
  line-height: 1.6;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--pp-grey-6);
}
.markt-item:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.markt-item strong {
  display: block;
  color: var(--pp-navy);
  font-size: 12px;
  margin-bottom: 2px;
}

/* Sectoren laag 2 */
.sector-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
  padding: 16px 22px;
}
.sector-item {
  border: 1px solid var(--pp-panel);
  border-radius: 8px;
  padding: 14px;
  background: var(--pp-white);
}
.sector-icoon { font-size: 22px; margin-bottom: 6px; }
.sector-naam  { font-size: 13px; font-weight: 700; color: var(--pp-navy); margin-bottom: 4px; }
.sector-sub   { font-size: 12px; color: var(--pp-grey-1); line-height: 1.55; }

/* Premium grid laag 3 */
.premium-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
  padding: 16px 22px;
}
.premium-item {
  border: 1px solid var(--pp-panel);
  border-radius: 8px;
  padding: 16px;
  background: var(--pp-white);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.premium-icoon { font-size: 26px; margin-bottom: 4px; }
.premium-naam  { font-size: 14px; font-weight: 700; color: var(--pp-navy); }
.premium-sub   { font-size: 12px; color: var(--pp-grey-1); line-height: 1.55; flex: 1; }
.premium-prijs {
  font-size: 11px;
  font-family: var(--pp-mono);
  color: var(--pp-grey-2);
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--pp-grey-5);
}

/* Vergelijkingstabel lagen */
.vergelijk-tabel {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  margin-top: 16px;
}
.vergelijk-tabel th {
  background: var(--pp-navy);
  color: #fff;
  padding: 10px 12px;
  text-align: left;
  font-family: var(--pp-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.vergelijk-tabel td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--pp-panel);
  color: var(--pp-grey-1);
  vertical-align: middle;
}
.vergelijk-tabel tr:last-child td { border-bottom: none; }
.vergelijk-tabel tr:nth-child(even) td { background: var(--pp-grey-6); }
.cel-ja  { color: var(--pp-shield) !important; font-weight: 600; }
.cel-nee { color: var(--pp-grey-3) !important; }
.cel-opt { color: var(--pp-id) !important; }

@media (max-width: 680px) {
  .lagen-nav       { flex-direction: column; border-radius: 8px; }
  .laag-knop       { border-right: none; border-bottom: 1px solid var(--pp-panel); }
  .config-resultaat,
  .split-uitleg    { grid-template-columns: 1fr; }
  .config-rechts   { border-left: none; border-top: 1px solid var(--pp-panel); }
  .uitleg-kant:last-child { border-left: none; border-top: 1px solid var(--pp-panel); }
}

/* ===========================================================
   PROFIEL / DEMO — profiel.html (.demo-kaart, .si-rij, etc.)
   =========================================================== */

.demo-wrap {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.demo-banner {
  background: #fffbe6;
  border: 1px solid #f0c040;
  border-left: 4px solid #c8a000;
  border-radius: 8px;
  padding: 12px 16px;
  font-size: 13px;
  color: #5a4000;
  line-height: 1.6;
}
.demo-kaart {
  border: 1px solid var(--pp-panel);
  border-radius: var(--pp-radius);
  padding: 22px 24px;
  background: var(--pp-white);
}
.demo-kaart h2 {
  font-size: 18px;
  font-weight: 700;
  color: var(--pp-navy);
  margin-bottom: 14px;
}

/* Sessie-info rijen */
.sessie-info { display: flex; flex-direction: column; gap: 8px; }
.si-rij {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 14px;
  padding: 6px 0;
  border-bottom: 1px solid var(--pp-grey-5);
}
.si-rij:last-child { border-bottom: none; }
.si-lbl {
  font-weight: 600;
  color: var(--pp-navy);
  min-width: 160px;
  flex-shrink: 0;
}
.si-val { font-family: var(--pp-mono); font-size: 13px; color: var(--pp-grey-1); }
.si-val.ja  { color: var(--pp-shield); font-weight: 600; }
.si-val.nee { color: #c0392b; font-weight: 600; }

/* Keuze-knoppen */
.keuze-knoppen {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 12px 0 0;
}
.keuze-knop {
  border: 1px solid var(--pp-panel);
  border-radius: 8px;
  padding: 14px;
  background: var(--pp-white);
  cursor: pointer;
  text-align: left;
  transition: border-color .15s, box-shadow .15s;
}
.keuze-knop:hover {
  border-color: var(--pp-accent);
  box-shadow: 0 0 0 2px var(--pp-accent-light);
}
.keuze-knop h3 {
  font-size: 13px;
  font-weight: 700;
  color: var(--pp-navy);
  margin-bottom: 4px;
}
.keuze-knop p {
  font-size: 12px;
  color: var(--pp-grey-2);
  line-height: 1.5;
  margin: 0;
}

/* E-mail invoer */
.email-blok { margin: 14px 0 0; }
.email-blok label {
  display: block;
  font-size: 12px;
  color: var(--pp-grey-2);
  margin-bottom: 6px;
}
.email-blok-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Items grid */
.items-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 8px;
}
.items-kolom h3 {
  font-size: 14px;
  font-weight: 700;
  color: var(--pp-navy);
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--pp-panel);
}
.leeg {
  font-size: 13px;
  color: var(--pp-grey-3);
  font-style: italic;
}

/* Log-blok */
.log-blok {
  border: 1px solid var(--pp-panel);
  border-radius: var(--pp-radius);
  overflow: hidden;
}
.log-blok-header {
  background: var(--pp-navy);
  color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 16px;
  font-family: var(--pp-mono);
  font-size: 12px;
}
.log-blok-header a {
  color: rgba(255,255,255,.75);
  text-decoration: none;
  font-size: 11px;
}
.log-blok-header a:hover { color: #fff; }
#log-items {
  background: #0d1117;
  padding: 14px 16px;
  max-height: 200px;
  overflow-y: auto;
}
.log-item {
  font-family: var(--pp-mono);
  font-size: 12px;
  color: #8b9eb0;
  line-height: 1.7;
}

/* Geweigerd blok */
.geweigerd-blok {
  max-width: 480px;
  margin: 80px auto;
  text-align: center;
  padding: 40px;
  border: 1px solid var(--pp-panel);
  border-radius: var(--pp-radius);
}
.geweigerd-blok h2 {
  font-size: 22px;
  font-weight: 700;
  color: var(--pp-navy);
  margin-bottom: 12px;
}
.geweigerd-blok p {
  font-size: 14px;
  color: var(--pp-grey-1);
  line-height: 1.7;
  margin-bottom: 20px;
}

@media (max-width: 680px) {
  .keuze-knoppen { grid-template-columns: 1fr; }
  .items-grid    { grid-template-columns: 1fr; }
}

/* ===========================================================
   SITEMAP — sitemap.html (.sm-*, .card, .tier, .badge, etc.)
   =========================================================== */

.sm-section { margin-bottom: 40px; }
.sm-section-title {
  font-family: var(--pp-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--pp-grey-2);
  padding-bottom: 8px;
  border-bottom: 2px solid var(--pp-navy);
  margin-bottom: 14px;
}
.sm-tier {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: flex-start;
}
.sm-arrow {
  align-self: center;
  color: var(--pp-grey-3);
  font-size: 16px;
  flex-shrink: 0;
}
.sm-card {
  display: flex;
  flex-direction: column;
  gap: 3px;
  border: 1px solid var(--pp-panel);
  border-radius: 8px;
  padding: 10px 14px;
  background: var(--pp-white);
  min-width: 160px;
  max-width: 240px;
}
.sm-card.old { opacity: .6; border-style: dashed; }
.sm-card.linked { border-color: var(--pp-grey-4); background: var(--pp-grey-6); }
.sm-path {
  font-family: var(--pp-mono);
  font-size: 10px;
  color: var(--pp-grey-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sm-title { font-size: 13px; font-weight: 700; color: var(--pp-navy); }
.sm-desc  { font-size: 11px; color: var(--pp-grey-2); line-height: 1.5; }
.sm-badges { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 4px; }
.sm-badge {
  font-family: var(--pp-mono);
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: 2px 6px;
  border-radius: 3px;
}
.sm-badge--live   { background: #d4edda; color: #155724; }
.sm-badge--demo   { background: #cce5ff; color: #004085; }
.sm-badge--gepland{ background: #fff3cd; color: #856404; }
.sm-badge--archief{ background: var(--pp-grey-5); color: var(--pp-grey-2); }

.sm-products {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
}
.sm-product-col-header {
  font-size: 13px;
  font-weight: 700;
  color: var(--pp-navy);
  padding-bottom: 8px;
  border-bottom: 2px solid var(--pp-panel);
  margin-bottom: 10px;
}
.sm-legend {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 28px;
  font-size: 12px;
  color: var(--pp-grey-1);
  align-items: center;
}
.sm-leg { display: flex; align-items: center; gap: 6px; }
.sm-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.sm-dot--live   { background: #28a745; }
.sm-dot--linked { background: #fd7e14; }
.sm-dot--old    { background: var(--pp-grey-4); }
.sm-note {
  font-size: 12px;
  color: var(--pp-grey-2);
  font-style: italic;
  margin-top: 10px;
}

/* Sitemap inventaris-tabel */
.sm-tabel {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  margin-top: 16px;
}
.sm-tabel th {
  background: var(--pp-navy);
  color: #fff;
  padding: 8px 12px;
  text-align: left;
  font-family: var(--pp-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.sm-tabel td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--pp-grey-5);
  color: var(--pp-grey-1);
  vertical-align: top;
}
.sm-tabel tr:nth-child(even) td { background: var(--pp-grey-6); }
.sm-tabel code {
  font-family: var(--pp-mono);
  font-size: 11px;
  color: var(--pp-accent);
}
.sm-tabel .sl { color: var(--pp-shield); font-weight: 700; }
.sm-tabel .so { color: var(--pp-grey-3); }

/* ===========================================================
   INLOG / DEMO — inlog.html  (.wrap, .scherm, .hero, etc.)
   =========================================================== */

/* Container — expliciete witte achtergrond zodat oud dark-body CSS geen effect heeft */
.wrap {
  max-width: 680px;
  margin: 0 auto;
  padding: 32px 24px 64px;
  background: var(--pp-white);
}

/* Scherm-switcher — alleen actief scherm zichtbaar */
.scherm        { display: none; background: var(--pp-white); }
.scherm.actief { display: block; background: var(--pp-white); }

/* Hero bovenaan landing */
.hero {
  background: var(--pp-navy);
  color: #fff;
  border-radius: var(--pp-radius);
  padding: 36px 32px;
  margin-bottom: 24px;
}
.hero h2 {
  font-size: clamp(20px, 3vw, 28px);
  font-weight: 800;
  line-height: 1.25;
  margin-bottom: 12px;
  color: #fff;
}
.hero p {
  font-size: 15px;
  color: rgba(255,255,255,.85);
  line-height: 1.7;
  margin: 0;
}

/* Kenmerken-pills */
.kenmerken {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 24px;
}
.kenmerk {
  font-family: var(--pp-mono);
  font-size: 11px;
  background: var(--pp-accent-light);
  color: var(--pp-navy);
  border: 1px solid var(--pp-panel);
  border-radius: 20px;
  padding: 4px 12px;
  white-space: nowrap;
}

/* Genummerde stappen */
.stap-rijen {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 28px;
}
.stap-rij {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.stap-nr {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--pp-navy);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--pp-mono);
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 2px;
}
.stap-rij p {
  font-size: 14px;
  color: var(--pp-grey-1);
  line-height: 1.65;
  margin: 0;
}

/* Scenario-kaarten */
.scenario-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 220px));
  justify-content: center;
  gap: 12px;
  margin-bottom: 28px;
}
.scenario-kaart {
  border: 1px solid var(--pp-panel);
  border-radius: 10px;
  padding: 16px;
  background: var(--pp-white);
  opacity: .6;
  transition: opacity .2s;
}
.scenario-kaart.actief {
  opacity: 1;
  border-color: var(--pp-accent);
  box-shadow: 0 0 0 2px var(--pp-accent-light);
}
.scenario-icoon { font-size: 24px; margin-bottom: 6px; }
.scenario-titel {
  font-size: 13px;
  font-weight: 700;
  color: var(--pp-navy);
  margin-bottom: 4px;
}
.scenario-uitleg {
  font-size: 12px;
  color: var(--pp-grey-1);
  line-height: 1.55;
  margin-bottom: 8px;
}
.scenario-stappen {
  font-family: var(--pp-mono);
  font-size: 10px;
  color: var(--pp-grey-2);
  line-height: 1.8;
  margin-bottom: 8px;
}
.scenario-badge {
  display: inline-block;
  font-family: var(--pp-mono);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: 2px 8px;
  border-radius: 4px;
}
.scenario-badge.ok   { background: #d4edda; color: #155724; }
.scenario-badge.info { background: #cce5ff; color: #004085; }

/* Knoppen */
.btn-primair {
  display: block;
  width: 100%;
  background: var(--pp-navy);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 14px 24px;
  font-family: var(--pp-mono);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  margin-bottom: 10px;
  text-align: center;
  transition: background .15s;
}
.btn-primair:hover:not(:disabled) { background: var(--pp-accent); }
.btn-primair:disabled { opacity: .5; cursor: not-allowed; }

.btn-sec {
  display: block;
  width: 100%;
  background: transparent;
  color: var(--pp-navy);
  border: 1px solid var(--pp-panel);
  border-radius: 8px;
  padding: 12px 24px;
  font-family: var(--pp-mono);
  font-size: 13px;
  cursor: pointer;
  margin-bottom: 10px;
  transition: background .15s;
}
.btn-sec:hover { background: var(--pp-grey-6); }

.btn-tekst {
  background: none;
  border: none;
  color: var(--pp-grey-2);
  font-size: 13px;
  cursor: pointer;
  padding: 8px 0;
  text-decoration: underline;
}
.btn-tekst:hover { color: var(--pp-navy); }

/* Login-stap kaarten */
.login-kaart {
  border: 1px solid var(--pp-panel);
  border-radius: var(--pp-radius);
  padding: 20px 22px;
  margin-bottom: 14px;
  background: var(--pp-white);
  transition: opacity .2s;
}
.login-kaart.gedaan  { opacity: .45; pointer-events: none; }
.login-kaart.actief-stap { border-color: var(--pp-accent); box-shadow: 0 0 0 2px var(--pp-accent-light); opacity: 1; pointer-events: auto; }
.login-kaart-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.login-kaart-header h3 {
  font-size: 16px;
  font-weight: 700;
  color: var(--pp-navy);
  margin: 0;
}
.login-kaart p {
  font-size: 13px;
  color: var(--pp-grey-1);
  line-height: 1.65;
  margin-bottom: 14px;
}

/* Stap-badges (nummercirkels) */
.stap-badge {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--pp-grey-5);
  color: var(--pp-grey-2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--pp-mono);
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
}
.stap-badge.actief { background: var(--pp-accent); color: #fff; }
.stap-badge.klaar  { background: var(--pp-shield); color: #fff; }

/* Formulier */
.veld-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--pp-navy);
  margin-bottom: 6px;
  margin-top: 16px;
}
.veld-input {
  display: block;
  width: 100%;
  border: 1px solid var(--pp-panel);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 14px;
  font-family: var(--pp-font);
  color: var(--pp-dark);
  margin-bottom: 4px;
  outline: none;
  transition: border-color .15s;
}
.veld-input:focus { border-color: var(--pp-accent); }

/* Status-rijen (registreren) */
.status-rij {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--pp-grey-1);
  padding: 6px 0;
  border-bottom: 1px solid var(--pp-grey-6);
}
.status-rij:last-child { border-bottom: none; }
.status-rij.bezig { color: var(--pp-accent); }
.status-rij.klaar { color: var(--pp-shield); }
.status-rij.fout  { color: #c0392b; }
.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--pp-grey-4);
  flex-shrink: 0;
}
.status-rij.bezig .status-dot { background: var(--pp-accent); }
.status-rij.klaar .status-dot { background: var(--pp-shield); }
.status-rij.fout  .status-dot { background: #c0392b; }

/* Info-tabel (beveiligd scherm) */
.info-tabel { display: flex; flex-direction: column; gap: 4px; }
.info-rij {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 13px;
  padding: 6px 0;
  border-bottom: 1px solid var(--pp-grey-6);
}
.info-rij:last-child { border-bottom: none; }
.info-lbl {
  font-weight: 600;
  color: var(--pp-navy);
  min-width: 150px;
  flex-shrink: 0;
  font-size: 12px;
}
.info-val { font-family: var(--pp-mono); font-size: 12px; color: var(--pp-grey-1); }
.info-val.ja  { color: var(--pp-shield); }
.info-val.nee { color: #c0392b; }

/* Log-blok (inlog-versie) */
.log-header {
  background: var(--pp-navy);
  color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 16px;
  font-family: var(--pp-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .08em;
  border-radius: var(--pp-radius) var(--pp-radius) 0 0;
}
#log-beveiligd {
  background: #0d1117;
  padding: 12px 16px;
  border-radius: 0 0 var(--pp-radius) var(--pp-radius);
  max-height: 180px;
  overflow-y: auto;
}
.log-item {
  font-family: var(--pp-mono);
  font-size: 11px;
  color: #8b9eb0;
  line-height: 1.7;
  padding: 2px 0;
}
.log-tijd { color: var(--pp-grey-3); margin-right: 6px; }
.log-tag {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  padding: 1px 5px;
  border-radius: 3px;
  margin-right: 6px;
}
.log-tag.ziet      { background: #1e5bff22; color: #6b9fff; }
.log-tag.ziet-niet { background: #1f9d3a22; color: #4db86a; }
.log-tag.stap      { background: #ff7a0022; color: #ffaa55; }
.log-tag.aanval    { background: #ff000022; color: #ff6666; }

/* Timer-balk */
.timer-balk {
  width: 100%;
  height: 4px;
  background: var(--pp-grey-5);
  border-radius: 2px;
  overflow: hidden;
}
.timer-voortgang {
  height: 100%;
  background: var(--pp-accent);
  border-radius: 2px;
  transition: width .5s linear;
}

/* Pulse-animatie voor NFC-wachticoon */
@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%       { transform: scale(1.12); opacity: .7; }
}

/* ──────────────────────────────────────────
   UITBREIDINGEN — product + sub tabs
────────────────────────────────────────── */
.prod-tabs { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:20px; }
.prod-tab {
  padding:8px 18px; font-size:13px; font-weight:600; font-family:var(--pp-mono);
  border:1px solid var(--pp-grey-5); border-radius:6px; background:var(--pp-white);
  color:var(--pp-grey-2); cursor:pointer;
}
.prod-tab.actief { background:var(--pp-navy); color:#fff; border-color:var(--pp-navy); }
.prod-pane { display:none; }
.prod-pane.actief { display:block; }

.sub-tabs { display:flex; gap:6px; flex-wrap:wrap; margin:16px 0 12px; border-bottom:1px solid var(--pp-grey-5); }
.sub-tab {
  padding:6px 14px; font-size:12px; font-weight:500; font-family:var(--pp-mono);
  border:none; background:none; color:var(--pp-grey-2); cursor:pointer;
  border-bottom:2px solid transparent; margin-bottom:-1px;
}
.sub-tab.actief { color:var(--pp-navy); border-bottom-color:var(--pp-navy); font-weight:700; }
.sub-pane { display:none; }
.sub-pane.actief { display:block; }

/* vergelijk kolommen (uitbreidingen, adoptie, id-bewijs) */
.vergelijk { display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:16px; }
.vergelijk-col { border:1px solid var(--pp-grey-5); border-radius:8px; padding:14px; }
.vergelijk-label { font-weight:700; font-size:13px; margin-bottom:8px; color:var(--pp-navy); }
.vergelijk-item { font-size:12px; padding:4px 0; border-bottom:1px solid var(--pp-grey-6); color:var(--pp-grey-1); }
.vergelijk-item:last-child { border-bottom:none; }

/* tags */
.tag { display:inline-block; font-family:var(--pp-mono); font-size:11px; font-weight:600;
  padding:3px 10px; border-radius:12px; margin:2px 2px 2px 0; }
.tag-groen { background:#e6f4ea; color:#1a6e2e; }
.tag-blauw { background:var(--pp-accent-light); color:var(--pp-navy); }
.tag-amber { background:#fff8e1; color:#7a5200; }
.tag-rood  { background:#fde8e8; color:#a02020; }

/* poc-status blok */
.poc-status {
  background:#f0f7ff; border-left:3px solid var(--pp-accent);
  padding:12px 14px; font-size:13px; border-radius:0 6px 6px 0; margin-bottom:12px;
}

/* stap-flow (air bewijs) */
.stap-flow { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:12px; margin-top:12px; }
.stap { border:1px solid var(--pp-grey-5); border-radius:8px; padding:14px; }
.stap.bewezen { border-color:#a8d5b5; background:#f5fbf7; }
.stap-num { font-family:var(--pp-mono); font-size:11px; font-weight:700; color:var(--pp-grey-3); margin-bottom:4px; }
.stap-naam { font-size:13px; font-weight:700; color:var(--pp-navy); margin-bottom:4px; }

/* chat stappen */
.chat-stap { display:flex; gap:14px; margin-bottom:16px; align-items:flex-start; }
.chat-nr {
  width:36px; height:36px; border-radius:50%; background:var(--pp-navy); color:#fff;
  font-family:var(--pp-mono); font-size:13px; font-weight:700; display:flex;
  align-items:center; justify-content:center; flex-shrink:0;
}
.chat-inhoud h3 { font-size:14px; font-weight:700; color:var(--pp-navy); margin-bottom:4px; }
.chat-inhoud p  { font-size:13px; color:var(--pp-grey-1); line-height:1.65; }

/* pp-list */
.pp-list { display:flex; flex-direction:column; gap:10px; }
.pp-list__item { display:flex; gap:12px; padding:10px 0; border-bottom:1px solid var(--pp-grey-6); }
.pp-list__item:last-child { border-bottom:none; }
.pp-list__label { font-weight:700; font-size:12px; font-family:var(--pp-mono); color:var(--pp-navy); min-width:120px; flex-shrink:0; }
.pp-list__text  { font-size:13px; color:var(--pp-grey-1); line-height:1.6; }

/* gepland-blok */
.gepland-blok {
  border:1px solid var(--pp-grey-5); border-radius:var(--pp-radius);
  padding:24px; background:var(--pp-grey-6);
}
.gepland-blok__label { font-family:var(--pp-mono); font-size:10px; text-transform:uppercase; letter-spacing:.1em; color:var(--pp-grey-3); margin-bottom:8px; }
.gepland-blok__titel { font-size:20px; font-weight:800; color:var(--pp-navy); margin-bottom:10px; }
.gepland-blok__tekst { font-size:13px; color:var(--pp-grey-1); line-height:1.7; }

/* ──────────────────────────────────────────
   ADD-BEWIJS — steps, tech-tabel, ziet-grid, topics-grid
────────────────────────────────────────── */
.steps { display:flex; flex-direction:column; gap:16px; }
.step  { display:flex; gap:16px; align-items:flex-start; }
.step-num {
  width:32px; height:32px; border-radius:50%; font-family:var(--pp-mono); font-size:13px;
  font-weight:700; display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.step-num.done  { background:var(--pp-navy); color:#fff; }
.step-num.next  { background:#fff8e1; color:#7a5200; border:2px solid #f0c040; }
.step-num.later { background:var(--pp-grey-6); color:var(--pp-grey-2); border:2px solid var(--pp-grey-4); }
.step-body h4   { font-size:14px; font-weight:700; color:var(--pp-navy); margin-bottom:4px; }
.step-body p    { font-size:13px; color:var(--pp-grey-1); line-height:1.65; margin-bottom:6px; }

.risk { display:inline-block; font-family:var(--pp-mono); font-size:11px; padding:3px 10px; border-radius:12px; }
.risk-ok  { background:#e6f4ea; color:#1a6e2e; }
.risk-mid { background:#fff8e1; color:#7a5200; }
.risk-high{ background:#fde8e8; color:#a02020; }

.tech-tabel { border:1px solid var(--pp-grey-5); border-radius:8px; overflow:hidden; }
.tech-tabel__header { display:grid; grid-template-columns:2fr 3fr 1fr; background:var(--pp-grey-6); padding:10px 14px; }
.tech-tabel__th { font-family:var(--pp-mono); font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--pp-grey-3); }
.tech-tabel__rij { display:grid; grid-template-columns:2fr 3fr 1fr; padding:10px 14px; border-top:1px solid var(--pp-grey-5); align-items:center; }
.tech-tabel__rij--alt { background:var(--pp-grey-6); }
.tech-tabel__cel { font-size:13px; color:var(--pp-grey-1); }
.tech-tabel__cel--naam { font-weight:600; color:var(--pp-navy); font-family:var(--pp-mono); font-size:12px; }
.tech-tabel__cel--rol  { color:var(--pp-grey-2); }

.ziet-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.ziet-grid__col { border:1px solid var(--pp-grey-5); border-radius:8px; padding:14px; }
.ziet-grid__label { font-weight:700; font-size:12px; margin-bottom:10px; padding-bottom:6px; border-bottom:1px solid var(--pp-grey-5); }
.ziet-grid__label--ok  { color:#1a6e2e; }
.ziet-grid__label--nee { color:#a02020; }
.ziet-item { display:flex; align-items:center; gap:8px; padding:5px 0; font-size:13px; color:var(--pp-grey-1); }
.ziet-item__icon { font-size:12px; font-weight:700; }
.ziet-item__icon--ok  { color:#1a6e2e; }
.ziet-item__icon--nee { color:#a02020; }

.topics-grid { display:grid; grid-template-columns:1fr 1fr; border:1px solid var(--pp-grey-5); border-radius:8px; overflow:hidden; }
.topics-grid__header { background:var(--pp-navy); color:#fff; font-size:13px; font-weight:700; padding:10px 14px; }
.topics-grid__cel { font-size:13px; color:var(--pp-grey-1); padding:10px 14px; border-top:1px solid var(--pp-grey-5); }
.topics-grid__cel--links { border-right:1px solid var(--pp-grey-5); color:var(--pp-grey-2); }
.topics-grid__cel--alt { background:var(--pp-grey-6); }

.conclusie-groen { background:#f0f9f2; border-left:4px solid #1a6e2e; padding:18px 20px; border-radius:0 8px 8px 0; }
.conclusie-groen__label { font-family:var(--pp-mono); font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:#1a6e2e; margin-bottom:8px; }

/* ──────────────────────────────────────────
   ADD-ADOPTIE — segmenten, verdeling, vergelijk-tabel
────────────────────────────────────────── */
.verdeling-wrap { margin-bottom:24px; }
.verdeling-balk { display:flex; border-radius:6px; overflow:hidden; height:36px; margin-bottom:10px; }
.vd-seg {
  display:flex; align-items:center; justify-content:center;
  font-family:var(--pp-mono); font-size:11px; font-weight:700; color:#fff;
  cursor:pointer; transition:opacity .15s;
}
.vd-seg.ruil    { flex:2; background:var(--pp-navy); }
.vd-seg.vergel  { flex:1; background:var(--pp-grey-2); }
.vd-seg.sociaal { flex:2; background:var(--pp-grey-3); }
.vd-seg.maakt   { flex:1.5; background:var(--pp-grey-4); color:var(--pp-grey-1); }
.vd-seg.nee     { flex:3.5; background:var(--pp-grey-5); color:var(--pp-grey-1); }
.vd-seg:hover   { opacity:.8; }

.verdeling-legenda { display:flex; gap:16px; flex-wrap:wrap; }
.vl-item { display:flex; align-items:center; gap:6px; font-size:12px; color:var(--pp-grey-1); }
.vl-kleur { width:12px; height:12px; border-radius:2px; flex-shrink:0; }

.segment-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:8px; margin-bottom:20px; }
.segment {
  border:2px solid var(--pp-grey-5); border-radius:8px; padding:14px 10px;
  text-align:center; cursor:pointer; background:var(--pp-white);
}
.segment.actief { border-color:var(--pp-navy); background:var(--pp-navy); }
.seg-label { font-family:var(--pp-mono); font-size:10px; text-transform:uppercase; letter-spacing:.08em; color:var(--pp-grey-3); margin-bottom:4px; }
.segment.actief .seg-label { color:rgba(255,255,255,.6); }
.seg-pct { font-size:22px; font-weight:800; color:var(--pp-navy); margin-bottom:2px; }
.segment.actief .seg-pct { color:#fff; }
.seg-naam { font-size:11px; font-weight:600; color:var(--pp-grey-2); }
.segment.actief .seg-naam { color:rgba(255,255,255,.85); }

.seg-detail { display:none; padding:20px 0; }
.seg-detail.actief { display:block; }
.seg-detail h3 { font-size:17px; font-weight:800; color:var(--pp-navy); margin-bottom:6px; }

.detail-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:12px; margin:16px 0; }
.detail-blok { border:1px solid var(--pp-grey-5); border-radius:8px; padding:14px; }
.detail-blok-label { font-family:var(--pp-mono); font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--pp-grey-3); margin-bottom:6px; }
.detail-blok p { font-size:13px; color:var(--pp-grey-1); line-height:1.6; }

.bewijs-bar { background:var(--pp-grey-6); border-left:3px solid var(--pp-navy); padding:10px 14px; font-size:12px; color:var(--pp-grey-1); border-radius:0 6px 6px 0; margin-top:4px; }

/* vergelijk-tabel (adoptie) */
.vg-header { display:grid; grid-template-columns:1.5fr 2fr 1.5fr 1.5fr; background:var(--pp-navy); border-radius:8px 8px 0 0; }
.vg-kop { color:#fff; font-weight:700; font-size:12px; padding:10px 12px; }
.vg-rij { display:grid; grid-template-columns:1.5fr 2fr 1.5fr 1.5fr; border-bottom:1px solid var(--pp-grey-5); }
.vg-rij:last-child { border-bottom:none; }
.vg-cel { font-size:13px; padding:9px 12px; color:var(--pp-grey-1); }
.vg-cel.onderwerp { font-weight:700; color:var(--pp-navy); font-size:12px; }
.vg-cel.goed  { color:#1a6e2e; }
.vg-cel.slecht{ color:#a02020; }

.conclusie { background:var(--pp-accent-light); border:1px solid var(--pp-panel); border-radius:var(--pp-radius); padding:20px 22px; margin-top:20px; }
.conclusie-kop { font-family:var(--pp-mono); font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:var(--pp-accent); margin-bottom:6px; }
.conclusie h3 { font-size:16px; font-weight:800; color:var(--pp-navy); margin-bottom:8px; }
.conclusie p  { font-size:13px; color:var(--pp-grey-1); line-height:1.7; }
.bron { font-family:var(--pp-mono); font-size:10px; color:var(--pp-grey-3); margin-top:10px; }

/* ──────────────────────────────────────────
   ADD-MAILSTROOM — tijdlijn, mailbox, wallet, split-grid
────────────────────────────────────────── */
.pp-panel--info {
  font-family:var(--pp-mono); font-size:10px; font-weight:700;
  text-transform:uppercase; letter-spacing:.12em; color:var(--pp-grey-3);
  padding:8px 0 12px; border-bottom:1px solid var(--pp-grey-5); margin-bottom:16px;
}

.tijdlijn { display:flex; flex-direction:column; gap:0; }
.tl-stap { padding:10px 0 10px 16px; border-left:3px solid var(--pp-grey-4); margin-left:6px; }
.tl-stap.rood  { border-left-color:#c0392b; }
.tl-stap.groen { border-left-color:#1a6e2e; }
.tl-stap.grijs { border-left-color:var(--pp-grey-4); }
.tl-label { font-weight:700; font-size:13px; color:var(--pp-navy); margin-bottom:3px; }
.tl-stap.rood  .tl-label { color:#c0392b; }
.tl-stap.groen .tl-label { color:#1a6e2e; }
.tl-tekst { font-size:13px; color:var(--pp-grey-1); line-height:1.6; }

.mailbox { border:1px solid var(--pp-grey-5); border-radius:8px; overflow:hidden; margin-bottom:12px; }
.mailbox-header {
  display:flex; justify-content:space-between; align-items:center;
  background:var(--pp-grey-6); padding:10px 14px;
  font-weight:700; font-size:13px; color:var(--pp-navy);
}
.badge-rood { background:#fde8e8; color:#a02020; font-family:var(--pp-mono); font-size:11px; font-weight:700; padding:3px 10px; border-radius:12px; }
.mail-item { display:grid; grid-template-columns:110px 1fr 60px; gap:8px; padding:9px 14px; border-top:1px solid var(--pp-grey-6); align-items:center; font-size:12px; }
.mail-item.ongelezen { background:#f8f9ff; }
.afzender { font-weight:700; color:var(--pp-navy); }
.onderwerp { color:var(--pp-grey-1); }
.datum { font-family:var(--pp-mono); font-size:11px; color:var(--pp-grey-3); text-align:right; }

.sim-knop {
  display:inline-block; margin-top:12px; padding:10px 18px; background:var(--pp-navy);
  color:#fff; border:none; border-radius:6px; font-family:var(--pp-mono); font-size:12px;
  font-weight:700; cursor:pointer;
}
.sim-knop:disabled { opacity:.5; cursor:default; }
.sim-uitleg { font-size:12px; color:var(--pp-grey-2); margin:8px 0; font-style:italic; }

.info-blok { padding:12px 14px; border-radius:6px; font-size:13px; margin-top:8px; }
.info-blok.rood  { background:#fde8e8; border-left:3px solid #c0392b; color:#7a1010; }
.info-blok.groen { background:#e6f4ea; border-left:3px solid #1a6e2e; color:#0d4a1f; }
.info-blok.blauw { background:var(--pp-accent-light); border-left:3px solid var(--pp-accent); color:var(--pp-navy); }

.split-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:8px; }
.split-header { display:flex; align-items:center; gap:8px; font-weight:700; font-size:13px; padding:8px 0; margin-bottom:6px; }
.split-header .dot { width:10px; height:10px; border-radius:50%; }
.split-header.nu  .dot { background:#c0392b; }
.split-header.dan .dot { background:#1a6e2e; }
.split-header.nu  { color:#c0392b; }
.split-header.dan { color:#1a6e2e; }
.split-kolom { border:1px solid var(--pp-grey-5); border-radius:8px; padding:12px; }

.wallet-kaart { border:1px solid var(--pp-grey-5); border-radius:8px; padding:14px; margin-bottom:8px; }
.wallet-rij { display:flex; justify-content:space-between; align-items:center; padding:6px 0; border-bottom:1px solid var(--pp-grey-6); font-size:13px; }
.wallet-rij:last-child { border-bottom:none; }
.wallet-interesse { color:var(--pp-grey-1); }
.wallet-status { font-family:var(--pp-mono); font-size:11px; font-weight:700; padding:3px 10px; border-radius:12px; }
.ws-actief  { background:#e6f4ea; color:#1a6e2e; }
.ws-nooit   { background:#fde8e8; color:#a02020; }
.ws-inactief{ background:var(--pp-grey-5); color:var(--pp-grey-2); }

.stap-num {
  display:inline-flex; align-items:center; justify-content:center;
  width:28px; height:28px; border-radius:50%;
  background:var(--pp-navy); color:#fff;
  font-family:var(--pp-mono); font-size:12px; font-weight:700; flex-shrink:0;
}

.verg-tabel { width:100%; border-collapse:collapse; font-size:13px; }
.verg-tabel th, .verg-tabel td { padding:9px 12px; border:1px solid var(--pp-grey-5); text-align:left; vertical-align:top; }
.verg-tabel thead { background:var(--pp-grey-6); }
.verg-tabel th { font-weight:700; font-size:12px; color:var(--pp-navy); }
.col-lbl { font-weight:700; color:var(--pp-navy); }
.col-nu  { color:#a02020; }
.col-dan { color:#1a6e2e; }

/* ──────────────────────────────────────────
   PRISMID / KEUZES — scenario-nav, keuze-kaarten, opties
────────────────────────────────────────── */
.scenario-nav { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:20px; }
.scenario-knop {
  padding:8px 16px; font-size:13px; font-weight:600; font-family:var(--pp-mono);
  border:1px solid var(--pp-grey-5); border-radius:6px; background:var(--pp-white);
  color:var(--pp-grey-2); cursor:pointer;
}
.scenario-knop.actief { background:var(--pp-navy); color:#fff; border-color:var(--pp-navy); }

.keuze-kaart { border:1px solid var(--pp-grey-5); border-radius:10px; padding:16px 18px; margin-bottom:14px; }
.keuze-kaart__label { font-weight:800; font-size:14px; color:var(--pp-navy); margin-bottom:2px; }
.keuze-kaart__sub   { font-size:12px; color:var(--pp-grey-2); margin-bottom:10px; }

.optie-rij { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:8px; }
.optie-knop {
  padding:7px 14px; font-size:12px; font-weight:600; border:1px solid var(--pp-grey-5);
  border-radius:6px; background:var(--pp-white); color:var(--pp-grey-1); cursor:pointer;
}
.optie-knop.gekozen-rood   { background:#fde8e8; border-color:#c0392b; color:#7a1010; }
.optie-knop.gekozen-amber  { background:#fff8e1; border-color:#f0c040; color:#7a5200; }
.optie-knop.gekozen-groen  { background:#e6f4ea; border-color:#1a6e2e; color:#0d4a1f; }

.gevolg { font-size:12px; color:var(--pp-grey-2); padding:0; max-height:0; overflow:hidden; transition:max-height .2s, padding .2s; }
.gevolg.zichtbaar { max-height:200px; padding:8px 12px; border-radius:6px; }
.gevolg--rood   { background:#fde8e8; color:#7a1010; }
.gevolg--amber  { background:#fff8e1; color:#7a5200; }
.gevolg--groen  { background:#e6f4ea; color:#0d4a1f; }

.samenvatting-balk {
  background:var(--pp-grey-6); border-left:4px solid var(--pp-navy);
  padding:12px 16px; border-radius:0 8px 8px 0; font-size:13px; color:var(--pp-grey-1); margin:16px 0;
}
.filosofie-blok { border-top:1px solid var(--pp-grey-5); margin-top:24px; padding-top:20px; font-size:14px; color:var(--pp-grey-1); line-height:1.8; }
.filosofie-blok p + p { margin-top:10px; }

/* ──────────────────────────────────────────
   PRISMID / NIVEAUS — niveau-kaarten
────────────────────────────────────────── */
.niveau-kaart {
  border:1px solid var(--pp-grey-5); border-radius:var(--pp-radius); margin-bottom:12px;
  cursor:pointer; overflow:hidden;
}
.niveau-kaart__header {
  display:flex; justify-content:space-between; align-items:center;
  padding:14px 18px; border-bottom:1px solid var(--pp-grey-5);
}
.niveau-kaart--4 .niveau-kaart__header { background:#1a003a; }
.niveau-kaart--3 .niveau-kaart__header { background:#003a1a; }
.niveau-kaart--2 .niveau-kaart__header { background:#001e5a; }
.niveau-kaart--1 .niveau-kaart__header { background:#3a2a00; }
.niveau-kaart__eyebrow { font-family:var(--pp-mono); font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:rgba(255,255,255,.55); }
.niveau-kaart__title   { font-size:16px; font-weight:800; color:#fff; }
.niveau-kaart__body    { padding:16px 18px; }
.niveau-kaart__tagline { font-size:13px; color:var(--pp-grey-2); margin-bottom:12px; font-style:italic; }

.niveau-raster { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:12px; }
.niveau-raster__cel   { border:1px solid var(--pp-grey-5); border-radius:6px; padding:10px; }
.niveau-raster__label { font-family:var(--pp-mono); font-size:10px; color:var(--pp-grey-3); margin-bottom:4px; text-transform:uppercase; letter-spacing:.06em; }
.niveau-raster__waarde{ font-size:13px; font-weight:700; color:var(--pp-navy); }

.niveau-kaart__detail { display:none; padding:12px 0; font-size:13px; color:var(--pp-grey-1); line-height:1.7; }
.niveau-kaart__detail.zichtbaar { display:block; }
.niveau-kaart__detail p + p { margin-top:8px; }
.detail--paars { border-left:3px solid #6F2DBD; padding-left:12px; }
.detail--groen { border-left:3px solid #1a6e2e; padding-left:12px; }
.detail--blauw { border-left:3px solid var(--pp-accent); padding-left:12px; }
.detail--amber { border-left:3px solid #f0c040; padding-left:12px; }

.toon-meer {
  font-family:var(--pp-mono); font-size:11px; color:var(--pp-accent); background:none;
  border:none; cursor:pointer; padding:0; margin-top:8px; font-weight:700;
}

/* ──────────────────────────────────────────
   PASS-ADOPTIE — scenario-tabs, datalijst, sim-blok
────────────────────────────────────────── */
/* Kleur utilities */
.rood  { color: var(--rood); }
.groen { color: var(--groen); }

.sim-banner {
  font-family: var(--pp-mono); font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .12em; color: var(--pp-accent);
  padding: 10px 24px; background: var(--pp-accent-light);
  border: 1px solid var(--pp-panel); border-left: 4px solid var(--pp-accent);
  border-radius: var(--pp-radius); margin-bottom: 28px;
}

.stat-balk {
  display: flex; gap: 0; border-bottom: 2px solid var(--pp-black);
}
.stat-item {
  flex: 1; padding: 18px 24px; border-right: 1px solid var(--pp-grey-5);
}
.stat-item:last-child { border-right: none; }
.stat-getal { font-family: var(--pp-mono); font-size: 22px; font-weight: 800; margin-bottom: 4px; }
.stat-lbl   { font-size: 12px; color: var(--pp-grey-2); }

.tabs { display: flex; gap: 0; border-bottom: 2px solid var(--pp-black); }
.tab {
  padding: 12px 20px; font-size: 14px; font-weight: 600; border: none;
  background: none; cursor: pointer; color: var(--pp-grey-2);
  border-bottom: 3px solid transparent; margin-bottom: -2px; text-align: left;
}
.tab.actief { background: var(--pp-white); color: var(--pp-navy); border-bottom-color: var(--pp-navy); font-weight: 800; }
.tab-cat { font-family: var(--pp-mono); font-size: 10px; color: var(--pp-grey-3); margin-bottom: 2px; text-transform: uppercase; letter-spacing: .08em; }

.scenario-panel { display: none; }
.scenario-panel.actief { display: block; background: var(--pp-white); color: var(--pp-grey-1); }

.lek-header { padding: 20px 24px 16px; border-bottom: 1px solid var(--pp-grey-5); }
.lek-datum  { font-family: var(--pp-mono); font-size: 11px; color: var(--pp-grey-3); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 6px; }
.lek-titel  { font-size: 20px; font-weight: 800; color: var(--pp-navy); margin-bottom: 8px; }
.lek-sub    { font-size: 13px; color: var(--pp-grey-1); line-height: 1.65; max-width: 800px; }

.split { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--pp-grey-5); }
.split-kant { padding: 16px 24px; }
.split-kant:first-child { border-right: 1px solid var(--pp-grey-5); }
.split-label { font-weight: 700; font-size: 13px; margin-bottom: 10px; }
.split-label.rood  { color: var(--rood); }
.split-label.groen { color: var(--groen); }

.datalijst { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.datalijst li { display: flex; gap: 10px; align-items: flex-start; padding: 6px 0; border-bottom: 1px solid var(--pp-grey-6); }
.datalijst li:last-child { border-bottom: none; }
.dl-icon { width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; flex-shrink: 0; margin-top: 1px; }
.dl-icon.lek    { background: var(--rood-bg); color: var(--rood); }
.dl-icon.veilig { background: var(--groen-bg); color: var(--groen); }
.dl-icon.nvt    { background: var(--pp-grey-6); color: var(--pp-grey-3); }
.dl-tekst { display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.dl-tekst strong { color: var(--pp-navy); }
.dl-tekst span   { font-size: 12px; color: var(--pp-grey-2); }

.impact-box { padding: 14px 16px; font-size: 13px; color: var(--pp-grey-1); line-height: 1.6; border: 1px solid var(--pp-grey-5); border-radius: 8px; }
.impact-box.voor { border-color: var(--rood-rand); background: var(--rood-bg); }
.impact-box.na   { border-color: var(--groen-rand); background: var(--groen-bg); }
.impact-kop { font-family: var(--pp-mono); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 6px; }

.sim-blok { padding: 16px 24px 20px; border-top: 1px solid var(--pp-grey-5); background: var(--pp-grey-6); }
.sim-kop  { font-size: 14px; font-weight: 800; color: var(--pp-navy); margin-bottom: 12px; }

.toggle-rij { display: flex; align-items: center; gap: 8px; padding: 6px 0; font-size: 13px; color: var(--pp-grey-1); }
.toggle-rij label { display: flex; align-items: center; gap: 8px; cursor: pointer; }

.resultaat { border-radius: 8px; padding: 12px 14px; margin-top: 12px; border: 1px solid transparent; }
.resultaat.veilig { background: var(--groen-bg); border-color: var(--groen-rand); }
.resultaat.gevaar { background: var(--rood-bg); border-color: var(--rood-rand); }
.resultaat-status { font-family: var(--pp-mono); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 4px; }
.resultaat.veilig .resultaat-status { color: var(--groen); }
.resultaat.gevaar .resultaat-status { color: var(--rood); }
.resultaat-tekst  { font-size: 13px; color: var(--pp-grey-1); }

.bron-blok { padding: 10px 24px; font-size: 11px; color: var(--pp-grey-3); border-top: 1px solid var(--pp-grey-6); font-family: var(--pp-mono); }
.bron-blok a { color: var(--pp-accent); }

.btn {
  padding: 7px 14px; font-size: 12px; font-weight: 600;
  border: 1px solid var(--pp-grey-5); border-radius: 6px;
  background: var(--pp-white); color: var(--pp-grey-1); cursor: pointer;
}
.btn:hover { border-color: var(--pp-navy); color: var(--pp-navy); }

/* ──────────────────────────────────────────
   PRISMID — id-bewijs.html (demo-tabs, prismid/verzekeraar panels,
   paspoort-demo, vraag-kaart, vergelijk, vierde-hoek, server-log)
────────────────────────────────────────── */
.demo-tabs { display:flex; gap:0; border-bottom:2px solid var(--pp-black); margin-bottom:20px; flex-wrap:wrap; }
.demo-tab {
  padding:12px 20px; font-size:13px; font-weight:700; font-family:var(--pp-mono);
  border:none; background:none; cursor:pointer; color:var(--pp-grey-3);
  border-bottom:3px solid transparent; margin-bottom:-2px;
}
.demo-tab.actief   { color:var(--pp-navy); border-bottom-color:var(--pp-navy); }
.demo-tab.inactief { color:var(--pp-grey-3); }

.demo-banner {
  font-family:var(--pp-mono); font-size:11px; font-weight:700;
  text-transform:uppercase; letter-spacing:.1em; color:#1565c0;
  background:#eef6ff; border-top:1px solid #b5d4f4; border-bottom:1px solid #b5d4f4;
  border-left:4px solid #1565c0; padding:10px 24px; margin:0 0 16px;
}

.demo-intro { font-size:14px; color:var(--pp-grey-1); line-height:1.7; margin-bottom:16px; }
.demo-intro strong { color:var(--pp-navy); }

.preset-knoppen { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:20px; }
.preset-btn {
  padding:8px 16px; font-size:12px; font-weight:600; font-family:var(--pp-mono);
  border:1px solid var(--pp-grey-5); border-radius:6px; background:var(--pp-white);
  color:var(--pp-grey-1); cursor:pointer;
}
.preset-btn:hover { border-color:var(--pp-navy); color:var(--pp-navy); }

.demo-layout { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-bottom:24px; align-items:start; }

/* PrismID-paneel & Verzekeraar-paneel */
.prismid-panel, .verzekeraar { border:1px solid var(--pp-grey-5); border-radius:var(--pp-radius); overflow:hidden; }
.prismid-header, .verz-header {
  display:flex; align-items:baseline; gap:8px; padding:14px 18px;
  border-bottom:1px solid var(--pp-grey-5); background:var(--pp-grey-6);
}
.prismid-logo, .verz-logo { font-weight:800; font-size:15px; color:var(--pp-navy); }
.prismid-sub, .verz-sub { font-size:12px; color:var(--pp-grey-2); }
.prismid-intro, .verz-intro {
  padding:12px 18px; font-size:13px; color:var(--pp-grey-1); line-height:1.6;
  border-bottom:1px solid var(--pp-grey-6);
}

#prismid-vragen { padding:0 18px; }
.prismid-vraag { padding:10px 0; border-bottom:1px solid var(--pp-grey-6); }
.prismid-vraag:last-child { border-bottom:none; }
.prismid-vraag-header { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.prismid-vraag-tekst { font-size:13px; color:var(--pp-grey-1); flex:1; min-width:160px; }
.prismid-vraag-antw { font-size:12px; font-weight:700; color:var(--groen); font-family:var(--pp-mono); white-space:nowrap; }
.prismid-vraag-antw.geheim { color:var(--pp-grey-3); font-weight:500; }

.zkp-chip {
  display:none; font-family:var(--pp-mono); font-size:11px; color:var(--pp-accent);
  background:var(--pp-accent-light); border-radius:6px; padding:6px 10px; margin-top:6px; line-height:1.5;
}
.zkp-chip.zichtbaar { display:block; }

/* Toggle-switch */
.toggle-wrap { display:flex; align-items:center; gap:6px; }
.toggle { position:relative; display:inline-block; width:38px; height:20px; flex-shrink:0; }
.toggle input { opacity:0; width:0; height:0; }
.toggle-slider {
  position:absolute; cursor:pointer; top:0; left:0; right:0; bottom:0;
  background:var(--pp-grey-4); transition:.2s; border-radius:20px;
}
.toggle-slider::before {
  position:absolute; content:""; height:14px; width:14px; left:3px; bottom:3px;
  background:#fff; transition:.2s; border-radius:50%;
}
.toggle input:checked + .toggle-slider { background:var(--pp-navy); }
.toggle input:checked + .toggle-slider::before { transform:translateX(18px); }
.toggle-lbl { font-family:var(--pp-mono); font-size:11px; font-weight:700; color:var(--pp-grey-2); min-width:24px; }

/* Wat de server nooit ziet */
.server-ziet { padding:14px 18px; background:var(--pp-grey-6); }
.server-ziet-kop { font-weight:700; font-size:13px; color:var(--pp-navy); margin-bottom:8px; }
.server-rij { display:flex; justify-content:space-between; font-size:12px; padding:3px 0; color:var(--pp-grey-1); }
.val-nee { color:var(--rood); font-weight:700; font-family:var(--pp-mono); font-size:11px; }
.val-ja  { color:var(--groen); font-weight:700; font-family:var(--pp-mono); font-size:11px; }

/* Verzekeraar-vragen & offerte */
.verz-vragen { padding:0 18px; }
.verz-vraag-kop {
  font-weight:700; font-size:11px; color:var(--pp-grey-2); text-transform:uppercase;
  letter-spacing:.06em; font-family:var(--pp-mono); padding:10px 0 6px;
}
.verz-vraag { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:8px 0; border-bottom:1px solid var(--pp-grey-6); font-size:13px; }
.verz-vraag:last-child { border-bottom:none; }
.verz-vraag-tekst { color:var(--pp-grey-1); }
.verz-vraag.geweigerd .verz-vraag-tekst { color:var(--pp-grey-3); }
.verz-antwoord { font-weight:700; color:var(--groen); font-family:var(--pp-mono); font-size:12px; white-space:nowrap; }
.verz-antwoord.geheim { color:var(--pp-grey-3); font-weight:500; }

.verz-status { padding:16px 18px; border-top:1px solid var(--pp-grey-5); background:var(--pp-grey-6); text-align:center; }
.verz-status-lbl { font-family:var(--pp-mono); font-size:10px; text-transform:uppercase; letter-spacing:.1em; color:var(--pp-grey-3); margin-bottom:6px; }
.verz-offerte { font-size:26px; font-weight:800; color:var(--pp-navy); }
.verz-offerte.geweigerd-all { color:var(--rood); }
.verz-offerte-sub { font-size:12px; color:var(--pp-grey-2); margin-top:6px; }

/* Vergelijking — verg-col / verg-header / verg-rij (binnen .vergelijk) */
.verg-col { border:1px solid var(--pp-grey-5); border-radius:8px; padding:14px; }
.verg-header { font-weight:700; font-size:13px; margin-bottom:8px; }
.verg-rij { font-size:12px; padding:4px 0; border-bottom:1px solid var(--pp-grey-6); color:var(--pp-grey-1); }
.verg-rij:last-child { border-bottom:none; }
.verg-rij.ja::before  { content:"✓ "; color:var(--groen); font-weight:700; }
.verg-rij.nee::before { content:"✕ "; color:var(--rood); font-weight:700; }

/* Demo 2 — Digitaal Paspoort */
.paspoort-wrap { display:grid; grid-template-columns:1fr 1.3fr; gap:24px; margin:20px 0; }
.paspoort-kaart { border:1px solid var(--pp-grey-5); border-radius:var(--pp-radius); padding:16px 18px; background:var(--pp-grey-6); }
.paspoort-veld { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:6px 0; border-bottom:1px solid var(--pp-grey-5); font-size:13px; }
.paspoort-veld:last-child { border-bottom:none; }
.paspoort-lbl { color:var(--pp-grey-2); }
.paspoort-val { font-family:var(--pp-mono); font-weight:700; color:var(--pp-navy); text-align:right; }
.paspoort-val.verborgen { color:var(--pp-grey-3); letter-spacing:.1em; }
.paspoort-hash {
  margin-top:10px; padding-top:10px; border-top:1px dashed var(--pp-grey-5);
  font-family:var(--pp-mono); font-size:10px; color:var(--pp-grey-3); line-height:1.7; word-break:break-all;
}

/* Vragen-sectie & vraag-kaarten (klikbaar) */
.vragen-sectie { display:flex; flex-direction:column; gap:10px; }
.vraag-kaart { border:1px solid var(--pp-grey-5); border-radius:var(--pp-radius); cursor:pointer; overflow:hidden; }
.vraag-kaart.geweigerd { border-color:var(--rood-rand); }
.vraag-header { display:flex; align-items:center; gap:10px; padding:12px 16px; }
.vraag-icoon { font-size:18px; }
.vraag-tekst { flex:1; font-size:13px; font-weight:600; color:var(--pp-grey-1); }
.vraag-platform { font-family:var(--pp-mono); font-size:10px; color:var(--pp-grey-3); text-transform:uppercase; letter-spacing:.06em; white-space:nowrap; }
.antwoord-blok { display:none; padding:0 16px 16px; }
.vraag-kaart.open .antwoord-blok { display:block; }
.antwoord-rij { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:10px; }
.antwoord-server, .antwoord-paspoort, .antwoord-geweigerd {
  border:1px solid var(--pp-grey-5); border-radius:8px; padding:10px 12px;
}
.a-lbl { font-family:var(--pp-mono); font-size:9px; text-transform:uppercase; letter-spacing:.08em; color:var(--pp-grey-3); margin-bottom:4px; }
.a-val { font-size:14px; font-weight:700; color:var(--pp-navy); }
.a-val.ja { color:var(--groen); }
.a-val.nee-antwoord { color:var(--rood); }
.a-sub { font-size:11px; color:var(--pp-grey-2); margin-top:4px; line-height:1.5; }
.zkp-bewijs { background:var(--pp-grey-6); border-radius:8px; padding:10px 12px; }
.zkp-lbl { font-family:var(--pp-mono); font-size:9px; text-transform:uppercase; letter-spacing:.08em; color:var(--pp-grey-3); margin-bottom:4px; }
.zkp-hash { font-family:var(--pp-mono); font-size:10px; color:var(--pp-grey-2); line-height:1.6; word-break:break-all; }

/* Vierde Hoek — rechtbank-koppeling */
.vierde-hoek { border:1px solid var(--pp-grey-5); border-radius:var(--pp-radius); padding:20px 24px; margin-top:24px; }
.vierde-hoek-label { font-family:var(--pp-mono); font-size:10px; text-transform:uppercase; letter-spacing:.1em; color:var(--pp-grey-3); margin-bottom:8px; }
.vierde-hoek h3 { font-size:16px; font-weight:800; color:var(--pp-navy); margin-bottom:10px; }
.vierde-hoek p { font-size:13px; color:var(--pp-grey-1); line-height:1.7; margin-bottom:14px; }

.slot-rijen { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:16px; }
.slot-kaart {
  border:1px solid var(--pp-grey-5); border-top:3px solid var(--pp-grey-3); border-radius:8px;
  padding:14px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:4px;
}
.slot-icoon { font-size:24px; margin-bottom:4px; }
.slot-naam { font-weight:700; font-size:13px; color:var(--pp-navy); }
.slot-sub { font-size:11px; color:var(--pp-grey-2); line-height:1.5; }
.slot-kaart.jij    { border-top-color:var(--pp-accent); }
.slot-kaart.bewaar { border-top-color:var(--pp-grey-3); }
.slot-kaart.wet    { border-top-color:var(--rood); }

.bevel-demo { border-top:1px solid var(--pp-grey-5); padding-top:16px; }
.bevel-knop {
  padding:10px 18px; font-size:13px; font-weight:700; font-family:var(--pp-mono);
  border:1px solid var(--pp-navy); border-radius:6px; background:var(--pp-navy);
  color:#fff; cursor:pointer;
}
.bevel-knop:hover { opacity:.85; }
.bevel-resultaat {
  display:none; margin-top:12px; padding:12px 14px; background:var(--pp-grey-6);
  border-radius:8px; font-family:var(--pp-mono); font-size:11px; color:var(--pp-grey-1);
  line-height:1.8; white-space:pre-line;
}
.bevel-resultaat.zichtbaar { display:block; }

/* Server-log */
.server-log { border:1px solid var(--pp-grey-5); border-radius:var(--pp-radius); overflow:hidden; margin-top:24px; }
.server-log-header {
  display:flex; justify-content:space-between; align-items:center; padding:10px 16px;
  background:var(--pp-grey-6); border-bottom:1px solid var(--pp-grey-5); font-size:12px; font-weight:700; color:var(--pp-navy);
}
.server-log-lijn { display:flex; gap:10px; align-items:baseline; padding:8px 14px; border-bottom:1px solid var(--pp-grey-6); font-size:11px; flex-wrap:wrap; }
.server-log-lijn:last-child { border-bottom:none; }
.sl-tijd { font-family:var(--pp-mono); color:var(--pp-grey-3); }
.sl-tag { font-family:var(--pp-mono); font-weight:700; padding:1px 6px; border-radius:4px; font-size:10px; }
.sl-tag.zkp    { background:var(--groen-bg); color:var(--groen); }
.sl-tag.weiger { background:var(--rood-bg); color:var(--rood); }
.sl-tekst { color:var(--pp-grey-1); }

/* ──────────────────────────────────────────
   PRISMID — id-juridisch.html (jur-kader, anker-model, badges, jur-tabel)
────────────────────────────────────────── */
.jur-kader { border-left:4px solid var(--pp-navy); background:var(--pp-grey-6); padding:14px 18px; border-radius:0 8px 8px 0; margin-bottom:14px; }
.jur-kader p { font-size:13px; color:var(--pp-grey-1); line-height:1.7; }
.jur-kader strong { color:var(--pp-navy); }

.anker-model { border:1px solid var(--pp-grey-5); border-radius:var(--pp-radius); margin:20px 0; overflow:hidden; }
.anker-rij { display:grid; grid-template-columns:200px 1fr; gap:16px; padding:14px 18px; border-bottom:1px solid var(--pp-grey-5); align-items:start; }
.anker-rij:last-child { border-bottom:none; }
.anker-rij__label { font-weight:700; font-size:13px; color:var(--pp-navy); }
.anker-rij__inhoud { font-size:13px; color:var(--pp-grey-1); line-height:1.7; }

.badge {
  display:inline-block; font-family:var(--pp-mono); font-size:10px; font-weight:700;
  text-transform:uppercase; letter-spacing:.06em; padding:3px 9px; border-radius:12px;
  margin-right:8px; vertical-align:middle;
}
.badge--groen { background:var(--groen-bg); color:var(--groen); }
.badge--blauw { background:var(--blauw-bg); color:var(--blauw); }
.badge--rood  { background:var(--rood-bg); color:var(--rood); }
.badge--amber { background:#fff8e1; color:#7a5200; }

.jur-tabel-wrap { overflow-x:auto; margin:16px 0; }
.jur-tabel { width:100%; border-collapse:collapse; font-size:12px; min-width:700px; }
.jur-tabel th { text-align:left; padding:10px 14px; background:var(--pp-navy); color:#fff; font-weight:700; font-size:12px; }
.jur-tabel td { padding:10px 14px; border-bottom:1px solid var(--pp-grey-5); color:var(--pp-grey-1); line-height:1.6; vertical-align:top; }
.jur-tabel tr:nth-child(even) td { background:var(--pp-grey-6); }
.jur-tabel td.cel--positief { color:var(--groen); }
.jur-tabel td.cel--negatief { color:var(--rood); }
.jur-tabel td.cel--neutraal { color:#7a5200; }

/* ──────────────────────────────────────────
   PRISMADD / PRISMID — demo's (prismadd-demo.html, prismid-demo.html)
   terug-link, stap-blok/-header layout, wallet, token-flow, resultaat
────────────────────────────────────────── */
.terug-link {
  display:inline-block; font-family:var(--pp-mono); font-size:12px;
  color:var(--pp-grey-2); text-decoration:none; margin-bottom:16px;
}
.terug-link:hover { color:var(--pp-navy); text-decoration:underline; }

/* .stap-blok is elders (shield-centroid) een flex-rij met .stap-nr + .stap-inhoud.
   Op de demo-pagina's bevat .stap-blok i.p.v. daarvan een .stap-header (flex-rij)
   plus extra verticale content — daarom alleen herdefiniëren als .stap-header aanwezig is. */
.stap-blok:has(.stap-header) {
  display:block;
  padding:20px 0;
  border-bottom:1px solid var(--pp-panel);
}
.stap-blok:has(.stap-header):last-child { border-bottom:none; }
.stap-blok.geblokkeerd { opacity:.45; pointer-events:none; }

.stap-header { display:flex; gap:14px; align-items:flex-start; margin-bottom:14px; }
.stap-titel  { font-size:14px; font-weight:700; color:var(--pp-navy); margin-bottom:4px; }
.stap-sub    { font-size:13px; color:var(--pp-grey-2); line-height:1.6; }

.stap-nr.actief { background:var(--pp-pass); color:#fff; }
.stap-nr.klaar  { background:var(--pp-shield); color:#fff; }
.stap-nr.wacht,
.stap-nr.geblokkeerd { background:var(--pp-grey-5); color:var(--pp-grey-3); }

/* Wallet-instellingen (prismadd-demo, stap 1) */
.wallet-instellingen {
  border:1px solid var(--pp-grey-5); border-radius:var(--pp-radius);
  background:var(--pp-grey-6); padding:14px 18px; margin:14px 0 18px;
}
.instelling-titel { font-weight:700; font-size:13px; color:var(--pp-navy); margin-bottom:10px; }
.instelling-rij {
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  flex-wrap:wrap; padding:6px 0;
}
.instelling-lbl { font-size:13px; color:var(--pp-grey-1); }
.instelling-controls { display:flex; align-items:center; gap:8px; }
.inst-btn {
  width:28px; height:28px; border-radius:6px; border:1px solid var(--pp-grey-5);
  background:var(--pp-white); color:var(--pp-navy); font-size:16px; font-weight:700;
  font-family:var(--pp-mono); line-height:1; cursor:pointer;
}
.inst-btn:hover { border-color:var(--pp-navy); }
.inst-waarde { font-family:var(--pp-mono); font-weight:700; min-width:22px; text-align:center; color:var(--pp-navy); }
.inst-select {
  font-family:var(--pp-mono); font-size:12px; padding:6px 10px;
  border:1px solid var(--pp-grey-5); border-radius:6px; background:var(--pp-white); color:var(--pp-grey-1);
}

/* Wallet-grid / interesse-tags (prismadd-demo, stap 1) */
.wallet-grid { display:flex; flex-wrap:wrap; gap:10px; margin:14px 0 10px; }
.interesse-tag {
  display:flex; align-items:center; gap:8px; padding:10px 14px;
  border:1px solid var(--pp-grey-5); border-radius:20px;
  font-size:13px; color:var(--pp-grey-1); cursor:pointer; transition:.15s;
}
.interesse-tag:hover { border-color:var(--pp-navy); }
.interesse-tag.aan {
  border-color:var(--pp-pass); background:var(--pp-accent-light);
  color:var(--pp-navy); font-weight:700;
}
.tag-icon { font-size:16px; line-height:1; }
.quotum-badge {
  font-family:var(--pp-mono); font-size:9px; color:var(--pp-grey-3);
  text-transform:uppercase; letter-spacing:.05em;
}

/* E-mail rij (prismadd-demo, stap 2) */
.email-rij { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:12px 0 8px; }
.email-rij input[type="email"] {
  flex:1; min-width:200px; padding:10px 14px;
  border:1px solid var(--pp-grey-5); border-radius:8px;
  font-size:13px; font-family:var(--pp-mono); color:var(--pp-grey-1);
}
.email-rij input[type="email"]:focus { outline:none; border-color:var(--pp-navy); }

/* Token-flow / zkp-log — log-box met statuskleuren (prismadd/prismid demo, stap 3) */
.token-flow, .zkp-log {
  background:var(--pp-grey-6); border:1px solid var(--pp-grey-5); border-radius:8px;
  padding:14px 16px; margin:14px 0; font-family:var(--pp-mono); font-size:11px;
  line-height:1.8; max-height:240px; overflow-y:auto; white-space:pre-wrap; color:var(--pp-grey-1);
}
.token-flow .dim,    .zkp-log .dim    { color:var(--pp-grey-3); }
.token-flow .info,   .zkp-log .info   { color:var(--pp-accent); }
.token-flow .goed,   .zkp-log .goed   { color:var(--groen); }
.token-flow .oranje, .zkp-log .oranje { color:#a05a00; }

/* Resultaat-blok (prismadd-demo) */
.resultaat-blok {
  display:none; border:1px solid var(--groen-rand); background:var(--groen-bg);
  border-radius:var(--pp-radius); padding:20px 24px; margin-top:20px;
}
.resultaat-blok h3 { font-size:16px; color:var(--groen); margin-bottom:8px; }
.resultaat-blok p  { font-size:13px; color:var(--pp-grey-1); line-height:1.7; }

.mail-preview { border:1px solid var(--pp-grey-5); border-radius:8px; margin:16px 0; overflow:hidden; background:var(--pp-white); }
.mail-veld {
  display:flex; gap:8px; padding:7px 14px; font-size:12px;
  border-bottom:1px solid var(--pp-grey-5);
}
.mail-lbl {
  font-family:var(--pp-mono); font-size:11px; font-weight:700; text-transform:uppercase;
  letter-spacing:.04em; color:var(--pp-grey-3); min-width:70px;
}
.mail-val { color:var(--pp-grey-1); }
.mail-body {
  padding:14px; font-size:13px; line-height:1.7; font-family:var(--pp-mono);
  background:var(--pp-grey-6); color:var(--pp-grey-1);
}

.mini-kader { border:1px solid var(--pp-grey-5); border-radius:8px; padding:12px 14px; font-size:12px; line-height:1.7; color:var(--pp-grey-1); }
.mini-kader .kop { font-weight:700; font-size:12px; margin-bottom:6px; }
.mini-kader.groen { border-color:var(--groen-rand); background:var(--groen-bg); }
.mini-kader.groen .kop { color:var(--groen); }
.mini-kader.rood  { border-color:var(--rood-rand); background:var(--rood-bg); }
.mini-kader.rood .kop { color:var(--rood); }

.btn-reset {
  display:block; width:100%; margin-top:14px; padding:12px 24px;
  background:transparent; border:1px solid var(--pp-grey-5); border-radius:8px;
  font-family:var(--pp-mono); font-size:13px; color:var(--pp-grey-2); cursor:pointer; text-align:center;
}
.btn-reset:hover { border-color:var(--pp-navy); color:var(--pp-navy); }

/* Ko-fi blok */
.kofi-blok {
  text-align:center; border:1px solid var(--pp-grey-5); border-radius:var(--pp-radius);
  padding:24px; margin-top:32px;
}
.kofi-blok h3 { font-size:16px; color:var(--pp-navy); margin-bottom:8px; }
.kofi-blok p  { font-size:13px; color:var(--pp-grey-2); line-height:1.6; max-width:480px; margin:0 auto 16px; }
.kofi-knop {
  display:inline-flex; align-items:center; gap:8px;
  background:var(--pp-kofi); color:#fff; font-weight:700; font-size:14px;
  padding:12px 22px; border-radius:8px; text-decoration:none;
}
.kofi-knop:hover { opacity:.9; }
.kofi-icon { font-size:18px; line-height:1; }

/* ──────────────────────────────────────────
   PRISMSHIELD — shield-visie.html
   .inzicht-label, .drie-lagen/.laag/.laag-num/.laag-body/.laag-titel/.laag-sub,
   .precedenten/.precedent/.precedent-label,
   .vergelijk-wrap/.vergelijk-rij/.vergelijk-cel/.vergelijk-mid, .status-hypothese
────────────────────────────────────────── */
.inzicht-label {
  font-family: var(--pp-mono); font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em; color: var(--pp-pass); margin-bottom: 8px;
}

/* "Hoe PrismShield werkt — de Centroid": drie genummerde lagen-kaarten */
.drie-lagen { display:flex; flex-direction:column; gap:16px; margin-bottom:24px; }
.laag {
  display:flex; gap:16px; align-items:flex-start;
  padding:18px 20px; border:1.5px solid var(--pp-panel); border-radius:var(--pp-radius);
  background:var(--pp-white);
}
.laag.actief { border-color:var(--pp-pass); box-shadow:0 0 0 2px var(--pp-accent-light); }
.laag-num {
  width:34px; height:34px; border-radius:50%; background:var(--pp-navy); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--pp-mono); font-size:14px; font-weight:700; flex-shrink:0;
}
.laag.actief .laag-num { background:var(--pp-pass); }
.laag-body { flex:1; }
.laag-titel { font-size:15px; font-weight:700; color:var(--pp-navy); margin-bottom:4px; }
.laag-sub {
  display:block; font-family:var(--pp-mono); font-size:11px; color:var(--pp-grey-2);
  text-transform:uppercase; letter-spacing:.06em; margin-bottom:8px;
}
.laag-body p { font-size:14px; color:var(--pp-grey-1); line-height:1.7; margin:0; }

/* "Wat er gebeurt — Duress Mode": 4 precedent-kaarten */
.precedenten { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-bottom:24px; }
.precedent {
  border:1.5px solid var(--pp-panel); border-radius:var(--pp-radius);
  padding:18px 20px; background:var(--pp-white);
}
.precedent-label {
  display:inline-block; font-family:var(--pp-mono); font-size:10px; font-weight:700;
  text-transform:uppercase; letter-spacing:.08em; color:var(--pp-pass);
  background:var(--pp-accent-light); padding:3px 8px; border-radius:4px; margin-bottom:10px;
}
.precedent h4 { font-size:14px; font-weight:700; color:var(--pp-navy); margin:0 0 6px; }
.precedent p { font-size:13px; color:var(--pp-grey-1); line-height:1.65; margin:0; }

/* "Dezelfde logica, ander domein": vergelijkingstabel auto vs login */
.vergelijk-wrap { border:1.5px solid var(--pp-panel); border-radius:var(--pp-radius); overflow:hidden; margin-bottom:20px; }
.vergelijk-rij { display:grid; grid-template-columns:1fr 40px 1fr; align-items:center; }
.vergelijk-rij + .vergelijk-rij { border-top:1px solid var(--pp-panel); }
.vergelijk-cel { padding:14px 18px; font-size:13px; color:var(--pp-grey-1); line-height:1.6; }
.vergelijk-cel.kop {
  font-family:var(--pp-mono); font-weight:700; color:var(--pp-navy); background:var(--pp-accent-light);
  font-size:12px; text-transform:uppercase; letter-spacing:.04em;
}
.vergelijk-mid { text-align:center; font-size:16px; color:var(--pp-grey-3); }
.vergelijk-rij:first-child .vergelijk-mid { background:var(--pp-accent-light); }

/* "Eerlijk over de status" — hypothese-disclaimer */
.status-hypothese,
.hypothese-status {
  border:1.5px solid #f0c040; background:#fff8e1; border-radius:var(--pp-radius);
  padding:16px 20px; font-size:13px; color:#7a5200; line-height:1.7;
}
.status-hypothese strong,
.hypothese-status strong { color:#5a3d00; }

@media (max-width:700px) {
  .precedenten { grid-template-columns:1fr; }
  .vergelijk-rij { grid-template-columns:1fr; }
  .vergelijk-mid { display:none; }
}

/* ──────────────────────────────────────────
   PRISMSHIELD — shield-bewijs.html (Centroid-demo)
   .status-balk, .scenario-knop (kaart-variant), .centroid-score-blok,
   .centroid-wrap/.meter-*/.signaal*, .duress-overlay, .log-tag.ok/.info/.alarm
────────────────────────────────────────── */
.status-balk {
  display:flex; align-items:center; gap:10px; padding:10px 18px;
  border:1.5px solid var(--pp-panel); border-radius:var(--pp-radius);
  background:var(--pp-white); font-size:13px; color:var(--pp-grey-1); margin-bottom:24px;
}
.status-dot.alarm { background:#c0392b; }

/* Scenario-knoppen als kaart (i.p.v. de kleine pill-variant van .scenario-knop) */
.scenario-grid:has(.scenario-knop) { grid-template-columns:repeat(2,1fr); }
.scenario-grid .scenario-knop {
  height:auto; padding:14px 16px; text-align:left; white-space:normal;
}
.scenario-sub {
  display:block; font-family:var(--pp-mono); font-size:11px; line-height:1.6;
  color:var(--pp-grey-2); margin-top:2px;
}
.scenario-knop.actief .scenario-titel,
.scenario-knop.actief .scenario-sub { color:#fff; }
.scenario-knop.alarm-scenario { border-color:#f0b8b8; }
.scenario-knop.alarm-scenario.actief { background:#c0392b; border-color:#c0392b; }

/* Centroid-score (groot getal + status) */
.centroid-score-blok {
  display:flex; align-items:center; gap:20px;
  border:1.5px solid var(--pp-panel); border-radius:var(--pp-radius);
  padding:20px 24px; margin-bottom:28px; background:var(--pp-white);
  transition:border-color .2s, background .2s;
}
.score-getal {
  font-family:var(--pp-mono); font-size:42px; font-weight:800;
  color:var(--pp-shield); flex-shrink:0; min-width:80px; text-align:center;
}
.score-label-blok { flex:1; }
.score-status { font-size:15px; font-weight:700; color:var(--pp-navy); margin-bottom:4px; }
.score-toelichting { font-size:13px; color:var(--pp-grey-1); line-height:1.6; }
.centroid-score-blok.alarm { border-color:#c0392b; background:#fde8e8; }
.centroid-score-blok.alarm .score-status { color:#a02020; }
.score-getal.alarm { color:#c0392b; }

/* Centroid — drie lagen: SVG-driehoek + meters */
.centroid-wrap { display:grid; grid-template-columns:280px 1fr; gap:24px; margin-bottom:24px; align-items:start; }
.centroid-svg-wrap { border:1.5px solid var(--pp-panel); border-radius:var(--pp-radius); padding:16px; background:var(--pp-white); }
.centroid-meters { display:flex; flex-direction:column; gap:12px; }

.meter-blok {
  border:1.5px solid var(--pp-panel); border-left:4px solid var(--pp-grey-4);
  border-radius:var(--pp-radius); padding:14px 18px; background:var(--pp-white);
}
.meter-blok.ok    { border-left-color:var(--pp-shield); }
.meter-blok.alarm { border-color:#c0392b; border-left-color:#c0392b; background:#fde8e8; }
.meter-header { display:flex; justify-content:space-between; align-items:baseline; gap:8px; flex-wrap:wrap; margin-bottom:8px; }
.meter-naam { font-size:13px; font-weight:700; color:var(--pp-navy); }
.meter-sim-lbl {
  font-family:var(--pp-mono); font-size:9px; text-transform:uppercase; letter-spacing:.08em;
  color:var(--pp-grey-3); background:var(--pp-grey-6); padding:2px 6px; border-radius:4px;
}
.meter-waarde-rij { display:flex; align-items:center; gap:12px; margin-bottom:8px; }
.meter-waarde { font-family:var(--pp-mono); font-size:20px; font-weight:800; color:var(--pp-grey-2); min-width:36px; }
.meter-waarde.ok    { color:var(--pp-shield); }
.meter-waarde.alarm { color:#c0392b; }
.meter-balk-wrap { flex:1; height:8px; background:var(--pp-grey-6); border-radius:4px; overflow:hidden; }
.meter-balk-fill { height:100%; background:var(--pp-shield); border-radius:4px; transition:width .3s; }
.meter-balk-fill.alarm { background:#c0392b; }
.meter-sub { font-size:12px; color:var(--pp-grey-2); margin-bottom:10px; line-height:1.5; }
.meter-signalen { display:flex; flex-wrap:wrap; gap:6px; }
.signaal { font-family:var(--pp-mono); font-size:10px; padding:2px 8px; border-radius:4px; background:var(--pp-grey-6); color:var(--pp-grey-3); }
.signaal.actief { background:var(--groen-bg); color:var(--groen); }
.signaal.alarm  { background:var(--rood-bg); color:var(--rood); }

/* Duress Mode overlay (volledig scherm, .actief = zichtbaar) */
.duress-overlay {
  display:none; position:fixed; inset:0; z-index:9999;
  background:rgba(20,0,0,.92); color:#fff; flex-direction:column;
  align-items:center; justify-content:center; text-align:center; padding:24px;
}
.duress-overlay.actief { display:flex; }
.duress-titel { font-family:var(--pp-mono); font-size:28px; font-weight:800; letter-spacing:.08em; color:#ff5c5c; margin-bottom:16px; }
.duress-sub { font-size:15px; line-height:1.7; max-width:520px; margin-bottom:20px; }
.duress-log {
  font-family:var(--pp-mono); font-size:12px; line-height:1.9; color:#ffaaaa;
  background:rgba(255,255,255,.06); border-radius:8px; padding:14px 20px;
  margin-bottom:20px; max-width:520px; text-align:left;
}
.duress-timer { font-family:var(--pp-mono); font-size:48px; font-weight:800; color:#ff5c5c; margin-bottom:20px; }

/* Centroid-log: donker logvak (zelfde stijl als #log-items) */
#centroid-log {
  background:#0d1117; padding:14px 16px; max-height:220px; overflow-y:auto;
  border-radius:0 0 var(--pp-radius) var(--pp-radius);
}
.log-tag.ok    { background:#1f9d3a22; color:#4db86a; }
.log-tag.info  { background:#1e5bff22; color:#6b9fff; }
.log-tag.alarm { background:#ff000022; color:#ff6666; }

@media (max-width:800px) {
  .centroid-wrap { grid-template-columns:1fr; }
  .scenario-grid:has(.scenario-knop) { grid-template-columns:1fr; }
}

/* ──────────────────────────────────────────
   PRISMSHIELD — shield-adoptie.html
   .barriere-grid/.barriere-cel/.barriere-eyebrow/.amber-box,
   .reden-lijst/.reden-rij/.reden-nr/.reden-body, .groen-box/.groen-box-eyebrow
────────────────────────────────────────── */
.barriere-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:20px; margin-bottom:24px; }
.barriere-cel { border:1.5px solid var(--pp-panel); border-radius:var(--pp-radius); padding:20px 22px; background:var(--pp-white); }
.barriere-eyebrow {
  font-family:var(--pp-mono); font-size:10px; text-transform:uppercase; letter-spacing:.1em;
  color:var(--pp-grey-3); margin-bottom:8px;
}
.barriere-cel h3 { font-size:15px; font-weight:700; color:var(--pp-navy); margin:0 0 8px; }
.barriere-cel p { font-size:13px; color:var(--pp-grey-1); line-height:1.7; margin-bottom:12px; }
.amber-box {
  border:1.5px solid #f0c040; background:#fff8e1; border-radius:var(--pp-radius);
  padding:12px 16px; font-size:12px; color:#7a5200; line-height:1.6;
}

.reden-lijst { display:flex; flex-direction:column; gap:16px; margin-bottom:24px; }
.reden-rij { display:flex; gap:16px; align-items:flex-start; }
.reden-nr {
  width:32px; height:32px; border-radius:50%; background:var(--pp-navy); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--pp-mono); font-size:14px; font-weight:700; flex-shrink:0;
}
.reden-body h4 { font-size:14px; font-weight:700; color:var(--pp-navy); margin:0 0 4px; }
.reden-body p { font-size:13px; color:var(--pp-grey-1); line-height:1.7; margin:0; }

.groen-box {
  border:1.5px solid var(--groen-rand); background:var(--groen-bg);
  border-radius:var(--pp-radius); padding:18px 22px; margin-top:8px;
}
.groen-box-eyebrow {
  font-family:var(--pp-mono); font-size:10px; text-transform:uppercase; letter-spacing:.1em;
  color:var(--groen); font-weight:700; margin-bottom:8px;
}
.groen-box p { font-size:13px; color:var(--pp-grey-1); line-height:1.7; margin:0; }

@media (max-width:700px) {
  .barriere-grid { grid-template-columns:1fr; }
}

/* ──────────────────────────────────────────
   PRISMSHIELD — shield-centroid.html
   .arch-tabel, .dubbel-citaat, .stap-lijst/.stap-item/.stap-tekst,
   .pitch/.pitch-lbl/.pitch-txt, .alert-amber/.alert-grijs, .risico-kritiek,
   .grens-punt, .open-punt/.open-label
────────────────────────────────────────── */
.arch-tabel { width:100%; border-collapse:collapse; font-size:13px; margin-bottom:8px; }
.arch-tabel th { text-align:left; padding:10px 14px; background:var(--pp-navy); color:#fff; font-weight:700; font-size:12px; }
.arch-tabel td { padding:10px 14px; border-bottom:1px solid var(--pp-grey-5); color:var(--pp-grey-1); line-height:1.6; vertical-align:top; }
.arch-tabel tr:nth-child(even) td { background:var(--pp-grey-6); }

.dubbel-citaat {
  border-left:4px solid var(--pp-pass); background:#EEF3FF;
  padding:16px 22px; border-radius:0 var(--pp-radius) var(--pp-radius) 0;
  margin-bottom:20px; font-style:italic; color:var(--pp-navy); font-size:15px; line-height:1.8;
}
.dubbel-citaat p { margin:0; }
.dubbel-citaat p + p { margin-top:4px; }

.stap-lijst { display:flex; flex-direction:column; gap:14px; margin-bottom:20px; }
.stap-item { display:flex; align-items:flex-start; gap:14px; }
.stap-tekst { font-size:14px; color:var(--pp-grey-1); line-height:1.65; padding-top:4px; }

.pitch { border:1.5px solid var(--pp-panel); border-left:4px solid var(--pp-shield); background:#f0faf4; border-radius:var(--pp-radius); padding:14px 18px; }
.pitch-lbl {
  font-family:var(--pp-mono); font-size:10px; font-weight:700; text-transform:uppercase;
  letter-spacing:.1em; color:var(--pp-shield); margin-bottom:6px;
}
.pitch-txt { font-size:13px; color:var(--pp-grey-1); line-height:1.6; }

.alert-amber {
  border:1.5px solid #f0c040; background:#fff8e1; border-radius:var(--pp-radius);
  padding:14px 18px; font-size:13px; color:#7a5200; line-height:1.7; margin-top:14px;
}
.alert-grijs,
.architectuur-status {
  border:1.5px solid var(--pp-panel); background:var(--pp-grey-6); border-radius:var(--pp-radius);
  padding:14px 18px; font-size:13px; color:var(--pp-grey-1); line-height:1.7; margin-top:14px;
}

.risico-kritiek { color:#8b0000; font-weight:700; }

.grens-punt {
  font-size:13px; color:var(--pp-grey-1); line-height:1.7; padding:6px 0 6px 20px;
  position:relative; border-bottom:1px solid var(--pp-grey-6);
}
.grens-punt:last-child { border-bottom:none; }
.grens-punt::before { content:"—"; position:absolute; left:0; color:var(--pp-grey-3); }

.open-punt {
  display:flex; gap:10px; align-items:flex-start; font-size:13px; color:var(--pp-grey-1);
  line-height:1.65; padding:8px 0; border-bottom:1px solid var(--pp-grey-6);
}
.open-punt:last-child { border-bottom:none; }
.open-label {
  font-family:var(--pp-mono); font-size:10px; font-weight:700; color:#a05a00;
  background:#fff8e1; border:1px solid #f0c040; padding:2px 7px; border-radius:4px;
  flex-shrink:0; letter-spacing:.05em;
}

@media (max-width: 700px) {
  .arch-tabel { display:block; overflow-x:auto; white-space:nowrap; }
}

@media (max-width: 900px) {
  .demo-layout    { grid-template-columns:1fr; }
  .paspoort-wrap  { grid-template-columns:1fr; }
}

@media (max-width: 600px) {
  .scenario-grid { grid-template-columns: 1fr; }
  .wrap          { padding: 16px 16px 48px; }
  .antwoord-rij  { grid-template-columns: 1fr; }
  .slot-rijen    { grid-template-columns: 1fr; }
  .anker-rij     { grid-template-columns: 1fr; }
  .mail-veld     { flex-direction: column; gap: 2px; }
  .instelling-rij{ align-items: flex-start; }
}

/* ──────────────────────────────────────────
   PRISMID — claim-betwisten.html
   .pp-nav__item--active, .pp-section__intro, .kern-blok,
   .casus-tabs/.casus-tab/.casus-pane, .situatie-label/.situatie-tekst,
   .bron-badge, .stat-rij, .split-kolom (uitbreiding) + .kolom-nu/.kolom-prism,
   .eerlijk-blok, .schuifje-blok, .bronnen-sectie/.bron-item
────────────────────────────────────────── */

/* Vangnet voor secties zonder .pp-section__inner-wrapper (bv. claim-betwisten.html,
   delen van zorg-scenario.html): geeft .pp-section zelf de centrering + zijpadding
   die .pp-section__inner normaal levert, maar alleen als de sectie wel "v4-stijl"
   inhoud (.pp-section__title/__intro/__lead) bevat — oudere demo-pagina's met hun
   eigen .wrap/.demo-wrap blijven ongemoeid. */
.pp-section:not(:has(.pp-section__inner)):has(.pp-section__title, .pp-section__intro, .pp-section__lead) {
  max-width: var(--pp-max);
  margin: 0 auto;
  padding-left: 32px;
  padding-right: 32px;
}

/* "Je bevindt je hier" — actieve nav-item (anders dan --accent, dat is altijd PrismAdd) */
.pp-nav__item--active {
  background: var(--pp-accent-light);
  color: var(--pp-navy);
  font-weight: 700;
}

/* Inleidende paragraaf onder een sectietitel (ook gebruikt op zorg-scenario.html) */
.pp-section__intro {
  font-size: 14px;
  line-height: 1.8;
  color: var(--pp-grey-1);
  margin-bottom: 16px;
}

/* Kern-blok: blauw inzicht-kader met losse titel + tekst */
.kern-blok {
  border: 1.5px solid var(--pp-panel);
  border-left: 4px solid var(--pp-pass);
  background: var(--pp-accent-light);
  border-radius: var(--pp-radius);
  padding: 16px 20px;
  margin-bottom: 20px;
}
.kern-blok__titel {
  font-family: var(--pp-mono);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--pp-pass);
  margin-bottom: 8px;
}
.kern-blok__tekst {
  font-size: 14px;
  color: var(--pp-navy);
  line-height: 1.7;
}

/* Casus-tabs (vier situatie-kaarten, JS toggelt .actief via toonCasus()) */
.casus-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  border-bottom: 2px solid var(--pp-black);
  margin-bottom: 24px;
}
.casus-tab {
  padding: 10px 18px;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  border: none;
  background: none;
  cursor: pointer;
  color: var(--pp-grey-2);
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
}
.casus-tab.actief {
  color: var(--pp-navy);
  border-bottom-color: var(--pp-navy);
  font-weight: 800;
}
.casus-pane { display: none; }
.casus-pane.actief { display: block; }

/* Situatie-label/-tekst: eyebrow + lopende tekst per casus */
.situatie-label {
  font-family: var(--pp-mono);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--pp-grey-3);
  margin-bottom: 6px;
}
.situatie-tekst {
  font-size: 14px;
  color: var(--pp-grey-1);
  line-height: 1.7;
  margin-bottom: 16px;
}

/* Bron-badge: kleine pill met externe link */
.bron-badge {
  display: inline-block;
  font-family: var(--pp-mono);
  font-size: 11px;
  font-weight: 600;
  background: var(--pp-accent-light);
  color: var(--pp-navy);
  border: 1px solid var(--pp-panel);
  border-radius: 20px;
  padding: 3px 10px;
  margin: 2px 4px 2px 0;
}
.bron-badge a { color: inherit; text-decoration: none; }
.bron-badge a:hover { text-decoration: underline; }

/* Stat-rij: container voor .stat-item/.stat-getal/.stat-lbl (al gedefinieerd) */
.stat-rij {
  display: flex;
  gap: 0;
  border: 1.5px solid var(--pp-panel);
  border-radius: var(--pp-radius);
  margin-bottom: 16px;
  overflow: hidden;
}
@media (max-width: 480px) {
  .stat-rij { flex-direction: column; }
}

/* .split met .split-kolom-kinderen (i.p.v. .split-kant) */
.split:has(.split-kolom) {
  gap: 16px;
  border-bottom: none;
  margin-bottom: 16px;
}
.split-kolom {
  font-size: 13px;
  color: var(--pp-grey-1);
  line-height: 1.6;
}
.split-kolom__label {
  font-family: var(--pp-mono);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 10px;
}
.kolom-nu { border-color: #f5c0b8; background: #fdf0ef; }
.kolom-nu .split-kolom__label { color: #c0392b; }
.kolom-prism { border-color: #a8d5bb; background: #f0faf4; }
.kolom-prism .split-kolom__label { color: var(--pp-shield); }
@media (max-width: 700px) {
  .split:has(.split-kolom) { grid-template-columns: 1fr; }
}

/* Eerlijk-blok: amber disclaimer (zelfde toon als .status-hypothese) */
.eerlijk-blok {
  border: 1.5px solid #f0c040;
  background: #fff8e1;
  border-radius: var(--pp-radius);
  padding: 14px 18px;
  font-size: 13px;
  color: #7a5200;
  line-height: 1.7;
  margin-top: 14px;
  margin-bottom: 16px;
}
.eerlijk-blok strong { display: block; margin-bottom: 4px; color: #5a3d00; }

/* Schuifje-blok: standen-keuze met genummerde/letterde dots (vgl. .laag-num/.reden-nr) */
.schuifje-blok {
  border: 1.5px solid var(--pp-panel);
  border-radius: var(--pp-radius);
  padding: 20px 22px;
  margin-bottom: 20px;
  background: var(--pp-white);
}
.schuifje-blok__titel {
  font-size: 15px;
  font-weight: 700;
  color: var(--pp-navy);
  margin-bottom: 16px;
}
.schuifje-optie {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.schuifje-optie + .schuifje-optie {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--pp-grey-6);
}
.schuifje-dot {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--pp-mono);
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  background: var(--pp-navy);
  flex-shrink: 0;
}
.dot-a { background: var(--pp-shield); }
.dot-b { background: var(--pp-navy); }
.dot-c { background: #c0392b; }
.schuifje-body {
  font-size: 13px;
  color: var(--pp-grey-1);
  line-height: 1.7;
}
.schuifje-body strong {
  display: block;
  font-size: 14px;
  color: var(--pp-navy);
  margin-bottom: 4px;
}

/* Bronnenlijst: genummerde citaties onderaan de pagina */
.bronnen-sectie { border-top: 1px solid var(--pp-grey-5); }
.bron-item {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 0;
  border-bottom: 1px solid var(--pp-grey-6);
  font-size: 12px;
  line-height: 1.7;
}
.bron-item:last-child { border-bottom: none; }
.bron-nr {
  font-family: var(--pp-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--pp-grey-3);
  flex-shrink: 0;
  min-width: 26px;
}
.bron-tekst { color: var(--pp-grey-2); }
.bron-tekst a { color: var(--pp-accent); }

/* ──────────────────────────────────────────
   PRISMID — id-visie.html
   .scenario-rij/.scenario-kant/.scenario-label(.nu/.prismid),
   .scope (twee-koloms variant) + .scope-kant/.scope-label(.ja/.nee)/
   .scope-item/.scope-icon, .zkp-body
────────────────────────────────────────── */

/* Rij van .scenario-kaarten (elk met .scenario-vraag + 2x .scenario-kant) */
.scenario-rij { display: flex; flex-direction: column; }

/* Eén kant (Nu / PrismID) binnen een .scenario-kaart */
.scenario-kant {
  padding: 16px 20px;
  font-size: 14px;
  color: var(--pp-grey-1);
  line-height: 1.75;
  background: var(--pp-white);
}
.scenario-kant + .scenario-kant {
  border-top: 1px solid var(--pp-panel);
}
.scenario-label {
  font-family: var(--pp-mono);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 8px;
}
.scenario-label.nu      { color: #c0392b; }
.scenario-label.prismid { color: var(--pp-shield); }

/* Scope-vergelijking: .scope met twee .scope-kant naast elkaar */
.scope:has(.scope-kant) {
  display: flex;
  gap: 24px;
  background: none;
  border: none;
  padding: 0;
}
.scope-kant {
  flex: 1;
  border: 1.5px solid var(--pp-panel);
  border-radius: var(--pp-radius);
  padding: 16px 20px;
  background: var(--pp-white);
}
.scope-label {
  font-family: var(--pp-mono);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 10px;
}
.scope-label.ja  { color: var(--pp-shield); }
.scope-label.nee { color: #c0392b; }
.scope-item {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  font-size: 13px;
  color: var(--pp-grey-1);
  line-height: 1.8;
}
.scope-icon { flex-shrink: 0; font-weight: 700; }
@media (max-width: 700px) {
  .scope:has(.scope-kant) { flex-direction: column; }
}

/* Tekstdeel van een .zkp-stap (naast .zkp-num) */
.zkp-body { flex: 1; }
.zkp-body h4 {
  font-size: 14px;
  font-weight: 700;
  color: var(--pp-navy);
  margin-bottom: 4px;
}
.zkp-body p {
  font-size: 13px;
  color: var(--pp-grey-1);
  line-height: 1.7;
}

/* ──────────────────────────────────────────
   PRISMID/ADOPTIE — id-adoptie.html & overheid.html
   .diagram-label, .d-punt(.top)/.d-verbinding,
   .kolom/.kolom-label(.oud/.nieuw), .tl-jaar + .tl-item.open
────────────────────────────────────────── */

.diagram-label {
  font-family: var(--pp-mono);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--pp-grey-3);
  margin-bottom: 16px;
}

/* Eén "punt" in het vier-puntendiagram (Biometrie/Apparaat/Wearable/Vierde hoek) */
.d-punt {
  border: 1.5px solid var(--pp-panel);
  border-radius: var(--pp-radius);
  background: var(--pp-accent-light);
  color: var(--pp-navy);
  font-size: 13px;
  font-weight: 700;
  text-align: center;
  padding: 10px 16px;
}
.d-punt small {
  display: block;
  font-size: 11px;
  font-weight: 400;
  color: var(--pp-grey-2);
  margin-top: 4px;
}
.d-punt.top { border-color: var(--pp-pass); }
.d-verbinding {
  font-family: var(--pp-mono);
  font-size: 12px;
  color: var(--pp-grey-3);
  margin: 6px 0;
}

/* Kolom binnen .twee-kolom: vergelijking "oud" systeem vs "nieuw" (PrismPass) */
.kolom {
  border: 1.5px solid var(--pp-panel);
  border-radius: var(--pp-radius);
  padding: 16px 20px;
  font-size: 13px;
  color: var(--pp-grey-1);
  line-height: 1.7;
  background: var(--pp-white);
}
.kolom-label {
  font-family: var(--pp-mono);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 10px;
}
.kolom-label.oud   { color: #c0392b; }
.kolom-label.nieuw { color: var(--pp-shield); }

/* Tijdlijn-item zonder eigen .tl-dot: jaartal als titel + dot via ::before */
.tl-jaar {
  font-family: var(--pp-mono);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--pp-navy);
  margin-bottom: 4px;
}
.tl-item:not(:has(.tl-dot))::before {
  content: '';
  position: absolute;
  left: -24px;
  top: 4px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--pp-pass);
  border: 2px solid var(--pp-white);
  box-shadow: 0 0 0 2px var(--pp-panel);
}
.tl-item.open .tl-jaar  { color: var(--pp-grey-3); }
.tl-item.open .tl-tekst { color: var(--pp-grey-2); }
.tl-item.open:not(:has(.tl-dot))::before { background: var(--pp-grey-4); }

/* ──────────────────────────────────────────
   PRISMPASS — adoptie/impact.html
   .panel(.actief), .doel-header/.doel-datum/.doel-titel/.doel-sub,
   .itemlijst/.il-icon(.win/.nvt)/.il-tekst, .toggle-sectie/.toggle-kop/.toggle-sub,
   .resultaat-blok(.positief/.negatief)/.res-status/.res-tekst,
   .code-grid/.code-label/.code-block(.rood-border/.groen-border)
────────────────────────────────────────── */

.panel { display: none; }
.panel.actief { display: block; }

.doel-header { margin-bottom: 20px; }
.doel-datum {
  font-family: var(--pp-mono);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--pp-grey-3);
  margin-bottom: 6px;
}
.doel-titel {
  font-size: 22px;
  font-weight: 800;
  color: var(--pp-navy);
  margin-bottom: 8px;
}
.doel-sub {
  font-size: 14px;
  color: var(--pp-grey-1);
  line-height: 1.7;
}

/* Lijst met icoon + titel/subtekst (vgl. .datalijst/.dl-icon/.dl-tekst) */
.itemlijst { list-style: none; margin: 0; padding: 0; }
.itemlijst li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 10px 0;
  border-bottom: 1px solid var(--pp-grey-6);
}
.itemlijst li:last-child { border-bottom: none; }
.il-icon {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  margin-top: 1px;
  background: var(--rood-bg);
  color: var(--rood);
}
.il-icon.win { background: var(--groen-bg); color: var(--groen); }
.il-icon.nvt { background: var(--pp-grey-6); color: var(--pp-grey-3); }
.il-tekst { display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.il-tekst strong { color: var(--pp-navy); }
.il-tekst span   { font-size: 12px; color: var(--pp-grey-2); }

/* Toggle-sectie: kader rond simulatie-checkboxes + resultaat */
.toggle-sectie {
  border: 1.5px solid var(--pp-panel);
  border-radius: var(--pp-radius);
  padding: 18px 22px;
  margin-top: 20px;
  background: var(--pp-white);
}
.toggle-kop { font-size: 14px; font-weight: 800; color: var(--pp-navy); margin-bottom: 4px; }
.toggle-sub { font-size: 12px; color: var(--pp-grey-2); margin-bottom: 12px; }

/* .resultaat-blok krijgt hier .positief/.negatief i.p.v. de prismadd-demo show/hide */
.resultaat-blok.positief,
.resultaat-blok.negatief { display: block; }
.resultaat-blok.negatief {
  border-color: var(--rood-rand);
  background: var(--rood-bg);
}
.res-status {
  font-family: var(--pp-mono);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--groen);
  margin-bottom: 8px;
}
.resultaat-blok.negatief .res-status { color: var(--rood); }
.res-tekst {
  font-size: 13px;
  color: var(--pp-grey-1);
  line-height: 1.7;
}

/* Code-vergelijking (huidige login vs. PrismPass-login) */
.code-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 20px 0;
}
.code-label {
  font-family: var(--pp-mono);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 8px;
}
.code-block {
  font-family: var(--pp-mono);
  font-size: 12px;
  line-height: 1.9;
  background: #0d1117;
  color: #c9d1d9;
  border: 1.5px solid var(--pp-panel);
  border-radius: var(--pp-radius);
  padding: 16px 18px;
}
.code-block.rood-border  { border-color: var(--rood-rand); }
.code-block.groen-border { border-color: var(--groen-rand); }
@media (max-width: 700px) {
  .code-grid { grid-template-columns: 1fr; }
}