:root {
--color-0:  hsl(0, 0%, 0%);  			/* --- schwarz --- */
--color-0t: hsla(0, 0%, 0%, 0.5);		/* --- schwarz transp --- */
--color-01: hsl(0, 0%, 15%);			/* --- anthrazit --- */
--color-04: hsl(0, 0%, 25%);			/* --- grau dunkel --- */
--color-05: hsl(0, 0%, 36%);			/* --- grau mittel f Text --- */	
--color-06: hsl(45, 5%, 90%);			/* --- grau hell--- */		
--color-08: hsl(45, 5%, 95%);			/* --- grau sehr hell--- */	
--color-09: hsl(0, 0%, 100%);			/* --- weiss --- */	
--color-09t: hsla(0, 0%, 100%, 0.9);	/* --- weiss transp --- */	

--color-10: hsl(4, 69%, 30%); 			/* --- orange dunkel --- */
--color-15: hsl(4, 50%, 45%);	 		/* --- orange rot --- */
--color-17: hsl(42, 48%, 95%); 			/* --- beige hell --- */

--color-20: hsl(145, 80%, 17%); 		/* --- gruen dunkel --- */
--color-25: hsl(146, 97%, 26%); 		/* --- gruen logo --- */
--color-27: hsl(145, 80%, 90%); 		/* --- gruen mittel --- */
--color-28: hsl(145, 45%, 82%); 		/* --- gruen hell --- */	
--color-29: hsl(145, 60%, 94%); 		/* --- gruen sehr hell --- */	
	


/* ---- beige zu beige verlauf ------ */	
--color-170: linear-gradient(160deg, hsl(40, 45%, 91%), hsl(32, 57%, 95%) ); 
	
/* ---- beige zu hellgruen verlauf ------ */
--color-180: linear-gradient(160deg, hsl(32, 100%, 94%), hsl(145, 84%, 80%) );	

/* ---- gruen_warm zu gruen_kalt verlauf ------ */
--color-210: linear-gradient(160deg, hsl(84, 68%, 38%), hsl(145, 95%, 23%) );
	
/* ---- gelb zu gruen verlauf für Schrift ------ */
--color-250: linear-gradient(170deg, hsl(36, 71%, 53%), hsl(145 ,97%, 26%) );	
			
}


/* ---- Background Colors ------ */

 .bg-0 {background-color: var(--color-0);  color: var(--color-09);}
.bg-01 {background-color: var(--color-01); color: var(--color-09);}
.bg-04 {background-color: var(--color-04); }
.bg-06 {background-color: var(--color-06); }
.bg-08 {background-color: var(--color-08); }
.bg-09 {background-color: var(--color-09); }
.bg-09t {background-color: var(--color-09t); }

.bg-10 {background-color: var(--color-10); color: var(--color-09);}
.bg-15 {background-color: var(--color-15); color: var(--color-09);}
.bg-17 {background-color: var(--color-17);}

.bg-20 {background-color: var(--color-20); color: var(--color-09);}
.bg-25 {background-color: var(--color-25); color: var(--color-09);}
.bg-27 {background-color: var(--color-27);}
.bg-28 {background-color: var(--color-28);}
.bg-29 {background-color: var(--color-29);}


/* ---- Background Colors Gradient ------ */

.bg-170 {background: var(--color-170);}

.bg-180 {background: var(--color-180);}

.bg-210 {background: var(--color-210); color: var(--color-09);}


/* --- dunkel-gruen-blau verlauf + Noise --- */
.bg-205 { 
  filter: contrast(100%) brightness(100%);
  background-color: hsl(180, 97%, 26%);
  color: #fff;
  background-image: 
	linear-gradient(300deg, rgba(0,0,0,0.7), rgba(0,0,0,0.3)),
	url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='5' numOctaves='6' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}
  
  

/* ---- Colors ------ */

 .c-0 {color: var(--color-0); }
.c-01 {color: var(--color-01); }
.c-04 {color: var(--color-04); }
.c-06 {color: var(--color-06); }
.c-08 {color: var(--color-08); }
.c-09 {color: var(--color-09) !important; }

.c-10 {color: var(--color-10); }
.c-15 {color: var(--color-15); }
.c-16 {color: var(--color-16); }
.c-17 {color: var(--color-17); }

.c-20 {color: var(--color-20); }
.c-25 {color: var(--color-25); }
.c-27 {color: var(--color-27); }


/* ---- Text-Verlauf gelb zu gruen  ------ */
.c-250, .tgc {
	display: inline-block;
	background: var(--color-250);
	-webkit-text-fill-color: transparent;
	-webkit-background-clip: text;
	color: #dd9933;
}