.soccas-cat-scroller { --scs-h: 48px; }
.scs-track {
  display:flex; align-items:center;
  height: var(--scs-h);
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  touch-action: pan-x;
}
.scs-item {
  white-space: nowrap; user-select: none;
  height: var(--scs-h); line-height: calc(var(--scs-h) - 14px);
  scroll-snap-align: start;
  font-size: 1rem;
}
.scs-arrow {
  position:absolute; top:50%; transform:translateY(-50%);
  width:36px; height:36px; z-index:3;
}
.scs-left { left:6px; } .scs-right { right:6px; }
.scs-fade { position:absolute; top:0; bottom:0; width:36px; z-index:2; pointer-events:none; }
.scs-fade-left  { left:0;  background:linear-gradient(90deg, #D9C986, rgba(255,255,255,0)); }
.scs-fade-right { right:0; background:linear-gradient(270deg, #D9C986, rgba(255,255,255,0)); }

/* Desktop: zentrieren, wenn kein Overflow */
@media (min-width: 900px) {

  .soccas-cat-scroller {

    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;

  }

}


/* Basis-Variablen (oben im File oder am Container) */
.soccas-cat-scroller{
  --scs-h: 46px;          /* Höhe wie gehabt */
  --scs-pad-x: 26px;      /* horizontaler Innenabstand pro Link (vorher ~14px) */
  --scs-gap: 14px;        /* Abstand zwischen den Links */
}

/* Abstand zwischen den Links (überschreibt gap-2 aus dem Markup) */
.scs-track{
  gap: var(--scs-gap);
}

/* Mehr Innenabstand in jedem Button/Link */
.scs-item{
  padding-inline: var(--scs-pad-x);
}

/* Etwas Rand an den Rändern des Scrollers (optional) */
.scs-item:first-child{ margin-left: 6px; }
.scs-item:last-child{  margin-right: 6px; }

/* Responsiv noch etwas großzügiger */
@media (min-width: 576px){
  .soccas-cat-scroller{ --scs-pad-x: 30px; --scs-gap: 16px; }
}
@media (min-width: 992px){
  .soccas-cat-scroller{ --scs-pad-x: 34px; --scs-gap: 18px; }
}

/* Farbtöne einstellbar */
.soccas-cat-scroller{
  --scs-gold: #D9C986;      /* Basisgold */
  --scs-gold-dark: #C49A2F; /* ~10–15% dunkler */
  --scs-text: #111;         /* Textfarbe auf Gold */
}

/* Basisstil: gefüllt, kein Rahmen */
.soccas-cat-scroller .scs-item.btn {
  background-color: var(--scs-gold) !important;
  color: var(--scs-text) !important;
  border: none !important;
  box-shadow: none;
}

/* Hover: etwas dunkleres Gold */
.soccas-cat-scroller .scs-item.btn:hover,
.soccas-cat-scroller .scs-item.btn:focus:hover {
  background-color: var(--scs-gold-dark) !important;
  color: var(--scs-text) !important;
}

/* Aktiver Link (aktuelle Kategorie) gleich wie Hover oder noch einen Tick dunkler */
.soccas-cat-scroller .scs-item.active {
  background-color: var(--scs-gold-dark) !important;
  color: var(--scs-text) !important;
}

/* Tastaturfokus – sichtbarer Ring statt Rahmen */
.soccas-cat-scroller .scs-item.btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 0.2rem rgba(212,175,55,.35);
}


/* ── 1) Scrollbar verstecken (Chrome/Android, iOS, Firefox, Edge-Legacy) ── */
.scs-track{
  overflow-x: auto;
  overflow-y: hidden;
  -ms-overflow-style: none;   /* IE/Edge alt */
  scrollbar-width: none;      /* Firefox */
}
.scs-track::-webkit-scrollbar{
  height: 0;                  /* Chrome/Safari/Android/iOS */
  background: transparent;
}
.scs-track::-webkit-scrollbar-thumb{ background: transparent; }

/* ── 2) Trennlinien zwischen den Links ── */
/* Variablen für Abstand + Farbe */
.soccas-cat-scroller{
  --scs-gap: 16px;            /* Abstand zwischen Links (falls schon vorhanden: überschreibt) */
  --scs-sep-color: rgba(0,0,0,.35);  /* Linie – gern anpassen, z.B. #2a2a2a oder ein dunkles Gold */
}

/* Abstand zwischen den Buttons */
.scs-track{ gap: var(--scs-gap); }

/* Pseudo-Linie, sitzt genau in der Mitte des Gaps */
.scs-item + .scs-item{ position