/* -------------------------------------------------------
   1. DESIGN TOKENS
------------------------------------------------------- */

:root {
  /* kleuren */
  --pp-accent: #5865f2;
  --pp-accent-light: #eef0ff;

  --pp-black: #111;
  --pp-dark: #1a1a1a;
  --pp-grey-1: #444;
  --pp-grey-2: #666;
  --pp-grey-3: #999;
  --pp-grey-4: #ccc;
  --pp-grey-5: #e5e5e5;
  --pp-grey-6: #f2f2f2;

  --pp-white: #fff;

  /* spacing */
  --pp-gap: 24px;
  --pp-section: 40px;

  /* radius */
  --pp-radius: 14px;

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

  /* layout */
  --pp-max: 1200px;
}

/* -------------------------------------------------------
   2. GLOBAL RESET
------------------------------------------------------- */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: var(--pp-font);
  color: var(--pp-dark);
  background: var(--pp-white);
  line-height: 1.6;
  -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 24px;
}
.pp-hero__update {
    font-size: 0.85rem;
    line-height: 1.45;
    opacity: 0.85;
    margin-top: 0.5rem;
}

/* -------------------------------------------------------
   4. HEADER
------------------------------------------------------- */

.pp-header {
  border-bottom: 1px solid var(--pp-grey-5);
  background: var(--pp-white);
}

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

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

.pp-logo {
  font-weight: 700;
  font-size: 18px;
  color: var(--pp-dark);
}

.pp-nav {
  display: flex;
  gap: 20px;
}

.pp-nav__item {
  font-size: 14px;
  color: var(--pp-grey-1);
  padding: 6px 0;
}

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

.pp-nav__item--dev {
  font-family: var(--pp-mono);
  font-size: 12px;
  color: var(--pp-grey-2);
}

.pp-header__profile {
  margin-left: auto;
  font-family: var(--pp-mono);
  font-size: 11px;
  color: var(--pp-grey-3);
}

/* -------------------------------------------------------
   5. HERO
------------------------------------------------------- */

.pp-hero {
  padding: 60px 0 40px;
  background: var(--pp-white);
}

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

.pp-hero__title {
  font-size: 42px;
  line-height: 1.2;
  max-width: 620px;
  margin-bottom: 20px;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.pp-hero__subtitle {
  max-width: 560px;
  font-size: 18px;
  color: var(--pp-grey-1);
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.4;
}
.pp-hero__tagline {
  text-align: center;
  margin-top: 8px;
  font-size: 16px;
  color: #444;
}

.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: 80px;          /* meer lucht */
  flex-wrap: nowrap;  /* voorkomt onder elkaar */
}

.pp-hero__logo-large img {
  height: 600px;      /* groter */
  max-width: 700px;   /* genoeg breedte */
  width: auto;
}
.pp-hero-tagline {
  text-align: center;
}

/* -------------------------------------------------------
   6. PRODUCT GRID
------------------------------------------------------- */

.pp-product-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--pp-gap);
}

.pp-card {
  border: 1px solid var(--pp-grey-5);
  border-radius: var(--pp-radius);
  padding: 28px;
  background: var(--pp-white);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

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

.pp-card__status {
  font-family: var(--pp-mono);
  font-size: 11px;
  color: var(--pp-grey-2);
}

.pp-card__title {
  font-size: 22px;
  font-weight: 700;
}

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

.pp-card__text {
  font-size: 15px;
  color: var(--pp-grey-1);
}

.pp-card__links {
  margin-top: auto;
  display: flex;
  gap: 14px;
}

.pp-card__link {
  font-size: 14px;
  color: var(--pp-accent);
}

/* -------------------------------------------------------
   7. RELAY PANEL
------------------------------------------------------- */

.pp-panel {
  border: 2px solid var(--pp-black);
  border-radius: var(--pp-radius);
  overflow: hidden;
}

.pp-panel__header {
  background: var(--pp-black);
  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: var(--pp-grey-5);
}

.pp-panel__title {
  font-size: 20px;
  font-weight: 700;
}

.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-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);
}

/* -------------------------------------------------------
   8. TRIPTYCH (kernprincipe)
------------------------------------------------------- */

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

.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;
}

.pp-panel__subtitle {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 6px;
}

/* -------------------------------------------------------
   9. DOCUMENTATIE
------------------------------------------------------- */

.pp-doc-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--pp-gap);
}

.pp-doc-card {
  border: 1px solid var(--pp-grey-5);
  border-radius: var(--pp-radius);
  padding: 24px;
  background: var(--pp-white);
}

.pp-doc-card__title {
  font-size: 16px;
  font-weight: 700;
}

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

/* -------------------------------------------------------
   10. FOOTER
------------------------------------------------------- */

.pp-footer {
  border-top: 1px solid var(--pp-grey-5);
  padding: 40px 0;
  background: var(--pp-white);
}

.pp-footer__inner {
  max-width: var(--pp-max);
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  color: var(--pp-grey-2);
}

.pp-footer__link {
  color: var(--pp-grey-3);
  font-size: 13px;
}

/* -------------------------------------------------------
   11. MEDIA QUERIES
------------------------------------------------------- */


@media (max-width: 900px) {
  :root {
    --pp-section: 28px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   AANVULLING op prismpass.css
   Alleen klassen die ontbreken — niets overschrijven
   ═══════════════════════════════════════════════════════════════════════ */

/* ── GLOBAAL ONTBREKEND ─────────────────────────────────────────────── */

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

.pp-section__title {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--pp-black);
}

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

/* Helper-klassen voor kleur en font */
.tekst-groen { color: #2a6e2a; }
.tekst-rood  { color: #c00; }
.tekst-grijs { color: var(--pp-grey-3); }
.tekst-mono  { font-family: var(--pp-mono); font-size: 12px; }

/* Tab-navigatie (gedeeld door visuals + api) */
.tabs {
  display: flex;
  border-bottom: 2px solid var(--pp-black);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.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;
}

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

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

.mono { font-family: var(--pp-mono); }
.klik { cursor: pointer; }


/* ── API-SPECIFIEK ──────────────────────────────────────────────────── */

.api-url-block {
  background: var(--pp-black);
  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-grey-6);
  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-black); 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; }
.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-grey-6);
  border: 1px solid var(--pp-grey-5);
  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-grey-6);
  border-left: 3px solid var(--pp-black);
  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-grey-6); }
.api-error-code  { font-family: var(--pp-mono); font-size: 13px; font-weight: 700; color: #c00; }
.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; }

@media (max-width: 600px) {
  .api-code-grid { grid-template-columns: 1fr; }
  .api-error-row { grid-template-columns: 60px 1fr; }
  .api-error-desc { grid-column: 1 / -1; }
}


/* ── 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-black);
  border-radius: 16px;
  padding: 12px 10px 16px;
  background: var(--pp-white);
  cursor: pointer;
}
.phone.klik:hover { background: var(--pp-grey-6); }

.phone-notch { width: 32px; height: 6px; background: var(--pp-black); 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; }
.app-bedrag { font-family: var(--pp-mono); font-size: 15px; text-align: center; margin-bottom: 8px; }
.phone-btn  { font-size: 11px; background: var(--pp-black); 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: #2a6e2a; text-align: center; margin-bottom: 2px; }
.phone-status-warn { font-family: var(--pp-mono); font-size: 10px; color: #7d5a00; text-align: center; margin-bottom: 2px; }
.phone-status-red  { font-family: var(--pp-mono); font-size: 10px; color: #c00;    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: 1px solid var(--pp-grey-5); padding: 20px; margin-bottom: 20px; border-radius: var(--pp-radius); }
.duress-sectie h3 { font-size: 14px; font-weight: 700; margin-bottom: 16px; }
.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: 4px; }
.step-num.done { border-color: var(--pp-black); background: var(--pp-black); color: var(--pp-white); }
.step-num.klik:hover { background: var(--pp-grey-6); }
.stap-pijl { font-size: 12px; color: var(--pp-grey-4); }

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

.info-paneel { display: none; border: 1px solid var(--pp-grey-5); padding: 16px 18px; margin-bottom: 20px; background: var(--pp-grey-6); 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-grey-5); 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-black); border-radius: 16px; padding: 14px 12px; flex-shrink: 0; }
.prismid-header-bar { text-align: center; margin-bottom: 10px; }
.prismid-header-bar h3 { font-size: 14px; font-weight: 700; }
.prismid-id-box { border: 1px solid var(--pp-grey-5); 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-black); 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-6); cursor: pointer; }
.prismid-attribuut:hover { background: var(--pp-grey-6); }
.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: 1px solid var(--pp-grey-5); padding: 14px 16px; cursor: pointer; border-radius: var(--pp-radius); }
.case-kaart:hover { background: var(--pp-grey-6); }
.case-header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.case-header h4 { font-size: 13px; font-weight: 700; }
.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: #2a6e2a; }
.case-risico.middel { border-color: #c8a000; color: #7d5a00; }
.case-risico.hoog   { border-color: #e88;    color: #c00; }
.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: 1px solid var(--pp-grey-5); padding: 18px; border-radius: var(--pp-radius); }
.interesse-kaart h3 { font-size: 15px; font-weight: 700; margin-bottom: 4px; }
.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: 1px solid var(--pp-grey-5); padding: 12px; margin-bottom: 14px; border-radius: 6px; }
.wallet-titel { font-size: 12px; font-weight: 700; margin-bottom: 2px; }
.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-6); cursor: pointer; }
.wallet-item.aan .vinkje { color: #2a6e2a; }
.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-6); }

.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: 1px solid var(--pp-black); text-align: center; border-radius: 4px; }
.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: #2a6e2a; }
.token-knop { font-size: 11px; padding: 6px 12px; border: 1px solid var(--pp-grey-5); background: var(--pp-white); cursor: pointer; margin-top: 4px; border-radius: 4px; }
.token-knop:hover { border-color: var(--pp-black); }

.vs-box { border: 2px solid var(--pp-black); padding: 16px; border-radius: var(--pp-radius); margin-top: 14px; }
.vs-rij { display: flex; justify-content: space-between; padding: 5px 0; font-size: 12px; border-bottom: 1px solid var(--pp-grey-6); }
.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-6); }
.adv-token-ontvangen { font-family: var(--pp-mono); font-size: 10px; color: #2a6e2a; 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: #2a6e2a; display: inline-block; margin-right: 4px; }
.wie  { font-family: var(--pp-mono); font-size: 10px; color: var(--pp-grey-3); }
.ja   { color: #2a6e2a; font-family: var(--pp-mono); font-size: 11px; }
.vb   { color: var(--pp-grey-3); font-family: var(--pp-mono); font-size: 11px; }
.plus { color: #1565c0; font-family: var(--pp-mono); font-size: 11px; }

@media (max-width: 600px) {
  .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; }
}


/* ═══════════════════════════════════════════════════════════════════════
   OBSERVER — /observer route (index.mjs)
   ═══════════════════════════════════════════════════════════════════════ */

.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-grey-5);
  overflow-y: auto;
}
.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-grey-5);
}

.obs-log-item {
  padding: 9px 0;
  border-bottom: 1px solid var(--pp-grey-6);
  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-black); color: var(--pp-black); }
.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: #c00; color: #c00; }

.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; }
.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-grey-6);
  border: 1px solid var(--pp-grey-5);
  padding: 1px 4px;
  border-radius: 3px;
}

.obs-footer {
  padding: 12px 32px;
  border-top: 1px solid var(--pp-grey-5);
  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);
}

/* ═══════════════════════════════════════════════════════════════════════
   LANDING / LOGIN — / route (index.mjs)
   ═══════════════════════════════════════════════════════════════════════ */

.lnd-wrap { max-width: 620px; margin: 0 auto; padding: 48px 24px; }

.lnd-scherm { display: none; }
.lnd-scherm.actief { display: block; }

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

/* Uitleg rijen */
.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; }

/* Login stap kaart */
.lnd-login-stap {
  border: 1px solid var(--pp-grey-5);
  border-radius: var(--pp-radius);
  padding: 24px;
  margin-bottom: 16px;
}
.lnd-login-stap h3 {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.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: 1px solid var(--pp-grey-5);
  border-radius: 50%;
  font-size: 12px;
  font-family: var(--pp-mono);
  flex-shrink: 0;
}
.lnd-stap-badge.done   { background: var(--pp-black); color: var(--pp-white); border-color: var(--pp-black); }
.lnd-stap-badge.active { border-color: var(--pp-black); }

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

.lnd-nonce-display {
  margin-bottom: 14px;
  padding: 12px;
  background: var(--pp-grey-6);
  border: 1px solid var(--pp-grey-5);
  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; }

/* Formulier */
.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: 1px solid var(--pp-grey-5);
  border-radius: 8px;
  font-family: var(--pp-mono);
  font-size: 14px;
  margin-bottom: 16px;
  outline: none;
  color: var(--pp-dark);
  background: var(--pp-white);
}
.lnd-input:focus { border-color: var(--pp-black); }

/* Knoppen */
.lnd-btn {
  padding: 10px 20px;
  border: 1px solid var(--pp-black);
  border-radius: 8px;
  background: var(--pp-white);
  color: var(--pp-black);
  cursor: pointer;
  font-size: 13px;
  font-family: var(--pp-font);
  font-weight: 600;
  margin-right: 8px;
  margin-bottom: 8px;
  transition: background .15s, color .15s;
}
.lnd-btn:hover { background: var(--pp-black); color: var(--pp-white); }
.lnd-btn.primair { background: var(--pp-black); color: var(--pp-white); }
.lnd-btn.primair:hover { background: var(--pp-grey-1); }
.lnd-btn.gevaar { border-color: #c00; color: #c00; background: var(--pp-white); }
.lnd-btn.gevaar:hover { background: #c00; 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); }

/* Beveiligde pagina */
.lnd-welkom-kaart {
  border: 2px solid var(--pp-black);
  border-radius: var(--pp-radius);
  padding: 32px;
  margin-bottom: 20px;
}
.lnd-welkom-kaart h2 { font-size: 22px; font-weight: 700; margin-bottom: 8px; }
.lnd-welkom-kaart p  { font-size: 14px; color: var(--pp-grey-2); margin-bottom: 20px; }

.lnd-formulier-kaart {
  border: 1px solid var(--pp-grey-5);
  border-radius: var(--pp-radius);
  padding: 24px;
  margin-bottom: 16px;
}
.lnd-formulier-kaart h3 { font-size: 15px; font-weight: 700; margin-bottom: 14px; }

.lnd-server-info {
  margin-top: 20px;
  padding: 14px;
  background: var(--pp-grey-6);
  border: 1px solid var(--pp-grey-5);
  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: #c00; text-decoration: line-through; }
.lnd-si-val.ja  { color: #2a6e2a; }

.lnd-log-blok {
  border: 1px solid var(--pp-grey-5);
  border-radius: var(--pp-radius);
  overflow: hidden;
  margin-top: 20px;
}
.lnd-log-blok-header {
  padding: 10px 14px;
  border-bottom: 1px solid var(--pp-grey-5);
  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-grey-6);
}
.lnd-log-item {
  padding: 7px 14px;
  border-bottom: 1px solid var(--pp-grey-6);
  font-family: var(--pp-mono);
  font-size: 12px;
}
.lnd-log-item:last-child { border-bottom: none; }

/* Gedeeld: tag + tijd + data (log-items in beide schermen) */
.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-black); color: var(--pp-black); }
.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: #c00; color: #c00; }
.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; }

/* ZKP / registratie status feedback */
.lnd-zkp-status {
  display: none;
  margin-top: 14px;
  border: 1px solid var(--pp-grey-5);
  border-radius: 8px;
  padding: 12px 14px;
  font-family: var(--pp-mono);
  font-size: 12px;
  line-height: 2.2;
  background: var(--pp-grey-6);
}
.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-grey-5);
  font-family: var(--pp-font);
  font-size: 11px;
  color: var(--pp-grey-3);
  font-style: italic;
  line-height: 1.5;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* ── 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; }
.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; }
.demo-brug--a { background:#eff6ff; border-top:1px solid #bfdbfe; border-bottom:1px solid #bfdbfe; }
.demo-brug--a .demo-brug__oogmerk { background:#1d4ed8; color:#fff; }
.demo-brug--a .demo-brug__tekst { color:#1e3a5f; }
.demo-brug--a .demo-brug__knop { color:#1d4ed8; border-color:#1d4ed8; background:transparent; }
.demo-brug--b { background:var(--pp-grey-6); border-top:1px solid var(--pp-grey-5); border-bottom:1px solid var(--pp-grey-5); }
.demo-brug--b .demo-brug__oogmerk { background:var(--pp-black); color:var(--pp-white); }
.demo-brug--b .demo-brug__tekst { color:var(--pp-grey-1); }
.demo-brug--b .demo-brug__knop { color:var(--pp-black); border-color:var(--pp-black); background:transparent; }
@media (max-width:480px) { .demo-brug__inner { flex-direction:column; align-items:flex-start; } }