/* Buttons – eigenständig, überall gleich einsetzbar:
   <a|button class="hv-btn hv-btn--primary">…
   <a|button class="hv-btn hv-btn--secondary">…
   <a|button class="hv-btn hv-btn--ghost">…
   Auf Beige/Hell immer dunkle Schrift (--hv-btn-text). */
.hv-btn,
a.hv-btn,
button.hv-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0.7rem 1.25rem;
  border-radius: var(--hv-radius-sm);
  border: 1px solid transparent;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  color: var(--hv-btn-text);
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.hv-btn--primary,
a.hv-btn--primary,
a.hv-btn--primary:visited,
button.hv-btn--primary {
  background: var(--hv-btn-primary-bg);
  color: var(--hv-btn-text);
  border-color: var(--hv-btn-primary-bg);
}

.hv-btn--primary:hover,
a.hv-btn--primary:hover,
button.hv-btn--primary:hover {
  background: var(--hv-btn-primary-hover);
  color: var(--hv-btn-text);
  border-color: var(--hv-btn-primary-hover);
}

.hv-btn--secondary,
a.hv-btn--secondary,
a.hv-btn--secondary:visited,
button.hv-btn--secondary {
  background: var(--hv-btn-secondary-bg);
  color: var(--hv-btn-text);
  border-color: var(--hv-border);
}

.hv-btn--secondary:hover,
a.hv-btn--secondary:hover,
button.hv-btn--secondary:hover {
  border-color: var(--hv-accent);
  color: var(--hv-btn-text);
}

.hv-btn--ghost,
a.hv-btn--ghost,
a.hv-btn--ghost:visited,
button.hv-btn--ghost {
  background: transparent;
  color: var(--hv-btn-text);
  border-color: var(--hv-accent);
}

.hv-btn--ghost:hover,
a.hv-btn--ghost:hover,
button.hv-btn--ghost:hover {
  background: var(--hv-btn-ghost-hover);
  color: var(--hv-btn-text);
}

.hv-btn:disabled,
.hv-btn[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
}