/* Portaalpreview op lucid-admin.com: een nagebouwd klantportaal met verzonnen gegevens.

   Los bestand, zodat de preview in één keer te vervangen is als het portaal weer verandert.
   Wat erbij hoort:
     - partials/portaalpreview.html   het venster met de vier schermen (homepage en /hoe-het-werkt/)
     - partials/portaaltelefoon.html  de telefoon in de opening van de homepage
     - portaal-preview.js             het wisselen tussen de schermen
     - dit bestand                    alles begint met .pp; de tokens staan hieronder bij elkaar
   build.py zet de partials in de pagina's. Alleen verzonnen gegevens: een fictief bedrijf,
   fictieve namen en fictieve bedragen (AVG). Nooit echte klantgegevens, ook niet uit de
   schermafbeeldingen in docs/portaal-premium (die tonen echte klanten).

   Stijl: de klantschil van het premium portaal (main 4756387, 07-10-2026): navy linkerkolom met
   iconen en een messing streep bij de actieve ingang, zoekbalk bovenaan, kaarten met hoek 14 en
   een zachte schaduw; op de telefoon een witte bovenbalk met zoek-icoon en initialen en de balk
   onderin met icoon en kort woord. De tokens komen uit portaal/site/assets/stijl.css (lichte
   stand, blok PREMIUM) en de iconen uit portaal/site/lib/iconen.php. De preview is kleiner dan het
   echte scherm, dus de maten zijn ongeveer 85% van het portaal. */

.pp,.pp-telefoon-stage{
  --pp-bg:#f6f8fc; --pp-surface:#ffffff; --pp-surface-2:#eef2f8; --pp-line:#e3e9f2; --pp-line-sterk:#cfd8e6;
  --pp-ink:#0f2a47; --pp-ink-2:#4a5a72; --pp-ink-3:#5b6678;
  --pp-accent:#0f2a47; --pp-accent-ink:#ffffff;
  --pp-brass:#b0894f; --pp-brass-soft:#f3ecdf; --pp-brass-tekst:#806339;
  --pp-avatar:#6f5531; --pp-avatar-ink:#ffffff;
  --pp-good:#1d6b46; --pp-good-bg:#e6f1eb; --pp-warn:#8a6410; --pp-warn-bg:#f6eeda;
  --pp-zij-vlak:#0f2a47; --pp-zij-ink:#e8eef6; --pp-zij-ink-2:#a9bad0; --pp-zij-actief:#1b3d63; --pp-zij-lijn:#23476f;
  --pp-r-kaart:14px; --pp-r-veld:10px; --pp-r-pil:999px;
  --pp-schaduw:0 1px 1px rgba(15,42,71,.03),0 2px 6px -3px rgba(15,42,71,.08),0 18px 36px -24px rgba(15,42,71,.22);
  --pp-serif:Georgia,'Iowan Old Style','Times New Roman',serif;
  --pp-sans:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --pp-mono:ui-monospace,SFMono-Regular,'SF Mono',Menlo,Consolas,monospace;
}
.pp .ic,.pp-telefoon-stage .ic{flex:none;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* ===================================================================== */
/* A. De vier stappen naast het venster (dit is website, geen portaal)   */
/* ===================================================================== */
.pp{display:grid;grid-template-columns:minmax(0,310px) minmax(0,1fr);gap:40px;align-items:start}
.pp-stappen{display:flex;flex-direction:column;gap:8px;position:sticky;top:104px}
.pp-stap{display:grid;grid-template-columns:36px minmax(0,1fr);gap:16px;align-items:start;width:100%;text-align:left;
  padding:18px 20px;border:1px solid transparent;border-radius:14px;background:transparent;color:var(--pp-ink);
  font:inherit;cursor:pointer;transition:background .2s,border-color .2s,box-shadow .25s}
.pp-stap:hover{background:rgba(255,255,255,.6);border-color:var(--pp-line)}
.pp-stap[aria-selected="true"]{background:var(--pp-surface);border-color:var(--pp-line);box-shadow:var(--pp-schaduw)}
.pp-stap:focus-visible{outline:2px solid var(--pp-brass);outline-offset:2px}
.pp-stap-nr{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--pp-line-sterk);
  background:var(--pp-surface);font:600 14px/1 var(--pp-sans);color:var(--pp-ink);transition:background .2s,color .2s,border-color .2s}
.pp-stap[aria-selected="true"] .pp-stap-nr{background:var(--pp-avatar);border-color:var(--pp-avatar);color:var(--pp-avatar-ink)}
.pp-stap-tekst{display:block;min-width:0}
.pp-stap-tekst b{display:block;font:400 19px/1.25 var(--pp-serif);margin-top:6px}
.pp-stap-tekst span{display:block;color:var(--pp-ink-2);font-size:14.5px;line-height:1.55;margin-top:6px}
.pp-stap-tekst em{display:inline-block;font:600 10.5px/1 var(--pp-sans);font-style:normal;letter-spacing:.12em;text-transform:uppercase;
  color:var(--pp-brass-tekst);background:var(--pp-brass-soft);border-radius:999px;padding:4px 8px;margin-left:6px;vertical-align:2px}
.pp-stap-uitleg{display:none;margin:0;padding:14px 16px;border-radius:12px;background:var(--pp-surface);border:1px solid var(--pp-line);
  font-size:14.5px;line-height:1.55;color:var(--pp-ink-2)}
.pp-rechts{min-width:0}
.pp-voorbeeld{margin:14px 0 0;font-size:13px;color:var(--pp-ink-3);text-align:center}

/* ===================================================================== */
/* B. Het venster: de klantschil op een breed scherm                      */
/* ===================================================================== */
.pp-venster{position:relative;min-width:0;background:var(--pp-bg);border:1px solid var(--pp-line-sterk);border-radius:18px;overflow:hidden;
  box-shadow:0 2px 6px rgba(15,42,71,.05),0 40px 80px -40px rgba(15,42,71,.40)}
.pp-browser{display:flex;align-items:center;gap:8px;height:44px;padding:0 16px;background:#f2f5f9;border-bottom:1px solid var(--pp-line)}
.pp-browser i{width:11px;height:11px;border-radius:50%;background:var(--pp-line-sterk);flex:none}
.pp-url{display:flex;align-items:center;gap:7px;margin:0 auto;max-width:60%;padding:6px 16px;border-radius:999px;background:var(--pp-surface);
  border:1px solid var(--pp-line);font:500 12.5px/1 var(--pp-sans);color:var(--pp-ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pp-url .ic{width:12px;height:12px;color:var(--pp-good)}
.pp-label{flex:none;font:600 10.5px/1 var(--pp-sans);letter-spacing:.12em;text-transform:uppercase;color:var(--pp-brass-tekst);
  background:var(--pp-brass-soft);border-radius:999px;padding:6px 10px}

.pp-app{display:grid;grid-template-columns:184px minmax(0,1fr);min-height:700px}
/* De linkerkolom */
.pp-zij{display:flex;flex-direction:column;background:var(--pp-zij-vlak);color:var(--pp-zij-ink);
  background-image:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,0) 32%)}
.pp-merk{display:flex;align-items:center;gap:10px;padding:20px 18px 18px;font:400 19px/1 var(--pp-serif);color:var(--pp-zij-ink)}
.pp-merk svg{width:24px;height:24px;flex:none;color:var(--pp-brass)}
.pp-merk small{display:block;font:600 7.5px/1.3 var(--pp-sans);letter-spacing:.24em;text-transform:uppercase;color:var(--pp-zij-ink-2);margin-top:4px}
.pp-zij-nav{display:flex;flex-direction:column;gap:2px;padding:2px 10px 16px;flex:1}
.pp-zij-item{position:relative;display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:9px;
  color:var(--pp-zij-ink-2);font:500 12.5px/1.25 var(--pp-sans);white-space:nowrap;cursor:default}
.pp-zij-item .ic{width:17px;height:17px;opacity:.82}
.pp-zij-item[data-naar]{cursor:pointer}
.pp-zij-item[data-naar]:hover{background:var(--pp-zij-actief);color:var(--pp-zij-ink)}
.pp-zij-item .n{margin-left:auto;min-width:19px;height:19px;padding:0 6px;display:inline-grid;place-items:center;border-radius:999px;
  background:var(--pp-brass-soft);color:var(--pp-brass-tekst);font:700 10.5px/1 var(--pp-sans)}
.pp[data-scherm="bonnen"] .pp-zij-item[data-naar="bonnen"],
.pp[data-scherm="vragen"] .pp-zij-item[data-naar="vragen"],
.pp[data-scherm="cijfers"] .pp-zij-item[data-naar="cijfers"],
.pp[data-scherm="wwft"] .pp-zij-item[data-naar="wwft"]{background:var(--pp-zij-actief);color:var(--pp-zij-ink);font-weight:600}
.pp[data-scherm="bonnen"] .pp-zij-item[data-naar="bonnen"] .ic,
.pp[data-scherm="vragen"] .pp-zij-item[data-naar="vragen"] .ic,
.pp[data-scherm="cijfers"] .pp-zij-item[data-naar="cijfers"] .ic,
.pp[data-scherm="wwft"] .pp-zij-item[data-naar="wwft"] .ic{color:var(--pp-brass);opacity:1}
.pp[data-scherm="bonnen"] .pp-zij-item[data-naar="bonnen"]::before,
.pp[data-scherm="vragen"] .pp-zij-item[data-naar="vragen"]::before,
.pp[data-scherm="cijfers"] .pp-zij-item[data-naar="cijfers"]::before,
.pp[data-scherm="wwft"] .pp-zij-item[data-naar="wwft"]::before{content:"";position:absolute;left:-10px;top:8px;bottom:8px;width:3px;
  border-radius:0 3px 3px 0;background:var(--pp-brass)}
.pp-zij-voet{display:flex;align-items:center;gap:10px;padding:14px 16px 16px;border-top:1px solid var(--pp-zij-lijn)}
.pp-avatar{flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--pp-avatar);color:var(--pp-avatar-ink);
  font:600 11px/1 var(--pp-sans);letter-spacing:.04em}
.pp-wie{min-width:0;display:flex;flex-direction:column;gap:3px}
.pp-wie b{font:600 12px/1.2 var(--pp-sans);color:var(--pp-zij-ink);white-space:nowrap}
.pp-wie small{display:flex;align-items:center;gap:5px;font:500 10.5px/1.2 var(--pp-sans);color:var(--pp-zij-ink-2)}
.pp-wie small .ic{width:12px;height:12px}

/* Het werkvlak rechts */
.pp-werk{min-width:0;display:flex;flex-direction:column;background:var(--pp-bg)}
.pp-top{display:flex;align-items:center;gap:10px;min-height:54px;padding:10px 24px;border-bottom:1px solid var(--pp-line)}
.pp-top-merk{display:none;align-items:center;gap:7px;font:400 17px/1 var(--pp-serif);color:var(--pp-ink)}
.pp-top-merk svg{width:20px;height:20px;color:var(--pp-brass)}
.pp-zoekveld{flex:1;max-width:400px;display:flex;align-items:center;gap:9px;height:36px;padding:0 10px 0 12px;border-radius:10px;
  background:var(--pp-surface);border:1px solid var(--pp-line-sterk);box-shadow:0 1px 2px rgba(15,42,71,.05);
  font:400 12.5px/1 var(--pp-sans);color:var(--pp-ink-3)}
.pp-zoekveld .ic{width:15px;height:15px;color:var(--pp-ink-3)}
.pp-zoekveld kbd{margin-left:auto;font:500 10.5px/1 var(--pp-mono);padding:3px 6px;border-radius:5px;border:1px solid var(--pp-line-sterk);background:var(--pp-surface-2);color:var(--pp-ink-3)}
.pp-top-rechts{display:none;align-items:center;gap:6px;margin-left:auto}
.pp-top-knop{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;border:1px solid var(--pp-line-sterk);background:var(--pp-surface);color:var(--pp-ink)}
.pp-top-knop .ic{width:16px;height:16px}
.pp-kop{padding:20px 24px 0}
.pp-oog{display:block;font:600 9.5px/1.4 var(--pp-sans);letter-spacing:.16em;text-transform:uppercase;color:var(--pp-brass-tekst)}
.pp-naam{display:block;font:400 25px/1.1 var(--pp-serif);letter-spacing:-.015em;color:var(--pp-ink);margin-top:7px}

.pp-paneel{padding:16px 24px 24px;min-height:430px}
.pp-paneel[hidden]{display:none}
@media (prefers-reduced-motion:no-preference){
  .pp-paneel:not([hidden]){animation:pp-in .35s ease-out}
  @keyframes pp-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
}
.pp-chips{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 14px}
.pp-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;border:1px solid var(--pp-line);
  background:var(--pp-surface);color:var(--pp-ink-2);font:500 11.5px/1.2 var(--pp-sans)}
.pp-chip.actief{background:var(--pp-accent);border-color:var(--pp-accent);color:var(--pp-accent-ink);font-weight:600}
.pp-titel{font:400 23px/1.15 var(--pp-serif);letter-spacing:-.018em;color:var(--pp-ink);margin:0 0 6px}
.pp-lead{font-size:12.5px;line-height:1.6;color:var(--pp-ink-2);margin:0 0 14px;max-width:62ch}
.pp-kaart{background:var(--pp-surface);border:1px solid var(--pp-line);border-radius:var(--pp-r-kaart);box-shadow:var(--pp-schaduw);padding:14px 16px;margin:0 0 12px}
.pp-kaartkop{font:600 13.5px/1.3 var(--pp-sans);color:var(--pp-ink);margin:0 0 3px}
.pp-klein{font-size:11.5px;line-height:1.5;color:var(--pp-ink-2);margin:0}
.pp-knop{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:30px;padding:7px 14px;border-radius:var(--pp-r-veld);
  border:1px solid var(--pp-line-sterk);background:var(--pp-surface);color:var(--pp-ink);font:600 11.5px/1 var(--pp-sans);white-space:nowrap}
.pp-knop.prim{background:var(--pp-accent);border-color:var(--pp-accent);color:var(--pp-accent-ink);box-shadow:0 1px 2px rgba(15,42,71,.16)}
.pp-knop.rond{border-radius:999px}
.pp-pill{display:inline-flex;align-items:center;font:600 10.5px/1 var(--pp-sans);letter-spacing:.01em;padding:4px 8px;border-radius:999px;white-space:nowrap;
  background:var(--pp-brass-soft);color:var(--pp-brass-tekst)}
.pp-pill.ok{background:var(--pp-good-bg);color:var(--pp-good)}
.pp-pill.warn{background:var(--pp-warn-bg);color:var(--pp-warn)}
.pp-pill.mute{background:var(--pp-surface-2);color:var(--pp-ink-2)}
.pp-bedrag{font:500 11.5px/1 var(--pp-mono);font-variant-numeric:tabular-nums;color:var(--pp-ink);white-space:nowrap}

/* Bon insturen */
.pp-kiezen{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:10px 0 12px}
.pp-kies{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:82px;padding:12px;text-align:center;
  border:1px dashed var(--pp-line-sterk);border-radius:var(--pp-r-veld);background:var(--pp-bg);font:600 12.5px/1.3 var(--pp-sans);color:var(--pp-ink)}
.pp-kies .ic{width:20px;height:20px;color:var(--pp-brass);margin-bottom:2px}
.pp-kies small{font-weight:400;font-size:10.5px;color:var(--pp-ink-2)}
.pp-knoprij{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.pp-lijst{list-style:none;margin:8px 0 0;padding:0}
.pp-lijst li{display:flex;align-items:center;gap:8px 12px;flex-wrap:wrap;padding:9px 0;border-top:1px solid var(--pp-line);font-size:12px}
.pp-lijst li:first-child{border-top:0}
.pp-lijst .naam{flex:1 1 150px;min-width:0;font-weight:500;color:var(--pp-ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pp-lijst .wanneer{color:var(--pp-ink-3);font-size:11px}

/* Vragen aan u */
.pp-vraag-kop{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
.pp-vraagtitel{font:600 12.5px/1.35 var(--pp-sans);color:var(--pp-ink);margin:0}
.pp-meta{font-size:10.5px;color:var(--pp-ink-3);margin-top:2px}
.pp-tekst{font-size:11.5px;line-height:1.55;color:var(--pp-ink);margin:8px 0 0}
.pp-veld{display:block;margin:10px 0 8px;padding:9px 11px;min-height:50px;border:1px solid var(--pp-line-sterk);border-radius:var(--pp-r-veld);
  background:var(--pp-surface);font-size:12px;color:#6b7689}
.pp-veld b{color:var(--pp-ink);font-weight:400}
.pp-veld .cursor{display:inline-block;width:1.5px;height:14px;background:var(--pp-ink);vertical-align:-3px;margin-left:1px}
@media (prefers-reduced-motion:no-preference){.pp-veld .cursor{animation:pp-knipper 1.1s steps(1) infinite}
  @keyframes pp-knipper{50%{opacity:0}}}
.pp-vraag.af{box-shadow:none;background:transparent}
.pp-vraag.af .pp-vraagtitel{color:var(--pp-ink-2)}

/* Uw cijfers */
.pp-tegels{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:0 0 4px}
.pp-tegel{background:var(--pp-surface);border:1px solid var(--pp-line);border-radius:var(--pp-r-kaart);box-shadow:var(--pp-schaduw);padding:12px 12px 11px;min-width:0}
.pp-tegel .l{font:600 8.5px/1.3 var(--pp-sans);letter-spacing:.13em;text-transform:uppercase;color:var(--pp-ink-3)}
.pp-tegel .v{font:600 18px/1.15 var(--pp-sans);letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--pp-ink);margin-top:6px;white-space:nowrap}
.pp-tegel .s{font-size:10.5px;line-height:1.45;color:var(--pp-ink-2);margin-top:6px}
.pp-meter{height:4px;border-radius:3px;background:var(--pp-surface-2);margin-top:7px;overflow:hidden}
.pp-meter i{display:block;height:100%;border-radius:3px;background:var(--pp-brass)}
.pp-sub{font:400 15px/1.3 var(--pp-serif);color:var(--pp-ink);margin:16px 0 8px}
.pp-staven{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:8px 12px;align-items:center;padding:13px 16px;
  background:var(--pp-surface);border:1px solid var(--pp-line);border-radius:var(--pp-r-kaart);box-shadow:var(--pp-schaduw)}
.pp-staven .naam{font-size:11px;color:var(--pp-ink-2);text-align:right;white-space:nowrap}
.pp-staven .baan{height:14px;border-radius:3px;background:var(--pp-surface-2);overflow:hidden}
.pp-staven .baan i{display:block;height:100%;border-radius:3px;background:var(--pp-accent);transform-origin:left}
.pp-staven .baan i.kosten{background:var(--pp-brass)}
.pp-staven .bedrag{font:500 11px/1 var(--pp-mono);font-variant-numeric:tabular-nums;color:var(--pp-ink);text-align:right;white-space:nowrap}
.pp-staven b{font-weight:600;color:var(--pp-ink)}
@media (prefers-reduced-motion:no-preference){
  .pp-paneel:not([hidden]) .pp-staven .baan i{animation:pp-groei .7s cubic-bezier(.2,.7,.2,1) both}
  @keyframes pp-groei{from{transform:scaleX(0)}to{transform:scaleX(1)}}
}
.pp-uitleg{margin:12px 0 0;padding:10px 13px;border-left:3px solid var(--pp-brass);background:var(--pp-brass-soft);border-radius:0 6px 6px 0;
  font-size:11.5px;line-height:1.6;color:var(--pp-ink)}

/* Uw start bij Lucid (het Wwft-dossier) */
.pp-voortgang{height:6px;border-radius:999px;background:var(--pp-surface-2);margin:8px 0 12px;overflow:hidden}
.pp-voortgang i{display:block;height:100%;border-radius:999px;background:var(--pp-good)}
.pp-nu{font-size:11.5px;line-height:1.55;color:var(--pp-ink-2);margin:0 0 10px}
.pp-nu b{display:block;font-size:12.5px;color:var(--pp-ink)}
.pp-pad{list-style:none;margin:0;padding:0;border-top:1px solid var(--pp-line)}
.pp-pad li{display:flex;align-items:center;gap:10px;padding:7px 0;border-bottom:1px solid var(--pp-line);font-size:11.5px;color:var(--pp-ink)}
.pp-pad li:last-child{border-bottom:0}
.pp-pad .nr{flex:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:var(--pp-avatar);color:var(--pp-avatar-ink);font:600 10px/1 var(--pp-sans)}
.pp-pad .nr.klaar{background:var(--pp-good)}
.pp-pad .nr.klaar .ic{width:12px;height:12px;stroke-width:3}
.pp-pad .nr.later{background:var(--pp-surface-2);color:var(--pp-ink-2)}
.pp-pad .wat{flex:1;min-width:0}
.pp-pad .af .wat{color:var(--pp-ink-2)}
.pp-noot{display:flex;gap:9px;align-items:flex-start;margin:4px 0 0;padding:10px 13px;border-radius:10px;background:var(--pp-surface-2);
  font-size:11.5px;line-height:1.55;color:var(--pp-ink-2)}
.pp-noot .ic{width:15px;height:15px;margin-top:1px;color:var(--pp-good)}
.pp-noot b{color:var(--pp-ink)}

/* De balk onderin (telefoon); in het venster alleen op een smal scherm */
.pp-onder{display:none}
.pp-onder,.pp-tonder{align-items:stretch;gap:1px;padding:5px 6px 7px;border-top:1px solid var(--pp-line);
  background:color-mix(in srgb,var(--pp-surface) 94%,transparent);box-shadow:0 -8px 24px -18px rgba(15,42,71,.35)}
.pp-nav{position:relative;flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;gap:3px;padding:5px 1px 2px;
  color:var(--pp-ink-2);font:500 9px/1.1 var(--pp-sans);text-align:center;white-space:nowrap}
.pp-nav .ic{width:17px;height:17px}
.pp-nav.actief{color:var(--pp-ink);font-weight:600}
.pp-nav.actief .ic{color:var(--pp-brass)}
.pp-nav.actief::before{content:"";position:absolute;top:-6px;left:26%;right:26%;height:3px;border-radius:0 0 3px 3px;background:var(--pp-brass)}
.pp-nav .n{position:absolute;top:0;left:calc(50% + 5px);min-width:15px;height:15px;padding:0 4px;border-radius:999px;display:grid;place-items:center;
  background:var(--pp-brass-soft);color:var(--pp-brass-tekst);font:700 9px/1 var(--pp-sans)}
.pp[data-scherm="bonnen"] .pp-nav[data-naar="bonnen"],
.pp[data-scherm="vragen"] .pp-nav[data-naar="vragen"],
.pp[data-scherm="cijfers"] .pp-nav[data-naar="cijfers"],
.pp[data-scherm="wwft"] .pp-nav[data-naar="wwft"]{color:var(--pp-ink);font-weight:600}
.pp[data-scherm="bonnen"] .pp-nav[data-naar="bonnen"] .ic,
.pp[data-scherm="vragen"] .pp-nav[data-naar="vragen"] .ic,
.pp[data-scherm="cijfers"] .pp-nav[data-naar="cijfers"] .ic,
.pp[data-scherm="wwft"] .pp-nav[data-naar="wwft"] .ic{color:var(--pp-brass)}
.pp[data-scherm="bonnen"] .pp-nav[data-naar="bonnen"]::before,
.pp[data-scherm="vragen"] .pp-nav[data-naar="vragen"]::before,
.pp[data-scherm="cijfers"] .pp-nav[data-naar="cijfers"]::before,
.pp[data-scherm="wwft"] .pp-nav[data-naar="wwft"]::before{content:"";position:absolute;top:-6px;left:26%;right:26%;height:3px;border-radius:0 0 3px 3px;background:var(--pp-brass)}

/* Smaller: de stappen boven het venster, als een rij om te kiezen. */
@media (max-width:980px){
  .pp{grid-template-columns:1fr;gap:16px}
  .pp-stappen{position:static;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .pp-stap{padding:14px;gap:12px;grid-template-columns:30px minmax(0,1fr)}
  .pp-stap-nr{width:30px;height:30px;font-size:13px}
  .pp-stap-tekst b{font-size:16.5px;margin-top:4px}
  .pp-stap-tekst span,.pp-stap-tekst em{display:none}
  .pp-stap-uitleg{display:block}
  .pp-stap-uitleg:empty{display:none}
}
/* Telefoonbreed: het venster wordt de klantschil van de telefoon (bovenbalk met zoek-icoon en
   initialen, balk onderin), zoals het portaal zelf ook doet onder 1000 px. */
@media (max-width:640px){
  .pp-browser{height:38px;padding:0 12px}
  .pp-browser i{width:9px;height:9px}
  .pp-url{max-width:none;font-size:11.5px;padding:5px 12px}
  .pp-label{display:none}
  .pp-app{grid-template-columns:1fr;min-height:0}
  .pp-zij{display:none}
  .pp-top{padding:9px 14px;min-height:50px;background:var(--pp-surface)}
  .pp-top-merk{display:flex}
  .pp-zoekveld{display:none}
  .pp-top-rechts{display:flex}
  .pp-kop{padding:16px 14px 0}
  .pp-naam{font-size:21px}
  .pp-paneel{padding:14px 14px 18px;min-height:0}
  .pp-tegels{grid-template-columns:1fr 1fr}
  .pp-kiezen{grid-template-columns:1fr}
  .pp-staven{grid-template-columns:1fr auto;gap:3px 10px;padding:12px}
  .pp-staven .naam{text-align:left;grid-column:1}
  .pp-staven .bedrag{grid-column:2}
  .pp-staven .baan{grid-column:1/-1;margin-bottom:6px}
  .pp-onder{display:flex}
}

/* ===================================================================== */
/* C. De telefoon in de opening van de homepage                           */
/* ===================================================================== */
.pp-telefoon-stage{position:relative;width:340px;margin:0 auto}
.pp-telefoon{position:relative;width:320px;margin:0 auto;padding:11px;border-radius:50px;background:#081a2e;
  box-shadow:0 0 0 1px rgba(15,42,71,.25),0 2px 4px rgba(15,42,71,.08),0 60px 110px -40px rgba(15,42,71,.55),inset 0 0 0 2px rgba(255,255,255,.06)}
.pp-telefoon::before{content:"";position:absolute;z-index:3;top:21px;left:50%;width:88px;height:25px;margin-left:-44px;border-radius:20px;background:#050f1c}
.pp-tscherm{position:relative;height:640px;border-radius:40px;overflow:hidden;background:var(--pp-bg);display:flex;flex-direction:column}
.pp-status{display:flex;justify-content:space-between;align-items:center;height:44px;padding:6px 28px 0;flex:none;
  background:var(--pp-surface);color:var(--pp-ink);font:600 13px/1 var(--pp-sans)}
.pp-status svg{height:11px;width:auto}
.pp-ttop{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 14px 10px;flex:none;
  background:var(--pp-surface);border-bottom:1px solid var(--pp-line)}
.pp-ttop .pp-top-merk{display:flex;font-size:17px}
.pp-ttop .pp-top-rechts{display:flex;margin:0}
.pp-ttop .pp-top-knop{width:32px;height:32px}
.pp-ttop .pp-avatar{width:30px;height:30px}
.pp-tinhoud{flex:1;min-height:0;overflow:hidden;padding:14px 14px 0}
.pp-tinhoud .pp-naam{font-size:21px;margin-top:5px}
.pp-nukop{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin:16px 0 8px}
.pp-nutitel{font:400 19px/1.1 var(--pp-serif);letter-spacing:-.015em;color:var(--pp-ink)}
.pp-nukop .pp-klein{font-size:10.5px}
.pp-tedoen{list-style:none;margin:0;padding:0;background:var(--pp-surface);border:1px solid var(--pp-line);border-radius:var(--pp-r-kaart);
  box-shadow:var(--pp-schaduw);overflow:hidden}
.pp-tedoen li{display:flex;align-items:flex-start;gap:10px;padding:11px 12px;border-top:1px solid var(--pp-line)}
.pp-tedoen li:first-child{border-top:0}
.pp-tedoen .nr{flex:none;width:24px;height:24px;margin-top:6px;border-radius:50%;display:grid;place-items:center;background:var(--pp-avatar);
  color:var(--pp-avatar-ink);font:600 11px/1 var(--pp-sans)}
.pp-tedoen .wat{flex:1;min-width:0;font-size:11.5px;line-height:1.4}
.pp-tedoen .wat b{display:block;font-size:12.5px;font-weight:600;color:var(--pp-ink)}
.pp-tedoen .wat small{display:block;font-size:10.5px;line-height:1.45;color:var(--pp-ink-2);margin-top:2px}
.pp-tedoen .ga{display:inline-flex;margin-top:7px;padding:5px 10px;border-radius:8px;border:1px solid var(--pp-line-sterk);background:var(--pp-surface);
  font:600 10.5px/1 var(--pp-sans);color:var(--pp-ink)}
.pp-maand{margin:10px 0 0;background:var(--pp-surface);border:1px solid var(--pp-line);border-radius:var(--pp-r-kaart);padding:11px 13px;box-shadow:var(--pp-schaduw)}
.pp-maand .rij{display:flex;justify-content:space-between;align-items:flex-end;gap:10px}
.pp-maand .l{font:600 8.5px/1.3 var(--pp-sans);letter-spacing:.13em;text-transform:uppercase;color:var(--pp-ink-3)}
.pp-maand .v{font:600 19px/1.1 var(--pp-sans);letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--pp-ink);margin-top:5px}
.pp-maand .s{font-size:10px;color:var(--pp-ink-2);margin-top:3px}
.pp-maand .mini{display:flex;align-items:flex-end;gap:4px;height:34px}
.pp-maand .mini i{display:block;width:7px;border-radius:2px 2px 0 0;background:var(--pp-good);opacity:.35}
.pp-maand .mini i:last-child{opacity:1}
.pp-tonder{display:flex;flex:none;padding:5px 14px 18px}
.pp-tonder .pp-nav{font-size:8.5px}
.pp-tstart{display:block;margin:10px 0 0;background:var(--pp-surface);border:1px solid var(--pp-line);border-radius:var(--pp-r-kaart);
  padding:11px 13px 12px;box-shadow:var(--pp-schaduw)}
.pp-tstart-kop{display:block;font:400 15px/1.2 var(--pp-serif);color:var(--pp-ink);margin:0 0 3px}
.pp-tstart .pp-klein{display:block;font-size:10.5px}
.pp-tstart .pp-voortgang{display:block;margin:8px 0 0}
.pp-telefoon-label{margin:22px 0 0;text-align:center;font-size:12.5px;color:var(--pp-ink-3)}