body{
	font-family: Verdana, sans-serif;  /* Globale Schriftart */
	font-size: 14px;  /* Globale Schriftgröße */
	font-weight: normal; 
	color: #000000;  /* Globale Textfarbe schwarz */
	background-color: #f7f2dc;  /* Hintergrundfarbe */
	line-height: 18px;  /* Globaler Zeilenabstand */
}

/* Semantische Tags */
main {
	width: 333px; 
	margin: 0px auto;
	padding: 0 6px 0 5px;
	text-align: center;
}
figure {
	margin: 0 30px 0 0;
}

/* Menüs */
header {
	border: 1px solid #c1c1c1; 
	border-radius: 9px; 
	box-shadow: 3px 3px 9px #b9b9b9;
}
nav ul {
	list-style: none; 
	margin: 5px 0 5px 0;}
nav ul li {
	display: inline; 
	margin-right: 18px;
}
footer nav ul {
	text-align: center; 
	margin: 9px 0 9px 0;
}
footer nav ul li {
	margin: 5px;
}
.eng {
	margin-left: 0; 
	margin-right: 0;
}

/* Schriften */
h1 {
	font-size: 24px;
	line-height: 27px;
	font-weight: normal; 
	color: #727272; 
	margin: 5px 0 7px 0; 
	text-shadow: 2px 2px 4px #b9b9b9; 
	hyphens: none;
}   
h2 {
	font-size: 21px;
	line-height: 24px;
	font-weight: normal; 
	color: #727272; 
	margin: 18px 0 9px 0; 
	text-shadow: 2px 2px 4px #b9b9b9; 
	text-align: center; 
	hyphens: none;
}   
h3 {font-size: 16px;
	line-height: 20px;
	font-weight: normal; 
	color: #990000; 
	margin: 5px 0 5px 0; 
	text-shadow: 2px 2px 4px #b9b9b9; 
	hyphens: none;
} 
h4 {
	font-size: 14px; 
	font-weight: normal; 
	color: #990000; 
	margin: 5px 0 5px 0; 
	text-shadow: 2px 2px 4px #b9b9b9; 
	hyphens: none;
} /* Abstand oben und  unten, in den XH-Berichten, CD-Untertitel */
h5 {
	font-size: 14px; 
	font-weight: normal; 
	color: #990000; 
	margin: 18px 0 0 0; 
	text-shadow: 2px 2px 4px #b9b9b9; 
	hyphens: none;
} /* Abstand nur oben, in den Notenübersichten */
h6 {
	font-size: 14px; 
	font-weight: normal; 
	color: #990000; 
	margin: 0 0 5px 0; 
	text-shadow: 2px 2px 4px #b9b9b9; 
	hyphens: none;
} /* Abstand nur unten, bei Carolan */

.grau {color: #212121;}
.weiss {color: #f7f2dc; font-size: 9px;}
.rot {color: #990000;}
.blau {color: #0000c9;}
.orange {color: #ff4500;}
.magenta {color: #9900ff;}
.kleintext {font-size: 11px; line-height: 12px;}
.kleinnoten {font-size: 10px; line-height: 12px; hyphens: none;}
.kleinorange {font-size: 11px; line-height: 12px; color: #ff4500;}
.kleinblau {font-size: 11px; line-height: 12px; color: #0000c9;}
.kleinrot {font-size: 11px; line-height: 12px; color: #990000;}

/* Die Links  */
a {
	text-decoration:none; 
	color: #969696; 
	hyphens: none;
}
a:link a:visited {
	text-decoration:none; 
	color: #454545; 
	hyphens: none;
}	
a:hover {
	text-decoration: none; 
	color: #ff4500; 
	position: relative; 
	top: 2px; 
	hyphens: none;}

/* Elemente */
p {
	margin: 0 0 5px 0;
}
img {
	margin-top: 5px;
	border-radius: 9px;
	box-shadow: 3px 3px 9px #b9b9b9;
}
hr {
	border: solid #bebebe 3px;
	box-shadow: 3px 3px 9px #b9b9b9;
}
td {
	padding-left: 1px; 
	padding-right: 1px;
}
ul {
	padding-left: 12px;
	margin-bottom: 9px;
}

/* Klassen */
.ganz {
	width: 100%;
	margin-top: 10px;
	clear: both;
	text-align: left;
}
.bild50 {
	width: 100%;
}
.bild33 {
	width: 100%;
}
.bild25 {
	width: 100%;
}
.bild66 {
	width: 100%;
}
.slider50 {
	width: 100%;
	padding-top: 4px;
}
.links {
	width: 100%;
	margin: 0 0 0 0;
	text-align: left;
	hyphens: auto;
}
.rechts {
	width: 100%;
	margin: 0 0 9px 0;
	text-align: left;
	hyphens: auto;
}
.drittel {
	width: 100%;
	margin: 9px 0px 9px 0px; 
	text-align: left;
	hyphens: auto;
}
.fuenftel
{
	width: 100%;
	margin: 2% 0.5% 2% 0.5%;
	float: left;
	text-align: center;
}
.kasten {
	color: #636363;
	clear: both;
	margin: 9px 0px 9px 0px; 
	padding: 2px 5px 4px 6px; 
	line-height: 15px; 
	text-align: left;
	hyphens: auto;
	border: 1px solid #c1c1c1; 
	border-radius: 9px; 
	box-shadow: 3px 3px 9px #b9b9b9;
}
.fusskasten {
	width: 100%; 
	clear: both; 
	color: #636363; 
	margin: 9px 0 9px 0; 
	padding: 7px 0 7px 0; 
	border: 1px solid #c1c1c1; 
	line-height: 15px;
	background-image: url(hm_bilder/fusskasten.jpg);
	border-radius: 9px; 
	box-shadow: 3px 3px 9px #b9b9b9;
	display: flex;
	flex-direction: column;
}
.cdbild {
	width: 100%;
 	margin: 0px;
}
.cdplayer {
	width: 100%; 
	height: 20px;
	margin: 5px 0 0 0;
	border-radius: 9px; 
	box-shadow: 3px 3px 9px #b9b9b9;
}
.cdtitel {
 	width: 100%;
 	margin: 18px 0 0 0;
}
.cdtext {
 	width: 100%;
 	margin: 18px 0 0 0;
}
.heft {
	width: 360px; 
}
.heftzuruck {
	margin-left: 0px;
	width: 40%;
	position: fixed;
}
.heftstartseite {
	margin: 0 0 0 auto;
}

/* _platz und _zeile wird nur in mobil dargestellt, _weg fehlt in mobil */
.mobilplatz {
	display: block; 
}
.mobilzeile {
	display: inline; 
}
.mobilweg {
	display: none; 
} 

/* Schaltflächen grau */
.sf {
	background: linear-gradient(to bottom, #dbd6c4 67%, #aabbcc 100%);
	border-radius: 9px;
	border: 1px solid #c1c1c1;
	box-shadow: 3px 3px 9px #c1c1c1;
	display: inline-block;
	cursor: pointer;
	color: #000000;
	font-size: 11px;
	padding: 0px 9px;
	margin: 3px 0px;
	text-decoration: none;
}
.sf:hover {
	background:linear-gradient(to bottom, #aabbcc 5%, #dbd6c4 95%);
}
.sf:active {
	position: relative; 
	top:2px;
}

/* Schaltflächen Noten */
.sfn {
	background: linear-gradient(to bottom, #dbd6c4 67%, #aabbcc 100%);
	border-radius: 9px;
	border: 1px solid #c1c1c1;
	box-shadow: 3px 3px 9px #c1c1c1;
	display: inline-block;
	cursor: pointer;
	color: #000000;
	font-size: 11px;
	padding: 0px 9px;
	margin: 3px 0px;
	text-decoration: none;
	float: right;
}
.sfn:hover {
	background: linear-gradient(to bottom, #aabbcc 5%, #dbd6c4 95%);
}
.sfn:active {
	position:relative; top:2px;
}

/* Schaltflächen rot */
.sfr {
	background: linear-gradient(to bottom, #dbd6c4 85%, #aa0000 100%);
	border-radius: 9px;
	border: 1px solid #c1c1c1;
	box-shadow: 3px 3px 9px #c1c1c1;
	display: inline-block;
	cursor: pointer;
	color: #000000;
	font-size: 11px;
	padding: 0px 9px;
	margin: 3px 0px;
	text-decoration: none;
}
.sfr:hover {
	background: linear-gradient(to bottom, #aa0000 5%, #dbd6c4 20%);
}
.sfr:active {
	position: relative; 
	top: 2px;
}

/* Schaltflächen grün */
.sfg {
	background: linear-gradient(to bottom, #dbd6c4 85%, #00aa00 100%);
	border-radius: 9px;
	border: 1px solid #c1c1c1;
	box-shadow: 3px 3px 9px #c1c1c1;
	display: inline-block;
	cursor: pointer;
	color: #000000;
	font-size: 11px;
	padding: 0px 9px;
	margin: 3px 0px;
	text-decoration: none;
}
.sfg:hover {
	background: linear-gradient(to bottom, #00aa00 5%, #dbd6c4 20%);
}
.sfg:active {
	position: relative; 
	top: 2px;
}

/* Die Player haben für PC andere Breiten als für Mobilgeräte */
.player {
	width: 90%; 
	height: 20px; 
	border-radius: 9px; 
	box-shadow: 3px 3px 9px #b9b9b9;
}
.player1 {
	width: 100%; 
	height: 20px; 
	margin-top: 0px; 
	clear: both; 
	border-radius: 9px; 
	box-shadow: 3px 3px 9px #b9b9b9;
}
.player2 {
	width: 45%; 
	height: 20px; 
	border-radius: 9px; 
	box-shadow: 3px 3px 9px #b9b9b9; 
	margin-left: 5px;
}
.player3 {
	width: 100%; 
	height: 20px; 
	border-radius: 9px; 
	box-shadow: 3px 3px 9px #b9b9b9;
} 
/* Ende CSS */