body {
	background-color:#fde8c3; 
	font-size:100.01%; 
	font-family:Albany,sans-serif; 
	margin:0; 
	padding:0; 
	display: -webkit-flex;
	display: -ms-flex;
	display:flex;
	-webkit-flex-flow: row wrap;
	-ms-flex-flow: row wrap;
	flex-flow: row wrap;
	}
		

header {
	display: -webkit-flex;
	display:flex;
	-webkit-flex-flow: row wrap;
	flex-flow: row wrap;
	-webkit-flex: 1 1 100%;
	flex: 1 1 100%;
	-webkit-justify-content: flex-start;
	justify-content: flex-start;
	-webkit-align-items:flex-start;
	align-items: flex-start;
	position: relative;
	border-radius: 0px 1em 1em 0px;
	border: 1px solid;
	padding: 5px;
	margin: 5px;
	border-color:#100b7f;
	background: url(hg_header_04.png) repeat-x #fde8c3;
	}

main {
	display: -webkit-flex;
	display: flex;
	-webkit-flex-flow: row wrap;
	flex-flow: row wrap;
	-webkit-flex: 1  100%;
	flex: 1  100%;
	background: url(hg_main_01.png) repeat-y;
}	
	
	
header img {
	-webkit-flex: 0 0 165px;
	flex: 0 0 165px;
	}
 
img.logo {
	margin:0 4em 0 0;
}

header nav {
	-webkit-flex: 1 1 100%;
	flex: 1 1 100%;
}

header h1 {
	-webkit-flex: 1 1 60%;
	flex: 1 1 60%;
	-webkit-align-self; center;
	align-self: center;
	margin: auto; 
	padding:0;
	
}

 h1 {
	font-size:2.4em; 
	color:#4c46ab; 
	}

nav, nav ul, nav li {
	margin:2px 0 0 0;
	padding:0;
	border: none;
	
}



#nav_glob ul {
	display: -webkit-flex;
	-webkit-flex-flow: row wrap;
	display: flex;
	flex-flow: row wrap;		
}

#nav_glob li {
	list-style-type: none;
	margin:3px 0;
	position: relative;
}

#nav_glob a  {
	display: inline-block;
	background-color:#fbcf77;
	color: #f85035;
	border: 1px solid #100b7f;
	border-radius: 0px 0.3em 0.3em;
	margin: 0 5px 0 5px;
	padding: 2px;
	text-align:center;
	text-decoration:none;
	width:8em;
	font-size:1.0em;
	font-weight:600;
	-webkit-transition: all 0.25s ease-in;
	transition: all 0.25s ease-in; 
	
}

#nav_glob a:hover {
	background-color: #ff9b08; 
	color:#4b21a0;
	border: 1px solid #545bd4;
	text-decoration: none;
}


#nav_glob ul ul {
	-webkit-flex-flow: column;
	-webkit-align-content: flex-start;
	flex-flow: column;
	align-content:flex-start;	
	margin:0;	
	padding:0;
	position: absolute;
	top: 30px;
	
	/*font: 0/0 serif;
	z-index: -1;
	text-indent: -9999px; */
	
	opacity: 0;
	visibility: hidden;
	z-index: 1;
	
	-webkit-transition: all 0.5s ease-out;
	transition: all 0.5s ease-out;
}

#nav_glob ul li:hover ul {
		/*font: inherit;
		z-index: auto;
		text-indent: 0; */
		opacity: 1;
		visibility: visible;
} 

#nav_glob ul  ul li {
	margin: 0 0 0 5px;
	
}

#nav_glob ul ul a {
	/*display: block; */
	margin: 0 0 1px 0;
	width: 9em;
	font-size:0.8em;
	
}


#nb_stil ul {
	text-indent: -9998px;
}

	
aside {
	background: #f9d08f;
	border-color: #100b7f;
	-webkit-flex: 1 1 120px;
	flex: 1 1 120px;
	border-radius: 0px 1em 1em 0px;
	border: 1px solid;
	padding: 5px;
	margin: 5px;
	border-color:#100b7f;
	font-size:0.9em;
}

	#news {	
		-webkit-align-self:baseline;
		align-self: baseline;
	}

	
article {
	display:-webkit-flex;
	display:flex;
	-webkit-flex-flow: row wrap;
	flex-flow: row wrap;
	-webkit-flex: 3 1 300px;
	flex: 3 1 300px;
	border-radius: 0px 1em 1em 0px;
	border: 1px solid;
	padding: 5px;
	margin: 5px;
	border-color:#100b7f;
	}
	

#art_head {
	display: -webkit-flex;
	display: flex;
	-webkit-flex-flow: row-reverse wrap;
	flex-flow: row-reverse wrap;
	-webkit-flex: 1 1 100%;
	flex: 1 1 100%;
	
}
#art_head h2{
	font-size: 1.9em;
	margin-top: 5px;
	align-content: flex-start;
	-webkit-flex: 1 1 40%;
	flex: 1 1 40%;
}

#art_head p {
	-webkit-flex: 1 1 40%;
	flex: 1 1 40%;
}

#nav_lok {
	-webkit-flex: 1 1 100%;
	flex: 1 1 100%;
}

#nav_lok  ul {
	display: -webkit-flex;
	-webkit-flex-flow: row wrap;
	display: flex;
	flex-flow: row wrap;	
}
#nav_lok li {
	list-style-type: none;
	margin: 3px 0;
}
#nav_lok a {
	display: inline-block;
	background-color:#ffe7b9;
	color: #4b21a0;
	border: 1px solid #100b7f;
	border-radius: 0px 0.3em 0.3em;
	margin: 0 2px 0 2px;
	padding: 3px;
	text-align:center;
	text-decoration:none;
	width:8em;
	font-size: 0.85em;
	font-weight:600;
	-webkit-transition: all 0.25s ease-in;
	transition: all 0.25s ease-in; 
}
#nav_lok a:hover {
	background-color: #fbcf77; 
	color:#4b21a0;
	border: 1px solid #100b7f;
	text-decoration: none;
}

article h3 {
	-webkit-flex: 1 1 100%;
	flex: 1 1 100%;
	margin-top: 40px;
}
article h4 {
	-webkit-flex: 1 1 100%;
	flex: 1 1 100%;
}

article h5 {
	-webkit-flex: 1 1 100%;
	flex: 1 1 100%;
}


article p {
	-webkit-flex: 1 1 100%;
	flex: 1 1 100%;
	margin: 0 5px 5px 5px;
}


h2 {
	color:#4c46ab;
	font-size:1.8em;
}
	h2 > a {
		color: #4c46ab;
	}
	h2 > a:hover {
		color: #4c46ab;
	}

h3 {
	font-size:1.4em;
	color: #352f8f;
	margin-bottom: 10px;
}
	h3 > a {
		color: #352f8f;
	}
	h3 > a:hover {
		color: #352f8f;
	}

h4 {
	font-size:1.2em;
	color:#100b7f;
	margin-top: 20px;
	margin-bottom: 10px;
}

h5 {
	font-size:1.1em;
	color:#100b7f;
	margin-top:20px;
	margin-bottom:8px;
}	

p {
	font-size:0.98em; color:#100b7f;
	}

.klein {
	font-size:0.88em; 
}
.mittel {
	font-size:0.95em;
}
	
ul,ol,li { 
	font-size:1.0em; 
	font-weight:500; 
	color:#4b21a0;
    line-height:1em; 
	margin: 1px 5px 5px 5px;
	}
	
#list_klein li{
	font-size:0.95em;
	font-weight:500;
	color:#4b21a0;
	line-height:1em;
	margin: 1px 4px 4px 4px;
	}	

	ul {
		list-style: circle;
	}
	ol {
		list-style: decimal;
	}	
	
a {
	color: #5926bf;	
	text-decoration: none;
	}
a:hover {
	color: #f85035;
	text-decoration: none;
}	

table {
	width: 80%;
	border-collapse: collapse;
	margin: 5px;
	padding: 5px;
}
tr {
	border: 1px solid #100b7f;
}
th, td {
	font-size: .95em;
	color: #4b21a0;
	padding: 5px;
	margin: 2px;
}
#tab_ohne {
	width: 95%;
	margin: 5px 10px 20px 5px;
}
#tab_ohne tbody th, tbody td, tr {
	border: none;
}
#tab_ohne th {
	text-align: left;
}

#tab_erg {
	border-collapse: collapse;
	width: 98%;
	margin: 5px;
	padding: 5px;
}
#tab_erg tr {
	border: 1px solid #100b7f;
}
#tab_erg td,th {
	border: 1px solid #100b7f;
	padding: 5px;
	font-size: .95em;
	color: #352f8f;
}
#tab_erg tbody th {
	font-weight: 500;
}
	
#Ticker { 
	justify-content: flex-end;		
}
#tick_text { 
	font-size:0.8em;
	font-family:Arial,sans-serif;
	font-weight:600; color:#ae1f3d;
	background-color:#ffe7b9;
	overflow:auto;
	margin: 2px;
	padding: 3px;
}	

section {
	display:-webkit-fex;
	display:flex;
	-webkit-flex-flow: row wrap;
	flex-flow: row wrap;
	-webkit-flex: 1 1 100%;
	flex: 1 1 100%;
	justify-content: space-around;
}
section p {
	font-size: 0.9em;
}

picture {
	margin: 2px;	
}



#foot_1 {
	background: #fde8c3;
	display: -webkit-flex;
	-webkit-flex-flow: row wrap;
	display: flex;
	flex-flow: row wrap;
	-webkit-flex: 1 1 100%;
	flex: 1 1 100%;
	align-items: flex-start;
	border-radius: 0px 1em 1em 0px;
	border: 1px solid;
	padding: 5px;
	margin: 5px;
	border-color:#100b7f;
	position: relative;
	z-index: 1;
	}

#foot_1 p {
	-webkit-flex: 1 1 50px;
	flex: 1 1 50px;
	text-align:right;
	padding-right: 55px;
	/*padding: 2px 55px 2px 5px;*/
	font-size:0.6em;
	}


#foot_1 nav {
	-webkit-flex: 1 1 65%;
	flex: 1 1 65%;
}
	
#nav_foot  ul {
	display: -webkit-flex;
	-webkit-justify-content: flex-start;
	-webkit-flex-flow: row wrap;
	display: flex;
	justify-content: flex-start;
	flex-flow: row wrap;	
} 

#nav_foot li {
	list-style-type: none;
	margin:3px 0;
	position: relative;
}	

#nav_foot a {
	display: inline-block;
	background-color:#fbcf77;
	color: #f85035;
	border: 1px solid #100b7f;
	border-radius: 0px 0.2em 0.2em;
	margin: 0 3px 0 3px;
	padding: 1px;
	text-align:center;
	text-decoration:none;
	width:8em;
	font-size:0.8em;
	font-weight:600;
	-webkit-transition: all 0.25s ease-in;
	transition: all 0.25s ease-in; 
}

#nav_foot a:hover {
	background-color: #ff9b08; 
	color:#4b21a0;
	border: 1px solid #545bd4;
}

#foot_1 a {
	-webkit-flex: 1 1 48px;
	flex: 1 1 48px;
}


.zurueck {
	display:none;
	position:fixed;
	z-index: 2;
	right:14px;
	bottom:10px;
	text-indent:-9999px;
	height: 48px;
	width: 48px;
	opacity: 0.7;
	background: url(pfeil_01.png) no-repeat;
	
}	


/* für die Darstellung auf kleineren Geräten */
@media (max-width: 34em) {	

	header img {
		-webkit-flex: 0 0 100px;
		flex: 0 0 100px;
		height: 100px;
	}
	header h1 {
	margin: auto;
	padding-top: 15px;
	font-size: 1.7em;
	}
	
	.zurueck {
		display:none !important;
	}
	
	
	
	#nav_glob ul{
		display: -webkit-flex;
		-webkit-justify-content: flex-start;
		-webkit-flex-flow: row wrap;
		display: flex;
		justify-content: flex-start;
		flex-flow: row wrap;
	}
	
	#nav_glob li {
		list-style-type: none;
		margin:3px 0;
		position: relative;
    }

	#nav_glob a  {
		display: inline-block;
		background-color:#fbcf77;
		color: #f85035;
		border: 1px solid #100b7f;
		border-radius: 0px 0.3em 0.3em;
		margin: 0 5px 0 5px;
		padding: 5px;
		text-align:center;
		text-decoration:none;
		width:9em;
		font-size:1.0em;
		font-weight:600;
		-webkit-transition: all 0.25s ease-in;
		transition: all 0.25s ease-in; 
	
    }
	
	#nav_glob ul li:hover ul {
		
		opacity: 0;
		visibility: hidden;
    } 
	
	
	
	.navbox {
	position: absolute;
	right: 5px;
	top: 7em; 
	background-color:#fde8c3;
	color: #f85035;
	border: 1px solid #100b7f;
	border-radius: 0px 0.3em 0.3em;
	padding: 3px;
	margin: 3px;
	width: 8.25em;
	max-height: 25em;
	display: none;

    }
 
 
	.navbox:target {
		display: block;
		/*text-indent:0; */		
	}
 	
	
	#nb_stil ul {
		display: -webkit-flex;
		-webkit-align-content: flex-start;
		-webkit-flex-flow: column;
		display: flex;
		align-content: flex-start;
		flex-flow: column;
		text-indent: 0;  /* um den Inhalt wieder sichtbar zu machen, der für große Screens aus sichtbarem Bereich entfernt wurde */
	}
	#nb_stil li {
		list-style-type: none;
		margin:2px 0;
		padding: 1px;
		
	}
	
	#nb_stil a {
		display: inline-block;
		background-color:#fbcf77;
		color: #f85035;
		border: 1px solid #100b7f;
		border-radius: 0px 0.3em 0.3em;
		text-align:center;
		text-decoration:none;
		font-size: 0.9em;
		font-weight: 600;
		margin: 2px;
		padding: 4px 1px 4px 1px;
		width: 8em;
		
	}
	
	main {
		background: #fde8c3; 
	}
	
    #art_head h2{
	font-size: 1.4em;
	}
	
	main h3 {
		font-size: 1.2em;
	}
	
	main h4 {
		font-size: 1.1em;
	}

	li {
		font-size: 0.95em;
	}
	
	article {
		order: 2;
	}
	
	aside {
		order: 3;
	}
	
	footer {
		order: 4;
	}
	
	#foot_1 p {
		padding-right: 0px;
	}
	
	/* für Tabellen, Umbruch in eine Liste */
	tr, th, td {
 		display: block;	
	}
 
	tr {
		padding: .9em;
		min-width: 10em;
	}
 
	th {
		padding: 0;
	}
 
	td {
		padding: .8em 0 0;
	}
	
	/* Ergebnis-Tabelle */
	#tab_erg thead {
		display: none;
	}
	
	#tab_erg  tr:last-child {
		border: none;
		border-top:  1px solid #100b7f;
		border-bottom: 1px solid #100b7f;
	} 
	#tab_erg tr {
		border: none;
		border-top: 1px solid #100b7f;
		min-width: 11em;
		
	}
	#tab_erg th::before {
		content: "Spieltag: ";
	}
	#tab_erg td:nth-child(2)::before {
		content:"Heim: ";
	}
	#tab_erg td:nth-child(3)::before {
		content:"Gast: ";
	}
	#tab_erg td:nth-child(4)::before {
		content:"Ergebnis: ";
	}
	#tab_erg table, tbody, tr {
		display: block;
		border: none;
	}
	#tab_erg tbody th {
		display: block;
		border: none;
		text-align: left;
		font-weight: bold;
	}
	#tab_erg td {
		display: inline-block;
		border: none;
		min-width: 11em;
		text-align: left;
	}
	
	section {
		justify-content: flex-start;
	}
	
}

/* für Touch Screens */
@media (hover:none) {
	#nav_glob ul{
		display: -webkit-flex;
		-webkit-justify-content: flex-start;
		-webkit-flex-flow: row wrap;
		display: flex;
		justify-content: flex-start;
		flex-flow: row wrap;
	}
	
	#nav_glob li {
		list-style-type: none;
		margin:3px 0;
		position: relative;
    }

	#nav_glob a  {
		display: inline-block;
		background-color:#fbcf77;
		color: #f85035;
		border: 1px solid #100b7f;
		border-radius: 0px 0.3em 0.3em;
		margin: 0 5px 0 5px;
		padding: 5px;
		text-align:center;
		text-decoration:none;
		width:9em;
		font-size:1.0em;
		font-weight:600;
		-webkit-transition: all 0.25s ease-in;
		transition: all 0.25s ease-in; 
	
    }
	
	#nav_glob ul li:hover ul {
		
		opacity: 0;
		visibility: hidden;
    } 
	
	
	
	.navbox {
	position: absolute;
	right: 5px;
	top: 7em; 
	background-color:#fde8c3;
	color: #f85035;
	border: 1px solid #100b7f;
	border-radius: 0px 0.2em 0.2em;
	padding: 3px;
	margin: 2px;
	width: 8em;
	max-height: 25em;
	display: none;

    }
 
 
	.navbox:target {
		display: block;
		/*text-indent:0; */
			
	}
 
	
	
	#nb_stil ul {
		display: -webkit-flex;
		-webkit-align-content: flex-start;
		-webkit-flex-flow: column;
		display: flex;
		align-content: flex-start;
		flex-flow: column;
		text-indent: 0;
	}
	#nb_stil li {
		list-style-type: none;
		margin:2px 0;
		padding: 1px;
		/*position: relative;	*/
	}
	
	#nb_stil a {
		display: inline-block;
		background-color:#fbcf77;
		color: #f85035;
		border: 1px solid #100b7f;
		border-radius: 0px 0.3em 0.3em;
		text-align:center;
		text-decoration:none;
		font-size: 1.0em;
		font-weight: 600;
		margin: 2px;
		padding: 3px;
		width: 6.5em;
		
	}
}