.box  { background:yellow; margin:10px; text-align:center; }

* {box-sizing: border-box;}

html {
  scroll-behavior: smooth;
  height:100%;
}

body {
  overscroll-behavior-y: contain;
}


.unselectable {
	user-drag: none; 
	user-select: none;
	-moz-user-select: none;
	-webkit-user-drag: none;
	-webkit-user-select: none;
	-ms-user-select: none;
}

/*
https://german.stackexchange.com/questions/30316/datenbank-mit-artikeln
http://www.danielnaber.de/morphologie/
*/  	


.header {
	background-image: linear-gradient(#dfe9f0 1vh,#69c1ff);
	background-repeat: no-repeat;
	margin-top: 0px;
	
}

.container {
	/*position:relative;*/ 
	text-align:center; 
	margin-left: auto; 
	margin-right: auto; 
	max-width:1024px;
}

.helptext {
	background-color: #dfe9f0; /*#ffd2ff;*/
	font-family: Inter, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
}

.helptext .help {
	text-align: justify;
	padding:10px;
}

.help h2 {
	font-size: 2em;
	color: #69c1ff;
}

.help h3 {
	font-weight: normal;
	font-size: 1.2em;
}

.premium {
	background-color: #ffd2ff;

	font-family: Inter, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
}

.premiumtext {
	text-align: justify;
	padding:10px;
}

.premium h2 {
	font-size: 2em;
	color: black;
}

.premium h3 {
	font-weight: normal;
	font-size: 1.2em;
}

.premium input {

	border-color: #b3b3b3;
	border-radius: 5px;
	border-color:#b3b3b3;
	border-style: solid;
	border-width: 1px;
	
	font-size:1.2em;
	padding: 5px 15px;
}

.main_nav {
	font-family: Inter, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
	text-transform: uppercase;
	color:white;
	text-align: right;
	padding:10px;
	margin-bottom: 10px;
}

.main_nav a {
	padding:10px;
	color: #057ccf;
	font-weight: bold;
	font-size: 1.2em;
}

.starttext { 
	width:55%;
	float:left;
	text-align: left;
}

.starttext h1 {
	font-family: Inter, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
	color:white;
	font-size: 4em;
	padding-top: 1em;
	padding-left:10px;
}

.starttext h2 {
	font-family: Inter, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
	color:white;
	font-size: 2em;
	padding-left:10px;
}

.starttext h3 {
	font-family: Inter, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
	color:white;
	font-weight: normal;
	font-size: 1.2em;
	padding-left:10px;
	padding-right:10px;
}

.logocontainer {
	text-align: right;
	width:45%;	
	margin-left: 55%;
	padding-top:100px;
	padding-bottom:20px;
	
}

.logocontainer img {
	width: 80%;
}

.logocontainer_small { display: none; }

.startbutton {
	margin-top:10px;
	margin-bottom:30px;
	cursor:pointer;
	/*
 margin-left: auto; margin-right: auto; */
 padding: 5px;border-radius: 25px;
 border: 5px solid #5ddfff;  background:#ecedee; 
 width:50%;

font-family: Inter, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
font-size:1.9em; font-weight:bold;
padding-top:0.2em;
padding-bottom:0.2em;
cursor: pointer;
}


/*******************************************/

.spiel_nav {
	font-family: Inter, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
	text-transform: uppercase;
	color:white;
	text-align: right;
	padding:0px;
	padding-top:0px;
	margin-bottom: 10px;
	width:50%;
}

.spiel_nav a {
	padding:10px;
	color: #057ccf;
	font-weight: bold;
	font-size: 1.2em;
}

.spiel_header {
	width:50%;
	float:left;
	font-family: Inter, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
	text-transform: uppercase;
	color:white;
	color: #057ccf;
	font-weight: bold;
	font-size: 1.2em;
}

.basket {
	/*position:relative;*/
	text-align:center; 
	border-radius: 25px;
	border: 5px solid #5ddfff;
	background:#ecedee; 
	width:90%; 
	height:90%; 
	cursor:pointer;
}

.basket img {
	width: 80%;
	vertical-align:top;
}

.basket div {
	font-family:Tahoma;
	margin-top:0px;
	font-size: 0.8em;
}

.basket_active {
	background:#5ddfff;
}

.pandaDiv {
	position:relative;
	text-align: center;
}

.pandaDiv img {
	width: 90%;
}

.pandaTr td {
	width: 33.33%; vertical-align: top; border-radius:25px;
}

.pandaTr td:nth-child(1) {
	background-color: #b8ffff; 
}

.pandaTr td:nth-child(2) {
	background-color: #ecedee; 
}


.pandaTr td:nth-child(3) {
	background-color: #ffeeff; 
}

#overlay {
	margin: auto; 
	background-color: transparent; 
	/*height: 100px;*/ 
	z-index:100; 
	position:fixed; 
    right: 0; 
	bottom: 0; 
	left: 0;
	text-align:center;
}

#overlay img {
	width: 70%;
	display: inline;
}

#textbox {
	font-family: Tahoma; 
	text-align:center; 
	color: grey; 
	font-weight: bold; 
	padding-left: 15%; 
	padding-right: 15%;
	
	/*.unselectable */
	user-drag: none; 
	user-select: none;
	-moz-user-select: none;
	-webkit-user-drag: none;
	-webkit-user-select: none;
	-ms-user-select: none;
}

#textboxTranslation {
	font-family: Tahoma; 
	text-align:center; 
	color: grey; 
	font-weight: bold; 
	padding-left: 15%; 
	padding-right: 15%;
	
	/*.unselectable */
	user-drag: none; 
	user-select: none;
	-moz-user-select: none;
	-webkit-user-drag: none;
	-webkit-user-select: none;
	-ms-user-select: none;
}

.spielbody {
	background-color: lightgrey; 
	margin: 0px; 
	padding: 0px; 
	background-image: linear-gradient(#dfe9f0 1vh,#69c1ff); 
	background-repeat: no-repeat; 
	height:100%;
}

#spiel {
	height: 100%;
}

#contentTable {

	max-width: 1024px; 
	table-layout: fixed; 
	padding: 0px; 
	border-spacing: 10px;
	margin: auto; 
	background-color: white; 
	height: 100%; 
	background-color:transparent;
	padding-top:3em;
}

.headerTr > td {
	height: 30px; 
	padding: 0px; 
	margin: 0px; 
	background-color: transparent; 
}

.headerTr table {
	margin-left: auto; 
	margin-right: auto;
	width: 100%;
	table-layout: fixed;
}

#korb0 { margin-left: 0px; }
#korb1 { margin-left: auto; margin-right: auto; }
#korb2 { margin-left: auto; margin-right: auto; }
#korb3 { margin-left: auto; margin-right: 0px; }


.menubar {
	background-color: #5ddfff; 
	border-radius: 0px; 
	position:fixed;
	top:0px;
	width:100%; 
	height:3em; 
	z-index:999;
	//border-bottom: 1px solid #69c1ff;
	
	font-family: Inter, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
	font-weight:bold;

	
}

.menubar img:nth-child(1) {
	height: 90%;
	padding-left:10px; 
	padding-top:2px; 
	float:left;
}


#login {
		width:2.4em; margin-top:5px; margin-right:0px; margin-left: auto; float:right; margin-right: 1em;
		cursor: pointer;
}

#menu {
	width:2.4em; margin-top:5px; margin-right:0px; margin-left: auto; float:right; margin-right: 1em;
	cursor: pointer;
}

#menu_div {
	position:fixed;
	min-width:20%;
	background-color:white;
	margin-right:0px;
	margin-left:auto;
	margin-top: 3em;
	right:0px;
	background-color: #5ddfff;
	border-top: 1px solid white;
	z-index:998;
	display: none;
}

#menu_div a {
	font-family: Inter, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
	font-weight:bold;
	padding:10px;
	text-align: center;
	border-bottom: 1px solid grey;
	font-size: 1.5em;
	z-index:999;
	display: block;
	cursor:pointer;
	
}

#menu_div a:hover { 
	background-color:#ffd2ff;}

#langmenu_div {
	position:fixed;
	min-width:0%;
	background-color:white;
	margin-right:4em;
	margin-left:auto;
	margin-top: 3em;
	right:0px;
	background-color: #5ddfff;
	border-top: 1px solid white;
	z-index:999;
	display: none;
	position: fixed;
}

#langmenu_div a {
	font-family: Inter, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
	font-weight:bold;
	padding:10px;
	text-align: center;
	border-bottom: 1px solid grey;
	font-size: 1.5em;
	z-index:999;
	display: block;
	cursor:pointer;
	position:relative;
	color:black;
}
#langmenu_div a:hover { 
	background-color:#ffd2ff;}

#langBtn {
	float:right; color:white; font-size:1em; margin-top:1em; text-decoration:underline; margin-left:5px; 
	margin-right:15px; cursor:pointer;
	}


#menu_overlay {
	  height: 100%;
	  width: 0;
	  position: fixed; /* Stay in place */
	  z-index: 0; /* Sit on top */
 left: 0;
  top: 0;
  background-color: rgb(0,0,0); /* Black fallback color */	 
  background-color: rgba(0,0,0, 0.6); /* Black w/opacity */  
	  overflow-x: hidden; /* Disable horizontal scroll */
}


/************************* device abhängig **********************/



@media (max-width: 768px) {
	
	#overlay {
		width: 90%;
	}
	
	.starttext h1 { font-size: 3em; }
	.logocontainer { width: 40%; }
}

@media (min-width: 768px) {
	
	#overlay {
		width: 40%;
	}


}

/* landscape */

@media (max-height: 600px) {
	
	#overlay {
		width: 30%;
	}
	
	//.headerTr {display: none }
	
	.headerTr table {
		width: 60%;
	}

	#contentTable {	width: 50%; }
}

@media (max-height: 500px) {

	.headerTr {display: none }
}


/* portrait */
@media (orientation: portrait) {
	.spielbody { padding-bottom: 60%;}
	#overlay { bottom: 5%; }
	
	.starttext { width:100%; float:none; }
	.starttext h1 { display:none; font-size: 3em; padding-top: 0px; padding-left:10px;}
	.starttext h2 { text-align: center; font-size: 2em;}
	.starttext h2 { font-size: 2em; padding-left:10px; padding-right:10px;}
	.starttext h3 { font-size: 1.2em; padding-left:10px; padding-right:10px; text-align: justify;}
	.startbutton {width: 90%; margin-left:auto; margin-right:auto;}
	.logocontainer {
		display: none;
	}
	
	.logocontainer_small { display:block; text-align: center; margin-top:4em; float:left;}
	.logocontainer_small img { width:80%; }
}

@media all and (display-mode: standalone) {
	background-color:yellow; /* just for test */
}