/* Regler (input[type="range"]) — EIN Baustein für die ganze Plattform.

   Vorgeschichte (Befund 2026-09-10): Zwölf CSS-Dateien definierten diesen
   Regler. Zehn davon trugen dasselbe Design — 6-px-Bahn, 18-px-Griff,
   2-px-weißer Ring — und unterschieden sich nur im Namen der Akzentvariablen
   (--scrolly-accent, --he-blue, --hg-blue, --kv-blue, --hs-blue, --hi-blue),
   die alle auf denselben Wert `rgb(var(--primary-rgb))` zeigten. Daneben
   stand eine globale Altregel mit 4-px-Bahn, 16-px-Griff, hartcodiertem
   `lightgrey` und `top:-5px`-Verschiebung, die überall dort griff, wo kein
   Modul sie überschrieb.

   Zwei Haken bleiben für Module:
     --regler-akzent   Farbe von Füllung und Griff (Vorgabe: Markenfarbe)
     --regler-pct      Füllstand; setzt `js/base/regler.js` für jeden Regler
                       der Seite, damit kein Modul ihn vergessen kann.

   Der Füllstand liegt bewusst im Hintergrund-Verlauf des Elements und nicht
   in `::-moz-range-progress` allein: WebKit kennt kein Progress-Pseudoelement,
   und zwei Quellen für dieselbe Kante liefen in der Vergangenheit auseinander. */

input[type="range"] {
  --regler-akzent: rgb(var(--primary-rgb));
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  margin: 5px 0;
  border-radius: var(--radius-pill, 999px);
  background: linear-gradient(90deg,
    var(--regler-akzent) 0, var(--regler-akzent) var(--regler-pct, 0%),
    var(--surface-border) var(--regler-pct, 0%), var(--surface-border) 100%);
  outline: none;
  cursor: pointer;
}

input[type="range"]::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: var(--radius-pill, 999px);
  background: transparent;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  /* Griffmitte auf die 6-px-Bahn legen, auch bei kleineren Modul-Griffen. */
  /* Unabhängig von transform, damit Hover-Skalierung die Mitte erhält. */
  translate: 0 calc(3px - 50%);
  border-radius: 50%;
  background: var(--regler-akzent);
  border: 2px solid var(--neutrals-0);
  box-shadow: 0 1px 4px rgba(var(--primary-rgb), .5);
  cursor: grab;
}

input[type="range"]:active::-webkit-slider-thumb { cursor: grabbing; }

/* Firefox zeichnet Bahn und Fortschritt selbst; der Verlauf oben bliebe
   sonst unter dem undurchsichtigen Track verborgen. */
input[type="range"]::-moz-range-track {
  height: 6px;
  border-radius: var(--radius-pill, 999px);
  background: var(--surface-border);
}

input[type="range"]::-moz-range-progress {
  height: 6px;
  border-radius: var(--radius-pill, 999px);
  background: var(--regler-akzent);
}

input[type="range"]::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--regler-akzent);
  border: 2px solid var(--neutrals-0);
  box-shadow: 0 1px 4px rgba(var(--primary-rgb), .5);
  cursor: grab;
}

input[type="range"]:focus-visible {
  outline: 3px solid rgba(var(--primary-rgb), .3);
  outline-offset: 3px;
}

input[type="range"]:disabled {
  cursor: not-allowed;
  opacity: .55;
}