/* BrandZaps wiederverwendbare Komponenten */

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  font:600 14.5px/1 var(--font-ui);
  border-radius:var(--radius-md);
  border:1px solid transparent;
  cursor:pointer;
  padding:0 22px;
  height:44px;
  white-space:nowrap;
  transition:background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), transform 90ms;
}
.btn:active{ transform:translateY(1px); }
.btn:focus-visible{ outline:2px solid var(--bz-ink); outline-offset:2px; }

.btn--primary{ background:var(--bz-signal); color:var(--text-on-signal); }
.btn--primary:hover{ background:var(--bz-signal-bright); }

.btn--ink{ background:var(--bz-ink); color:var(--text-on-ink); border-color:rgba(15,15,15,.35); }
.btn--ink:hover{ opacity:.9; }

.badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font:600 9.5px/1 var(--font-mono);
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--bz-grey-600);
}
.badge .dot{
  width:6px; height:6px; flex:none;
  background:var(--bz-signal-bright);
  border:1px solid rgba(6,43,20,.3);
}

.progress-track{
  height:3px;
  background:var(--bz-mist);
  border-radius:var(--radius-pill);
  overflow:hidden;
}
.progress-fill{
  height:100%;
  background:var(--bz-signal-bright);
  transition:width var(--dur-slow) var(--ease-out);
}

.icon{ width:1em; height:1em; display:inline-block; vertical-align:middle; }