// ────────────────────────────────────────────────────────────────
// Komponente · Icon
//
// Die Zeichen selbst sind Markup (Lucide, ISC) — das System kennt nur ihre
// Groesse und ihren Platz. Farbe ist immer `currentColor`: ein Zeichen nimmt
// die Farbe seines Kontexts an, es gibt keinen zweiten Wert zu pflegen.
//
// WARUM EM UND NICHT PX: ein Zeichen waechst mit dem Text, neben dem es steht
// — in der Leiste anders als in einer Listenzeile. Keine Groesse von Hand.
// ────────────────────────────────────────────────────────────────

.icon {
  display: inline-block;
  flex: 0 0 auto;
  width: 1.25em;
  height: 1.25em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: -0.25em;
  overflow: visible;
}

// Ein Zeichen allein in einem runden Knopf: mittig, ohne Text daneben.
.btn--icon .icon {
  vertical-align: 0;
}