@media (hover: none) and (pointer: coarse) {
  .button:hover {
    /* Hover-Effekte neutralisieren, wenn Gerät keinen echten Hover hat */
    box-shadow: none;
    transform: none;
  }
}

.button {
  align-items: center;
  background-color: var(--color-button-bg);
  border-radius: var(--radius-xl);
  box-shadow: var(--color-text-bg-inset-shadow);
  column-gap: 0.75rem;
  color: var(--color-button);
  display: flex;
  font-weight: var(--font-weight-xl);
  justify-content: center;
  padding: var(--space-2) var(--space-6);
  text-decoration: none;
  transition: background-color var(--transition-std),
    color var(--transition-std), transform var(--transition-fast);
  width: 100%;
}

.button__icon {
  height: var(--text-3xl);
  width: var(--text-3xl);
}

.button:active {
  transform: var(--scale-btn);
}

.button:hover {
  background-color: var(--color-button-bg-hover);
  text-decoration: none;
}