/*
 *
 * HEADER: ALLGEMEIN-CSS
 *
 */


/* Variablen definieren: */
:root {

	/* Extra-Dunkel: */
	--HSL_0xd:	hsl(  0, 40%, 20%);
	--HSL_20xd:	hsl( 20, 40%, 20%);
	--HSL_40xd:	hsl( 40, 40%, 20%);
	--HSL_60xd:	hsl( 60, 40%, 20%);
	--HSL_80xd:	hsl( 80, 40%, 20%);
	--HSL_100xd:hsl(100, 40%, 20%);
	--HSL_120xd:hsl(120, 40%, 20%);
	--HSL_140xd:hsl(140, 40%, 20%);
	--HSL_160xd:hsl(160, 40%, 20%);
	--HSL_180xd:hsl(180, 40%, 20%);
	--HSL_200xd:hsl(200, 40%, 20%);
	--HSL_220xd:hsl(220, 40%, 20%);
	--HSL_240xd:hsl(240, 40%, 20%);
	--HSL_260xd:hsl(260, 40%, 20%);
	--HSL_280xd:hsl(280, 40%, 20%);
	--HSL_300xd:hsl(300, 40%, 20%);
	--HSL_320xd:hsl(320, 40%, 20%);
	--HSL_340xd:hsl(340, 40%, 20%);

	/* Dunkel: */
	--HSL_0d:	hsl(  0, 40%, 30%);
	--HSL_20d:	hsl( 20, 40%, 30%);
	--HSL_40d:	hsl( 40, 40%, 30%);
	--HSL_60d:	hsl( 60, 40%, 30%);
	--HSL_80d:	hsl( 80, 40%, 30%);
	--HSL_100d:	hsl(100, 40%, 30%);
	--HSL_120d:	hsl(120, 40%, 30%);
	--HSL_140d:	hsl(140, 40%, 30%);
	--HSL_160d:	hsl(160, 40%, 30%);
	--HSL_180d:	hsl(180, 40%, 30%);
	--HSL_200d:	hsl(200, 40%, 30%);
	--HSL_220d:	hsl(220, 40%, 30%);
	--HSL_240d:	hsl(240, 40%, 30%);
	--HSL_260d:	hsl(260, 40%, 30%);
	--HSL_280d:	hsl(280, 40%, 30%);
	--HSL_300d:	hsl(300, 40%, 30%);
	--HSL_320d:	hsl(320, 40%, 30%);
	--HSL_340d:	hsl(340, 40%, 30%);

	/* Mittel: */
	--HSL_0m:	hsl(  0, 40%, 50%);
	--HSL_20m:	hsl( 20, 40%, 50%);
	--HSL_40m:	hsl( 40, 40%, 50%);
	--HSL_60m:	hsl( 60, 40%, 50%);
	--HSL_80m:	hsl( 80, 40%, 50%);
	--HSL_100m:	hsl(100, 40%, 50%);
	--HSL_120m:	hsl(120, 40%, 50%);
	--HSL_140m:	hsl(140, 40%, 50%);
	--HSL_160m:	hsl(160, 40%, 50%);
	--HSL_180m:	hsl(180, 40%, 50%);
	--HSL_200m:	hsl(200, 40%, 50%);
	--HSL_220m:	hsl(220, 40%, 50%);
	--HSL_240m:	hsl(240, 40%, 50%);
	--HSL_260m:	hsl(260, 40%, 50%);
	--HSL_280m:	hsl(280, 40%, 50%);
	--HSL_300m:	hsl(300, 40%, 50%);
	--HSL_320m:	hsl(320, 40%, 50%);
	--HSL_340m:	hsl(340, 40%, 50%);

	/* Hell: */
	--HSL_0h:	hsl(  0, 40%, 70%);
	--HSL_20h:	hsl( 20, 40%, 70%);
	--HSL_40h:	hsl( 40, 40%, 70%);
	--HSL_60h:	hsl( 60, 40%, 70%);
	--HSL_80h:	hsl( 80, 40%, 70%);
	--HSL_100h:	hsl(100, 40%, 70%);
	--HSL_120h:	hsl(120, 40%, 70%);
	--HSL_140h:	hsl(140, 40%, 70%);
	--HSL_160h:	hsl(160, 40%, 70%);
	--HSL_180h:	hsl(180, 40%, 70%);
	--HSL_200h:	hsl(200, 40%, 70%);
	--HSL_220h:	hsl(220, 40%, 70%);
	--HSL_240h:	hsl(240, 40%, 70%);
	--HSL_260h:	hsl(260, 40%, 70%);
	--HSL_280h:	hsl(280, 40%, 70%);
	--HSL_300h:	hsl(300, 40%, 70%);
	--HSL_320h:	hsl(320, 40%, 70%);
	--HSL_340h:	hsl(340, 40%, 70%);

	/* Extra-Hell: */
	--HSL_0xh:	hsl(  0, 40%, 85%);
	--HSL_20xh:	hsl( 20, 40%, 85%);
	--HSL_40xh:	hsl( 40, 40%, 85%);
	--HSL_60xh:	hsl( 60, 40%, 85%);
	--HSL_80xh:	hsl( 80, 40%, 85%);
	--HSL_100xh:hsl(100, 40%, 85%);
	--HSL_120xh:hsl(120, 40%, 85%);
	--HSL_140xh:hsl(140, 40%, 85%);
	--HSL_160xh:hsl(160, 40%, 85%);
	--HSL_180xh:hsl(180, 40%, 85%);
	--HSL_200xh:hsl(200, 40%, 85%);
	--HSL_220xh:hsl(220, 40%, 85%);
	--HSL_240xh:hsl(240, 40%, 85%);
	--HSL_260xh:hsl(260, 40%, 85%);
	--HSL_280xh:hsl(280, 40%, 85%);
	--HSL_300xh:hsl(300, 40%, 85%);
	--HSL_320xh:hsl(320, 40%, 85%);
	--HSL_340xh:hsl(340, 40%, 85%);
}


/* Body (gibt die grundsätzliche Grösse aller Texte an, der Rest ist relativ dazu): */
body {font-family: Arial; font-weight: bold; background-color:#444; color:#eee; font-size: 14px;}

/* Allgemein:*/
h1 { font-size: 2.3em; }
h2 { font-size: 1.9em; padding-top: 8px; margin: 3px auto;}
h3 { font-size: 1.5em; padding: 12px; }
h1.titel { font-size: 1.8em; text-align: center; }		/* 'Travian Drumfire' */
h2.feindname { background-color:var(--HSL_0xh); color: var(--HSL_0m); padding: 20px; text-align:center; }
h3.tafelTitel { padding: 3px; margin:0; }

#headerA {  padding-bottom:10px; max-width: 1000px;}
#headerA p { padding: 1px; margin:0; }
p.oTafelP { padding: 2px; margin:0; line-height:11px;}
a { text-decoration: none; color:#333;  }
a.atafel { color:black;  }
table { border-spacing:3px;  }
td { vertical-align:top;  }
div { margin: 0; padding:0; }

.box { margin: 4px auto; padding: 0px; text-align: center; width: 100%; max-width:1000px;}
.error { font-size: 1.4em; background-color:var(--HSL_0h); color:var(--HSL_0d);  }
/* Element unsichtbar machen.
 * visibility: hidden 	= Wird nicht angezeigt, benötigt aber weiterhin den Platz.
 * display:none			= Wird nicht angezeigt und nimmt auch keinen Platz mehr in Anspruch.
 */
.unsichtbar { visibility: hidden;  }
.entfernt { display:none !important; }

.zentriert { margin: 0 auto; padding: 0px; text-align: center; }

/* Elemente mittig auf dem Screen anzeigen.
 * KEINE Breite angeben!
 * Abstand der Elemente kann mit column-gap angegeben werden.
 */
div.einmitten {
	display:	flex;
	justify-content: safe center; 	/* mittig zentrieren */
	/* column-gap verwenden um Abstand anzugegben */	
}

/* Marschbefehls-Ausgabe: */
table.mb_compact { font-size: 14px; background-color:#111;}
table.mb_userPlan { font-size: 18px; background-color:#111; }
table.mb_compact td { vertical-align: middle; }		/* Inhalt in den Zellen vertikal zentrieren */
table.mb_userPlan td { vertical-align: middle; padding: 0 20px;}	/* Inhalt in den Zellen vertikal zentrieren */
td.mb_normal { background-color:#111; }				/* Muss NICHT pünktlich sein */
td.mb_puenktlich { background-color:#227; }			/* MUSS pünktlich sein */
span.mb_marschNr { font-size: 50px; color: #aaa; }
span.mb_counter { font-size: 38px; }
a.mb_link { display: flex; justify-content: center; }		/* Gesamte Zelle anklickbar machen */



/* Horizontal und vertikal zentrieren. PS: Container muss Breite und Höhe angeben! */
.xy-zentriert {
	padding: 0;
	margin: 0;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}



/* Tool-Tip: */
.tooltip { position: relative; display: inline-block; border-bottom: 1px dotted black;}  		/* Tooltip Container */
.tooltip .tooltiptext { visibility: hidden; width: 120px; background-color: #cdc; color: black;	/* Tooltip Text */
	text-align: center; padding: 5px 0; border-radius: 6px;
	position: absolute; z-index: 1;	bottom: 125%; left: 50%; margin-left: -60px;	/* (Positionierung des Tooltip-Textes) */
	opacity: 0; transition: opacity 0.3s;														/* (Fade in tooltip) */
}
.tooltip:hover .tooltiptext { visibility: visible; opacity: 1; }						/* Tool-Tip zeigen wenn Maus-Over */