body			{ font-family: sans-serif; margin:0;}
body.test		{ border-top:14px solid black; }
#testmessage		{ display: none; text-align:center; }
body.test #testmessage	{ display: block; position:absolute; top:0; left:0; right:0; font-size:14px; background-color:black; color: yellow; z-index:999999; overflow:hidden; white-space:nowrap; }
body.test #testabbruch	{ display:none; }
#testabbruch { background-color: #888; z-index:300; }
#punkte 		{ display: inline-block; margin: 0 10px; }
#name			{ font-size: 125%; margin:0 10px; }
#statistik 		{ z-index:1000; position:fixed; top:40px; right:0; font-size: 16px; padding:20px; border-radius:0.5em;}
#statistik .list	{ display:inline-block; float:right; white-space:nowrap; }
#statistik:before {
    z-index:-1;
    content:"";
    position:absolute;
    top:0; left:0; right:0; bottom:0;
    background:var(--bg0); opacity:0.8;
}

#ui			{ position:fixed;  bottom:0; right:0; font-size: 16px; padding: 20px; }
#copyright		{ position:fixed;  top:0;bottom:0;left:0;right:0; display:none; font-size:16px; text-align:left; background-color: var(--bg0); padding: 100px; z-index:1000; }
#copyright button,#copyright .button { position:absolute; bottom:20px; right:20px; }
#astat_btn2 { position:absolute; top:20px; right:20px; }
#astat { background-color: var(--bg0); overflow: scroll;}
#astat h3 { margin:0;}
#astat_spiele { font-size:14pt; text-align:left;position:absolute; left: 0; top:100px; bottom:0; right:50%; overflow:scroll; }
#astat_sus    { font-size:14pt; text-align:left;position:absolute; right:0; top:100px; bottom:0; left: 50%; overflow:scroll; }
#astat_sus table { width:100%; }
#astat_spiele div { font-size:14pt; text-align:left; display:block;}
#astat_spiele div:hover { background-color: #ddd;}


#antworten.cols2 { column-count: 2; column-gap: 10px; }
#antworten>div { margin-block-start: 0; }

body.spielend .nbs { display:none; }

#pruefen   { background-color: green; padding: 8px; box-shadow: 0px 5px 10px #000; margin-bottom:20px; display: block; }
#naechstes { background-color: blue;  padding: 8px; box-shadow: 0px 5px 10px #000; margin-bottom:20px; display: block; color:white; font-weight:bold; }

#vokabeleingabe { display:none; }

#preload { display:none; }

#start { padding:30px; }


div.layer, #verloren, #gewonnen, #start, #rahmen {
    position:absolute;
    top:0;bottom:0;
    left:0;right:0;
    overflow:hidden;
    text-align:center;
    padding-top: 50px;
}
#verloren, #gewonnen, #start, #rahmen { font-size:   30px; }


body.preload #verloren, body.preload #gewonnen,body.preload #start,body.preload #rahmen { display:none !important;}
body.preload #preload { display:block; left:0;right:0;top:0;bottom:0; }

#verloren, #gewonnen, #start { padding:0; margin:0; z-index:0; }

/* Folien für das Spielen */
#verloren { display: none; }
body.verloren #verloren { display:block; }

#rahmen { display:none; }
body.spielend #rahmen { display:block; }

#start { display:none; }
body.start  #start  { display:block; }
body.startr #start  { display:table; }
body.startr #rahmen { display:block; }

#gewonnen { display:none; }
body.gewonnen #gewonnen { display:block; }

/* Hintergrundfolien */
.bkg { opacity:0.7; background-color: white; z-index:-1; }
.msg { display:table-cell; vertical-align: middle; }


.layer>div.center{ width: 80%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }


#TEST {
	position: 	fixed;
	top: 		0;
	bottom: 	0;
	left: 		0;
	right: 		0;
	background-color: black;
	color: white;
	text-align: center;
	padding:30px;
}
#TEST>div {
	display: inline-block;
	text-align: left;
}
#TEST h1 {
	font-size: 300%;
	margin-top: 0;
}

#nicht_angemeldet {
	padding: 10px;
	position: absolute;
	top: -10px;
	border-radius: 10px;
	background-color: red;
	right: 30px;
}

#menu #nicht_angemeldet { padding: 0 10px; animation: red_flash linear 2000ms infinite;}
#nicht_angemeldet a { color:white; font-weight:bold; text-decoration:none; z-index:100; position:relative; top:3px; }
.katex {font-size:100% !important;}


/* Warning */
#warning {
    z-index:1000;
    background: var(--bg0);
    display:none;
}
#warning>div{
    width:80%;
    position:absolute;
    top:50%;
    left:50%;
    transform: translate(-50%, -50%);
}


@keyframes red_flash {
	0%   { background-color: #ff4000ff; }
	50%  { background-color: #800000ff; }
	100% { background-color: #ff4000ff;	}
}



@media print { font-size:70%; }


.richtig:before {
    content: "!";
    position: absolute;
    right: 5px;
    text-shadow: 0 0 6px #000;
    color: #ff0;
    font-size: 150%;
}
.gewaehlt.richtig:before {
    content: "\002714";
    position: absolute;
    right: 5px;
    text-shadow: 0 0 6px #000;
    color: #ff0;
    font-size: 150%;
}
.gewaehlt.falsch:before {
    content: "\002639";
    position: absolute;
    right: 5px;
    text-shadow: 0 0 6px #000;
    color: #f33;
    font-size: 150%;
}