/* ============================================================
   icons.css – Zentrale Icon-Steuerung (SSOT)
   Bock Maschinenbau GmbH
   Nutzt Design-Tokens aus variables.css.

   Jedes Icon wird von der globalen Funktion {{ icon("name") }}
   (seo_engine/media/icons.py, Registry content/icons.yaml) als
   <svg class="bm-icon bm-icon--<name>" …> ausgegeben.

   HIER lebt die GESAMTE optische Steuerung: Groesse, Farbe,
   vertikale Ausrichtung, Richtungs-Rotation. Kein width/height
   oder fill in Templates — eine Stelle aendern statt 20 Sprachen.
   ============================================================ */

/* ── Basis: skaliert mit der Schriftgroesse, folgt der Textfarbe ── */
.bm-icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;   /* optische Grundlinie zu Text */
  flex: none;                 /* nie schrumpfen im Flex-Kontext */
  fill: currentColor;         /* monochrome Icons folgen color */
  line-height: 0;
  /* Akzent folgt standardmaessig der Icon-Farbe → NIE unsichtbar, in
     keinem Container (siehe Akzent-Block unten). Rot ist Opt-in. */
  --icon-accent: currentColor;
}

/* ── Linien-Icons (style: stroke): Kontur statt Flaeche ─────── */
/* Muss als Klasse kommen — ein inline fill="none" wuerde von der
   Basisregel .bm-icon{fill:currentColor} ueberschrieben.            */
.bm-icon--stroke {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ── Akzent-Layer der Linien-Icons ──────────────────────────────
   Die Akzent-/Filled-Pfade (Funken, Lichtbogen, Spruehkegel, aktive
   Kante) sind eigene Detail-Geometrie. Ihre FARBE folgt standardmaessig
   der Icon-Farbe (--icon-accent = currentColor, gesetzt an .bm-icon).

   WARUM currentColor als Default und nicht Bock-Rot: Die Fach-Icons
   sitzen auf dieser Site fast immer in FARBIGEN Badges — .service-card-icon
   (roter Verlauf, weisses Icon), .usp-icon (rot-Tint, Hover invertiert
   nach rot), Cert-Siegel, u.a. Auf rotem Grund kann ein zweiter FIXER
   Rot-Ton nicht kontrastieren → er verschwaende (rot auf rot). currentColor
   dagegen ist die ohnehin kontrastierende Icon-Farbe → NIE unsichtbar,
   in JEDEM Container, ohne eine einzige Pro-Container-Regel. */
.bm-icon--stroke .bm-icon__accent { stroke: var(--icon-accent); }
.bm-icon--stroke .bm-icon__filled { fill: currentColor; stroke: none; }
.bm-icon--stroke .bm-icon__filled.bm-icon__accent { fill: var(--icon-accent); }

/* Opt-in: Marken-ROT als Akzent — bewusst NUR fuer Icons auf NEUTRALEM/
   hellem Grund (nicht in farbigen Badges), per Klasse am Icon selbst:
     {{ icon("plasma", cls="bm-icon--spark") }}
   Setzt das Token direkt am <svg> → gewinnt gegen den Default, aber nur
   dort, wo es explizit gewuenscht (und sicher) ist. */
.bm-icon--spark { --icon-accent: var(--color-accent); }

/* ── Groessen-Modifier (statt inline width/height) ──────────── */
.bm-icon--xs { width: 0.75rem; height: 0.75rem; }
.bm-icon--sm { width: 1rem;    height: 1rem; }
.bm-icon--md { width: 1.5rem;  height: 1.5rem; }
.bm-icon--lg { width: 2rem;    height: 2rem; }
.bm-icon--xl { width: 3rem;    height: 3rem; }

/* ── Farb-Modifier (Akzent/gedaempft) ───────────────────────── */
.bm-icon--accent { color: var(--color-accent-text); }
.bm-icon--muted  { color: var(--color-text-muted, currentColor); opacity: 0.7; }

/* ── Richtungs-Rotation: EIN Glyph (Basis zeigt nach RECHTS) ── */
/* Der Renderer setzt bm-icon--dir-* nur bei directional-Icons.   */
.bm-icon--dir-left  { transform: rotate(180deg); }
.bm-icon--dir-up    { transform: rotate(-90deg); }
.bm-icon--dir-down  { transform: rotate(90deg); }
/* dir-right = native Ausrichtung → keine Klasse, keine Regel.    */

/* ── Sanfte Rotation z.B. fuer Lade-/Refresh-Zustaende ──────── */
@media (prefers-reduced-motion: no-preference) {
  .bm-icon--spin { animation: bm-icon-spin 1s linear infinite; }
}
@keyframes bm-icon-spin { to { transform: rotate(360deg); } }