@charset "UTF-8";
:root {
  /* 
  --color: rgb(250, 250, 250); fast weiss */
  
  --color: rgb(212,212,212); /* grau 156, 156, 156*/
  
  --color-light: #222; /* fast schwarz */
  
  --background-color: rgb(5, 5, 5);

	/* --link-color: rgb(0, 188, 212);  türkisblau, krasser Effekt zu dem Kohigrün  */ 
	--icon-filter: invert(100%);
	--icon-filter_hover: invert(40%);
	--image-filter: grayscale(20%); /* 50% ist mir deutlich zu stark, zum besseren Sehen aber sinnvoll */	
	
	--color-primary: 			hsl(75, 62%, 55%); /* light hsl(75, 100%, 40%); kohigrün #9c0 rgb(153, 204, 0); */
	--color-accent: 			rgb(0, 188, 212); 
	--color_social:				#e1efba;/* rgb(225, 239, 186) hsl(76, 62%, 83%) ganz helles grün */
	--color_social_hover:		#6d8785; /* graugrün*/

	--background-color: 		hsl(0, 1%, 11%); /*#222;*/
	--background-color_wrap: 	rgb(5,5,5);	
	--link-color: 				hsl(0, 0%, 98%); /*dkl kohigrün #abc432 rgb(171, 196, 50); */
	--bg-sondermeldung:			#111;
	--c-ddd: 					hsl(0, 0%, 40%);
	
	--color-contrast-high: 		hsl(0, 0%, 89%);
	--color-contrast-high-h: 	0;
	--color-contrast-high-s: 	0%;
	--color-contrast-high-l: 	89%;
	
	--color-contrast-low: 		hsl(252, 4%, 25%);
	--color-contrast-low-h: 	252;
	--color-contrast-low-s: 	4%;
	--color-contrast-low-l: 	25%;
	
	--lm_hellgrau:  rgb(49, 49, 53); /* hsl(240, 4%, 20%) #313135*/
	
	--dark-light: rgb(212,212,212);	/*#eeeded(238,237,237) helles grau */
	--figcaption: rgb(212,212,212);
	
	--darkOnDark: #333;
	--StayDark: #333;
	--mittelgrau: rgb(144, 143, 143);
	
	--button-initial:			#ddd;
	/*--button-clicked:			hsl(75, 100%, 40%); */
	
	/* fktn */
	--user-switchOff:			#000000;
	--user-switchOn:			#ffffff;
	
	--cookie-background: 		hsl(0, 0%, 27%);
	--cookie-text: 				hsl(0, 0%, 87%);
	
	--highlight: rgb(0, 188, 212);  /* türkisblau, krasser Effekt zu dem Kohigrün  */ 
	
	--lang_de:rgb(177, 174, 174);
	--lang_en:rgb(144, 143, 143);
}

/* ########################################################## */
/* ########################################################## */
/* ########################################################## */

[data-theme="dark"] {
	background-color: hsl(0, 0%, 98%);
	background-color: var(--background-color);
	color: hsl(240, 4%, 20%);
	color: var(--color-contrast-high);
	
	font-family: var(--fontFliesstext);
	background-color: var(--background-color);
	color: var(--color);
	transition:
		color var(--duration) var(--timing),
		background-color var(--duration) var(--timing);  
}

img[src*=".svg"] {
  filter: var(--icon-filter);
}

img:not([src*=".svg"]) {
  filter: var(--image-filter);
}

img.logo[src*=".svg"] {
  filter: grayscale(0);
  background:#fff;
}
img.no-filter[src*=".svg"] {
  filter: grayscale(0);
  background:transparent;
}

/* 2020-08-11 Gedankengang: light.css wird immer geladen, 
Ziel: wenn darkmode supported wird, zeige den Switcher an 
#depends_on_darkmode-support {
	display:block; 
}
*/
/*
2020-08-07 12:46:46 2020-08-07 13:02:31
### https://nandovieira.com/supporting-dark-mode-in-web-content
### the (prefers-color-scheme: dark) media query is available on the following devices.
macOS Safari 13 or newer.
iOS Safari 13.2 or newer.
Android Browser 76 or newer.
Chrome for Android 78 or newer.
Firefox for Android 68 or newer.
Opera 62 or newer.
Chrome 76 or newer.
Firefox 67 or newer.
Microsoft Edge 76 or newer.
*/

/* ### kohi20-dark.css -> light-on-dark */
/* ### 
dkl KOHIgrün 	#abc432; 	rgb(171, 196, 50); 	hsl(70, 59%, 48%);
helles KOHIgrün #9c0; 		rgb(153, 204, 0); 	hsl(75, 100%, 40%);
türkisblau rgb(0, 188, 212); // krasser Effekt zu dem Kohigrün  
grau #9c9c9c rgb(156, 156, 156)
*/