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

/* Semantische Tags */
main {
	width: 960px; 
	margin: 0px auto; 
	text-align: center; 
	hyphens: auto;
}
figure {
	margin: 0 18px 0 0;
}

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

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

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

/* Klassen */
.ganz {
	width: 100%;
	margin-top: 10px;
	clear: both;
	text-align: justify;
}
.bild66 {
	width: 61%;
	float: left;
}
.bild50 {
	width: 48%;
	float: left;
}
.bild33 {
	width: 32%;
	float: left;
}
.bild25 {
	width: 24%;
	float: left;
}
.slider50 {
	width: 50%;
	margin: 4px 18px 18px 5px;
	float: left;
}
.links {
	width: 48%;
	margin: 0 0 9px 0;
	float: left;
	text-align: justify;
}
.rechts {
	width: 48%;
	margin: 0 0 9px 0;
	float: right;
	text-align: justify;
}
.drittel {
	width: 31.8%;
	line-height: 16px;
	margin: 7px;
	float: left;
	text-align: justify;
}
.fuenftel
{
	width: 19%;
	margin: 0.9% 0.5% 2% 0.5%;
	float: left;
	text-align: center;
}
.kasten {
	clear: both;
	margin: 9px 0px 9px 0px; 
	padding: 2px 5px 4px 6px; 
	text-align: left;
	line-height: 15px;
	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; 
	border-radius: 9px; 
	box-shadow: 3px 3px 9px #b9b9b9;
	display: flex;
	justify-content: space-around;
}
.cdbild {
	width: 100%;
 	margin: 0px;
}
.cdplayer {
	width: 100%; 
	height: 20px;
	margin: 5px 0 0 0px;
	border-radius: 9px; 
	box-shadow: 3px 3px 9px #b9b9b9;
}
.cdtitel {
 margin: 9px 0 0 9px;
}
.cdtext {
 margin: 9px 9px 9px 9px;
}
.heft {
	width: 690px; 
}
.heftzuruck {
	width: 7.7%; 
	margin-left: 44%;
	line-height: 12px;
	position: fixed;
}
.heftstartseite {
	width: 12%; 
}

/* werden nur in mobil dargestellt */
.mobilplatz {
	display: none; 
}
.mobilzeile {
	display: none; 
}

/* Die Menüs */
nav ul {
	list-style: none; 
	margin: 6px 0 0 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: 0px;
}
.eng {
	margin-left: 0; 
	margin-right: 0;
}

/* Die Links  */
a {
	text-decoration: none; 
	color: #969696;
	transition: all 1.5s;
}
a:link a:visited {
	text-decoration: none; 
}	
a:hover {
	text-decoration: none; 
	color: #ff4500; 
	animation: sanftlink 0.9s forwards;
}
a:focus {
	color: #ff4500; 
}

/* Animationsdefinitionen für Links und Schaltflächen */
@keyframes sanftlink { 
  from { 
    position: relative;
	bottom: 0px; 
  } 
  to { 
    position: relative;
	bottom: 3px; 
  } 
}

@keyframes sanftsf { 
  from { 
    position: relative;
	bottom: 0px;
	background: linear-gradient(to bottom, #dbd6c4 67%, #aabbcc 100%);
  } 
  to { 
    position: relative;
	bottom: 3px;
	background: linear-gradient(to bottom, #aabbcc 5%, #dbd6c4 95%);
  } 
}
@keyframes sanftsfr { 
  from { 
    position: relative;
	bottom: 0px;
	background: linear-gradient(to bottom, #dbd6c4 85%, #aa0000 100%);
  } 
  to { 
    position: relative;
	bottom: 3px;
	background:linear-gradient(to bottom, #aa0000 5%, #dbd6c4 20%);
  } 
}
@keyframes sanftsfg { 
  from { 
    position: relative;
	bottom: 0px;
	background: linear-gradient(to bottom, #dbd6c4 85%, #00aa00 100%);
  } 
  to { 
    position: relative;
	bottom: 3px;
	background: linear-gradient(to bottom, #00aa00 5%, #dbd6c4 20%);  } 
}

/* 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: 10px;
	padding: 0px 9px;
	text-decoration: none;
}
.sf:hover {
	animation: sanftsf 0.9s forwards;
}
.sf:active {
	position: relative; 
	bottom: 3px;
}

/* Schaltflächen in Notenexten*/
.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: 10px;
	padding: 0px 9px;
	text-decoration: none;
	float: right;
}
.sfn:hover {
	animation: sanftsf 0.9s forwards;
}
.sfn:active {
	position: relative; 
	bottom: 3px;
}

/* 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: 10px;
	padding: 0px 9px;
	text-decoration: none;
}
.sfr:hover {
	animation: sanftsfr 0.9s forwards;
}
.sfr:active {
	position: relative; 
	bottom: 3px;
}

/* 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: 10px;
	padding: 0px 9px;
	text-decoration: none;
}
.sfg:hover {
	animation: sanftsfg 0.9s forwards;
}
.sfg:active {
	position: relative; 
	bottom: 3px;
}

/* Die Player */
.player {
	width: 50%; 
	height: 20px; 
	border-radius: 9px; 
	box-shadow: 3px 3px 9px #b9b9b9;
}
.player1 {
	width: 100%; 
	height: 20px;
	clear: both; 
	border-radius: 9px; 
	box-shadow: 3px 3px 9px #b9b9b9;
}
.player2 {
	width: 30%; 
	height: 20px; 
	border-radius: 9px; 
	box-shadow: 3px 3px 9px #b9b9b9; 
	margin-left: 5px;
}
.player3 {
	width: 18%; 
	height: 20px; 
	border-radius: 9px; 
	box-shadow: 3px 3px 9px #b9b9b9;
} 
/* Ende CSS */