/*
============================================================
  OFIRA – ICONS (Lucide-Sprite)
  Baustein für alle Icons aus img/icons/lucide.svg. Größe
  folgt der Schriftgröße (1em), Farbe dem Text (currentColor).
  Eigene Datei, damit auch Seiten ohne die App-Komponenten
  (Template Studio) Icons darstellen.
============================================================
*/

.icon-sprite {
  position: absolute;
  width:    0;
  height:   0;
  overflow: hidden;
}

.icon {
  display:         inline-block;
  width:           var(--icon-size, 1em);
  height:          var(--icon-size, 1em);
  flex-shrink:     0;
  vertical-align:  -0.125em;
  fill:            none;
  stroke:          currentColor;
  stroke-width:    var(--icon-stroke);
  stroke-linecap:  round;
  stroke-linejoin: round;
  overflow:        visible;
}

.icon--xs { --icon-size: var(--icon-xs); }
.icon--sm { --icon-size: var(--icon-sm); }
.icon--md { --icon-size: var(--icon-md); }
.icon--lg { --icon-size: var(--icon-lg); }
.icon--xl { --icon-size: var(--icon-xl); }
.icon--2xl { --icon-size: var(--icon-2xl); }

/* Drehendes Icon (Aktualisieren, Laden) */
.icon--spin {
  animation: icon-spin var(--duration-spin) linear infinite;
}
@keyframes icon-spin {
  to { transform: rotate(360deg); }
}

/* Farbiger Statuspunkt (Ersatz für gefüllte Kreis-Icons) */
.status-dot {
  display:        inline-block;
  width:          0.5em;
  height:         0.5em;
  border-radius:  var(--radius-full);
  background:     currentColor;
  vertical-align: 0.1em;
  flex-shrink:    0;
}