/* ══ ZEITLEISTE ══ die Optik der Maßstab-Leiter (Partner von zeitleiter.js)
   Umgezogen aus Dashboard/frontend/css/widgets.css am 10.08.2026, Werte 1:1 —
   der Umzug ist bewusst KEIN Redesign: Die Styling-Runde kommt danach und
   gilt dann zentral für beide Verwender (Dashboard und Sollkurven).

   Die Leiste liest sich überall gleich: [Bahn mit Griff] und rechts der
   Stepper [− Stufe +]. Das Dashboard stellt zusätzlich zwei Zeiten daneben
   (.massstab-zeit); die Sollkurven lassen sie weg — ungenutzte Klassen einer
   Familie sind kein Fehler, zwei Kopien der Familie wären einer.

   Das MARKUP baut jedes Werkzeug selbst in seinen Mount (Dashboard:
   #zeitleiste-mount · Sollkurven: #pp-zeitleiste) — hier wohnt nur die Optik. */

/* Waagerecht gehört die Geste uns (Ausschnitt schieben), senkrecht der Seite
   (scrollen). Ohne die Zeile entscheidet der Browser, und auf dem Tablet
   blieb entweder das Scrollen oder das Schieben auf der Strecke. */
.massstab-bahn {
    touch-action: pan-y;
}

/* Versteckte Leiste ist WIRKLICH weg: [hidden] verliert gegen das eigene
   display der Regel darunter, sobald eine dazukommt — !important ist hier
   die WebKit-Lektion, kein Stilbruch. */
.zeitleiste-mount[hidden] {
    display: none !important;
}

/* EINE Zeile für die Zeitachse. Der Stepper hat ein FESTES Anzeigefeld —
   nichts springt beim Stufenwechsel, jeder Knopf bleibt am Ort (Chris an der
   Zeitkarte). Die Bahn ist bewusst schlicht: ohne Kurven-Miniatur, weil die
   Silhouette nur Bekanntes zeigte. */
.zeitleiste {
    display: flex;
    align-items: center;
    gap: var(--abstand-12);
    height: 52px;                  /* mehr Luft um die Bedienung (Chris, 09.08.) */
    padding: 0 var(--abstand-24);
    background: var(--flaeche-erhaben);
    border-top: 1px solid var(--linie);
}

/* Zeitanzeigen neben der Bahn (nutzt heute nur das Dashboard). Monospace mit
   tabellarischen Ziffern hält die Breite konstant, sonst zappelte die Zahl
   beim Mitzählen und schöbe die Bahn hin und her. */
.massstab-zeit {
    font-family: var(--schriftart-mono);
    font-size: var(--schrift-xs);
    color: var(--text);
    min-width: 62px;              /* traegt HH:MM:SS ohne Zappeln */
    text-align: center;
    letter-spacing: 0.02em;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}

/* Der Stepper in der Form, die an der Zeitkarte abgenommen wurde: ein
   geschlossenes Element aus zwei Knöpfen und einem festen Anzeigefeld
   dazwischen. Am 09.08. abends probiert und verworfen: dieselben drei Zellen
   ohne eigene Fläche, nur durch senkrechte Linien getrennt und bündig an der
   Fensterkante („Kasten im Kasten" vermeiden) — am Bildschirm wurde es nicht
   besser, die Vorlagen-Form bleibt (Chris). */
.massstab-stepper { display: flex; align-items: center; flex-shrink: 0; }
.massstab-stepper button {
    font: inherit;
    font-size: 16px;
    width: 34px;
    height: 30px;
    cursor: pointer;
    background: var(--flaeche-erhaben);
    color: var(--text);
    border: 1px solid var(--linie);
}
.massstab-stepper button:first-child { border-radius: var(--rundung-mittel) 0 0 var(--rundung-mittel); }
.massstab-stepper button:last-child  { border-radius: 0 var(--rundung-mittel) var(--rundung-mittel) 0; }
.massstab-stepper button:hover:not(:disabled) { background: var(--karte-aktiv); }
.massstab-stepper button:disabled { color: var(--text-leise); cursor: default; }
.massstab-wert {
    width: 76px;
    height: 30px;
    line-height: 28px;
    text-align: center;
    font-size: var(--schrift-kompakt);
    color: var(--text);
    background: var(--vertieft);
    border: 1px solid var(--linie);
    border-left: none;
    border-right: none;
    font-variant-numeric: tabular-nums;
}
.massstab-bahn {
    position: relative;
    flex: 1;
    /* 11 px sichtbare Bahn (Chris, 09.08.: „etwas dazwischen" — 8 war zu
       zart, die 14 der Vorlage zu wuchtig). Die Trefferfläche ist grösser als
       die Bahn: Der Rahmen ist 30 px hoch und durchsichtig, damit man auf dem
       Tablet auch trifft, was man sieht (Touch-first). */
    height: 30px;
    cursor: pointer;
}
/* die sichtbare Bahn — mittig in der 30 px hohen Trefferfläche: (30-11)/2 */
.massstab-bahn::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 9.5px;
    height: 11px;
    border-radius: 5.5px;
    background: var(--vertieft);
}
.massstab-griff {
    position: absolute;
    top: 11px;
    height: 8px;
    min-width: 28px;
    border-radius: 4px;
    background: var(--linie);
    cursor: grab;
}
.massstab-griff:hover { background: var(--linie-stark); }