:root {
    --slider-track-color: #d3d3d3;
    --slider-fill-color: orange;
    --slider-thumb-color: orange;
    --slider-thumb-glow-soft: rgba(255, 165, 0, 0.2);
    --slider-thumb-glow-strong: rgba(255, 165, 0, 0.4);
}

.dark-mode {
    --slider-track-color: #94a3b8;
}

/* Allgemeines Styling des Tracks */
input[type="range"] {
    -webkit-appearance: none;
    width: 100%;
    height: 8px;
    background: var(--slider-track-color); /* Standard-Hintergrundfarbe des Tracks */
    border-radius: 5px;
    outline: none;
}

/* Fortschritt wird dynamisch via JS aktualisiert */
input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    background: var(--slider-thumb-color); /* Farbe des Daumens */
    border: 3px solid var(--slider-thumb-color);
    border-radius: 50%;
    cursor: pointer;
    transition: box-shadow 0.2s ease;
}

input[type="range"]::-moz-range-thumb {
    width: 16px;
    height: 16px;
    background: var(--slider-thumb-color);
    border: 3px solid var(--slider-thumb-color);
    border-radius: 50%;
    cursor: pointer;
}

/* Hover- und Pressed-Effekte */
input[type="range"]:hover::-webkit-slider-thumb {
    box-shadow: 0 0 0 8px var(--slider-thumb-glow-soft); /* Leichter Kreis */
}

input[type="range"]:active::-webkit-slider-thumb {
    box-shadow: 0 0 0 10px var(--slider-thumb-glow-strong); /* Intensiver Kreis */
}