/*
  style.css – Frontend + Editor Basisstyles

  Zweck:
  - Die Glyphe verhält sich wie ein Textzeichen:
    - Größe folgt font-size (1em)
    - Farbe folgt currentColor
  - SVG wird als Mask geladen (Icon-spezifische URL kommt per inline CSS Mapping aus PHP).

  Hinweis:
  - Falls ein Browser keine CSS-Masks unterstützt, bleibt die Glyphe leer.
    (Moderne Chrome/Firefox/Safari können das.)
*/

.besd-svg-glyph{
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
  background-color: currentColor;

    margin-top: -8px;
 


  -webkit-mask-image: var(--besd-icon);
  mask-image: var(--besd-icon);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;

  /* fühlt sich „glyphig“ an */
  user-select: none;
  -webkit-user-select: none;
}

.besd-svg-glyphs-grid .besd-svg-glyph{	margin-top: 0px;}

/* Optional: bisschen Luft, wenn Icons direkt neben Text stehen */
.besd-svg-glyph + .besd-svg-glyph{ margin-left: .08em; }