/* Piktogramme · WizMusic · Version 2026.10.10+97195adf · erzeugt mit icons_build.php --export, nicht von Hand ändern */
.wm-i { width: 1.25em; height: 1.25em; flex: none; vertical-align: -.3em; overflow: visible; }
.wm-i .l { fill: none; stroke: currentColor; stroke-width: var(--wm-i-sw, 1.8); stroke-linecap: round; stroke-linejoin: round; }
.wm-i .f { fill: currentColor; stroke: none; }
.wm-i .t { fill: var(--wm-i-tint, none); stroke: none; }
.wm-i .g { fill: var(--wm-i-glint, none); stroke: none; }
.wm-i .a { transform: var(--wm-i-art, none); }
.wm-i--duo { --wm-i-tint: color-mix(in srgb, currentColor 17%, transparent); --wm-i-glint: var(--glint, #f59e0b); --wm-i-art: translate(.3px, 2.6px) scale(.88); }
.wm-i--16 { width: 16px; height: 16px; }
.wm-i--20 { width: 20px; height: 20px; }
.wm-i--24 { width: 24px; height: 24px; }
.wm-i--32 { width: 32px; height: 32px; }
.wm-i--40 { width: 40px; height: 40px; }
.wm-i--48 { width: 48px; height: 48px; }
.wm-i--64 { width: 64px; height: 64px; }
.btn .wm-i, .nav-link .wm-i, .dropdown-item .wm-i { vertical-align: -.25em; }

/* Kachel: Quadrat mit Brand-Rundung (22,37 %), Tönung der Vereinsfarbe, Symbol in Duo. Größe über --wm-tile. */
.wm-tile {
  --wm-tile: 52px;
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: var(--wm-tile); height: var(--wm-tile); border-radius: var(--radius-tile, 22.37%);
  background: var(--accent-soft, #f1ebfd); color: var(--accent-text, #7c3aed);
}
.wm-tile .wm-i { width: 62%; height: 62%; vertical-align: 0; --wm-i-tint: color-mix(in srgb, currentColor 17%, transparent); --wm-i-glint: var(--glint, #f59e0b); --wm-i-art: translate(.3px, 2.6px) scale(.88); }
.wm-tile--lg { --wm-tile: 64px; }
.wm-tile--sm { --wm-tile: 40px; }

/* Zustandsfarben für Symbole und Punkte (aus icon_emoji.php: 🟢 → dot + wc-ok …) */
.wm-ok { color: var(--ok, #0e8f6b); } .wm-warn { color: var(--warn, #b26a00); } .wm-bad { color: var(--bad, #d1243a); } .wm-info { color: var(--info, #2a5fd0); }
.wm-accent { color: var(--accent-text, #7c3aed); } .wm-mute { color: var(--text-muted, #5b5478); } .wm-faint { color: var(--text-faint, rgba(27, 16, 56, .5)); }

/* Der Funke funkelt, wenn man die Kachel berührt (nur mit Hover-Gerät, nicht bei „weniger Bewegung“) */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .wm-i .g { transform-box: fill-box; transform-origin: center; transition: transform .35s cubic-bezier(.2, .8, .2, 1); }
  a:hover .wm-i .g, .wm-tile:hover .wm-i .g, button:hover .wm-i .g { transform: rotate(90deg) scale(1.25); }
}