/* ============================================================
   COMPONENTS — wiederverwendbare Bausteine
   ------------------------------------------------------------
   Buttons, Tags/Chips, Karten-Grundform.
   Navigation, Formular & Sektions-Spezifisches folgen in den
   nächsten Phasen (components.css wächst mit).
   ============================================================ */

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.9rem 1.9rem;
  border: none;
  border-radius: var(--radius-pill);
  font-weight: 600;
  font-size: 0.98rem;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: transform var(--transition), box-shadow var(--transition),
    background var(--transition), border-color var(--transition),
    color var(--transition);
}

/* Violetter Verlaufs-Button (primäre Aktion, z. B. „Portfolio ansehen") */
.btn--primary {
  background: var(--gradient-violet);
  color: #fff;
  box-shadow: var(--glow-violet);
}

.btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 46px rgba(124, 92, 246, 0.5);
}

/* Limetten-Outline-Button (sekundäre Aktion, z. B. „Kontakt") */
.btn--lime {
  background: transparent;
  color: var(--lime-400);
  border: 1px solid var(--lime-400);
}

.btn--lime:hover {
  transform: translateY(-2px);
  background: rgba(215, 246, 73, 0.08);
  box-shadow: var(--glow-lime);
}

/* Heller Lavendel-Button (Formular „Nachricht senden") */
.btn--lavender {
  background: var(--violet-300);
  color: #14081f;
  width: 100%;
  justify-content: center;
}

.btn--lavender:hover {
  transform: translateY(-2px);
  background: #d8ccff;
  box-shadow: var(--glow-violet);
}

/* ---------- Tags / Chips ---------- */

/* Kategorie-Tag auf Projektkarten (z. B. „Erklärvideos") */
.tag {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--violet-300);
}

/* Badge mit Rahmen (z. B. Hero: „KI Creator & …-Spezialistin") */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--violet-300);
  border: 1px solid var(--violet-500);
  border-radius: var(--radius-pill);
  padding: 0.6rem 1.3rem;
  background: rgba(139, 92, 246, 0.06);
}

/* ---------- Karten-Grundform ---------- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  transition: transform var(--transition), border-color var(--transition),
    box-shadow var(--transition);
}

.card:hover {
  transform: translateY(-4px);
  border-color: var(--border-strong);
  box-shadow: var(--glow-violet-soft);
}