/* ===== ZENTRALE STYLES FÜR KATEGORIEMENÜS (TABS) ===== */

/* Container für die Tabs-Leiste */
.tabs {
  z-index: 10; /* Wichtig: Niedriger als der Header, um Konflikte zu vermeiden */
  background: transparent;
  border-bottom: 1px solid var(--border);
  margin-top: 14px;
  /* KEINE position: sticky; Eigenschaft mehr! */
}

/* Wrapper für die scrollbare Button-Leiste */
.tabs .wrap {
  display: flex;
  gap: 10px;
  padding: 10px 20px 14px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  flex-wrap: nowrap;
  justify-content: flex-start; /* Auf Mobilgeräten linksbündig für besseres Scrollen */
  scroll-snap-type: x proximity;
}

/* Auf größeren Bildschirmen zentrieren wir die Buttons */
@media (min-width: 981px) {
  .tabs .wrap {
    justify-content: center;
  }
}

/* Design der einzelnen Menü-Buttons (Tabs) */
.tab-btn {
  flex: 0 0 auto; /* Buttons behalten ihre natürliche Breite */
  padding: 8px 16px;
  border-radius: 8px; /* Eckig mit abgerundeten Ecken */
  border: 1px solid var(--border);
  background: transparent;
  color: var(--link);
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease;
  scroll-snap-align: center;
}

/* Hover-Effekt für inaktive Buttons */
.tab-btn:hover {
  background-color: var(--surface);
  color: var(--text);
  filter: none; /* Überschreibt alte Hover-Effekte */
}

/* Aktiver/ausgewählter Button (Highlight) */
.tab-btn[aria-selected="true"],
.tab-btn[aria-selected="true"]:hover {
  background: linear-gradient(135deg, var(--a1), var(--a2));
  color: #0B1016;
  border-color: transparent;
}