#gridtbl
{
}
#gridtbl .container
{
	margin-top: 0em;
	display: grid;
    /* Spalten */
    /* grid-template-columns: repeat(16, 1fr); */
    /* Zeilen */
	grid-template-rows: auto;
	border:5px solid orange;
		/* font-family:sans-serif; */
		/* font-size:0.75em; */
	/*background-color:white;*/
}
.tblmin, .gridtblhead_min, .gridtblcolumn_min{
	display: none;
}
.tblmax, .gridtblhead, .gridtblcolumn{
	display: block;
}
.titel{
	font-weight:bolder;
	margin-bottom:0;
}
.titelmax{
	font-size:150%;
	font-weight:bolder;
	margin-bottom:0;
}
.titelmaxsub{
	font-size:80%;
	font-style:italic;
	font-weight:lighter;	
	margin-top:0;
}
.titelmin{
	font-size:150%;
	font-weight:bolder;
	margin-bottom:0;
}
.titelminsub{
	font-size:80%;
	font-style:italic;
	font-weight:bold;	
	margin-top:0;
}
/* =================================================
	Abschnitt Tabellen
================================================== */
.gridtblhead, .gridtblcolumn, .gridplayhead, .gridplaycolumn
{
	margin-top: 0em;
	display: grid;
    /* Spalten */
	grid-template-columns: 4% auto 4% 4% 4% 4% 12% 6% 0 0 0 12% 6%;
    /* Zeilen */
	grid-template-rows: auto;
}
.gridtblhead > div, .gridtblcolumn > div, .gridplayhead > div, .gridplaycolumn > div

{
	padding: 0.5em 0;
	border-top:1px solid blue;
	border-right:0px solid blue;
	border-bottom:1px solid blue;
	border-left:0px solid blue;
	color: darkblue;
	font-size:0.75em;
	text-align: center;		
}
.gridtblhead, .gridplayhead
{
	font-weight: bold;
}
.gridtblhead > div, .gridplayhead > div
{
	border-bottom:0px solid blue;
}
.gridtblhead_min, .gridtblcolumn_min
{
	display:none;
}
/* =================================================
	Grid-Abschnitt Spiele
================================================== */
.gridplayhead, .gridplaycolumn
{
	margin-top: 0em;
	display: grid;
    /* Spalten */
    grid-template-columns: 4% 4% 9% 6% 25% 1% 25% 9% 9% 9%; 
    /* Zeilen */
	grid-template-rows: auto;
		/* font-family:sans-serif; */
		/* font-size:0.75em; */
	/* background-color:transparent; yellow;*/
}
.gridplayhead > div, .gridplaycolumn > div
{
	padding: 0.5em 0;
	color: darkblue;
	font-size:0.75em;
	text-align: center;		
}
.gridplaycolumn_min
{
	display: none;
}
/* =================================================
	Abschnitt Spiele am heutigen Tag
================================================== */
.gridplaytitel
{
	border-top: 2px solid blue;
	color: darkblue;
	font-size:0.9em;
	font-weight:bold;	
	text-align: center;
	margin: 0.5;
	padding: 0.5;
}
.gridplayhead_day, .gridplaycolumn_day{
	margin-top: 0em;
	display: grid;
    /* Spalten */
    grid-template-columns: 10% 40% 2% 40%; 
    /* Zeilen */
	grid-template-rows: auto;
	color: darkblue;
	font-family:sans-serif;
	font-size:0.9em;
	/* background-color:transparent; yellow;*/
}
.gridplayhead_day > div, .gridplaycolumn_day > div
{
	/*padding: 0.5em 0;*/
	color: darkblue;
	font-size:0.9em;
	text-align: center;		
}
/* =================================================
	Abschnitt BOX
================================================== */
.boxspiel{
	display: grid;
    /* Spalten */
    grid-template-columns: 30% 70%; 
    /* Zeilen */
	grid-template-rows: auto;
	color: black;
	border-top: 5px solid blue;
	border-right: 2px solid blue;
	border-bottom: 5px solid blue;
	border-left: 2px solid blue;
	border-radius: 1em;
	height: 100px;
	font-size: 0.8em;
	text-align: center;
	padding:1em;
	margin: 2em;
}
.boxspieltitel
{
	grid-column: 1 / -1;
	grid-row: 1 / -1;
	color: white;	
}
.boxspielright
{
	grid-column: 1 / 2;
	/*grid-row: 2 / 4;*/
	text-align: right;
	padding-right: 0.5em;
}
.boxspielleft
{
	grid-column: 2 / 3;
	grid-row: 2 / 4;
	text-align: left;
	padding-left: 0.5em;
}
#gridtbl .container header
{ 
	grid-column: 1 / -1;
	grid-row: 1 / -1;
	position: relative;
	z-index: 9999; 
} 	
#gridtbl .container aside
{ 
	border:5px solid blue;
	margin-top: 2em;
	padding: 2em;
	background:skyblue;
	grid-column: 1 / 4;
	grid-row: 2 / -1;
} 	
#gridtbl .container article
{ 
	border:5px solid blue;
	margin-top: 2em;
	padding: 2em;
	background:orange;
	grid-column: 4/-1;
	grid-row: 2/-1;
} 	
#gridtbl .aside1
{ 
} 	
#gridtbl .aside2
{ 
} 	
#article
{
	margin-top: 0em;
	display: grid;
    /* Spalten */
     grid-template-columns: repeat(5, 1fr); 
    /* Zeilen */
	grid-template-rows: auto;
	border:5px solid yellow;
		/* font-family:sans-serif; */
		/* font-size:0.75em; */
		/*background-color:white;*/
}
#article .article1
{ 
	background:grey;
	border: 2px solid white;
	grid-column: 1 / -1;
}
#article .article2
{ 
	background:silver;
	border: 2px solid white;
	grid-column: 2 / 3;
}
#article .article3
{ 
	background:grey;
	border: 2px solid white;
	grid-column: 3 / -1;
}
#gridtbl .spiel_ws{
	margin: 0em;
	padding: 1em 0;
	color: white;	
	background-color: #00BFFF; /*deepskyblue*/
	border: 0px solid red;
	text-align: center;	
}
#gridtbl .spiel_ye{
	margin: 0em;
	color: black;	
	background-color: #00BFFF; /*deepskyblue*/
	border: 0px solid red;
	text-align: center;	
}
#gridtbl .spiel_ye2{
	margin: 0em;
	padding: 1em 0;
	color: black;	
	background-color: #00BFFF; /*deepskyblue*/
	border: 0px solid red;
	text-align: center;	
}
#gridtbl .spiel_ge{
	padding: 1em;
	color: yellow;	
	background-color:green;
}
#gridtbl .spiel_sw{
	margin: 0em;
	color: yellow;	
	padding: 1em 0;
	background-color: darkblue;
	border: 0px solid red;
	text-align: center;	
}
#gridtbl footer 
{
	height:auto;
	border: 0px solid gray;
	color: black;
	background:aqua; 
	grid-column: 1 / -1;
	grid-row:10;
	padding: 0em;
}
#gridtbl footer p
{
	border: 0px solid blue;
	padding-left: 25px;
	color: black;
}
#gridtbl footer a
{
	border: 0px solid blue;
	margin-left: 50px;
	color: black;
	text-decoration: none;
}
.gridasidehead, .gridasidecolumn
{
	margin-top: 0em;
	padding: 0 0 1.25em 0;
	display: grid;
	/* Spalten */
	grid-template-columns: 33% 67%;
	/* Zeilen */
	grid-template-rows: auto;
	background-color:transparent;
}
.gridasidehead > div, .gridasidecolumn > div

{
padding: 0 0.25em;
color: darkblue;
font-size: 0.75em;
}
/* =================================================
	Abschnitt für PORTRAIT BREITE --> 30em
	Handy PORTRAIT
================================================== */
@media (max-width: 900px)
{
	/* Einstellung PORTRAIT BREITE --> 1400px */
	#wrapper{
	}

	#gridtbl .container
	{
		width:80%;
		margin-top: 0em;
		display: grid;
		/* Spalten */
		 grid-template-columns: repeat(1, 1fr); 
		/* Zeilen */
		grid-template-rows: auto;
	}
	#gridtbl .container header
	{ 
		grid-column: 1 / -1;
		grid-row: 1 / -1;
	} 	
	#gridtbl aside
	{ 
		grid-column: 1 / -1;
		grid-row: 1 / -1;
	} 	
	#gridtbl article
	{ 
		grid-column: 1 / -1;
		grid-row: 2 / -1;
	} 	
.tblmax, .gridtblhead, .gridtblcolumn{
	display: none;
}
.tblmin, .gridtblhead_min, .gridtblcolumn_min{
	display: block;
}
/* =================================================
	Abschnitt Tabellen
================================================== */
	.gridtblhead_min, .gridtblcolumn_min
	{
		margin-top: 0em;
		display: grid;
		/* Spalten */
		grid-template-columns: 10% auto 20%;
		/* Zeilen */
		grid-template-rows: auto;
		/*background-color:silver;*/
	}
	.gridtblhead_min > div, .gridtblcolumn_min > div

	{
		padding: 0.5em 0;
		border:1px solid blue;
		color: darkblue;
		font-size:0.75em;
		text-align: center;		
	}
	.gridplayhead_min, .gridplaycolumn_min
	{
		margin-top: 0em;
		display: grid;
		/* Spalten */
		grid-template-columns: 18% auto 1% auto 12%;
		/* Zeilen */
		grid-template-rows: auto;
		background-color:transparent;
	}
	.gridplayhead_min > div, .gridplaycolumn_min > div

	{
		padding: 0.5em 0;
	border-top:1px solid blue;
	border-right:0px solid blue;
	border-bottom:1px solid blue;
	border-left:0px solid blue;
		color: darkblue;
		font-size:0.75em;
		text-align: center;		
	}
}
/* =================================================
	Abschnitt für PORTRAIT BREITE --> 900px
	Handy PORTRAIT
================================================== */
@media (aspect-ratio: 2/3)
{
	/* Einstellung PORTRAIT BREITE --> 900px */
	#wrapper{
	}

	#gridtbl .container
	{
		width:80%;
		margin-top: 0em;
		display: grid;
		/* Spalten */
		 grid-template-columns: repeat(1, 1fr); 
		/* Zeilen */
		grid-template-rows: auto;
	}
	#gridtbl .container header
	{ 
		grid-column: 1 / -1;
		grid-row: 1 / -1;
	} 	
	#gridtbl aside
	{ 
		grid-column: 1 / -1;
		grid-row: 1 / -1;
	} 	
	#gridtbl article
	{ 
		grid-column: 1 / -1;
		grid-row: 2 / -1;
	} 	
.tblmax, .gridtblhead, .gridtblcolumn{
	display: none;
}
.tblmin, .gridtblhead_min, .gridtblcolumn_min{
	display: block;
}
/* =================================================
	Abschnitt Tabellen
================================================== */
	.gridtblhead_min, .gridtblcolumn_min
	{
		margin-top: 0em;
		display: grid;
		/* Spalten */
		grid-template-columns: 10% auto 20%;
		/* Zeilen */
		grid-template-rows: auto;
		/*background-color:yellow;*/
	}
	.gridtblhead_min > div, .gridtblcolumn_min > div

	{
		padding: 0.5em 0;
		border:1px solid blue;
		color: darkblue;
		font-size:0.75em;
		text-align: center;		
	}
	.gridplayhead_min, .gridplaycolumn_min
	{
		margin-top: 0em;
		display: grid;
		/* Spalten */
		grid-template-columns: 10% auto 1% auto 10%;
		/* Zeilen */
		grid-template-rows: auto;
		background-color:transparent;
	}
	.gridplayhead_min > div, .gridplaycolumn_min > div

	{
		padding: 0.5em 0;
	border-top:1px solid blue;
	border-right:0px solid blue;
	border-bottom:1px solid blue;
	border-left:0px solid blue;
		color: darkblue;
		font-size:0.75em;
		text-align: center;		
	}
}