/* ═══════════════════════════════════════════════════════════════════════
   ICONS — Lucide-Sprite, ersetzt die ~1.160 Emoji
   Wird nach tokens.css und vor components.css geladen.
   ═══════════════════════════════════════════════════════════════════════ */

.ic {
  display: inline-block;
  flex: none;                    /* nie schrumpfen, auch nicht in engen Flex-Zeilen */
  vertical-align: -0.125em;      /* auf die Schriftgrundlinie ausrichten */
  width: 16px; height: 16px;
  fill: none;
  stroke: currentColor;          /* erbt die Textfarbe — deshalb lokales <use> */
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Strichstärke sinkt mit der Größe, damit sie optisch konstant bleibt.
   Ohne das wirken 24px-Icons fett und 12px-Icons dünn. */
.ic-12 { width: 12px; height: 12px; stroke-width: 2.25; }
.ic-14 { width: 14px; height: 14px; stroke-width: 2;    }
.ic-16 { width: 16px; height: 16px; stroke-width: 2;    }
.ic-18 { width: 18px; height: 18px; stroke-width: 1.75; }
.ic-20 { width: 20px; height: 20px; stroke-width: 1.75; }
.ic-24 { width: 24px; height: 24px; stroke-width: 1.5;  }

/* Semantische Einfärbung — nur wo das Icon die Bedeutung trägt.
   Steht daneben farbiger Text, erbt das Icon ihn über currentColor. */
.ic-danger  { color: var(--da-ink); }
.ic-warning { color: var(--wa-ink); }
.ic-success { color: var(--ok-ink); }
.ic-info    { color: var(--in-ink); }
.ic-muted   { color: var(--t-3);    }
.ic-brand   { color: var(--brand-mark); }

/* ── Statuspunkte ──────────────────────────────────────────────────────
   Die 30 farbigen Emoji-Kreise (🔴🟡🟢…) werden das hier, nicht SVG.
   Ein Kreis ist keine Zeichnung, sondern ein Zustand.
   ─────────────────────────────────────────────────────────────────── */
.dot {
  display: inline-block; flex: none;
  width: 6px; height: 6px; border-radius: var(--r-full);
  background: var(--t-4);
  vertical-align: 0.05em;
}
.dot-danger  { background: var(--da-fill); }
.dot-warning { background: var(--wa-fill); }
.dot-success { background: var(--ok-fill); }
.dot-info    { background: var(--in-fill); }
.dot-neutral { background: var(--t-4);     }

/* Kategoriepunkt im Badge — Farbe kommt per --cat vom Aufrufer.
   Siehe EMOJI_DOT in js/icons/emoji-map.js und --cat-* in tokens.css. */
.vb-cat::before {
  content: '';
  width: 6px; height: 6px; border-radius: var(--r-full);
  background: var(--cat, var(--t-4));
  flex: none;
}

/* ── Ladezustand ───────────────────────────────────────────────────────
   Ersetzt die 66 nackten „Lädt…"-Texte, wo kein Skeleton passt.
   ─────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  .ic-spin { animation: ic-spin 900ms linear infinite; }
}
@keyframes ic-spin { to { transform: rotate(360deg); } }