/* *************** */
/* BASIS-VARIABLEN */
/* *************** */

:root {
	--gold-color: #F39C12;						/* Goldfarbe für Sterne */
	
    --primary-red: #a91b1b;						/* Spiele-Check ROT */
    --accent-gold: #e3b15c;						/* Spiele-Check GOLD */
	--select-blue: #f0f8ff;	
	--select-blue-accented: #3182ce;		
	
	--primary-color: var(--primary-red);		/* Standardfarbe für Links, Action-Icons, Buttons ... */
	--secondary-color: var(--accent-gold);		/* Standardfarbe für Icons ohne Funktion ... */
	--light-color: #888;						/* Leicht verblasste Schriftfarbe */
	--admin-color: #da37bd;						/* Farbe für Admin-Funktionen */
	
	--bg-color: lightgrey;						/* Hintergrundfarbe */
	--bg-color-rgb: 211, 211, 211;				/* Hintergrundfarbe */
	--container-bg: #fff;						/* Hintergrundfarbe großer Content-Bereich */
	--text-main: #2c3e50;						/* Haupt-Schriftfarbe + Schriftfarbe für MouseOver Effekte bei Links */
	--text-inverted-main: #e0e0e0;				/* Invertierte Haupt-Schriftfarbe */
	--border-color: #bbbbbb;					/* Standardfarbe für Ränder */
	--input-bg: #ffffff;						/* Hintergrundfarbe für input-Elemente */
	--primary-placeholder-color: #BBB;		/* Farbe für Platzhalter-Texte in input-Elementen */
	--info-icon-color: #33a5bd;					/* Farbe des Info-Icons I */
	--stat-hue: 37; 							/* Orange-Ton für Spielinhalte-Statistik */
	--warning-orange: #ed8936;					/* Orange-Warnfarbe für spezielle Boxen (z.B. auf game_edit) */
	
	--mini-shadow: 0 1px 2px rgba(0,0,0,0.2); 	/* Minimal-Schatten */
	--picture-shadow: 1px 1px 3px #666;		/* Schatten für größere Bilder */
	--picture-shadow-small: 1px 1px 2px #000000;	/* Schmaler Schatten für größere Bilder */
	
	--error-box-bg: rgba(169,27,27,0.1);		/* Hintergrundfarbe Error-Box */
	
	--button-bg-color: linear-gradient(to bottom, #ffffff, #f0f0f0); 		/* Hintergrundverlauf für Buttons */
	--button-hover-bg-color: linear-gradient(to bottom, #f0f0f0, #ffffff);	/* MouseOver Background-Color für Buttons Icons */
	--button-shadow-color: 0px 0px 6px #a91b1b;	/* Schatten für MouseOver button Effekt */

	--icon-secondary-shadow: 1px 1px 4px #000000;	/* Schattenfarbe für Icons ohne funktion */
	--icon-secondary-shadow-light: 1px 1px 1px #000000;	/* leichte Schattenfarbe für Icons ohne funktion (z.B. Sterne) */
	
	--nav-bg: linear-gradient(to bottom, #eee, #bbb); 			/* Menüzeile Hintergrundverlauf */
    --nav-text: #2c3e50;						/* Menüzeile + Flyout Textfarbe */
	--nav-quickstart-fadecolor-from: rgba(220, 53, 69, 0);		/* Farbe für das Ausfaden der Quickstartleiste bei Mobil */
	--nav-quickstart-fadecolor-to: rgba(176, 42, 55, 0.6);		/* Farbe für das Ausfaden der Quickstartleiste bei Mobil */
	--login-flyout-delete-color: #CCC;		/* Farbe für die X-Icons im Nuter-Quickstart */
	--login-flyout-bgcolor: #EEE;		/* Hintergrundfarbe Quickstart-Boxen*/
	
	--flyout-bg-color: lightgrey;     		/* Menü-Flyout Hintergrundfarbe */
	--flyout-link-color: #666666;     		/* Menü-Flyout Text-Farbe */
	--flyout-link-hover: #000000;      		/* Menü-Flyout Text-MouseOver Farbe */
	
	--hero-cover-arrow: #FFF;				/* Farbe der Pfeile beim Coverbild */
	
	--information-box-bgcol: rgba(243, 156, 18, 0.1);		/* Farbe der größeren Hinweis-Box */
	
	--box-bg: #fafafa;							/* Hintergrundfarbe für die Content-Boxen */
	--box-secondary-bg: #e6e6e6;				/* Hintergrundfarbe für die Content-Boxen etwas dunkler */
	--box-border-radius: 12px;					/* Radius des Rands der Content-Boxen */
	--box-header-bg: linear-gradient(to bottom, #bbb, #eee);	/* Hintergrundfarbe für Header der Content-Boxen */
	--box-footer-bg: linear-gradient(to bottom, #eee, #bbb);	/* Hintergrundfarbe für die Footer der Content-Boxen */
	--box-shadow: 1px 1px 3px #000000;		/* Schatten für Content-Boxen */

	--badge-mechanic-color: #3498db;			/* Farbe für mechanics-Tags */
	--badge-mode-color: #2ecc71;			/* Farbe für mechanics-Tags */
	--badge-tag-color: #a020f0;			/* Farbe für mechanics-Tags */
	
	--dialog-box-shadow: 7px 7px 20px #000000; 	/* Schattenfarbe für jquery Dialog Boxen */
	
	--stat-bar-high-col: #34a853;			/* Farbe Grün für Statistiken */
	--stat-bar-mid-col: #ffcc00;			/* Farbe Gelb für Statistiken */
	--stat-bar-low-col: #ea4335;			/* Farbe Rot für Statistiken */
	
	--complex-bar-green-hue: 120;			/* Hue- & Saturation Werte der o. verwendeten Farbe grün-gelb-rot */
	--complex-bar-green-sat: 65%;	
	--complex-bar-red-hue: 5;
	--complex-bar-red-sat: 77%;	
	
	--arg-pos-bg:  #e6f4ea; 				/* Hintergrund Stärke */
	--arg-pos-border:  #34a853; 			/* Rahmen Stärke */
	--arg-neg-bg:  #fce8e6; 				/* Hintergrund Schwäche */
	--arg-neg-border:  #ea4335; 			/* Rahmen Schwäche */
	
	--userbadge-shadow-color: 2px 2px 5px rgba(0,0,0,0.05);	/* Schatten für User Badges ohne MouseOver Effekt */
	
	--stack-transparent-bg: rgba(256,256,256,0.3);	/* Transparenzeffekt bei Alben */
	--stack-transparent-mode: lighten;

	--funding-red:  #fcb6af; 				/* Hintergrund Crowdfunding rot */
	--funding-green:  #aff4c3; 				/* Hintergrund Crowdfunding grün */
	--funding-orange: #c2821c;						/* Hintergrund Crowdfunding orange für Abbruch */
	
	--table-title-color: #e6e6e6;				/* Standard-Titel-Farbe für Tabellen */
	--table-hover-color: rgba(0, 0, 0, 0.02);	/* Farbe für MouseOver für Tabellen */
	--table-zebra-color: rgba(0, 0, 0, 0.05);   /* Zebra-Farbe für Tabellen */
	
	--autocomplete-bg: #eee;					/* Hintergrundfarbe für autocomplete-Elemente */
	--autocomplete-bg-hover: #aaa;				/* Hintergrundfarbe für autocomplete-Elemente bei Mouse Over*/
	
	--version-cards-header-col: #DDD;			/* Farbe des geschlossenen Headers auf der game_edit Seite */
	--version-cards-header-opencol: var(--select-blue);	/* Farbe des geöffneten Headers auf der game_edit Seite */

	--tabs-header-col: #DDD;					/* Farbe des Hintergrunds der Tabs */
	--tabs-header-hovercol: #BBB;				/* Farbe bei MouseOver über inaktive Tabs */
	--tabs-header-activecol: var(--select-blue);			/* Farbe des Hintergrunds des aktiven Tab */
	
	--main-card-header-icon-bg: #fff8e6;	/* Farbe in Hintergrund des Header-Icons auf der Startseite */
	--main-card-hovercol: #f4f4f4;			/* Farbe beim MouseOver auf der Starseite über eine Zeile */
    --main-card-shadow-sm: 0 2px 12px rgba(0,0,0,0.1);
	
	--register-bg: radial-gradient(circle at top, #ffffff 0%, #fff5f5 100%);	/* Hintergrund bei user_create */
	--register-h1: linear-gradient(to bottom, #333 0%, #000 100%);
	--register-glass-bg: rgba(0, 0, 0, 0.05);      /* Ganz leichte Abdunklung */
    --register-glass-border: rgba(0, 0, 0, 0.1);   /* Dezente dunkle Kante */
}



/* ****************************** */
/* DARKMODE FARBEN und Änderungen */
/* ****************************** */

body.dark-mode {
	--primary-color: var(--accent-gold);		/* Standardfarbe für Links, Action-Icons, Buttons ... */	
	--secondary-color: var(--primary-red);		/* Standardfarbe für Icons ohne Funktion ... */
	--light-color: #999;						/* Leicht verblasste Schriftfarbe */
	--select-blue: #0b4e64;						/* Akzentfarbe in blau */
	--select-blue-accented: #f0f8ff;	
	
    --bg-color: #333333;						/* Hintergrundfarbe */
	--bg-color-rgb: 51, 51, 51;				/* Hintergrundfarbe */
	--container-bg: #000000;					/* Hintergrundfarbe großer Content-Bereich */
	--text-main: #e0e0e0;						/* Haupt-Schriftfarbe + Schriftfarbe für MouseOver Effekte bei Links */
	--text-inverted-main: #2c3e50;				/* Invertierte Haupt-Schriftfarbe */
	--border-color: #666666;					/* Standardfarbe für Ränder */
	--input-bg: #333333;						/* Hintergrundfarbe für input-Elemente */
	--primary-placeholder-color: #555;		/* Farbe für Platzhalter-Texte in input-Elementen */
	
	--mini-shadow: 0 1px 2px rgba(250,250,250,0.8); 	/* Minimal-Schatten z.B für kleine Flaggen */
	--picture-shadow: 1px 2px 3px #ccc;		/* Schatten für größere Bilder */
	--picture-shadow-small: 1px 1px 2px #ccc;	/* Schmaler Schatten für größere Bilder */
	
	--error-box-bg: #49391e;		/* Hintergrundfarbe Error-Box */
	
	--button-bg-color: linear-gradient(to bottom, #666666, #353535); 	/* Hintergrundverlauf für Buttons */
	--button-hover-bg-color: linear-gradient(to bottom, #353535, #666666);	/* MouseOver Background-Color für Buttons Icons */
	--button-shadow-color: 0px 0px 8px #e3b15c;	/* Schatten für MouseOver button Effekt */
	
	--icon-secondary-shadow: 1px 1px 4px #ffffff;	/* Schattenfarbe für Icons ohne funktion */
	--icon-secondary-shadow-light: 1px 1px 1px #ffffff;	/* leichte Schattenfarbe für Icons ohne funktion (z.B. Sterne) */
	
	--nav-bg: linear-gradient(to bottom, #555, #1a1a1a); 			/* Menüzeile Hintergrundverlauf */
    --nav-text: #eeeeee;						/* Menüzeile Textfarbe */
	--nav-quickstart-fadecolor-from: rgba(227,177,92, 0);		/* Farbe für das Ausfaden der Quickstartleiste bei Mobil */
	--nav-quickstart-fadecolor-to: rgba(227,177,92, 0.5);		/* Farbe für das Ausfaden der Quickstartleiste bei Mobil */
	--login-flyout-delete-color: #333;		/* Farbe für die X-Icons im Nuter-Quickstart */
	--login-flyout-bgcolor: #444;		/* Hintergrundfarbe Quickstart-Boxen*/
	
	--flyout-bg-color: #454545;     		/* Menü-Flyout Hintergrundfarbe */
	--flyout-link-color: #bbbbbb;      		/* Menü-Flyout Text-Farbe */
    --flyout-link-hover: #ffffff;      		/* Menü-Flyout Text-MouseOver Farbe */
	
	--information-box-bgcol: rgba(245, 60, 51, 0.1);		/* Farbe der größeren Hinweis-Box */
	
	--box-bg: #1e1e1e;							/* Hintergrundfarbe für die Content-Boxen */
	--box-secondary-bg: #444444;				/* Hintergrundfarbe für die Content-Boxen etwas dunkler */
	--box-header-bg: linear-gradient(to bottom, #1a1a1a, #555);		/* Hintergrundfarbe für die Header der Content-Boxen */
	--box-footer-bg: linear-gradient(to bottom, #555, #1a1a1a);		/* Hintergrundfarbe für die Footer der Content-Boxen */
	--box-shadow: 1px 1px 3px #ffffff;		/* Schatten für Content-Boxen */
	
	--dialog-box-shadow: 3px 3px 7px #ffffff; 	/* Schattenfarbe für jquery Dialog Boxen */

	--stat-bar-high-col: #1f7237;			/* Farbe Grün für Statistiken */
	--stat-bar-mid-col: #b79302;			/* Farbe Gelb für Statistiken */
	--stat-bar-low-col: #752118;			/* Farbe Rot für Statistiken */
	
	--complex-bar-green-hue: 123;				/* Hue-Werte der o. verwendeten Farbe grün-gelb-rot */
	--complex-bar-green-sat: 69%;
	--complex-bar-red-hue: 6;
	--complex-bar-red-sat: 79%;	
	
	--arg-pos-bg:  #1f7237; 				/* Hintergrund Stärke */
	--arg-neg-bg:  #752118; 				/* Hintergrund Schwäche */
	
	--userbadge-shadow-color: 2px 2px 5px rgba(0,0,0,0.05);	/* Schatten für User Badges ohne MouseOver Effekt */
	
	--stack-transparent-bg: rgba(0,0,0,0.5);	/* Transparenzeffekt bei Alben */
	--stack-transparent-mode: darken;
	
	--funding-red:  #752118; 				/* Hintergrund Crowdfunding rot */
	--funding-green:  #1f7237; 				/* Hintergrund Crowdfunding grün */
	
	--table-title-color: #444444;				/* Standard-Titel-Farbe für Tabellen */
	--table-hover-color: rgba(256, 256, 256, 0.1);	/* Farbe für MouseOver für Tabellen */
	--table-zebra-color: rgba(256, 256, 256, 0.15);	/* Zebra-Farbe für Tabellen */
	
	--autocomplete-bg: #444;					/* Hintergrundfarbe für autocomplete-Elemente */
	--autocomplete-bg-hover: #888;				/* Hintergrundfarbe für autocomplete-Elemente bei Mouse Over*/
	
	--version-cards-header-col: #333;			/* Farbe des geschlossenen Headers auf der game_edit Seite */
	--version-cards-header-opencol: var(--select-blue);	/* Farbe des geöffneten Headers auf der game_edit Seite */
	
	--tabs-header-col: #333;					/* Farbe des Hintergrunds der Tabs */
	--tabs-header-hovercol: #555;				/* Farbe bei MouseOver über inaktive Tabs */
	--tabs-header-activecol: var(--select-blue);			/* Farbe des Hintergrunds des aktiven Tab */
	
	--main-card-header-icon-bg: #9f8f71;	/* Farbe in Hintergrund des Header-Icons auf der Startseite */
	--main-card-hovercol: #302e2e;			/* Farbe beim MouseOver auf der Starseite über eine Zeile */
    --main-card-shadow-sm: 0 2px 12px rgba(256,256,256,0.5);

	--register-bg: radial-gradient(circle at top, #2c3e50 0%, #000 100%);	/* Hintergrund bei user_create */
	--register-h1: linear-gradient(to bottom, #fff, #ccc);
    --register-glass-bg: rgba(255, 255, 255, 0.03);
    --register-glass-border: rgba(255, 255, 255, 0.1);
}

body.dark-mode .ui-widget-overlay {
	background: #000000 !important;
    opacity: 0.75 !important; /* Sehr dunkle Fläche */
}