/* 2. Den Container für unseren neuen Balken */
#custom-scrollbar-track {
    position: fixed;
    right: 0;
    top: 0;
    width: 15px; /* Deine gewünschte Dicke */
    height: 100%;
    background: rgba(0, 0, 0, 0.05);
    z-index: 9999;
}

/* 3. Der Schieber (Thumb) mit Verlauf */
#custom-scrollbar-thumb {
    position: absolute;
    width: 100%;
    /*background: rgb(var(--color-accent));*/
    border-radius: 15px;
    cursor: pointer;
    min-height: 30px;
  
    background: rgb(var(--color-accent)) !important;
    filter: brightness(1); /* Standard-Helligkeit */
    transition: filter 0.1s ease;
    /*border: 4px solid #f1f1f1; /* Abstand für Optik */
}
/* 2. Beim Drüberfahren (Hover) -> Etwas dunkler */
#custom-scrollbar-thumb:hover {
    filter: brightness(0.85) !important; 
}
#custom-scrollbar-thumb:active {
    filter: brightness(0.9) !important; 
}
#custom-scrollbar-thumb.is-dragging {
    filter: brightness(0.75) !important; /* Richtig dunkel beim Klicken/Ziehen */
}
@media not all and (pointer: coarse) {
  /* 1. Echten Scrollbalken überall verstecken */
  html, body {
      scrollbar-width: none !important; /* Firefox */
      -ms-overflow-style: none;         /* IE/Edge */
  }
  body::-webkit-scrollbar {
      display: none !important;         /* Chrome/Safari */
  }
}

@media (pointer: coarse) {
  #custom-scrollbar-track{
    display:none;
  }
}