/* Wie je spreekt: twee gelijke naamkaarten, gedeeld door de kiezer en de branchepagina's (html per pagina gelijk).
   Geen lege fotoplek zolang er geen foto is. Het anker is het lime streepje uit de tally van het logo.
   Foto erbij: img[data-foto] in de kaart krijgt een src en verliest het attribuut hidden; dan staat de foto bovenaan in 4:5. */
.kaarten{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(8px,1.2vw,14px);max-width:460px}
.kaart{position:relative;display:flex;flex-direction:column;min-width:0;margin:0;padding:clamp(12px,1.4vw,18px);border:1px solid var(--line);border-radius:14px;
  background:linear-gradient(165deg,var(--panel-2),var(--panel));box-shadow:inset 0 1px 0 rgba(244,243,239,.07)}
.kaart img[data-foto]{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:9px;margin:0 0 clamp(12px,1.4vw,16px)}
.kaart img[data-foto][hidden]{display:none}
.kaart p{margin:0}
.kaart-rol{display:flex;align-items:center;gap:10px;font:500 10.5px/1.2 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--fg-55)}
.kaart-rol::before{content:"";flex:none;width:18px;height:5px;border-radius:3px;background:var(--lime);transform:rotate(-14deg)}
.kaart-naam{margin-top:clamp(12px,1.4vw,18px)!important;font-family:var(--display);font-weight:800;font-stretch:84%;font-variation-settings:'wdth' 84;
  text-transform:uppercase;letter-spacing:.01em;line-height:.92;font-size:clamp(28px,2.8vw,40px);color:var(--fg);overflow-wrap:anywhere}
.kaart-links{margin-top:auto!important;padding-top:clamp(10px,1.2vw,14px);display:flex;flex-wrap:wrap;align-items:center;gap:0 8px;font:500 12px/1.35 var(--mono);letter-spacing:.02em;color:var(--fg-55)}
.kaart-links a{color:var(--fg);text-decoration:underline;text-decoration-color:var(--lime);text-underline-offset:4px;text-decoration-thickness:1.5px;min-height:32px;display:inline-flex;align-items:center;min-width:0;overflow-wrap:anywhere}
.kaart-links a:hover{color:var(--lime)}
.kaart-links span{display:none} /* de kaart is smal: mail en LinkedIn onder elkaar, zonder los puntje aan het eind van de regel */
@media(max-width:520px){
  .kaarten{max-width:none}
  .kaart-rol{gap:7px;font-size:10px;letter-spacing:.1em}
  .kaart-rol::before{width:14px;height:4px}
  .kaart-links{font-size:11px;letter-spacing:0}
}