/* PPF-doorsnede, eigen donkere variabelen zodat hij op elke pagina hetzelfde oogt */
.pf{--wrap:#111213;--ink:#f3f1ec;--ink-2:#a9aaa6;--line:#34373a;--panel:#1b1d1f;--plate:#f7c600;--acc:#d6203a;
  --display:"Barlow Condensed","Arial Narrow",Impact,sans-serif;--mono:"Martian Mono",ui-monospace,Menlo,Consolas,monospace;color:var(--ink)}
.pf button{font:inherit;color:inherit;cursor:pointer}
.switch{display:flex;gap:0;border:1px solid var(--line);width:fit-content}
.switch button{background:none;border:0;padding:8px 14px;font:600 .68rem/1 var(--mono);letter-spacing:.08em;text-transform:uppercase}
.switch button[aria-pressed="true"]{background:var(--ink);color:var(--wrap)}
.pf-wrap{display:flex;flex-direction:column;gap:10px;scroll-margin-top:12px}
.pf-top{position:relative}
.pf-tabs{display:grid;grid-template-columns:repeat(6,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.pf-tabs button{background:var(--wrap);border:0;color:var(--ink);padding:12px 8px;font:600 .7rem/1.1 var(--mono);letter-spacing:.06em;text-transform:uppercase;display:flex;align-items:center;justify-content:center;gap:8px;min-height:44px}
.pf-tabs i{font-style:normal;width:20px;height:20px;border-radius:50%;border:1px solid var(--ink-2);display:grid;place-items:center;font-size:.62rem;color:var(--ink-2);flex:none}
.pf-tabs button.on{background:color-mix(in oklab,var(--ink) 10%,var(--wrap))}
.pf-tabs button.on i{background:var(--plate);border-color:var(--plate);color:#111213}
.pf-stage{position:relative;aspect-ratio:1340/750;overflow:hidden;border:1px solid var(--line);background:#000}
.pf-zoom{position:absolute;inset:0;transform-origin:0 0;transform:translate(var(--tx,0px),var(--ty,0px)) scale(var(--s,1));transition:transform .9s cubic-bezier(.7,0,.2,1)}
.pf-zoom img{position:absolute;inset:0;width:100%;height:100%;display:block}
.pf-dot{position:absolute;transform:translate(-50%,-50%) scale(calc(1/var(--s,1)));width:30px;height:30px;border-radius:50%;border:1.5px solid #f3f1ec;background:rgba(17,18,19,.72);color:#f3f1ec;font:600 .74rem/1 var(--mono);padding:0;display:grid;place-items:center;backdrop-filter:blur(4px);transition:transform .9s cubic-bezier(.7,0,.2,1),background .2s}
.pf-dot::after{content:"";position:absolute;inset:-7px;border-radius:50%;border:1px solid rgba(243,241,236,.55);animation:pfpulse 2.2s ease-out infinite}
@keyframes pfpulse{0%{transform:scale(.7);opacity:.9}100%{transform:scale(1.5);opacity:0}}
.pf-dot.on{background:var(--plate);color:#111213;border-color:var(--plate)}
.pf-hint,.pf-tag{position:absolute;bottom:8px;max-width:none;font:400 .6rem/1.3 var(--mono);text-transform:uppercase;letter-spacing:.08em;color:#d3d1cb;background:rgba(17,18,19,.6);padding:3px 7px}
.pf-hint{left:10px;font-size:.68rem;color:#f3f1ec}.pf-tag{right:10px}
.pf-wrap.open .pf-hint{display:none}
.pf-scene{position:absolute;right:0;top:0;bottom:0;width:46%;display:flex;flex-direction:column;gap:12px;padding:16px;background:rgba(17,18,19,.9);backdrop-filter:blur(10px);border:1px solid var(--line);border-left:1px solid rgba(243,241,236,.25);color:#f3f1ec;animation:pfin .5s .25s both}
.pf-scene[hidden]{display:none}
@keyframes pfin{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:none}}
.pf-scene-top{display:flex;justify-content:space-between;align-items:center;gap:10px}
.pf-scene .switch{border-color:rgba(243,241,236,.35)}
.pf-scene .switch button{color:#f3f1ec}.pf-scene .switch button[aria-pressed="true"]{background:#f3f1ec;color:#111213}
.pf-close{background:none;border:1px solid rgba(243,241,236,.35);color:#f3f1ec;padding:8px 12px;font:600 .68rem/1 var(--mono);letter-spacing:.08em;text-transform:uppercase}
.pf-scene canvas{width:100%;flex:1 1 auto;min-height:0;display:block;object-fit:contain}
.pf-cap{display:flex;flex-direction:column;gap:4px;min-height:5.2em}
.pf-cap b{font:italic 700 1.3rem/1.05 var(--display);text-transform:uppercase}
.pf-cap span{color:#d3d1cb;font-size:.92rem;line-height:1.45}
.pf-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);counter-reset:pf}
.pf-list li{counter-increment:pf;background:var(--wrap);padding:18px 18px 20px;display:flex;flex-direction:column;gap:8px;cursor:pointer;transition:background .2s}
.pf-list li::before{content:counter(pf);font:600 .7rem/1 var(--mono);width:24px;height:24px;border-radius:50%;border:1px solid var(--ink-2);display:grid;place-items:center;color:var(--ink-2)}
.pf-list li:hover{background:color-mix(in oklab,var(--ink) 4%,var(--wrap))}
.pf-list li.on{background:color-mix(in oklab,var(--ink) 8%,var(--wrap))}
.pf-list li.on::before{background:var(--plate);border-color:var(--plate);color:#111213}
.pf-list b{font:italic 700 1.25rem/1.1 var(--display);text-transform:uppercase;letter-spacing:.01em}
.pf-list span{color:var(--ink-2);font-size:.95rem;line-height:1.5}
.pf-foot{display:flex;gap:24px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.pf-foot .flag{flex:1 1 420px;max-width:70ch}
.pf-cta{display:inline-grid;place-items:center;text-decoration:none;background:var(--plate);color:#111213}
@media (max-width:900px){.pf-list{grid-template-columns:repeat(2,1fr)}.pf-top{display:contents}.pf-stage{order:1}.pf-tabs{order:2;grid-template-columns:repeat(3,1fr)}.pf-scene{order:3;position:relative;width:auto;border-left:1px solid var(--line);padding:12px;gap:8px;animation:none}.pf-scene canvas{aspect-ratio:1040/700;flex:none}.pf-close{display:none}.pf-cap{min-height:4.4em}.pf-wrap{gap:6px}}
@media (max-width:560px){.pf-list{grid-template-columns:1fr}.pf-dot{width:24px;height:24px;font-size:.64rem}.pf-tag{display:none}}
@media (prefers-reduced-motion:reduce){.pf-zoom,.pf-dot{transition:none}.pf-dot::after,.pf-scene{animation:none}}