/*
 * idf-ampel-dot - Farbiger Ampel-Punkt fuer Listen-/Positions-Zellen.
 *
 * Konsument: angebote (Markt-Preis-Ampel, Renderer idf-preis-ampel-cell.js).
 * Farben ausschliesslich ueber Design-Tokens (§7.12). "Zu guenstig" bewusst
 * kuehl (--accent), damit es nicht mit der Teuer-Richtung (gelb -> rot)
 * verwechselt wird.
 *
 * Laedt automatisch ueber infrastructure/page-styles/idf-page-styles.php an
 * derselben Bedingung wie idf-list-grid.css ($useListEngine || $useListGrid),
 * kein eigenes Flag (Muster idf-bild-cell.css).
 */
.idf-ampel-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  vertical-align: middle;
  background: var(--mid, #555);
}
.idf-ampel-dot.is-guenstig { background: var(--accent, #167ea0); } /* unter Markt */
.idf-ampel-dot.is-gut      { background: var(--green, #2e8540); }  /* gut kalkuliert */
.idf-ampel-dot.is-hoch     { background: var(--yellow, #f9ab00); } /* oberes Segment */
.idf-ampel-dot.is-teuer    { background: var(--red, #e11d21); }    /* ueber Markt */
/* kein Marktvergleich: hohler, gestrichelter Punkt (dezent). */
.idf-ampel-dot.is-none {
  background: transparent;
  border: 1px dashed var(--mid, #555);
  opacity: 0.6;
}