/* Leadportaal-demo op iMac + iPhone (fictief). Stijl = kopie van portaal/app.css (licht thema), met prefix pt-. */
.devs{position:relative;width:100%;container-type:inline-size;padding-bottom:4cqw}
.imac{width:86cqw;margin-right:auto}
.imac-scr{background:#0b0c0e;border-radius:1.6cqw 1.6cqw 0 0;padding:1.5cqw 1.5cqw 1.2cqw;border:1px solid #2b2f36;border-bottom:0}
.imac-chin{height:7cqw;border-radius:0 0 1.6cqw 1.6cqw;background:linear-gradient(180deg,#d7ecdc,#bcdcc5);box-shadow:inset 0 1px 0 rgba(255,255,255,.6)}
.imac-neck{width:20cqw;height:9cqw;margin:0 auto;background:linear-gradient(180deg,#a9cdb5,#c4e2cd 60%,#b2d5bd);clip-path:polygon(8% 0,92% 0,100% 100%,0 100%)}
.imac-foot{width:30cqw;height:1.2cqw;margin:0 auto;border-radius:.6cqw;background:#b9d9c2;box-shadow:0 1.4cqw 3cqw -1cqw rgba(0,0,0,.6)}
.iph{position:absolute;right:0;bottom:0;width:29cqw;padding:.62cqw;border-radius:4.9cqw;border:.42cqw solid transparent;background:linear-gradient(#050505,#050505) padding-box,linear-gradient(140deg,#f6b183 0%,#d9692e 28%,#f09a62 52%,#b9521e 78%,#e88a52 100%) border-box;box-shadow:0 0 0 .08cqw rgba(255,255,255,.18),0 4cqw 8cqw -2cqw rgba(0,0,0,.9)}
.iph::before,.iph::after{content:"";position:absolute;background:linear-gradient(90deg,#b9521e,#f0a06a,#c45a22);border-radius:.25cqw}
.iph::before{left:-.78cqw;top:17%;width:.36cqw;height:2.4cqw;box-shadow:0 4.2cqw 0 0 #d9692e,0 9cqw 0 0 #d9692e}
.iph::after{right:-.78cqw;top:24%;width:.36cqw;height:6.4cqw;box-shadow:0 22cqw 0 0 #c9c3bd}
.iph-scr{position:relative;border-radius:4.2cqw;overflow:hidden;background:#f4f6f5}
.island{position:absolute;z-index:3;top:.8cqw;left:50%;transform:translateX(-50%);width:8.4cqw;height:2.45cqw;border-radius:1.3cqw;background:#000;box-shadow:inset 0 0 0 .06cqw #1a1a1a}
.dv-fit{position:relative;width:100%;overflow:hidden}
.imac .dv-fit{border-radius:.3cqw}
.dv-fit>.pt{position:absolute;left:0;top:0;transform-origin:0 0}
@media (max-width:620px){.devs{padding-bottom:10cqw}.iph{width:36cqw}}

.pt{--bg:#f4f6f5;--kaart:#fff;--tekst:#17201b;--zacht:#5d6b63;--rand:#dfe5e1;--hoofd:#14532d;--hoofd2:#1d7a43;--rood:#b42318;--rood-bg:#fdecea;
  --blauw:#1d4ed8;--oranje:#b45309;--paars:#6d28d9;--groen:#15803d;--teal:#0f766e;--grijs:#6b7280;
  background:var(--bg);color:var(--tekst);font:15px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;overflow:hidden;text-align:left;letter-spacing:0}
.pt *{box-sizing:border-box}
.pt svg{display:block}
.pt-br{display:flex;align-items:center;gap:10px;height:38px;padding:0 14px;background:#e9ecea;border-bottom:1px solid #d6dbd8}
.pt-br i{width:12px;height:12px;border-radius:50%;background:#ff5f57}.pt-br i+i{background:#febc2e}.pt-br i+i+i{background:#28c840}
.pt-br span{margin:0 auto;transform:translateX(-30px);background:#fff;border-radius:7px;padding:4px 60px;font-size:12.5px;color:#4b5550}
.pt-sb{display:flex;justify-content:space-between;align-items:center;height:54px;padding:14px 30px 0 34px;color:#fff;font:600 16px/1 -apple-system,BlinkMacSystemFont,sans-serif;background:var(--hoofd)}
.pt-sb svg{height:13px;width:auto;fill:#fff}.pt-sb .r{display:flex;gap:6px;align-items:center}
.pt-kop{display:flex;align-items:center;justify-content:space-between;gap:8px;background:var(--hoofd);color:#fff;padding:10px 16px}
.pt-kop-sol{display:flex;align-items:center;gap:10px;font-weight:600;font-size:17px}
.pt-kop-sol .pt-logo{border-radius:7px;box-shadow:0 0 0 1.5px rgba(255,255,255,.55)}
.pt-kop-r{display:flex;align-items:center;gap:6px}
.pt-kk{display:inline-flex;align-items:center;gap:7px;background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.28);border-radius:10px;padding:7px 12px;font-size:14px;font-weight:500}
.pt-kk svg{width:18px;height:18px}
.pt-ham{font-size:22px;line-height:1;padding:6px 8px}
.pt-cijfers{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding:14px 16px 4px;max-width:900px;margin:0 auto}
.pt-cijfer{display:flex;flex-direction:column;gap:2px;background:var(--kaart);border:1px solid var(--rand);border-radius:16px;padding:14px 14px 12px;box-shadow:0 1px 2px rgba(16,24,40,.05)}
.pt-ic{width:34px;height:34px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;margin-bottom:8px;background:color-mix(in srgb,currentColor 14%,transparent)}
.pt-ic svg{width:18px;height:18px}
.pt-cijfer small{color:var(--zacht);font-size:12px;font-weight:500}
.pt-cijfer strong{font-size:26px;font-weight:700;letter-spacing:-.02em;line-height:1.15;transition:color .3s}
.pt-cijfer strong.flash{color:var(--hoofd2)}
.pt-cijfer em{font-style:normal;font-size:12px;color:var(--zacht)}.pt-cijfer em b{color:var(--rood)}
.pt-cijfer.goed strong{color:var(--groen)}
.pt .blauw{color:var(--blauw)}.pt .oranje{color:var(--oranje)}.pt .paars{color:var(--paars)}.pt .groen{color:var(--groen)}.pt .teal{color:var(--teal)}.pt .grijs{color:var(--grijs)}.pt .rood{color:var(--rood)}
.pt-tabs{display:flex;gap:6px;padding:10px 16px 0;max-width:900px;margin:0 auto;overflow:hidden}
.pt-tabs span{border:1px solid var(--rand);background:var(--kaart);border-radius:999px;padding:7px 14px;white-space:nowrap;font-size:15px}
.pt-tabs span.aan{background:var(--hoofd);color:#fff;border-color:var(--hoofd)}
.pt-lijst{max-width:900px;margin:0 auto;padding:8px 16px 40px}
.pt-groep{font-size:13px;text-transform:uppercase;letter-spacing:.04em;color:var(--zacht);margin:18px 2px 8px;font-weight:600}
.pt-groep span{background:var(--rand);color:var(--tekst);border-radius:999px;padding:0 7px;margin-left:4px}
.pt-kaart{position:relative;display:flex;align-items:center;gap:14px;background:var(--kaart);border:1px solid var(--rand);border-radius:16px;padding:14px 14px 14px 16px;margin-bottom:10px;overflow:hidden;box-shadow:0 1px 2px rgba(16,24,40,.05)}
.pt-kaart.nieuw{animation:ptDrop .7s cubic-bezier(.16,1,.3,1);border-color:color-mix(in srgb,var(--hoofd2) 45%,var(--rand));box-shadow:0 8px 24px rgba(16,24,40,.10)}
@keyframes ptDrop{from{opacity:0;transform:translateY(-16px) scale(.98)}}
.pt-kaart.laat::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--rood)}
.pt-tekst{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.pt-kk2{display:flex;align-items:center;gap:12px;min-width:0}
.pt-naam{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0;flex:1}
.pt-naam strong{font-size:16px;letter-spacing:-.01em}
.pt-tag{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;font-weight:700;padding:2px 8px 2px 6px;border-radius:6px;color:#fff;background:linear-gradient(90deg,#0b4a72,#1d7a43);white-space:nowrap}
.pt-tag svg{width:12px;height:12px}
.pt-tijd{font-size:12px;color:var(--zacht);white-space:nowrap;align-self:flex-start;padding-top:2px}
.pt-av{width:38px;height:38px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;font-size:13px;font-weight:700;letter-spacing:.02em;background:color-mix(in srgb,currentColor 14%,transparent)}
.pt-chip{display:inline-block;font-size:12px;font-weight:600;padding:2px 9px;border-radius:999px;white-space:nowrap;background:color-mix(in srgb,currentColor 13%,transparent);border:1px solid color-mix(in srgb,currentColor 30%,transparent)}
.pt-meta{display:flex;flex-wrap:wrap;gap:4px 14px;padding-left:50px;color:var(--zacht);font-size:13px}
.pt-meta span{display:inline-flex;align-items:center;gap:5px}
.pt-meta svg{width:14px;height:14px;opacity:.8}
.pt-pil{align-self:flex-start;margin-left:50px;display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:500;padding:4px 10px;border-radius:999px;background:color-mix(in srgb,var(--hoofd2) 10%,transparent)}
.pt-pil svg{width:14px;height:14px;color:var(--hoofd2)}
.pt-pil.laat{background:var(--rood-bg)}.pt-pil.laat svg,.pt-pil.laat b{color:var(--rood)}
.pt-pil.let{background:color-mix(in srgb,var(--oranje) 14%,transparent)}.pt-pil.let svg{color:var(--oranje)}
.pt-hint{font-size:12px;color:var(--hoofd2);padding-left:50px;opacity:.85}
.pt-kn{display:flex;gap:6px;flex-shrink:0}
.pt-ck{display:inline-flex;align-items:center;justify-content:center;min-width:44px;height:44px;border-radius:12px;border:1px solid transparent;padding:0 12px;color:#fff;box-shadow:0 1px 2px rgba(0,0,0,.08)}
.pt-ck svg{width:20px;height:20px}
.pt-ck.bel{background:#0b4a72}.pt-ck.wa{background:#25d366}.pt-ck.mail{background:var(--kaart);color:var(--tekst);border-color:var(--rand)}
/* telefoon = smalle weergave van dezelfde app (zoals app.css onder 560/420 px) */
.pt.mob .pt-cijfers{grid-template-columns:repeat(2,1fr)}
.pt.mob .pt-cijfer strong{font-size:22px}
.pt.mob .pt-ic{width:30px;height:30px;margin-bottom:6px}
.pt.mob .pt-kaart{flex-wrap:wrap}
.pt.mob .pt-kn{width:100%}.pt.mob .pt-ck{flex:1}
.pt.mob .pt-meta,.pt.mob .pt-pil,.pt.mob .pt-hint{padding-left:0;margin-left:0}
.pt.mob .pt-hint{display:none}
.pt.mob .pt-kk span{display:none}.pt.mob .pt-kk{padding:7px}
.pt-home{position:absolute;left:50%;bottom:8px;transform:translateX(-50%);width:140px;height:5px;border-radius:3px;background:#17201b;opacity:.85}
@media (prefers-reduced-motion:reduce){.pt-kaart.nieuw{animation:none}}
/* katlanabilir iPhone (open, boekvorm) */
.fold{position:absolute;left:0;bottom:0;width:40cqw;padding:.8cqw;border-radius:2.4cqw;background:#16181b;box-shadow:0 0 0 .3cqw #9aa0a8,0 0 0 .45cqw #5d6268,0 4cqw 8cqw -2cqw rgba(0,0,0,.9)}
.fold::before{content:"";position:absolute;left:50%;top:-.55cqw;bottom:-.55cqw;width:.7cqw;transform:translateX(-50%);border-radius:.35cqw;background:linear-gradient(90deg,#5d6268,#b3b8bf 50%,#5d6268);z-index:-1}
.fold-scr{position:relative;border-radius:1.7cqw;overflow:hidden;background:#f4f6f5}
.crease{position:absolute;z-index:2;top:0;bottom:0;left:50%;width:1.6cqw;transform:translateX(-50%);pointer-events:none;background:linear-gradient(90deg,transparent,rgba(0,0,0,.06) 42%,rgba(255,255,255,.35) 50%,rgba(0,0,0,.06) 58%,transparent)}
.cam{position:absolute;z-index:3;top:.75cqw;right:24%;width:1.1cqw;height:1.1cqw;border-radius:50%;background:#000;box-shadow:0 0 0 .15cqw #222}
.pt-sb.f{height:34px;padding:8px 22px 0 26px;font-size:14px}
@media (max-width:620px){.fold{width:46cqw}}