/* ══════════════════════════════════════════════════════════
   CROJAK — Your card
   ══════════════════════════════════════════════════════════ */
.pfwrap{ max-width:860px; margin:0 auto; padding:0 16px; }

.pfhero{ padding:calc(var(--nav-h) + 40px) 0 24px; text-align:center; }
.pfhero__eyebrow{
  font-family:var(--font-mono); font-size:.7rem; letter-spacing:.22em;
  text-transform:uppercase; color:var(--ink-faint); margin:0 0 12px;
}
.pfhero__title{
  font-family:var(--font-display); font-size:clamp(2.4rem,8vw,4.4rem);
  line-height:.92; margin:0 0 14px; text-transform:uppercase; letter-spacing:.012em;
}
.pfhero__title em{ font-style:normal; color:var(--accent); }
.pfhero__sub{ max-width:52ch; margin:0 auto; color:var(--ink-dim); line-height:1.6; }

/* ── de personeelspas ─────────────────────────────────── */
.pf-badge{
  max-width:520px; margin:0 auto; position:relative;
  display:flex; flex-direction:column; align-items:center;
}
.pf-badge.is-empty, .pf-badge.is-laden{
  min-height:180px; justify-content:center;
  background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:28px; text-align:center;
}
.pf-empty{ margin:0; color:var(--ink-dim); line-height:1.6; max-width:40ch; }

/* het klemmetje van het koord */
.pf-clip{
  width:72px; height:26px; background:linear-gradient(#2a2e36, #15181d);
  border:1px solid var(--line); border-bottom:none;
  border-radius:7px 7px 0 0; display:flex; align-items:center; justify-content:center;
  position:relative; z-index:2;
}
.pf-clip__gat{
  width:34px; height:8px; border-radius:5px;
  background:var(--bg); box-shadow:inset 0 1px 2px rgba(0,0,0,.9);
}

.pf-badge__kaart{
  width:100%; position:relative; overflow:hidden;
  background:linear-gradient(168deg, var(--bg-3) 0%, var(--bg-2) 62%);
  border:1px solid var(--line); border-radius:var(--r-lg);
  padding:16px 18px 14px;
  box-shadow:0 18px 40px -22px rgba(0,0,0,.9);
}
/* een subtiele glans, zodat het een pasje lijkt en geen tabel */
.pf-badge__kaart::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(118deg, transparent 38%, rgba(255,255,255,.045) 47%, transparent 56%);
}

.pf-badge__kop{
  display:flex; align-items:center; gap:10px;
  padding:0 0 12px; margin:0 0 14px; border-bottom:1px solid var(--line);
}
.pf-badge__merk{ display:flex; align-items:center; gap:9px; }
.pf-badge__logo{
  width:30px; height:30px; border-radius:50%; object-fit:cover;
  border:1px solid var(--line);
}
.pf-badge__merk b{
  display:block; font-family:var(--font-display); font-size:.98rem;
  letter-spacing:.06em; line-height:1;
}
.pf-badge__merk span{
  display:block; font-family:var(--font-mono); font-size:.54rem;
  letter-spacing:.2em; text-transform:uppercase; color:var(--ink-faint); margin-top:3px;
}
.pf-badge__rang{
  margin-left:auto; font-family:var(--font-display); font-size:1.5rem;
  color:var(--accent); letter-spacing:.06em; line-height:1;
}

.pf-badge__lijf{ display:grid; grid-template-columns:116px 1fr; gap:16px; }
.pf-badge__foto{
  border-radius:var(--r-sm); overflow:hidden; aspect-ratio:3/4;
  border:1px solid var(--line); background:var(--bg);
}
.pf-badge__foto img{
  width:100%; height:100%; object-fit:cover; display:block;
  filter:grayscale(.3) contrast(1.08) brightness(.96);
}
.pf-badge__velden{ display:grid; gap:9px; align-content:start; }
.pf-veld{ display:flex; flex-direction:column; gap:1px; }
.pf-veld__k{
  font-family:var(--font-mono); font-size:.52rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--ink-faint);
}
.pf-veld__v{
  font-family:var(--font-mono); font-size:.86rem; color:var(--ink); letter-spacing:.02em;
}
.pf-veld__sub{
  font-family:var(--font-mono); font-size:.62rem; color:var(--ink-faint); letter-spacing:.02em;
}
.pf-functie{
  font-family:var(--font-display); font-size:clamp(1.5rem,5.5vw,2.1rem);
  line-height:1; letter-spacing:.015em; color:var(--ink);
}

.pf-badge__regel{
  margin:14px 0 0; padding:11px 0 0; border-top:1px dashed var(--line);
  font-size:.88rem; line-height:1.5; color:var(--ink-dim);
}
.pf-badge__proj{
  margin:9px 0 0; font-size:.8rem; line-height:1.5; color:var(--ink-faint);
}
.pf-badge__proj b{ color:var(--accent); font-weight:600; letter-spacing:.02em; }

.pf-badge__code{
  display:flex; gap:2px; align-items:flex-end; height:26px;
  margin:14px 0 0; padding:0 0 0 1px; opacity:.5;
}
.pf-badge__code i{ display:block; height:100%; background:var(--ink-dim); }

/* ── rangen kleuren mee ───────────────────────────────── */
.pf-badge.is-under  .pf-badge__rang{ color:var(--ink-faint); }
.pf-badge.is-clocked .pf-badge__rang{ color:var(--ink-dim); }
.pf-badge.is-making .pf-badge__kaart{ border-color:color-mix(in srgb, var(--accent) 38%, var(--line)); }
.pf-badge.is-comfy  .pf-badge__kaart{ border-color:color-mix(in srgb, var(--green) 38%, var(--line)); }
.pf-badge.is-comfy  .pf-badge__rang{ color:var(--green); }
.pf-badge.is-nobag  .pf-badge__kaart{ opacity:.78; }

/* ── en wie vrij is heeft geen pas meer ───────────────── */
.pf-badge.is-resigned .pf-badge__kaart{
  border-color:#8d3a2a;
  background:linear-gradient(168deg, #1d1411 0%, var(--bg-2) 62%);
}
.pf-badge.is-resigned .pf-badge__foto img{ filter:grayscale(.1) contrast(1.05) brightness(1.02); }
.pf-stempel{
  position:absolute; top:46%; left:50%;
  transform:translate(-50%,-50%) rotate(-13deg);
  font-family:var(--font-display); font-size:clamp(2.1rem,8vw,3.1rem);
  letter-spacing:.1em; color:#c0392b; border:5px solid #c0392b;
  padding:4px 20px 6px; border-radius:7px; opacity:.88;
  pointer-events:none; white-space:nowrap;
  text-shadow:0 2px 10px rgba(0,0,0,.6); box-shadow:0 2px 14px rgba(0,0,0,.5);
}

.pf-acties{ display:flex; gap:8px; flex-wrap:wrap; justify-content:center; margin:16px 0 0; }

/* ── de ladder ────────────────────────────────────────── */
.pf-ladderwrap, .pf-escape{ margin:34px 0 0; }
.pf-escape{ margin-bottom:56px; }
.pf-ladder__h{
  font-family:var(--font-display); font-size:1.15rem; letter-spacing:.02em;
  text-transform:uppercase; margin:0 0 12px;
}
.pf-ladder{ list-style:none; margin:0; padding:0; display:grid; gap:3px; }
.pf-trede{
  display:grid; grid-template-columns:34px 118px 1fr; gap:12px; align-items:center;
  padding:8px 14px; background:var(--bg-2); border:1px solid var(--line);
  border-radius:var(--r-sm); font-family:var(--font-mono); font-size:.74rem;
  color:var(--ink-faint);
}
.pf-trede.is-done{ color:var(--ink-dim); }
.pf-trede.is-now{
  border-color:var(--accent); color:var(--ink);
  background:color-mix(in srgb, var(--accent) 10%, var(--bg-2));
}
.pf-trede__rang{ font-family:var(--font-display); font-size:.9rem; color:var(--accent); }
.pf-trede.is-now .pf-trede__rang{ color:var(--accent); }
.pf-trede__naam{ font-family:var(--font-display); font-size:.92rem; letter-spacing:.03em; }
.pf-ladder__note{
  margin:10px 0 0; font-size:.76rem; line-height:1.55; color:var(--ink-faint); max-width:64ch;
}

@media (max-width:560px){
  .pf-badge__lijf{ grid-template-columns:92px 1fr; gap:12px; }
  .pf-badge__kaart{ padding:14px 14px 12px; }
  .pf-trede{ grid-template-columns:28px 1fr; gap:4px 10px; }
  .pf-trede__naam{ grid-column:2; }
}