@charset "utf-8";
/* Einfache fließende Medien
   Hinweis: Für fließende Medien müssen Sie die Attribute 'height' und 'width' des Medium aus dem HTML-Code entfernen
   http://www.alistapart.com/articles/fluid-images/ 
*/

*{
	margin:0;
	padding:0;
	box-sizing:border-box; /*vorsicht bei "älteren" ressourcen*/
}

html {
	font-size:3.5vw;
}

img, object, embed, video {
	max-width: 100%;
}
/* IE 6 unterstützt keine maximale Breite, verwenden Sie daher eine Standardbreite von 100% */
.ie6 img {
	width:100%;
}

/*
	Dreamweaver-Eigenschaften für fließende Raster
	----------------------------------
	dw-num-cols-mobile:		5;
	dw-num-cols-tablet:		8;
	dw-num-cols-desktop:	12;
	dw-gutter-percentage:	5;
	
	Idee durch den Artikel "Responsive Web Design" von Ethan Marcotte 
	http://www.alistapart.com/articles/responsive-web-design
	
	und "Golden Grid System" von Joni Korpi
	http://goldengridsystem.com/
*/

/* Layout für Mobilgeräte: 480 px oder weniger. */

.gridContainer {
	width: 100%;
	padding-left: 0%;
	padding-right: 0%;
}

#logo {
	clear: both;
	float: left;
	width: 100%;
	display: block;
}

flexnav {
	display:flex;
	width:100%;
	padding-left:25%;
	padding-right:25%;
	justify-content:center;
	flex-wrap:wrap;
}

home {
	background-color:rgba(0,0,0,0.75);
	width:100%;
	padding-top:6px;
	padding-bottom:6px;
	border-left-width: 1px;
	border-left-style: solid;
	border-left-color: rgba(51,51,51,1);
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: rgba(51,51,51,1);
	border-right-width: 1px;
	border-right-style: solid;
	border-right-color: rgba(51,51,51,1);
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: rgba(51,51,51,1);
}
termine {
	background-color:rgba(0,0,0,0.75);
	width:100%;
	padding-top:6px;
	padding-bottom:6px;
	border-left-width: 1px;
	border-left-style: solid;
	border-left-color: rgba(51,51,51,1);
	border-top-width: 0px;
	border-top-style: none;
	border-top-color: none;
	border-right-width: 1px;
	border-right-style: solid;
	border-right-color: rgba(51,51,51,1);
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: rgba(51,51,51,1);
}
band {
	background-color:rgba(0,0,0,0.75);
	width:100%;
	padding-top:6px;
	padding-bottom:6px;
	border-left-width: 1px;
	border-left-style: solid;
	border-left-color: rgba(51,51,51,1);
	border-top-width: 0px;
	border-top-style: none;
	border-top-color: none;
	border-right-width: 1px;
	border-right-style: solid;
	border-right-color: rgba(51,51,51,1);
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: rgba(51,51,51,1);
}
media {
	background-color:rgba(0,0,0,0.75);
	width:100%;
	padding-top:6px;
	padding-bottom:6px;
	border-left-width: 1px;
	border-left-style: solid;
	border-left-color: rgba(51,51,51,1);
	border-top-width: 0px;
	border-top-style: none;
	border-top-color: none;
	border-right-width: 1px;
	border-right-style: solid;
	border-right-color: rgba(51,51,51,1);
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: rgba(51,51,51,1);
}
veranstalter {
	background-color:rgba(0,0,0,0.75);
	width:100%;
	padding-top:6px;
	padding-bottom:6px;
	border-left-width: 1px;
	border-left-style: solid;
	border-left-color: rgba(51,51,51,1);
	border-top-width: 0px;
	border-top-style: none;
	border-top-color: none;
	border-right-width: 1px;
	border-right-style: solid;
	border-right-color: rgba(51,51,51,1);
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: rgba(51,51,51,1);
}
kontakt {
	background-color:rgba(0,0,0,0.75);
	width:100%;
	padding-top:6px;
	padding-bottom:6px;
	border-left-width: 1px;
	border-left-style: solid;
	border-left-color: rgba(51,51,51,1);
	border-top-width: 0px;
	border-top-style: none;
	border-top-color: none;
	border-right-width: 1px;
	border-right-style: solid;
	border-right-color: rgba(51,51,51,1);
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: rgba(51,51,51,1);
}

#introtext_home {
	clear: both;
	float: left;
	margin-top:25px;
	padding-top:25px;
	padding-bottom:25px;
	width: 100%;
	display: block;
	background-image:url(../img/IMG_7240_1920x1080_96dpi.jpg);
}

#intro-text {
	clear: both;
	float: left;
	margin-top:25px;
	padding-top:25px;
	padding-bottom:25px;
	width: 100%;
	display: block;
	background-color:rgba(0,0,0,0.75);
}

#termine {
	clear: both;
	float: left;
	margin-top:25px;
	padding-top:10%;
	padding-bottom:10%;
	width: 100%;
	max-height: 1080px;
	display: block;
	background-color:rgba(0,0,0,0.75);
	background-image:url(../img/IMG_7235_1920x1080p_96dpi.jpg);
}

#terminuebersicht_mobil {
	clear: both;
	float: left;
	margin-top:25px;
	padding-top:25px;
	width: 100%;
	display: block;
	background-color:rgba(0,0,0,0.75);
}

#terminuebersicht_screen {
	clear: both;
	float: left;
	margin-top:25px;
	padding-top:25px;
	width: 100%;
	display: none;
	background-color:rgba(0,0,0,0.75);
}

#vadatum {
	clear: both;
	float: left;
	width: 100%;
	display: block;
}

#valocation {
	clear: both;
	float: left;
	width: 100%;
	display: block;
}

#vaort {
	clear: both;
	float: left;
	width: 100%;
	display: block;
}

#vazeit {
	clear: both;
	float: left;
	width: 100%;
	margin-bottom: 25px;
	display: block;
}

#slider {
	clear: both;
	float: left;
	width: 100%;
	margin-top: 25px;
	display: block;
}

#news {
	clear:both;
	diplay:block;
	float:left;
	width:100%;
	margin-top:25px;
	padding-top:25px; 
	padding-bottom:25px;
	background-color:rgba(0,0,0,0.75);
}

aktuelles { display:flex; flex-wrap:wrap; padding:0; margin-top:25px; }

newspic { width:100%; }

beitrag { padding-top:12px; padding-bottom:25px; }

#footer {
	clear: both;
	float: left;
	padding-top: 12px;
	margin-left: 0;
	margin-bottom: 12px;
	width: 100%;
	display: block;
}

#band1 {
	clear:both;
	float:left;
	display:block;
	width:30%;
	margin-right:12px;
	margin-top:12px;
}

#band2 {
	clear:none;
	float:left;
	display:block;
	width:30%;
	margin-right:12px;
	margin-top:12px;
}

#band3 {
	clear:none;
	float:left;
	display:block;
	width:30%;
	margin-top:12px;
}

#band4 {
	clear:both;
	float:left;
	display:block;
	width:100%;
	margin-top:12px;
}

#bildergalerie {
	clear:both;
	float:left;
	display:block;
	width:100%;
	margin-top:25px;
	padding-bottom:25px;
	background-color:rgba(0,0,0,0.75);
}

.thumb {
	padding-left:12px;
	padding-right:12px;
	padding-bottom:12px;
}

.bandpic {
	margin-top:12px;
}

audioplayer {
	display:flex;
	flex-wrap:wrap;
	width:100%;
}

/*.albumcover {
	max-width:480px;
	padding-left:12px;
	padding-right:12px;
	padding-bottom:12px;
}*/

.navcontentleft{
	display:table-cell;
	width:0%;
}

.navcontentcenter{
	display:table-cell;
	widows: 100%;
}

.navcontentright{
	display:table-cell;
	width:0%;
}

.mediacontentleft{
	display:table-cell;
	width:0%;
}

.mediacontentcenter{
	display:table-cell;
	width: 100%;
}

.mediacontentright{
	display:table-cell;
	width:0%;
}

.content{
	display:table;
	width:100%;
}

.contentleft{
	display:table-cell;
	width:12.5%;
}

.contentcenter{
	display:table-cell;
	width:75%;
}

.contentright{
	display:table-cell;
	width:12.5%;
}

.subcontent{
	display:table;
	width:100%;
}

.subcontentleft{
	display:table-cell;
	width:0%;
}

.subcontentcenter{
	display:table-cell;
	width:100%;
}

.subcontentright{
	display:table-cell;
	width:0%;
}

.galeriecontentleft{
	clear:both;
	float:left;
	display:table-cell;
	width:100%;
}

.galeriecontentcenter{
	clear:both;
	float:left;
	display:table-cell;
	width:100%;
}

.galeriecontentright{
	clear:both;
	float:left;
	display:table-cell;
	width:100%;
}

.fathead {
	font-size:2.2rem;
}

.headline {
	font-size:1.8rem;
}

.subhead {
	font-size:1.5rem;

}

.subline {
	font-size:1.2rem;

}
.copytext {
	font-size:1rem;
}

.copysmall {
	font-size:0.75rem;
}

#veranstalter {
	width:100%;
	padding-top:50px;
	display:flex;
	flex-wrap:wrap;
}

leftspace {
	background-color:rgba(0,0,0,0.75);
	width:0%;
	height:100%;
}

content5 {
	background-color:rgba(0,0,0,0.75);
	width:100%;
	padding-left:5%;
	padding-top:25px;
	padding-right:5%;
	padding-bottom:25px;
	height:100%;
}

/*contentkontakt {
	background-color:rgba(0,0,0,0.75);
	width:100%;
	padding-left:0%;
	padding-top:25px;
	padding-right:0%;
	padding-bottom:25px;
}*/

rightspace {
	background-color:rgba(0,0,0,0.75);
	width:0%;
	height:100%;
}

#downloads {
	width: 100%;
}

#repertoire {
	width: 100%;
	padding-top:50px;
}

formular {
		display: flex;
		flex-wrap: nowrap;
		justify-content: space-around;
		width: 100%;
	}
	
links {
	width:50%;
	margin-left: 12px;
	margin-top: 6px;
	margin-right: 12px;
	margin-bottom: 12px;
}

mitte {
	width:100%;
	margin-left: 12px;
	margin-top: 6px;
	margin-right: 12px;
	margin-bottom: 12px;
}

rechts {
	width:50%;
	margin-left: 12px;
	margin-top: 6px;
	margin-right: 12px;
	margin-bottom: 12px;
}

input, textarea, button {
	width: 100%;
	border-style: none;
	font-family: 'Abel', sans-serif;
}

/* Layout für Tablet-PCs: 481 bis 768 px. Erbt Stile vom: Layout für Mobilgeräte. */

@media only screen and (min-width: 481px) {
	
html {
	font-size:1.7vw;
}	
	
.gridContainer {
	width: 100%;
	padding-left: 0%;
	padding-right: 0%;
}
	
#logo {
	clear: both;
	float: left;
	width: 100%;
	display: block;
}

flexnav {
	display:flex;
	width:100%;
	padding-left:6%;
	padding-right:6%;
	justify-content:space-around;
	flex-wrap:nowrap;
}

home {
	background-color:transparent;
	width:100%;
	padding-top:0px;
	padding-bottom:0px;
	border-left-width:0px;
	border-left-style:none;
	border-left-color:none;
	border-top-width: 0px;
	border-top-style:none;
	border-top-color:none;
	border-right-width:0px;
	border-right-style:none;
	border-right-color:none;
	border-bottom-width:0px;
	border-bottom-style:none;
	border-bottom-color:none;
}
termine {
	background-color:transparent;
	width:100%;
	padding-top:0px;
	padding-bottom:0px;
	border-left-width:0px;
	border-left-style:none;
	border-left-color:none;
	border-top-width: 0px;
	border-top-style:none;
	border-top-color:none;
	border-right-width:0px;
	border-right-style:none;
	border-right-color:none;
	border-bottom-width:0px;
	border-bottom-style:none;
	border-bottom-color:none;
}
band {
	background-color:transparent;
	width:100%;
	padding-top:0px;
	padding-bottom:0px;
	border-left-width:0px;
	border-left-style:none;
	border-left-color:none;
	border-top-width: 0px;
	border-top-style:none;
	border-top-color:none;
	border-right-width:0px;
	border-right-style:none;
	border-right-color:none;
	border-bottom-width:0px;
	border-bottom-style:none;
	border-bottom-color:none;
}
media {
	background-color:transparent;
	width:100%;
	padding-top:0px;
	padding-bottom:0px;
	border-left-width:0px;
	border-left-style:none;
	border-left-color:none;
	border-top-width: 0px;
	border-top-style:none;
	border-top-color:none;
	border-right-width:0px;
	border-right-style:none;
	border-right-color:none;
	border-bottom-width:0px;
	border-bottom-style:none;
	border-bottom-color:none;
}
veranstalter {
	background-color:transparent;
	width:100%;
	padding-top:0px;
	padding-bottom:0px;
	border-left-width:0px;
	border-left-style:none;
	border-left-color:none;
	border-top-width: 0px;
	border-top-style:none;
	border-top-color:none;
	border-right-width:0px;
	border-right-style:none;
	border-right-color:none;
	border-bottom-width:0px;
	border-bottom-style:none;
	border-bottom-color:none;
}
kontakt {
	background-color:transparent;
	width:100%;
	padding-top:0px;
	padding-bottom:0px;
	border-left-width:0px;
	border-left-style:none;
	border-left-color:none;
	border-top-width: 0px;
	border-top-style:none;
	border-top-color:none;
	border-right-width:0px;
	border-right-style:none;
	border-right-color:none;
	border-bottom-width:0px;
	border-bottom-style:none;
	border-bottom-color:none;
}
	
#intro-text {
	clear: both;
	float: left;
	margin-top:25px;
	padding-top:25px;
	padding-bottom:25px;
	width: 100%;
	display: block;
	background-color:rgba(0,0,0,0.75);
}

#termine {
	clear: both;
	float: left;
	margin-top:25px;
	padding-top:10%;
	padding-bottom:10%;
	width: 100%;
	max-height: 1080px;
	display: block;
	background-color:rgba(0,0,0,0.75);
	background-image:url(../img/IMG_7235_1920x1080p_96dpi.jpg);
}
	
#terminuebersicht_mobil {
	clear: both;
	float: left;
	margin-top:25px;
	padding-top:25px;
	width: 100%;
	display: none;
	background-color:rgba(0,0,0,0.75);
}

#terminuebersicht_screen {
	clear:both;
	float: left;
	width: 100%;
	display: block;
	background-color:rgba(0,0,0,0.75);
}

#vadatum {
	clear: both;
	float: left;
	width: 25%;
	display: block;
}

#valocation {
	clear: none;
	float: left;
	width: 25%;
	display: block;
}

#vaort {
	clear: none;
	float: left;
	width: 25%;
	display: block;
}
	
#vazeit {
	clear: none;
	float: left;
	width: 25%;
	display: block;
}
	
#slider {
	clear: both;
	float: left;
	width: 100%;
	margin: 0px;
	padding: 0px;
	display: block;
}

#news {
	clear:both;
	diplay:block;
	float:left;
	width:100%;
	margin-top:25px;
	padding-top:25px; 
	padding-bottom:25px;
	background-color:rgba(0,0,0,0.75);
}
	
aktuelles { display:flex; flex-wrap:nowrap; align-items:baseline; padding:0px; margin-top:0px; }

newspic { flex: 1 1 100%; max-width:480px; margin-top:25px; }

beitrag { align-self:flex-end; flex: 1 1 100%; padding-top:0px; padding-left:12px; padding-bottom:0px; }
	
#footer {
	clear: both;
	float: left;
	margin-left: 0;
	padding-top: 12px;
	margin-bottom: 12px;
	width: 100%;
	display: block;
}

#slider {
	clear: both;
	float: left;
	width: 100%;
	margin-top: 25px;
	display: block;
}

#band1 {
	clear:both;
	float:left;
	display:block;
	max-width:120px;
	margin-right:25px;
	margin-top:25px;
}

#band2 {
	clear:none;
	float:left;
	display:block;
	max-width:120px;
	margin-right:25px;
	margin-top:25px;
}

#band3 {
	clear:none;
	float:left;
	display:block;
	width:33,3333%;
	margin-top:25px;
}

#band4 {
	clear:both;
	float:left;
	display:block;
	width:100%;
	margin-top:25px;
}

#bildergalerie {
	clear:both;
	float:left;
	display:block;
	width:100%;
	margin-top:50px;
	padding-top:25px;
	padding-bottom:50px;
	background-color:rgba(0,0,0,0.75);
}

.thumb {
	padding-left:12px;
	padding-bottom:12px;
}

.bandpic {
	margin-top:25px;
}

audioplayer {
	display:flex;
	flex-wrap:nowrap;
	width:100%;
}

/*.albumcover {
	width:288px;
	padding-left:12px;
	padding-right:12px;
	padding-bottom:0px;
	flex-grow:1;
	flex-shrink:1;
}*/
	
.navcontentleft{
	display:table-cell;
	width:10.5%;
}

.navcontentcenter{
	display:table-cell;
	width:79%;
	min-width: 480px;
	max-width: 980px;
}

.navcontentright{
	display:table-cell;
	width:10.5%;
}

.mediacontentleft{
	display:table-cell;
	width:0%;
}

.mediacontentcenter{
	display:table-cell;
	width:100%;
}

.mediacontentright{
	display:table-cell;
	width:0%;
}

.content{
	display:table;
	width:100%;
}

.contentleft{
	display:table-cell;
	width:12.5%;
}

.contentcenter{
	display:table-cell;
	width:75%;
}

.contentright{
	display:table-cell;
	width:12.5%;
}

.subcontent{
	display:table;
	width:100%;
}

.subcontentleft{
	display:table-cell;
	width:0%;
}

.subcontentcenter{
	display:table-cell;
	width:100%;
}

.subcontentright{
	display:table-cell;
	width:0%;
}

.galeriecontentleft{
	clear:both;
	float:left;
	display:table-cell;
	width:33.3333%;
}

.galeriecontentcenter{
	clear:none;
	float:left;
	display:table-cell;
	width:33.3333%;
}

.galeriecontentright{
	clear:none;
	float:left;
	display:table-cell;
	width:33.3333%;
}

.fathead {
	font-size:4rem;
}

.headline {
	font-size:2.5rem;
}

.subhead {
	font-size:2rem;

}

.subline {
	font-size:1.8rem;

}
.copytext {
	font-size:1rem;
}

.copysmall {
	font-size:0.75rem;
}

#veranstalter {
	width:100%;
	padding-top:50px;
	display:flex;
	flex-wrap:nowrap;
}

leftspace {
	background-color:rgba(0,0,0,0.75);
	width:0%;
	height:100%;
}

content5 {
	background-color:rgba(0,0,0,0.75);
	width:100%;
	padding-left:12.5%;
	padding-top:25px;
	padding-right:12.5%;
	padding-bottom:25px;
	height:100%;
}

rightspace {
	background-color:rgba(0,0,0,0.75);
	width:0%;
	height:100%;
}

#downloads {
	width: 50%;
	padding-right:12px;
}

#repertoire {
	width: 50%;
	padding-top:0px;
}

formular {
		display: flex;
		flex-wrap: nowrap;
		justify-content: space-around;
		width: 100%;
	}
	
links {
	width:50%;
	margin-left: 12.5%;
	margin-top: 6px;
	margin-right: 12px;
	margin-bottom: 12px;
}

mitte {
	width:100%;
	margin-left: 12.5%;
	margin-top: 6px;
	margin-right: 12.5%;
	margin-bottom: 12px;
}

rechts {
	width:50%;
	margin-left: 12px;
	margin-top: 6px;
	margin-right: 12.5%;
	margin-bottom: 12px;
}

	input, textarea, button {
	width: 100%;
	border-style: none;
	font-family: 'Abel', sans-serif;
}
	
}

/* Desktoplayout: ab 769 px.  Erbt Stile von: den Layouts für Mobilgeräte und Tablet-PCs. */

@media only screen and (min-width: 769px) {
	
html {
	font-size:1vw;
}	
	
.gridContainer {
	width: 100%;
	padding-left: 0%;
	padding-right: 0%;
}

#logo {
	clear: both;
	float: left;
	width: 100%;
	display: block;
}

flexnav {
	display:flex;
	width:100%;
	padding-left:25%;
	padding-right:25%;
	justify-content:space-around;
}
	
/*#nav {
	clear: both;
	float: left;
	width: 100%;
	display: block;
}
	
#nav ul li a {
	float: left;
	width: 16.6666%;
	font-size: 1rem;
	background-color:transparent;
	margin: 0px;
	padding: 0px;
	border-top-width: 0px;
	border-bottom-width: 0px;
	border-top-style: none;
	border-bottom-style: none;
}
	
#nav li:first-child {
	border-top-width: 0px;
	border-top-style: none;
	border-top-color: transparent;
}*/

#introtext_home {
	clear: both;
	float: left;
	margin-top:50px;
	padding-top:100px;
	margin-bottom:25px;
	width: 100%;
	height:800px;
	display: block;
	background-image:none;
}
	
#intro-text {
	clear: both;
	float: left;
	margin-top:50px;
	padding-top:25px;
	padding-bottom:25px;
	width: 100%;
	display: block;
	background-color:rgba(0,0,0,0.75);
}

#termine {
	clear: both;
	float: left;
	margin-top:25px;
	margin-bottom:25px;
	padding-top:10%;
	padding-bottom:10%;
	width: 100%;
	height: 1080px;
	display: block;
	background-color:rgba(0,0,0,0.75);
	background-image:url(../img/IMG_7235_1920x1080p_96dpi.jpg);
}

#terminuebersicht_screen {
	clear:both;
	float: left;
	width: 100%;
	margin-top:50px;
	display: block;
	background-color:rgba(0,0,0,0.75);
}

#slider {
	clear: both;
	float: left;
	width: 100%;
	margin-top: 25px;
	margin-bottom:25px;
	display: block;
}

#news {
	clear:both;
	diplay:block;
	float:left;
	width:100%;
	margin-top:25px;
	padding-top:25px; 
	padding-bottom:25px;
	background-color:rgba(0,0,0,0.75);
}	

#newspic1 {
	clear:both;
	diplay:block;
	float:left;
	width:33.3333%;
	margin-top:25px;
}
	
#newstext1 {
	clear:none;
	diplay:block;
	float:left;
	width:66.6666%;
	padding-left:12px;
	margin-top:25px;
	margin-bottom:25px;
}
	
#newspic2 {
	clear:both;
	diplay:block;
	float:left;
	width:33.3333%;
	margin-top:25px;
}

#newstext2 {
	clear:none;
	diplay:block;
	float:left;
	width:66.6666%;
	padding-left:12px;
	margin-top:25px;
	margin-bottom:25px;
}
	
#newspic3 {
	clear:both;
	diplay:block;
	float:left;
	width:33.3333%;
	margin-top:25px;
}

#newstext3 {
	clear:none;
	diplay:block;
	float:left;
	width:66.6666%;
	padding-left:12px;
	margin-top:25px;
	margin-bottom:25px;
}
	
#footer {
	clear: both;
	float: left;
	margin-left: 0;
	margin-top: 12px;
	padding-top: 12px;
	width: 100%;
    height:100%;
	display: block;
    align-content: flex-end;
}