/* Grundlagen */
*, *:before, *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family:arial;
}
nav{color:#808080;}
a{
text-decoration: none;
border:          none;
color:antiquewhite;
}
a:link, a:visited{
}
a:hover, a:active{
text-decoration: none;
border:          none;
letter-spacing:  0px;
}
img{
border: 2px groove moccasin;
}
ul{
list-style-type: none;
}
div.breaker, li.breaker, section.breaker, article.breaker, figure.breaker {
float: none;
clear: both;
height: 0;
overflow: hidden;
display: block;
}


/* Platz für die Navigation */
body { margin-top: 3.5em; background-color: black;}

/* Navigation styles */

/* Skip-Link */
#skip-link { position:fixed; left:500px; top:0; background:black; color:white; padding:0.25em; transform:translateY(-100%); transition:0.2s transform; z-index:1001;} 
#skip-link:focus { transform: translateY(0); }

/* Allgemeine Einstellungen und Einstellungen für schmale Viewports */
#sitenav *, #sitenav a { background-color: black;}
#sitenav { top: 1em; left: 2em; }
#sitenav ul { list-style-type: none; margin:0; padding-top:.2em; padding-left:1em; padding-right:1em; border-radius: .5em; border-bottom: 1px solid moccasin;}
#sitenav ul ul { margin-left: 7em; margin-top: -3.1em; padding-left: .1em; }
#sitenav li a { display: inline-block; margin-top:.1em; margin-bottom:.1em; }
#sitenav li a, #sitenav li summary { padding: .1em; margin: 14px; line-height: 1.4em; outline: none; }
#sitenav li a:hover, #sitenav li summary:hover, #sitenav li a:focus, #sitenav li summary:focus { margin-top: 13px; color: moccasin;}
#sitenav li a { text-decoration: none; }
#sitenav li { padding: 0em; white-space: nowrap; vertical-align: middle; }
#sitenav li[aria-current] a[href='#']::before { content: "► "; font-family: arial_unicode_ms }
#sitenav ul details summary::after { font-family: arial_unicode_ms; }
#sitenav ul details:not([open]) summary::after { content: ' ►'; }
#sitenav ul details[open] summary::after { content: ' ◄'; }
#sitenav ul summary::before { content: ""; width: 0; }
#sitenav > details:not([open]) > summary::before { content: "☰"; font-size: 0.9em; } 
#sitenav > details[open] > summary::before { content: "×"; font-size: 1.2em; } 
#sitenav > details { border: 1px solid black; border-radius: .2em; max-width: -webkit-max-content; max-width: -moz-max-content; max-width: max-content; padding: .2em; }
#sitenav > details > ul { margin-left: -.5em; margin-top: .3em; }
#sitenav summary { cursor: pointer; max-width: -webkit-max-content; max-width: -moz-max-content; max-width: max-content; }
#sitenav summary::-webkit-details-marker { display: none; }
#sitenav summary { list-style-type:  none; }
#sitenav.withjs > details > ul > li[aria-current] { border-left: 2px solid black; }
#sitenav.withjs { position: absolute; }
#sitenav.withjs ul { position: absolute; }

/* Einstellungen für breite Viewports */
#sitenav.large { top: 0; left: 0; right: 0; }
#sitenav.large > details { border: none; border-radius: 0; padding: 0 } 
#sitenav.large > details > ul , #sitenav.large > details > ul > li { display: inline-block }
#sitenav.large ul details:not([open]) summary::after { content: ' ▼'; }
#sitenav.large ul details[open] summary::after { content: ' ▲'; }
#sitenav.large > details > ul { width: 100%; box-sizing: border-box; }
#sitenav.large > details > ul { margin-left: 0; margin-top: 0; border-radius: 0; }
#sitenav.large > details > ul > li[aria-current] { border-bottom: 2px solid black; border-left: none; }
#sitenav.large ul ul { margin-left: -.5em; margin-top: -.1em; padding-left: .5em; border-radius: 0 0 .5em .5em;}

/* Kopfzeile styles */
 header {
 	overflow: hidden;
 	background-color:yellowgreen;
 }
 header img {
 	position: absolute;
 	right: 1em;
 	top: 0.1em;
 	margin: 0.3em;
 	width: 3em;
 	border: none;
 	float: right;
 	z-index: 1002;
 }
 
/* Hauptfenster styles */
 main {
 	margin:10px 0px 10px 0px;
 	width: 100%;
 	display:block;
 	overflow: hidden;
 }
 main article {
 	margin: 30px;
 	padding: 3px;
 	float: left;
 }
 main article h1 {
 	color: moccasin;
	font-size:1.1em;
	padding: 0 0 0.5em 2em;
 }	
 main article h2 {
	color: antiquewhite;
	font-size:0.8em;
	padding: 0 0 0.5em 1em;
 }
 main article p {
	color: antiquewhite;
	font-size:1em;
	padding: 0 0 0.5em 1em;
 }
 main article.song {
  clear: left;
  #width: 70%;
 }
 main article.song.titel, main article.song.interpret, main article.song.songtext {
 
 }
 main article.info {
  display: flex;
  align-items: center;
  justify-content: center;
  float: none;
 }
 main article.download {
	margin-left: 1em;
	background-color: moccasin;
  }
 main article.download p {
  color: black;
 }
 main article.kontakt fieldset {
  border: none;
 }
 main article.kontakt fieldset label {
  	margin-top: 0.4em;
  	color: moccasin;
 }
 main article.kontakt fieldset textarea {
 	clear: right;
 }
 main article.kontakt fieldset input, main article.kontakt fieldset textarea, main article.kontakt fieldset label {
 	float: left;
 	clear: left;
 }
 main article.kontakt fieldset input.res {
 	clear: right;
 }
 main article.kontakt fieldset input, main article.kontakt fieldset textarea {
 	margin-top: 0.4em;
 }
 main article.aktuell {
  	width:84%;
  	margin: 0 8% 0 8%;
 }
 main article.aktuell fieldset {
 	color: moccasin;
 	border: none;
 }
 main article.aktuell fieldset legend {
 	padding: 1.6em 1em 2.4em 1em;
 }
 main article.aktuell fieldset h1 {
 	width: 90%;
 	padding: 1em 0.2em 1em;
 	border-bottom: 0.2em solid dimgray;
 }
 main article.aktuell fieldset li h1 {
 	margin-bottom: 0.6em;
 	padding: 0.6em 1em 0.1em;
 	border: none;
 }
 main article.aktuell fieldset ul ul {
 	float: left;
 }
 main article.aktuell fieldset li h2 {
 	margin: 0 2em;
 	float: left;
 	clear: left;
 }
 main article.aktuell fieldset li p {
 	width: 80%;
 	margin: 0.4em 1em 1em;
 	border: none;
 	float: left;
 }
 @media (min-width: 300px) {
 	main article.home h1 {
 		margin-top: 60%;
 		margin-left: 0.6em;
 		float: left;
		clear: both;
 	}
 	main article.home h2, main article.home p {
 		margin-top: 0.6em;
 		margin-left: 0.6em;
 		float: left;
		clear: both;
 	}
 	main article.home {
 		margin: 0;
 		background-image: url(../grafik/bilder/start/DSC03298.jpg);
 		background-repeat: no-repeat;
 		background-position: top left;
   		background-size: cover; 
   		width: 100vw;
   		height: auto;
   		overflow: hidden;
 	}
 	main article.slide_music, main article.download {
 		--sliderbreite: 280px;
 	}
 	main article.download {
		margin-left: calc((100% - var(--sliderbreite))/2);
	}
 	main article.pressetext {
 		padding: 0.4em;
 		width: 90%;
 	}
 	main article.papin-barkhausen {
	margin: 0;
 	}
 	main article.papin-barkhausen p {
		margin: 0.2em;
 	}
 	main article.slide_music {
 		min-width: var(--sliderbreite);
		margin: 0;
		padding: 0;
		float: none;
		clear: both;
		margin-left: calc((100% - var(--sliderbreite))/2);
	}
 	main article.pb_audio {
  		width: var(--sliderbreite);
  		margin: 0;
  		float: left;
  		clear: left;
 	}
 	main article.pb_audio audio {
 		--audiobreite: 270px;
  		width: var(--audiobreite);
  		margin: 0.4em calc((var(--sliderbreite) - var(--audiobreite)) / 2);
 	}
 	main article.slider {
 		width: var(--sliderbreite);
 		max-width: 100%;
 		height: 226px;
  		margin: 0.2em;
  		padding: 0;
 		position: relative;
 	}
 	main article.slider figure.sliderBox div figure img {
		width: 280px;
 	}
 }
 @media (min-width: 992px) {
 	main article.home h1 {
 		margin-top: 2em;
 		margin-left: 50%;
 		float: left;
		clear: both;
 	}
 	main article.home h2, main article.home p {
 		margin-top: 0.6em;
 		margin-left: 50%;
 		float: left;
		clear: both;
 	}
 	main article.home {
 		margin: 0;
 		background-image: url(../grafik/bilder/start/DSC03298.jpg);
 		background-repeat: no-repeat;
 		background-position: top left;
   		background-size: cover; 
   		width: 100vw;
   		height: auto;
   		overflow: hidden;
 	}
 	main article.pressetext {
 		padding: 0.4em;
 		width: 30%;
 	}
 	main article.papin-barkhausen {
		margin: 0;
 	}
 	main article.papin-barkhausen p {
		margin: 0.2em;
 	}
	main article.slide_music {
 		--sliderbreite: 644px;
		min-width: var(--sliderbreite);
		margin-left: 0;
		padding-top: 0.4em;
		clear: right;
	}
 	main article.pb_audio {
  		width: var(--sliderbreite);
  		margin: 0;
  		float: left;
  		clear: left;
 	}
 	main article.pb_audio audio {
 		--audiobreite: 270px;
  		width: var(--audiobreite);
  		margin: 0.4em calc((var(--sliderbreite) - var(--audiobreite)) / 2);
 	}
 	main article.slider {
 		width: var(--sliderbreite);
 		max-width: 100%;
 		height: 470px;
  		margin: auto;
  		padding: 0;
 		position: relative;
 	}
 	main article.slider figure.sliderBox div figure img {
		width: 644px;
 	}
 }
 main article.slider figure.sliderBox {
 	width:100%;
 	overflow: hidden;
  	position: absolute;
 }
 main article.slider figure.sliderBox figcaption {
 	height: 40px;
 	margin: 0em 0.5em;
 	color: moccasin;
 
 }
 main article.slider div {
 	width: 500%;
 	margin:0;
 	padding:0;
 	-webkit-animation: slide 20s infinite alternate;
 	-moz-animation: slide 20s infinite alternate;
 	animation: slide 20s infinite alternate;
 }
 main article.slider div:hover {
 	-webkit-animation-play-state: paused;
 	-moz-animation-play-state: paused;
 	animation-play-state: paused;
 }
 main article.slider div figure {
 	float: left;
 	position: relative;
 }
 main article.slider div figure .label {
 	position: absolute;
 	bottom: 0.5em;
 	left: 0;
 	margin: 0;
 	background-image: linear-gradient(to right, hsla(38,100%,85%,0.9) 30%, hsla(80,61%,50%,0.1) 70%);
 	padding: 2%;
 	width: 50%;
 	color: black;
 }
 main article.slider img {
 	width: 100%;
 	height: auto;
 	max-width: 100%;
 }
 @keyframes slide {
 	  0% {margin-left: 0%; }
 	 21% {margin-left: 0%; }
 	 23% {margin-left: -100%; }
 	 43% {margin-left: -100%; }
 	 45% {margin-left: -200%; }
 	 65% {margin-left: -200%; }
 	 67% {margin-left: -300%; }
 	 87% {margin-left: -300%; }
 	 89% {margin-left: -400%; }
 	100% {margin-left: -400%; }
 }
 @-webkit-keyframes slide {
 	  0% {margin-left: 0%; }
 	 21% {margin-left: 0%; }
 	 23% {margin-left: -100%; }
 	 43% {margin-left: -100%; }
 	 45% {margin-left: -200%; }
 	 65% {margin-left: -200%; }
 	 67% {margin-left: -300%; }
 	 87% {margin-left: -300%; }
 	 89% {margin-left: -400%; }
 	100% {margin-left: -400%; }
 }
 @-moz-keyframes slide {
 	  0% {margin-left: 0%; }
 	 21% {margin-left: 0%; }
 	 23% {margin-left: -100%; }
 	 43% {margin-left: -100%; }
 	 45% {margin-left: -200%; }
 	 65% {margin-left: -200%; }
 	 67% {margin-left: -300%; }
 	 87% {margin-left: -300%; }
 	 89% {margin-left: -400%; }
 	100% {margin-left: -400%; }
 }
 /* Fusszeile styles */
 footer {
 	position: fixed;
 	left:0;
 	bottom:0;
 	width: 100%;
 	background-color:moccasin;
 }