/* ═══════════════════════════════════════════════════════════════════════════
   BLUE HORIZON DESIGN SYSTEM — components/icon.css
   Version: 0.1.1 · Build: 2026-09-29

   0.1.1 — .bh-icon sitzt jetzt selbst auf der Schriftlinie. Die Ausweich-
   klasse .bh-icon--inline ist ersatzlos entfallen.

     base.css macht jedes svg zu display:block. Für ein Symbol NEBEN Text
     ist das falsch: es fällt auf eine eigene Zeile. Dagegen gab es
     .bh-icon--inline — benutzt wurde sie in KEINEM Projekt, an keiner von
     76 Aufrufstellen. Zwölf davon brachen sichtbar um, gemeldet hat es
     der Nutzer, nicht der Prüfer.

     Eine Ausweichklasse, die niemand nimmt, ist keine Ausweichklasse,
     sondern eine Falle: Sie verlegt die Wahrheit an die Aufrufstelle und
     verlangt, dass 76-mal richtig daran gedacht wird. Die Voreinstellung
     war schlicht falsch herum — ein Symbol steht fast immer neben Text.
     Jetzt steht die Wahrheit an einer Stelle (DESIGN.md §0).

     Warum das die 64 unauffälligen Stellen nicht stört: In einem Flex-
     oder Grid-Behälter wird die Anzeigeart des Kindes ohnehin zu block
     umgerechnet und vertical-align ignoriert. Am 2026-09-29 im Browser
     gegengeprüft: ts-index 7 von 7 Symbolen unverändert, auf den beiden
     anderen öffentlichen Seiten bewegten sich ausschließlich die kaputten.

   Der Rahmen für ein Symbol aus icons.svg. Die Form steht dort, die Größe
   hier — ein Wert und seine Menge sind zweierlei (DESIGN.md §0d).

   .bh-icon setzt nur Grundgröße und Schriftlinie. Wo ein Pattern eine
   eigene Größe braucht, gewinnt es von allein: `.bh-thread__event > svg`
   ist spezifischer als `.bh-icon` und setzt dort seit jeher 14px. Deshalb
   steht hier KEIN !important und keine Ausnahmeliste.

   Ein Symbol, das ALLEIN in seinem Behälter steht, verträgt beides. Wo
   doch einmal ein Block gebraucht wird, setzt die Stelle ihn selbst —
   eine Stelle mit Grund ist besser als eine Klasse ohne Nutzer
   (MIGRATION.md §4).
   ═══════════════════════════════════════════════════════════════════════════ */

.bh-icon {
  width: var(--bh-icon-size);
  height: var(--bh-icon-size);
  flex: none;
  /* Auf der Schriftlinie, nicht darüber. Siehe Kopf. */
  display: inline-block;
  vertical-align: -0.125em;
}