/* /voorbeeld/kattenprofiel. Gebruikt de componenten uit site.css en account.css. */
.alleen-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.kp-main{min-width:0;flex:1;display:flex;flex-direction:column;gap:20px}
.kp-kop{display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.kp-kop h1{font-size:clamp(28px,3.4vw,34px);line-height:1.05;letter-spacing:-.02em}
.kp-label{font-size:14px;font-weight:600;background:var(--salie);color:var(--mos);padding:6px 12px;border-radius:16px}

.kp-tabs{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.kp-tabs button{flex:none;min-height:44px;padding:0 16px;border-radius:999px;font:600 14px/1 var(--font-tekst);white-space:nowrap;cursor:pointer;border:1.5px solid var(--veld-rand);background:var(--room);color:var(--nacht)}
.kp-tabs button[aria-pressed=true]{background:var(--mos);border-color:var(--mos);color:var(--wit)}
.kp-tabs .kp-toevoegen{border-color:var(--mos);background:transparent;color:var(--mos)}
.kp-max{flex:none;font-size:14px;color:var(--steen);white-space:nowrap}

.kp-kaart{gap:16px}
.kp-kaartkop{display:flex;align-items:center;gap:14px}
.kp-avatar{flex:none;width:64px;height:64px;border-radius:999px;background:var(--salie);color:var(--mos);display:flex;align-items:center;justify-content:center}
.kp-avatar svg{width:30px;height:30px}
.kp-titelblok{min-width:0;display:flex;flex-direction:column;gap:4px;align-items:flex-start}
.kp-titelblok h2{font-size:22px;line-height:1.15;outline:none;letter-spacing:0;overflow-wrap:anywhere}
.kp-rij{display:flex;flex-wrap:wrap;gap:14px}
.kp-rij>.kp-veld{flex:1 1 220px;min-width:0}
.kp-veld{display:flex;flex-direction:column;gap:6px}
.kp-veld label,.kp-veldlabel,.kp-leeftijd legend{font-size:16px;font-weight:600}
.kp-veld label.klein{font-size:14px;font-weight:400;color:var(--steen)}
.kp-veld input,.kp-veld select,.kp-veld textarea{width:100%;border:1px solid var(--veld-rand);border-radius:12px;padding:0 14px;font:inherit;font-size:16px;background:var(--wit);color:var(--nacht)}
.kp-veld input,.kp-veld select{height:48px}
.kp-veld textarea{padding:12px 14px;resize:vertical;min-height:96px}
.kp-veld input:focus-visible,.kp-veld select:focus-visible,.kp-veld textarea:focus-visible{outline:3px solid var(--mos);outline-offset:1px;border-color:var(--mos)}
.kp-veld input[aria-invalid=true]{border:2px solid var(--honing)}
.kp-fout{font-size:14px;font-weight:600}
.kp-leeftijd{margin:0;padding:0;border:0;min-width:0;display:flex;flex-direction:column;gap:6px}
.kp-leeftijd legend{padding:0;margin-bottom:6px}
.kp-onder{border-top:1px solid var(--rand);padding-top:14px;display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.kp-onder .bevestig{width:100%;background:var(--linnen);border:0}
.btn-neutraal{background:transparent;color:var(--nacht);border-color:var(--veld-rand)}
.kp-acties{display:flex;flex-wrap:wrap;gap:8px}
.kp-acties .btn{flex:1 1 160px;min-height:52px;padding:0 28px;font-size:16px}

@media (max-width:899px){
  .demo-main,.kp-main{gap:20px}
  /* mobiel: schuifbare rij pillen */
  .kp-tabs{flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px;margin-inline:calc(var(--marge) * -1);padding-inline:var(--marge);scrollbar-width:thin}
}