/* ============================================================================
 * COMPONENT · tc-zeitrennen — Zeit gegen Fortschritt (05.10.2026, #902)
 * ----------------------------------------------------------------------------
 * Markup: js/ui/zeitrennen.js (TC.Zeitrennen) · Library: library-community.html#zeitrennen
 *
 * Ein Balken, zwei Läufer. Die Füllung ist das Werk und bleibt in der Farbe
 * der Werkbank-Balken (`--tc-highlight`), damit eine Karte nicht plötzlich
 * zwei Fortschrittsfarben hat. Die STELLUNG färbt nur den Strich mit der
 * Sanduhr und das Wort darunter:
 *   vorn → --tc-success · im Plan → --tc-text-muted · knapp → --tc-warning
 *   hinten dran → --tc-danger · nur Zeit (Forderung) → --tc-text-muted
 * Die LAGE bringt Bewegung: Endspurt pulsiert, hinten dran rinnt langsam,
 * geschafft glänzt einmal (`--moment`). Bei reduzierter Bewegung steht
 * alles still, Farbe und Wort bleiben (§9: animation-duration 0.01ms).
 *
 * ⚠️ `--tc-zeitrennen-uhr` setzt das Markup am Balken: Strich und Sanduhr
 * lesen dieselbe Position, die Sanduhr bleibt dabei 8 px vom Rand (clamp),
 * sonst ragte sie bei 0 % und 100 % aus der Karte.
 * ========================================================================== */

.tc-zeitrennen {
  --_uhr: var(--tc-text-muted);
}
.tc-zeitrennen--vorn   { --_uhr: var(--tc-success); }
.tc-zeitrennen--knapp  { --_uhr: var(--tc-warning); }
.tc-zeitrennen--hinten { --_uhr: var(--tc-danger); }
.tc-zeitrennen--geschafft { --_uhr: var(--tc-success); }
/* Abgelaufen ist kein Alarm (Briefing 9.4: kein Spott über Fehlschläge):
   leise, egal wie weit hinten. Steht nach `--hinten`, damit es gewinnt. */
.tc-zeitrennen--ueberfaellig { --_uhr: var(--tc-text-muted); }
/* Bei Krenk (#1199): rechtzeitig vorgelegt, das Urteil steht aus. Weder
   Alarm noch Jubel: ruhiger Strich, das Wort in Textfarbe, keine Bewegung. */
.tc-zeitrennen--urteil { --_uhr: var(--tc-text-muted); }

/* Der Balken nimmt den Platz des Kartenbalkens ein (flex: 1 in der Zeile
   der Zielkarte) und hält oben Raum für die Sanduhr frei. */
.tc-zeitrennen--bahn {
  flex: 1 1 auto;
  min-width: 0;
  padding-top: 20px;
}
.tc-zeitrennen__bahn {
  position: relative;
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
}
.tc-zeitrennen__werk {
  display: block;
  height: 100%;
  max-width: 100%;
  border-radius: inherit;
  background: var(--tc-highlight);
}
.tc-zeitrennen--nur-zeit .tc-zeitrennen__werk {
  background: rgba(var(--tc-highlight-rgb), 0.35);
}
.tc-zeitrennen--geschafft .tc-zeitrennen__werk { background: var(--tc-success); }
.tc-zeitrennen--ueberfaellig .tc-zeitrennen__werk { opacity: 0.6; }

/* Die Zielschwelle (Ziel unter 100 %): ein feiner Strich in der Füllfarbe. */
.tc-zeitrennen__ziel {
  position: absolute;
  top: -3px;
  bottom: -3px;
  width: 2px;
  transform: translateX(-50%);
  background: var(--tc-highlight);
  opacity: 0.7;
}

/* Der Strich: wo die Zeit steht. */
.tc-zeitrennen__uhr {
  position: absolute;
  top: -4px;
  bottom: -4px;
  left: var(--tc-zeitrennen-uhr, 0%);
  width: 3px;
  transform: translateX(-50%);
  border-radius: 2px;
  background: var(--_uhr);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45);
}
.tc-zeitrennen__sand {
  position: absolute;
  bottom: calc(100% + 3px);
  left: clamp(8px, var(--tc-zeitrennen-uhr, 0%), calc(100% - 8px));
  transform: translateX(-50%);
  font-size: 13px;
  line-height: 1;
  pointer-events: none;
}

.tc-zeitrennen--unter {
  display: grid;
  gap: 2px;
  margin-top: var(--tc-space-1);
}
.tc-zeitrennen__zeile {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px var(--tc-space-2);
  font-size: var(--tc-text-xs);
  color: var(--tc-text-muted);
}
.tc-zeitrennen__lage {
  font-weight: var(--tc-weight-semibold);
  letter-spacing: 0.02em;
  color: var(--_uhr);
}
.tc-zeitrennen--plan .tc-zeitrennen__lage,
.tc-zeitrennen--offen .tc-zeitrennen__lage,
.tc-zeitrennen--urteil .tc-zeitrennen__lage { color: var(--tc-text-default); }
.tc-zeitrennen__zahlen { font-variant-numeric: tabular-nums; }
.tc-zeitrennen__satz {
  margin: 0;
  font-size: var(--tc-text-sm);
  font-style: italic;
  line-height: 1.45;
  color: var(--tc-text-default);
}

/* --- Bewegung ------------------------------------------------------------ */
@keyframes tc-zeitrennen-puls {
  0%, 100% { transform: translateX(-50%) scale(1); opacity: 1; }
  50%      { transform: translateX(-50%) scale(1.3); opacity: 0.55; }
}
@keyframes tc-zeitrennen-rinnt {
  0%, 70%  { transform: translateX(-50%) rotate(0deg); }
  85%, 100% { transform: translateX(-50%) rotate(180deg); }
}
@keyframes tc-zeitrennen-glanz {
  from { background-position: -120% 0; }
  to   { background-position: 220% 0; }
}
.tc-zeitrennen--endspurt .tc-zeitrennen__sand,
.tc-zeitrennen--endspurt .tc-zeitrennen__uhr {
  animation: tc-zeitrennen-puls 1.4s ease-in-out infinite;
}
.tc-zeitrennen--hinten:not(.tc-zeitrennen--endspurt):not(.tc-zeitrennen--urteil) .tc-zeitrennen__sand {
  animation: tc-zeitrennen-rinnt 4s ease-in-out infinite;
}
.tc-zeitrennen--moment .tc-zeitrennen__werk {
  background-image: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.55) 50%, transparent 70%);
  background-size: 60% 100%;
  background-repeat: no-repeat;
  animation: tc-zeitrennen-glanz 1.4s ease-out 2;
}

@media (prefers-reduced-motion: reduce) {
  .tc-zeitrennen--endspurt .tc-zeitrennen__sand,
  .tc-zeitrennen--endspurt .tc-zeitrennen__uhr,
  .tc-zeitrennen--hinten .tc-zeitrennen__sand,
  .tc-zeitrennen--moment .tc-zeitrennen__werk {
    animation-duration: 0.01ms;
    animation-iteration-count: 1;
  }
}