/* Container-Styling */
.websolutely-filter-nav {
  display: flex;
  gap: 1rem;
  margin-bottom: 2rem;
}

/* Basis-Button Styling */
.websolutely-btn {
  font-family: var(--font-body);
  font-size: 0.875rem;
  padding: 0.75rem 1.75rem;
  text-decoration: none;
  border: 1px solid var(--primary); /* Schwarzer Rahmen */
  background-color: var(--background); /* Weißer/Heller Hintergrund */
  color: var(--foreground);
  transition: all 0.2s ease-in-out;
  border-radius: 7px;
}

/* Der aktive Zustand (Schwarzer Hintergrund, weißer Text) */
.websolutely-btn.is-active {
  background-color: var(--primary); /* Schwarz */
  color: var(--primary-foreground); /* Weiß */
}

/* Hover-Effekt für die nicht-aktiven Buttons */
.websolutely-btn:not(.is-active):hover {
  background-color: var(--muted);
}

.websolutely-btn-reset {
  display: none;
  align-self: center;
  text-decoration: none;
  color: var(--muted-foreground);
  font-size: 1.2rem;
  margin-left: 0.5rem;
}