/* icons.css – wiederverwendbare Maskierungs-Icons
   Verwendung im HTML:
   <span class="icon-mask icon-shield"></span>
   Farbe folgt der Textfarbe (currentColor), Größe über width/height. */

.icon-mask {
  display: inline-block;
  width: 24px;
  height: 24px;
  flex: 0 0 24px;              /* schrumpft in Flex-Containern nicht */
  background-color: currentColor;
  -webkit-mask: var(--icon) no-repeat center / contain;
          mask: var(--icon) no-repeat center / contain;
}

/* --- einzelne Icons: pro Motiv eine Zeile ergänzen --- */

.icon-shield 
{
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 20 6v6c0 5-3.4 8-8 9-4.6-1-8-4-8-9V6l8-3Z'/%3E%3Cpath d='m8.5 12 2.2 2.2 4.8-5'/%3E%3C/svg%3E");
}


.icon-chat 
{
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 11.5a8.38 8.38 0 0 1-8.5 8.5 8.5 8.5 0 0 1-3.9-.9L3 21l1.9-5.6a8.5 8.5 0 0 1-.9-3.9 8.38 8.38 0 0 1 8.5-8.5 8.38 8.38 0 0 1 8.5 8.5Z'/%3E%3Cline x1='8.5' y1='10' x2='15.5' y2='10'/%3E%3Cline x1='8.5' y1='13.5' x2='13' y2='13.5'/%3E%3C/svg%3E");
}