/*Rahmen*/
html, body {
	margin:				0;
	margin-bottom:		1px;
	padding:			0;
}
body { margin: 			0; padding: 			0; font-family: 		"Trebuchet MS", Helvetica, sans-serif; font-size: 			1em; line-height: 		1.5em; background-color: #eeeeee; background-image: url(../bilder/hintergrundgross.jpg); background-repeat: no-repeat; background-position: 0 0; }
#hint {
    position:	 		absolute; 
    left:				50%; 
    top:				20px; 
    width:				100px; 
    z-index:			-100;
}
#hint h2 {
    text-align:			left; 
    margin:				0; 
    font-size:			8px;
    line-height: 		8px;
    color:				#ccc;
}

/* --- Allgemeines Design --- */
h3 {
    color: midnightblue;
    font-size: 1.5rem;
}

#wrap {
	margin: 			0 auto;
	padding: 			0;
	padding-top: 		0;
	height: 			100%;
	width: 				100%;
	max-width:          100%;
	text-align: 		center;
	background-color: 	#ccc;
	background-color: 	rgba(0,0,0,0);
	-webkit-box-shadow: 0px 0px 5px #999;
	-moz-box-shadow: 	0px 0px 5px #999;
	box-shadow: 		0px 0px 5px #999;
	z-index: 0;
}
#wrap.fotoPreview {
	width: 1200px;
}

@media screen and (min-width: 620px) {
	#wrap, #wrap.fotoPreview {
		width: 620px;
	}
}
@media screen and (min-width: 760px) {
	#wrap, #wrap.fotoPreview {
		width: 760px;
	}
}
@media screen and (min-width: 980px) {
	#wrap {
		width: 980px;
	}
	#wrap.fotoPreview {
		width: 100%;
	}
}
*[class^="prlx"] {
  	position: 			relative;
  	width: 				100%;
  	height: 			auto;
	margin-top: 		90px;
}
@media screen and (min-width: 620px) {
	*[class^="prlx"] { margin-top: 	125px; }
}
@media screen and (min-width: 760px) {
	*[class^="prlx"] {
		margin-top: 	145px;
	}
}
@media screen and (min-width: 980px) {
	*[class^="prlx"] {
		margin-top: 	190px;
	}
}
.prlx-1 { 
  	z-index: 			10;
}
.prlx-1 img { 
  	width:				100%;
	height:				auto;
}
.section-one {
	overflow: 			hidden;
	
}
.section-two { overflow: visible; position: relative; z-index: 135; }
#headline {
	margin: 			10 auto;
	width:				auto;
	padding:			0;
	z-index: 			-504;
	padding:			0 10px;
}

@media screen and (min-width: 620px) {
	#headline {
		padding:		0 30px;
	}
}
#text { margin: 			0 auto; width:				100%; padding:			0; z-index: 			-505; }
#logo {
	margin: 10px 10px 10px -2px;
	width: 100px;
}
#logo img { position: relative; left: 0%; width: 200px; }
@media screen and (min-width: 620px) {
	#logo { margin:			15px 10px 5px 45px; width:			100%; height:			auto; float: 			none; }
	#logo img { position: relative; left: 10%; width: 100%; }
}
@media screen and (min-width: 760px) {
	#logo {
		margin:			15px 10px 5px 95px;
		width:			230px;
		height:			auto;
		float: 			none;
}
#logo img { position: relative; left: 0; width: 280px; }
}
@media screen and (min-width: 980px) {
	#logo {
		margin:			15px 10px 5px 115px;
		width:			270px;
		height:			auto;
		float: 			center;
}

#logo a, .nav-collapse a {
    pointer-events: auto; /* Aber die echten Links im Menü bleiben klickbar! */
}

#logo img {
	width: 410px;
	}
}
#topnavi {
	height: 			90px; 
	width: 				100%;
  	position: 			fixed;
  	background-color:	black;
  	pointer-events:     auto;
  	top: 				0;
  	left: 				0;
  	box-shadow: 		0px 0px 0px 0px rgba(0, 0, 0, 0);
	z-index: 			140;
}
@media screen and (min-width: 620px) {
	#topnavi { width: 100%; height: 		124px; }
}
@media screen and (min-width: 760px) {
	#topnavi { width: 100%; height: 		145px; }
}
@media screen and (min-width: 980px) {
	#topnavi { width: 100%; height: 		190px; }
}
#navi-wrap {
	width: 				100%;
	position:		 	absolute;
	z-index: 			150;
}
@media screen and (min-width: 620px) {
	#navi-wrap {
		width: 			620px;
		left:			50%;
		margin-left:	-385px;
	}
}
@media screen and (min-width: 760px) {
	#navi-wrap {
		width: 			760px;
		left:			50%;		
		margin-left:	-503px;
	}
}
@media screen and (min-width: 980px) {
	#navi-wrap {
		width: 			980px;
		left:			50%;		
		margin-left:	-705px;
	}
}

#galerie-wrapper {
 display: flex;          /* Aktiviert Flexbox */
    flex-wrap: wrap;        /* Erlaubt Zeilenumbruch */
    justify-content: center; /* Zentriert die Bilder horizontal */
    gap: 10px;              /* Abstand zwischen den Bildern */
    width: 100%;
    margin: 20px 0;
}

.galerieBild {
    /* Entferne hier eventuelle "float: left" Angaben! */
    float: none; 
    display: block;
}

#video-wrapper {
    display: flex;          /* Aktiviert Flexbox */
    flex-wrap: wrap;        /* Erlaubt Zeilenumbruch */
    justify-content: center; /* Zentriert die Bilder horizontal */
    gap: 10px;              /* Abstand zwischen den Bildern */
    width: 30%;
    margin: 20px 0;
}


.videoBild {
    /* Entferne hier eventuelle "float: left" Angaben! */
    float: none; 
    display: block;
}

.musikerBild {
    /* Entferne hier eventuelle "float: left" Angaben! */
    float: none; 
    display: block;
}



.container {
  display: flex;
  justify-content: center;  /* Horizontal zentrieren */
  align-items: center;      /* Vertikal zentrieren */
/*  height: 100vh;            Optional: Volle Bildschirmhöhe */
}

.colLeft { position: relative; width: 100%; float : none; padding:25px 10px; box-sizing: border-box; display: block;}
.colRight { text-align: center; position: relative; left: -1%; width: 100%; float :none; padding:25px 10px; box-sizing: border-box; display: block; }

.colGesamt1 {
    display: block;
    width: 100%;
    padding:5px 20px;
	font-weight: normal;
	box-sizing: border-box;
	
}
.colGesamt2 {
   	width: 100%;
    float:left;
    padding:5px 10px;
	background-color: #555555;
	font-weight: normal;
}

@media screen and (min-width: 620px) {
	.colGesamt1 {
	    float: none;
	    width: 100%;
	    margin: 0 auto;
	    padding:5px 30px;
		font-weight: normal;
}
	.colGesamt2 { 
	    width: 100%; 
	    float:left; 
	    padding:5px 30px; 
	    background-color: #555555; 
	    font-weight: normal; 
	    text-align: center; 
	    right: 50%; 
}
	.colLeft { 
	   text-align: center; 
	   float:none; 
	   padding:25px 30px; 
	   width: 100% !important;
	   box-sizing: border-box;
}
	.colRight { 
	   text-align: center; 
	   right: 0 auto; 
	   float:none; 
	   padding:25px 0; 
	   width: 100% !important;
	   box-sizing: border-box;
}
    .colGesamt2 p {
	   color: #FFFFFF;
}
    .colGesamt2 h3 {
	   color: #FFFFFF;
	   font-weight: normal;
}
/*    .linieLinks {
       border-left: 1px solid #ccc;
       padding-left: 10px;
       margin-bottom: 30px;
   }*/
}
@media screen and (min-width: 760px) {
	.colGesamt1 {
	   display: block;
	   width: 100%;
 	   padding:25px 20px;
	}
	.colGesamt2 {
    	padding:25px 30px;
	}
	.colLeft {
	    width: 100%;
	    float: none;
	    padding:25px 30px;
	    width: 100% !important;
	    box-sizing: border-box;

	}
	.colRight {
   		width: 100%;
  	  	float:none;
    	padding:25px 0;
    	width: 100% !important;
	    box-sizing: border-box;

	}
}	

@media screen and (min-width: 980px) {
	.colGesamt1 {
	   display: flex;
  	   width: 100%;
  	   justify-content: space-between;
 	   padding:25px 30px;
 	  	}
	.colGesamt2 {
    	padding:25px 30px;
	}
	.colLeft {
	    width: 70% !important;
	    float: none;
	    padding:25px 30px;
	}
	.colRight {
   		width: 25% !important;
  	  	float: none;
    	padding:25px 0;
	}
	 .linieLinks {
       border-left: 1px solid #ccc;
       padding-left: 10px;
       margin-bottom: 30px;
   }
}	

br.next {
    clear: both;
}
.textHeadline {
	background-color:	#555555;
	padding:			0 5px;
	color: 				#FFFFFF;
}
/*img.eventbild {
	width: 200px;
	margin: 5px 0;
}
img.eventbild_left {
	width: 200px;
	margin: 5px 0;
}
img.homebild_instr {
	float:left; 
	margin: 5px 15px 10px 0;
}

@media screen and (min-width: 620px) {
	img.eventbild {
		width: 200px;
		margin: 5px 0 20px 20px;
		float: right;
	}
	img.eventbild_left {
		width: 200px;
		margin: 5px 20px 20px 0;
		float: left;
	}
}*/

#footLinks {
	padding:			5px 10px;
	width:				auto;
	z-index: 			-505;
	background-color:	#333;
}
@media screen and (min-width: 620px) {
	#footLinks {
		margin: 			0 auto;
		width:				auto;
		padding:			5px 30px;
		z-index: 			-505;
		background-color:	#333;
	}
}
#footLinks .footBox {
	width: 				100%;
	height: 			auto;
	float:				left;
	border: 			0px solid #FFF;
	padding:			0;
	margin-bottom:		20px;
	font-size: 			1em;
}
@media screen and (min-width: 620px) {
	#footLinks .footBox {
		width: 				264px;
		margin: 			10px 30px 10px 0px;
		float:				left;
		border: 			0px solid #FFF;
		padding:			0;
		font-size: 			0.9em;

	}
	#footLinks .box2, #footLinks .box4 {
		margin-right: 0px;
	}
}
@media screen and (min-width: 760px) {
	#footLinks .footBox {
		width: 				334px;
		margin: 			10px 30px 10px 0px;
		float:				left;
		border: 			0px solid #FFF;
		padding:			0;

	}
	#footLinks .box2, #footLinks .box4 {
		margin-right: 0px;
	}
}
@media screen and (min-width: 980px) {
	#footLinks .footBox {
		width: 				207px;
		margin: 			10px 30px 10px 0px;
		float:				left;
		border: 			0px solid #FFF;
		padding:			0;
	}
	#footLinks .box4 {
		margin-right: 0px;
	}
}

#bottom {
	display:			none;
	margin: 			0 auto;
	width:				100%;
	padding:			10px 0;
	z-index: 			-505;
	background-color:	#111;
}  
@media screen and (min-width: 620px) {
	#bottom {
		display:			block;
	}  
}

/* Schriften */

.first {
	margin-top: 		0px;
}
.orangeFett {
	color: 				#FF9900;
	font-weight: 		bold;
}
.orange {
	color: 				#FF9900;
	font-weight: 		normal;
}
.orangeKlein {
	color: 				#FF9900;
	font-size:			12px;
	line-height:		14px;
}
.blackKlein {
	color: 				#666666;
	font-size:			12px;
	line-height:		14px;
}
.referenzDatum {
	color: 				#999999;
	font-style:normal;
}
p.miniLinks {
	text-align:			center;
	color:				#333;		
	font-size:			8px; 
	line-height: 		9px;
	margin:				0px;
}
p.miniLinks a:link, p.miniLinks a:visited {
	color:				#333;
	font-size:			8px; 
	line-height: 		9px;
	text-decoration:	none;
	background-color:   #111111;
}
p {
	font-family: 		"Trebuchet MS", Helvetica, sans-serif;
	font-size:			1em;
	line-height:		1.5em;
	color:				#939393;
}
h1, .likeH1 {
	font-family: 		"Lucida Sans Unicode", "Lucida Grande", sans-serif;
	font-size:			1.6em;
	line-height:		1.3em;
	color:				gray;
	margin:				30px 0 0;
	font-weight:		normal;
	text-transform:		uppercase;
}
h2 {
	font-family: 		"Lucida Sans Unicode", "Lucida Grande", sans-serif;
	font-size:			1.4em;
	line-height:		1.3em;
	color:				gray;
	font-weight:		normal;
	margin:				2px 0;
}
h3, h3.slogan {
	font-family: 		"Lucida Sans Unicode", "Lucida Grande", sans-serif;
	font-size:			1.3em;
	line-height:		1.2em;
	color:				silver;
	font-weight:		normal;
	padding: 			0;
}
h4 {
	font-family: 		"Lucida Sans Unicode", "Lucida Grande", sans-serif;
	font-size:			1.1em;
	line-height:		1.0em;
	color:				silver;
	font-weight:		normal;
	margin:				0;
}
h3.slogan { margin:				0 0 10px; }
@media screen and (min-width: 620px) {
	h1, .likeH1 {
		font-size:			1.6em;
		line-height:		1.3em;
	}
	h2 {
		font-size:			1.4em;
		line-height:		1.3em;
	}
	h3, h3.slogan {
		font-size:			1.3em;
		line-height:		1em;
	}
}
@media screen and (min-width: 760px) {
	h1, .likeH1 {
		font-size:			2.0em;
		line-height:		1.2em;
	}
	h2 {
		font-size:			1.6em;
		line-height:		1.3em;
	}
	h3, h3.slogan {
		font-size:			1.3em;
		line-height:		1.2em;
	}
}

ul { 
	margin-left: 		0px; 
	padding: 			0px;
}
li { 
	margin-left:		16px;
	margin-top:			4px;
	padding-left: 		0px;
	color:	 			#666666;
	font-family:		"Trebuchet MS", Helvetica, sans-serif;
	font-size:			1em;
	line-height:		1.5em;
	color:				#333;
}
.ref_v1 { 
	color:#333;
	padding: 0 20px 0 0;
}
.ref_v2 { 
	color:#CC6600;
	padding: 0 20px 0 0;
}

/* Links */

/* Der rote Hintergrund des YouTube-Buttons */
.play-button-css {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 70px;
    height: 50px;
    background-color: #FF0000; /* YouTube Rot */
    border-radius: 12px;
    opacity: 0.9;
    transition: all 0.3s ease;
    cursor: pointer;
}

/* Das weiße Dreieck (Play-Symbol) */
.play-button-css::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 55%; /* Leicht nach rechts versetzt für optische Mitte */
    transform: translate(-50%, -50%);
    border-style: solid;
    border-width: 10px 0 10px 20px;
    border-color: transparent transparent transparent #ffffff;
}

/* Hover-Effekt für PC */
.video-container:hover .play-button-css {
    background-color: #cc0000;
    transform: translate(-50%, -50%) scale(1.1);
}

a:link {				
	font-family: 		"Trebuchet MS", Helvetica, sans-serif;
	font-size:			1em;
	line-height:		1.5em;
	color:				#cd6600;
	text-decoration: 	none;
}
a:visited {
	font-family: 		"Trebuchet MS", Helvetica, sans-serif;
	font-size:			1em;
	line-height:		1.5em;
	color: 				#cd6600; 
	text-decoration: 	none;
}
a:active {
	font-family: 		"Trebuchet MS", Helvetica, sans-serif;
	font-size:			1em;
	line-height:		1.5em;
	color: 				#cd6600; 
	text-decoration: 	none;
}
a:hover {
	font-family: 		"Trebuchet MS", Helvetica, sans-serif;
	font-size:			1em;
	line-height:		1.5em;
	color: 				#ff7f00; 
	text-decoration: 	none;
	background-color:   transparent;
}

#footLinks a:link {				
	font-family: 		"Trebuchet MS", Helvetica, sans-serif;
	font-size: 			1em; 
	line-height:		1.5em; 
	color:				#FFFFFF;
	text-decoration: 	none;
	background-color:   #333333;
}
#footLinks a:visited {
	font-family: 		"Trebuchet MS", Helvetica, sans-serif;
	font-size: 			1em; 
	line-height:		1.5em; 
	color: 				#FFFFFF; 
	text-decoration: 	none;
	background-color:   #333333;
}
#footLinks a:active {
	font-family: 		"Trebuchet MS", Helvetica, sans-serif;
	font-size: 			1em; 
	line-height:		1.5em; 
	color: 				#FFFFFF; 
	text-decoration: 	none;
	background-color:   #333333;
}
#footLinks a:hover {
	font-family: 		"Trebuchet MS", Helvetica, sans-serif;
	font-size: 			1em; 
	line-height:		1.5em; 
	color: 				#FF9900; 
	text-decoration: 	none;
	background-color:   #333333;
}
#footLinks p.footBoxHead {
	font-weight:		normal;
	color:				#FFFFFF;
	font-size:			1.2em;
	margin: 			0 0 5px 0;
	border-bottom:		1px solid #FFF;
}
#footLinks p, #footLinks .weisstext {
	font-family: 		"Trebuchet MS", Helvetica, sans-serif;
	font-size: 			1em; 
	line-height:		1.5em; 
	color:				#FFFFFF;
	margin: 0;
}
#footLinks .grauText {
	color: 				#999999;
}
#footLinks ul {
	padding: 			0; 
	margin: 			0;
	border: 			none;
}
#footLinks ul li {
	padding: 			0; 
	margin: 			0 0 0 15px;
	list-style-image:   url('liste_pfeil.gif');
	border: 			none;
	color: 				#FFF;
}

/* Forms */



div.galerieBild {
	margin: 0 5px 5px 0;
	width: 120px;
	font-size: 0.8em;
	line-height: 1.1em;
}
div.galerieBild:focus, div.galerieBild:hover {
background-color: #FFF;
}
div.galerieBild img {
	width: 94px;
	height: 94px;
	margin: 0;
}
div.galerieBild img:hover {
	-webkit-filter: brightness(1.2) contrast(1.1);
	filter: brightness(1.2) contrast(1.1);
	transition: .5s;
}
.fotoPreviewIMG {
	width: 100%
}
div.galerieBild img.status {
	width:10px;
	height: 10px;
}
div.galerieBild span.status0 {
	padding: 0 3px;
	margin: 2px;
	background: #CC3300;
	color: #FFF;	
}
div.galerieBild span.status1 {
	padding: 0 3px;
	margin: 2px;
	background: #FFCC00;
	color: #000;	
}
div.galerieBild span.status2 {
	padding: 0 3px;
	margin: 2px;
	background: #390;
	color: #FFF;
}



div.videoBild {
	margin: 0 5px 5px 0;
	width: 100%;
	font-size: 0.8em;
	line-height: 1.1em;
}
div.videoBild:focus, div.videoBild:hover {
background-color: #FFF;
}
div.videoBild img {
	width: 242px;
	height: 140px;
	margin: 0;
}
div.videoBild img:hover {
	-webkit-filter: brightness(1.2) contrast(1.1);
	filter: brightness(1.2) contrast(1.1);
	transition: .5s;
}
.fotoPreviewIMG {
	width: 80%
}
div.videoBild img.status {
	width:10px;
	height: 10px;
}
div.videoBild span.status0 {
	padding: 0 3px;
	margin: 2px;
	background: #CC3300;
	color: #FFF;	
}
div.videoBild span.status1 {
	padding: 0 3px;
	margin: 2px;
	background: #FFCC00;
	color: #000;	
}
div.videoBild span.status2 {
	padding: 0 3px;
	margin: 2px;
	background: #390;
	color: #FFF;
}


@media screen and (min-width: 620px) {
	div.galerieBild img {
		width: 105px;
		height: 105px;
	}
	div.galerieBild {
		margin: 0 6px 6px 0;
		float: left;
	}
	div.videoBild img {
		width: 320px;
		height: 200px;
	}
	div.videoBild {
		margin: 0 6px 6px 0;
		float: left;
	}
}
@media screen and (min-width: 760px) {
	div.galerieBild img {
		width: 110px;
		height: 110px;
	}
	div.galerieBild {
		margin: 0 6px 6px 0;
	}
	div.videoBild img {
		width: 360px;
		height: 244px;
	}
	div.videoBild {
		margin: 0 6px 6px 0;
	}
}
@media screen and (min-width: 980px) {
	div.galerieBild img {
		width: 120px;
		height: 120px;
	}
	div.galerieBild {
		margin: 0 11px 11px 0;
	}
	div.videoBild img {
		width: 424px;
		height: 280px;
	}
	div.videoBild {
		margin: 0 11px 11px 0;
	}


}
.termine p {
	margin: 8px 0;
}

div.halb {
	width: 100%;
	float: left;
}
@media screen and (min-width: 620px) {
	div.halb {
		width: 50%;
		float: left;
	}
}
/*
div.demoZeile {
	border-top: solid 1px #cccccc;
	float: left;
	width: 100%;
	padding: 5px 0 0 0;
}
div.demoKategorie {
	float: left;
	width: 100%;
	margin: 15px 0;
}
div.demoKategorie h3 {
	margin: 0;
}

div.demoInfotext {
	float: left;
	width: 100%;
	font-size: 1em;
	line-height: 1.5em;
}
div.demoPlayer {
	float: left;
	width: 100%;
}

*/

div.colGesamt2 div.demoInfotext, div.colGesamt2 .blackKlein {
	color: #FFFFFF;
}
div.colGesamt2 a {
	color: #FFFFFF;
	background-color:   #333333;
}

/*
@media screen and (min-width: 620px) {
	div.demoInfotext {
		float: left;
		width: 50%;
		font-size: 0.9em;
		line-height: 1.5em;
	}
	div.demoPlayer {
		float: left;
		width: 50%;
	}
}
@media screen and (min-width: 760px) {
	div.demoInfotext {
		float: left;
		width: 50%;
		font-size: 1em;
		line-height: 1.3em;
	}
	div.demoPlayer {
		float: left;
		width: 50%;
	}
}
@media screen and (min-width: 980px) {
	div.demoInfotext {
		float: left;
		width: 50%;
		font-size: 1em;
		line-height: 1.5em;
	}
	div.demoPlayer {
		float: left;
		width: 50%;
	}
}
*/

h3.trigger.demo_mehr {
	font-size: 0.8em;
	font-family: 		"Trebuchet MS", Helvetica, sans-serif;
	font-weight: bold;
	text-align: right;
	width: 100%;
	border: none;
}
.trigger.demo_mehr .wort, .trigger_active.demo_mehr .wort {
	background: #cccccc;
	color: #333;
	padding: 3px 8px;
	outline: 0;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	-moz-box-shadow:#333 0px 0px 5px;
	-webkit-box-shadow:#333 0px 0px 5px;
	box-shadow:#333 0px 0px 5px;
}
.trackZahl {
	background: #FFFFFF;
	color: #FF9900;
	padding: 1px 8px;
	outline: 0;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	font-size: 1.2em;
}
.trigger {
	color:#FF9900;
	cursor:pointer;
	padding: 5px 0px;
	width: 100%;
	border-top: 1px solid #CCC;
}
.trigger:hover {
	color:#FF9900;
	cursor:pointer;
}
.trigger_active .wort {
	background: #FF9900;
	color: #FFF;
}
.trigger_active:hover {
	color: #FFF;
}
.toggle_container {
	padding: 0;
	width: 100%;
	margin:0;
	background: none;
	display: none;
}

header, nav, .nav-collapse {
    margin: 0 !important;
    padding: 0 !important;
    top: 0 !important;
}

/*
.video_box {
	padding: 0 30px;
	float: left;
	width: auto;
	margin: 20px 0;
}
*/
.video-link img {
    width: 280px !important;  
    height: 158px !important;
    object-fit: cover !important; /* Verhindert Verzerrung */
}

body.datenschutz .colgesamt {
    display: flex; /* sicherstellen, dass der Container flex ist */
}

body.datenschutz .colLeft {
    flex-basis: 99%;  /* nimmt 99% der Breite ein */
    flex-grow: 0;     /* wächst nicht über 99% hinaus */
}

body.datenschutz .colRight {
    flex-basis: 1%;   /* nimmt 1% der Breite ein */
    flex-grow: 0;     /* wächst nicht */
}