/* =========================
   CARD 2
========================= */
.card-error {
  width: 260px;
  padding: 35px;
  border-radius: var(--radius-lg);

  background: var(--bg-glass);
  backdrop-filter: blur(12px);

  box-shadow: var(--glow-error);
  transition: var(--transition-default);

  opacity: 0.9;;
}

/* =========================
   CARD 1
========================= */
.card1 {
  width: 260px;
  padding: 35px;
  border-radius: var(--radius-lg);

  background: var(--bg-glass);
  backdrop-filter: blur(12px);

  box-shadow: var(--glow-secondary);
  transition: var(--transition-default);

  opacity: 0.9;;
}


/* =========================
   CARD 2
========================= */
.card2 {
  width: 260px;
  padding: 25px;
  border-radius: var(--radius-lg);

  background: var(--bg-glass);
  backdrop-filter: blur(12px);

  box-shadow: var(--border-subtle);
  transition: var(--transition-default);
}


/* =========================
   CARD HOVER
========================= */
.card2:hover {
  transform: translateY(-5px);

  box-shadow: var(--glow-shadow); /* optional später Token */
}


/* =========================
   BADGE BASE
========================= */
.badge {
  display: inline-block;
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-sm);

  font-size: 0.7em;
  margin-bottom: var(--space-sm);

  color: var(--text-primary);
}


/* =========================
   BADGE: WIP
========================= */
.badge-wip {
  background: var(--color-pink-cosmic); /* passt zum System statt Orange */
  box-shadow: var(--glow-accent);
}

.badge-alpha {
  background: var(--color-purple-neon); /* passt zum System statt Orange */
  box-shadow: var(--glow-accent);
}

/* =========================
   BADGE: LOCKED
========================= */
.badge-locked {
  background: var(--color-navy-space);
  box-shadow: var(--glow-deactive);
}