/* -*- coding: utf-8 -*-
   schieber.css - das Aussehen der Schiebe-Bestaetigung. EINE Fassung.

   Gehoert zu schieber.js. Bis zum 03.09.2026 stand dieses Aussehen zweimal
   da: in einem <style>-Block in werkzeugwechsel.html und als Abschnitt 8 in
   qs.css des QS-Moduls. Aufgabe 1c/14 hat beide hierher zusammengefuehrt.

   ⚠️ DIESE DATEI SETZT KEINE FARBWERTE. Sie nimmt --brand-primary,
   --page-plane, --surface-1, --border, --text-primary und --text-secondary.
   Nachgemessen am 03.09.2026: werkzeugwechsel.html deklariert alle sechs in
   seinem eigenen :root (hell und dunkel), style.css ebenfalls - beide mit
   denselben Werten. Wer die Datei in eine Seite einbindet, die keine davon
   deklariert, bekommt einen unsichtbaren Schieber.

   ⚠️ NICHT var(--icon-ki). Die Variable ist seitenlokal in
   werkzeugwechsel.html deklariert und in style.css nirgends - ein geteilter
   Baustein kann sie nicht sehen. Sie war ausserdem doppelt schlecht: #9fe870
   ist in BEIDEN Themen hell, der Text darauf ist var(--text-secondary), und
   der ist im dunklen Thema ebenfalls hell. Gemessen: Kontrast rund 1,2:1,
   sobald die Fuellung den Text erreicht - praktisch unlesbar. Mit dem
   durchscheinenden Markenton sind es 6,7:1. */

.schieber-hinweis { font-size: 12.5px; color: var(--text-muted); margin: 0 0 10px; }
/* ⚠️ GROESSEN UND FARBEN SIND DIE DES WERKZEUGWECHSELS, seit Aufgabe 1c/14
   (Spezifikation 6.4). Bahn 66 px, Griff 76x56 px — nicht 48 px / 40x40 px
   wie bis zum 02.09.2026. Grund: in der Halle wird mit Handschuh bedient, und
   die Leitstand-Groesse ist die im Betrieb erprobte. Wer sie verkleinert,
   verkleinert sie auch fuer den Werkzeugwechsel. */
.schieber-bahn {
  position: relative;
  height: 66px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: var(--page-plane);
  /* hidden, nicht visible: die Fuellung darf nicht aus der Rundung laufen.
     Die 92-Prozent-Marke, fuer die hier visible stand, gibt es nicht mehr —
     sie war eine Erfindung dieser Kopie, der Werkzeugwechsel hat keine. */
  overflow: hidden;
  user-select: none;
  /* ohne das scrollt das Tablet, statt zu schieben */
  touch-action: none;
  display: flex;
  align-items: center;
  padding: 0 4px;
}
/* ⚠️ NICHT var(--icon-ki): die Variable ist seitenlokal in
   werkzeugwechsel.html deklariert und in style.css nirgends — ein geteilter
   Baustein kann sie nicht sehen. Und sie war doppelt schlecht: #9fe870 ist in
   beiden Themen hell, der Text darauf ist var(--text-secondary), und der ist
   im dunklen Thema ebenfalls hell. Sobald die Fuellung den Text erreichte, war
   er praktisch unlesbar. Ein durchscheinender Markenton loest beides: er zeigt
   den Fortschritt und laesst den Text in beiden Themen stehen. */
.schieber-fuellung {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 0;
  background: color-mix(in srgb, var(--brand-primary) 30%, transparent);
}
.schieber-text {
  position: absolute;
  left: 0;
  right: 0;
  text-align: center;
  /* Platz fuer den Griff, damit er den Text nicht verdeckt: Griffbreite plus
     beide Raender. */
  padding-left: 84px;
  font-size: 16px;
  font-weight: 600;
  color: var(--text-secondary);
  z-index: 1;
  pointer-events: none;
}
.schieber-knopf {
  position: relative;
  z-index: 2;
  width: 76px;
  height: 56px;
  border-radius: 12px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  line-height: 1;
  font-weight: 700;
  color: var(--text-primary);
  cursor: grab;
  touch-action: none;
  box-shadow: 0 1px 3px rgba(0,0,0,0.10);
}
.schieber-knopf:active { cursor: grabbing; }
/* Die EINZIGE focus-visible-Regel des QS-Moduls kam bisher inline aus
   werkzeugwechsel.html (Spezifikation 6.5). Hier steht sie jetzt in einer
   Datei — im Messraum wird mit Tastatur gearbeitet. */
.schieber-knopf:focus-visible {
  outline: 3px solid var(--brand-primary);
  outline-offset: 2px;
}