Status Badge Set

<!-- Status Badge Set · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="bdg"><span class="bdg-p bdg-live"><span class="bdg-d"></span>Live</span><span class="bdg-p bdg-warn">In review</span><span class="bdg-p bdg-ink">Concept</span><span class="bdg-p bdg-soft">Gearchiveerd</span><span class="bdg-p bdg-out">Beta</span></div>
</div>

/* Status Badge Set · NedDev · eigen werk. */
.bdg{display:flex;flex-wrap:wrap;gap:9px;width:340px;justify-content:center;font-family:'Switzer',sans-serif}
.bdg-p{display:inline-flex;align-items:center;gap:7px;padding:6px 13px;border-radius:99px;font-size:12px;font-weight:600}
.bdg-d{width:7px;height:7px;border-radius:50%;background:#F5480F;position:relative}
.bdg-d::after{content:'';position:absolute;inset:-3px;border-radius:50%;border:1px solid #F5480F;animation:bdgp 1.8s ease-out infinite}
@keyframes bdgp{0%{transform:scale(1);opacity:.7}100%{transform:scale(2.4);opacity:0}}
.bdg-live{background:rgba(245,72,15,.1);color:#F5480F}.bdg-warn{background:rgba(10,10,10,.06);color:#0a0a0a}.bdg-ink{background:#0a0a0a;color:#fff}.bdg-soft{background:rgba(10,10,10,.04);color:rgba(10,10,10,.5)}.bdg-out{background:#fff;color:#0a0a0a;box-shadow:inset 0 0 0 1px rgba(10,10,10,.18)}