/*
  GENO Group eG — Icon-System
  Quelle: Tabler Icons (MIT-Lizenz, https://tabler.io/icons), Outline-Stil.
  Referenzdateien liegen lokal unter assets/icons/tabler/ (Quelle der Pfaddaten).

  Einbindung: <svg> wird INLINE in die Seite eingebettet (kein <use>/Sprite, kein <img>),
  damit `stroke="currentColor"` zuverlässig per CSS einfärbbar bleibt und keine
  Cross-Origin-/Sprite-Ladeprobleme entstehen. Größe & Strichstärke laufen über
  diese Klassen, NICHT über width/height/stroke-width im Markup.

  Beispiel:
  <svg class="icon" aria-hidden="true" focusable="false" viewBox="0 0 24 24" fill="none"
       stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
    <path d="…" />
  </svg>
*/

:root {
  --icon-size-sm: 16px;
  --icon-size-md: 24px;
  --icon-size-lg: 32px;
  --icon-size-xl: 48px;
  --icon-stroke: 1.75;
  --icon-color: currentColor;
  --icon-color-accent: var(--color-primary);
}

.icon {
  display: inline-block;
  width: var(--icon-size-md);
  height: var(--icon-size-md);
  stroke: var(--icon-color);
  stroke-width: var(--icon-stroke);
  fill: none;
  vertical-align: middle;
  flex-shrink: 0;
}

.icon--sm { width: var(--icon-size-sm); height: var(--icon-size-sm); }
.icon--lg { width: var(--icon-size-lg); height: var(--icon-size-lg); }
.icon--xl { width: var(--icon-size-xl); height: var(--icon-size-xl); }

.icon--accent { stroke: var(--icon-color-accent); }
.icon--on-primary { stroke: var(--color-on-primary); }
.icon--on-accent { stroke: var(--color-on-accent); }

/* Dekorative Icons neben Text drehen sich nicht mit Reduced-Motion-Animationen mit;
   eigene Übergänge (z.B. Akkordeon-Chevron) respektieren prefers-reduced-motion global (main.css). */