@charset "UTF-8";/* kohi20-light.css
*/
/*
dkl KOHIgrün 	#abc432; 	rgb(171, 196, 50); 	hsl(70, 59%, 48%);
helles KOHIgrün #9c0; 		rgb(153, 204, 0); 	hsl(75, 100%, 40%);
hellgrün 		#bd5; 
dkl grau 		#444 		rgb(68, 68, 68);	hsl(0, 0%, 27%);
helles grau 	#ddd		rgb(221, 221, 221)	hsl(0, 0%, 87%);
helleres grau 	#ddd6		
hellgrau	#eeeded   rgb(238, 237, 237) hsl(0, 3%, 93%)


*/	
:root {
	--color: rgb(5, 5, 5); /* fast schwarz */
	--color-light: rgb(253, 253, 253); /* fast weiß */
	
	/* --background-color: rgb(250, 250, 250); */
	--background-color: 	 	rgb(250, 250, 250); /* entspricht #fafafa */
	--background-color_wrap: 	rgb(253, 253, 253); /* wenn nicht da, wird das für dark genommen */
	
	
	--icon-filter: invert(0%);
	--icon-filter_hover: invert(0);
	--image-filter: grayscale(0%);   

	--color-primary: 			hsl(75, 100%, 40%); /* kohigrün #9c0 rgb(153, 204, 0); */
	--color-accent: 			hsl(75, 100%, 40%); 
	--color_social:				#e1efba;/* rgb(225, 239, 186) hsl(76, 62%, 83%) ganz helles grün */
	--color_social_hover:		#6d8785; /* graugrün*/

	
	
	
	--link-color: 				hsl(240, 8%, 12%); /* hsl(75, 100%, 40%);  helles kohigruen - #9c0; rgb(153, 204, 0);*/
	--bg-sondermeldung:			#ddd6;
	--c-ddd: hsl(0, 0%, 80%);
	--c-ddd2: hsl(0, 0%, 60%);
	
	--lm_hellgrau:  rgb(238, 237, 237); /*hsl(0, 3%, 93%) #eeeded */	
	
	--dark-light: #444;	
	--figcaption: #444;
	
	--color-contrast-high: 		hsl(240, 4%, 20%);
	--color-contrast-high-h: 	240;
	--color-contrast-high-s: 	4%;
	--color-contrast-high-l: 	20%;
	
	--color-contrast-low: 		hsl(240, 1%, 83%);
	--color-contrast-low-h: 	240;
	--color-contrast-low-s: 	1%;
	--color-contrast-low-l: 	83%;
	
	--button-initial:			#ddd;
	/*--button-clicked:			hsl(75, 100%, 40%); */
	
	/* fkt aus unerfindlichen Gründen nicht */
	--user-switchOff:			#ffffff;
	--user-switchOn:			#000000;
	
	--cookie-background: 		hsl(0, 0%, 27%);
	--cookie-text: 				hsl(0, 0%, 87%);
	
	--darkOnDark: #333;
	--StayDark: #333;
	--mittelgrau: rgb(144, 143, 143);
	
	--highlight: rgb(0, 188, 212);  /* türkisblau, krasser Effekt zu dem Kohigrün  */ 

	--lang_de:#333;
	--lang_en:rgb(94, 93, 93);
}

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

/* sehr wichtig! */
body,
[data-theme] {
	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);  
}
 

/* 
https://css-tricks.com/almanac/selectors/a/attribute/
https://css-tricks.com/a-complete-guide-to-data-attributes/
*/

/* 
https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_Media_Queries_for_Accessibility
This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.
https://dev.to/koralarts/css-media-queries-for-accessibility-506j 
https://www.gwhitworth.com/blog/2017/04/how-to-use-ms-high-contrast/
It’s about UX, not design
https://css-tricks.com/accessible-svgs-high-contrast-mode/
https://sarahmhigley.com/writing/whcm-quick-tips/
this technique comes with an enormous caveat: the -ms-high-contrast media query will be retired in favor of the standards-based forced-colors media query. Forced colors has the benefit of being CSS spec, with a cross-browser cross-OS set of standardized system color keywords.
*/
@media screen and (-ms-high-contrast: active) { 
	:root {
	--color-primary: 			hsl(75, 100%, 31%); /* high contrast, Wert 3 // #78a000 */
	--color-accent: 			hsl(75, 100%, 31%); 
	--color_social:				#99d000;/*  hsl(76, 100%, 41%) grün */
	}
}

  
/* 2020-08-11 Gedankengang:
light.css wird immer geladen, 
Ziel: wenn darkmode nicht supported wird, zeige den Switcher nicht an 
#depends_on_darkmode-support {
	display:none; 
}*/