/* ───────────────────────── Piktogramme ─────────────────────────
   icon('schlüssel') (app/bootstrap.php, Iconservice) liefert <svg class="wc-i"> mit drei Ebenen:
     .l  Linie    Strich in currentColor, runde Enden, Stärke --wc-i-sw (Standard 1,8). Trägt die Information.
     .t  Tönung   weiche Fläche in der Textfarbe (17 %), nur im Duo-Modus.
     .g  Funke    vierzackiger Stern des Familienzeichens in --glint, nur im Duo-Modus, reiner Dekor.
   Einfarb ist der Normalfall (Knöpfe, Listen, Überschriften); Duo gehört auf Kacheln und Leerzustände (.wc-tile).

   Eigene Datei, damit auch Seiten ohne app-ui.css (Plattform, eigenständige und öffentliche Seiten) die Symbole richtig
   zeichnen: ohne dieses Stylesheet hätte ein Inline-<svg> keine Größe. Alle Farb-Tokens haben Rückfallwerte; in der App
   liefert app-ui.css die echten (Vereinsfarbe, hell/dunkel). Die Seiten der App laden diese Datei über layout/header.php. */
/* @icons:begin (icons_build.php --export liest diesen Block für die Schwester-Apps; Präfix wc- wird dort ersetzt) */
.wc-i { width: 1.25em; height: 1.25em; flex: none; vertical-align: -.3em; overflow: visible; }
.wc-i .l { fill: none; stroke: currentColor; stroke-width: var(--wc-i-sw, 1.8); stroke-linecap: round; stroke-linejoin: round; }
.wc-i .f { fill: currentColor; stroke: none; }
.wc-i .t { fill: var(--wc-i-tint, none); stroke: none; }
.wc-i .g { fill: var(--wc-i-glint, none); stroke: none; }
.wc-i .a { transform: var(--wc-i-art, none); }
.wc-i--duo { --wc-i-tint: color-mix(in srgb, currentColor 17%, transparent); --wc-i-glint: var(--glint, #f59e0b); --wc-i-art: translate(.3px, 2.6px) scale(.88); }
.wc-i--16 { width: 16px; height: 16px; }
.wc-i--20 { width: 20px; height: 20px; }
.wc-i--24 { width: 24px; height: 24px; }
.wc-i--32 { width: 32px; height: 32px; }
.wc-i--40 { width: 40px; height: 40px; }
.wc-i--48 { width: 48px; height: 48px; }
.wc-i--64 { width: 64px; height: 64px; }
.btn .wc-i, .nav-link .wc-i, .dropdown-item .wc-i { vertical-align: -.25em; }

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

/* Zustandsfarben für Symbole und Punkte (aus icon_emoji.php: 🟢 → dot + wc-ok …) */
.wc-ok { color: var(--ok, #0e8f6b); } .wc-warn { color: var(--warn, #b26a00); } .wc-bad { color: var(--bad, #d1243a); } .wc-info { color: var(--info, #2a5fd0); }
.wc-accent { color: var(--accent-text, #7c3aed); } .wc-mute { color: var(--text-muted, #5b5478); } .wc-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) {
  .wc-i .g { transform-box: fill-box; transform-origin: center; transition: transform .35s cubic-bezier(.2, .8, .2, 1); }
  a:hover .wc-i .g, .wc-tile:hover .wc-i .g, button:hover .wc-i .g { transform: rotate(90deg) scale(1.25); }
}
/* @icons:end */

/* Sprach-Kürzel im Profil-Menü: zweibuchstabiger Chip statt Flaggen-Emoji (Windows stellt Flaggen nur als Buchstaben dar, nie als Bild). Nur WizClub. */
.wc-lang {
  display: inline-flex; align-items: center; justify-content: center; min-width: 2em; height: 1.5em; padding: 0 .4em; margin-right: .35rem;
  border-radius: .4em; font-size: .68rem; font-weight: 800; letter-spacing: .04em; line-height: 1; vertical-align: .05em;
  background: var(--accent-soft, #f1ebfd); color: var(--accent-text, #7c3aed);
}
.dropdown-item.active .wc-lang { background: color-mix(in srgb, currentColor 18%, transparent); color: inherit; }