/* Farben für die Icons, Links und Buttons */

:root {
	
	--IconColor: #808080; /* normale Farbe von Beschriftungs-Icons (keine Links) - bei positiver Darstellung ohne Hintergrund*/
	
	--IconAColor: #717171; /* Icon als Link - normale Farbe */
	--IconAHover: #1c94c4; /* Hover-Farbe von Icon-Links) */
	
	--IconButtonHG: #f2f2f2; /* Icon als Button - HG-Fläche */ 
	--IconButtonAColor: #d0d0d0; /* Icon als Button: Farbe des Links (des Icons auf der HG-Fläche) */
	--IconButtonHGHover: #e6e6e6; /* Icon als Button: Hover-Farbe des Icons */
	
	--IconButtonHGInaktiv:#f2f2f2; /* inaktiver Button - HG-Farbe */ 
	--IconButtonAColorInaktiv: #dfdfdf; /* inaktiver Button: Icon-Farbe */

	--IconButtonHGHighlight: #f2f2f2; /* gehighlighteter Button - HG-Farbe */ 
	--IconButtonAColorHighlight: #ff9b00; /* gehighlighteter Button: Icon-Farbe */

}
/* SVGs */

span.icon.button {
	padding: 0.1em 0.1em;
	border-radius: 0.4em;
	background-color: var(--IconButtonHG);
	top: 0.05em;
	position: relative;
	margin: 0.2em;
}
span.icon.button svg g#Spread path {
	fill: var(--IconButtonColor);
}


span.icon.button.inaktiv svg g#Spread path {
	fill: var(--IconButtonAColorInaktiv);
}
span.icon.button.inaktiv {
	background-color: var(--IconButtonHGInaktiv);
}


span.icon.button.highlight svg g#Spread path {
	fill: var(--IconButtonAColorHighlight);
}
span.icon.button.highlight {
	background-color: var(--IconButtonHGHighlight);
}

span.icon {
	
}

/* ersten Button in einem P etc. nicht links einrücken */
/*
* > a:first-child > span.icon {
  margin-left: 0;
}
*/
span.icon svg {
	height: 1em;
	width: 1em;
	position: relative;
	top: 0.2em;
	margin:0 0.3em;
}

span.icon.button svg {
	height: 0.9em;
	width: 0.9em;
	top: 0.06em;
	left: -0.02em;
}

span.icon svg g#Spread path {
	fill: var(--IconColor);
}


a:link span.icon svg g#Spread path,
a:visited span.icon svg g#Spread path {
	fill: var(--IconAColor); /* sonst dominiert das span.icon-Rule */
}
a:hover span.icon svg g#Spread path {
	fill: var(--IconAHover);
}

a:hover span.icon svg g#Spread path {
	fill: var(--IconAHover);
}
a:hover span.icon.button {
	background-color: var(--IconButtonHGHover);
}