/* privy.bio – Badge-Stile Siegel & Pille (Profil, Dashboard, Vorlagen, Admin) */
.bx{--c:#8b5cf6;position:relative;display:inline-flex;flex:none;align-items:center;justify-content:center;cursor:default;line-height:1;transition:transform .15s}
.bx::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 8px);left:50%;transform:translate(-50%,4px);background:rgba(10,10,16,.96);border:1px solid color-mix(in srgb,var(--c) 40%,rgba(255,255,255,.14));padding:.28rem .62rem;border-radius:.5rem;font-size:.74rem;font-weight:500;letter-spacing:0;line-height:1.2;color:#fff;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .15s,transform .15s;z-index:20;box-shadow:0 6px 20px rgba(0,0,0,.4)}
.bx[data-tip=""]::after{display:none}
.bx:hover::after,.bx:focus-visible::after{opacity:1;transform:translate(-50%,0)}
.bx:hover,.bx:focus-visible{transform:scale(1.1)}
/* Siegel */
.bx-seal{width:1.6rem;height:1.6rem;filter:drop-shadow(0 0 5px color-mix(in srgb,var(--c) 55%,transparent))}
.bx-seal .bx-s{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.bx-seal .bx-g{position:relative;display:grid;place-items:center;width:62%;height:62%}
.bx-seal.bx-sm .bx-g{width:58%;height:58%}
.bx-seal .bx-g svg{display:block;width:100%;height:100%}
.bx-seal .bx-fa{font-size:.72rem;width:auto;height:auto}
.bx-seal.bx-nm{font-size:inherit;width:.95em;height:.95em}
.bx-seal.bx-nm .bx-fa{font-size:.42em}
.bl-seal.bdrow{gap:.5rem}
/* Pille */
.bx-pill{gap:.3rem;height:1.6rem;padding:0 .62rem 0 .42rem;box-sizing:border-box;border-radius:999px;background:linear-gradient(180deg,color-mix(in srgb,var(--c) 22%,transparent),color-mix(in srgb,var(--c) 10%,transparent));border:1px solid color-mix(in srgb,var(--c) 42%,transparent);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 0 10px color-mix(in srgb,var(--c) 20%,transparent);color:var(--cl,#fff);font-size:.76rem;font-weight:600;white-space:nowrap;backdrop-filter:blur(6px)}
.bx-pill svg{display:block;width:1rem;height:1rem;flex:none}
.bx-pill img{display:block;width:1rem;height:1rem;object-fit:contain;flex:none}
.bx-pill>i{font-size:.72rem;width:1rem;text-align:center}
.bx-pill.bx-ic{width:1.6rem;padding:0;justify-content:center}
.bx-pill.bx-nm{font-size:inherit;width:.9em;height:.9em;padding:0}
.bx-pill.bx-nm svg{width:62%;height:62%}
.bl-pill.bdrow{gap:.4rem}
/* Animationen in den neuen Stilen */
.bx.a-glow{animation:bxglow 2.4s ease-in-out infinite}.bx.a-glow>*{animation:none}
.bx.a-pulse,.bd.a-pulse{animation:bxpulse 1.6s ease-in-out infinite}
.bx.a-spin>*{animation:none}.bx.a-spin .bx-g,.bx-pill.a-spin>svg,.bx-pill.a-spin>i,.bx-pill.a-spin>img{animation:bxspin 4s linear infinite}
@keyframes bxglow{50%{filter:drop-shadow(0 0 9px var(--c)) drop-shadow(0 0 18px color-mix(in srgb,var(--c) 60%,transparent))}}
@keyframes bxpulse{50%{transform:scale(1.14)}}
@media(prefers-reduced-motion:reduce){.bx,.bx *{animation:none!important}}
@keyframes bxspin{to{transform:rotate(360deg)}}