/* Der Umbruch richtet sich nach der Breite des Moduls, nicht nach dem Bildschirm */
#spb { /* container */
  margin: 2rem 0;
}
.spb {
  container: spb / inline-size;
  width: 100%;
  max-width: 100%;
}
.spb-inner {
  --spb-grey: #e4e4e4;
  --spb-line: #a8a8a8;
  --spb-h: 1.75rem;
  font-size: 0.95rem;
  line-height: 1.3;
}

.spb-row { position: relative; height: 1.6em; }
.spb-top { margin-bottom: 0.4rem; }
.spb-bottom { margin-top: 0.4rem; }

.spb-label { position: absolute; top: 0; white-space: nowrap; }
.spb-start { left: 0; }
.spb-end { right: 0; }
.spb-now { left: 0; font-weight: 600; }

.spb-narrow { display: none; }

.spb-track {
  position: relative;
  height: var(--spb-h);
  background: var(--spb-grey);
  border-radius: 4px;
  overflow: hidden;
}
.spb-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  background: var(--linkBorderColor, #0a6ebd);
}
.spb-tick {
  position: absolute;
  top: 0; bottom: 0;
  width: 2px;
  margin-left: -1px;
  background: var(--spb-line);
  opacity: 0.8;
}

.spb-fill, .spb-now {
  transition: width 1.6s cubic-bezier(.2,.7,.2,1),
              left 1.6s cubic-bezier(.2,.7,.2,1),
              transform 1.6s cubic-bezier(.2,.7,.2,1);
}

/* Schmale Darstellung (Modul schmaler als 30 rem, z. B. Smartphone hochkant) */
@container spb (max-width: 30rem) {
  .spb-wide { display: none; }
  .spb-narrow { display: block; }
  .spb-inner { --spb-h: 2.25rem; }
}

@media (prefers-reduced-motion: reduce) {
  .spb-fill, .spb-now { transition: none; }
}