/* idf-lauf-fenster: Fenster, solange ein Vorgang laeuft (Issue 1725, als
   Baustein seit Issue 1822). Drehendes Zeichen und gross daneben, was gerade
   passiert, darunter ein Balken, der mitlaeuft, und klein der Zaehler oder
   die Zeit (seit Issue 1863; davor stand der Zaehler gross). Der Balken
   schimmert, damit man auch zwischen zwei Schritten sieht, dass gearbeitet
   wird. */
.idf-lauf {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.idf-lauf-kopf {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--font-lg);
  font-weight: 600;
  min-width: 0;
}
.idf-lauf-dreht {
  color: var(--accent);
}
.idf-lauf-balken {
  position: relative;
  height: var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--ink-8-a);
  overflow: hidden;
}
.idf-lauf-fuellung {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  background: var(--accent);
  transition: width 0.4s ease;
}
.idf-lauf-balken::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--white) 50%, transparent), transparent);
  transform: translateX(-100%);
  animation: idf-lauf-schimmer 1.4s ease-in-out infinite;
}
@keyframes idf-lauf-schimmer {
  to { transform: translateX(100%); }
}
@media (prefers-reduced-motion: reduce) {
  .idf-lauf-balken::after { animation: none; }
}
/* Ohne Schrittzahl (Issue 1855): ein Stück Balken wandert durch die Bahn,
   statt einen Stand zu behaupten. Der Schimmer entfällt, er läge darüber. */
.idf-lauf.is-unbestimmt .idf-lauf-fuellung {
  width: 35%;
  transition: none;
  animation: idf-lauf-wandern 1.6s ease-in-out infinite;
}
.idf-lauf.is-unbestimmt .idf-lauf-balken::after { display: none; }
@keyframes idf-lauf-wandern {
  from { transform: translateX(-100%); }
  to   { transform: translateX(286%); }
}
@media (prefers-reduced-motion: reduce) {
  .idf-lauf.is-unbestimmt .idf-lauf-fuellung { animation: none; width: 100%; opacity: 0.25; }
}
/* Die grosse Zeile: zu langer Text endet mit drei Punkten, das Zeichen
   davor behaelt seinen Platz. */
.idf-lauf-dreht {
  flex: none;
}
.idf-lauf-gerade {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Kleine Zeilen: der Zaehler oder die verstrichene Zeit, darunter der Stand
   des Aufrufers. */
.idf-lauf-zahl,
.idf-lauf-stand {
  font-size: var(--font-xs2);
  color: var(--ink-75);
}
.idf-lauf-zahl:empty,
.idf-lauf-stand:empty {
  display: none;
}
.idf-lauf-hinweis {
  margin: 0;
  font-size: var(--font-xs2);
  color: var(--ink-50);
}