

	<!--IFTS_NO_PARSE-->
	<!--multilang_start-->



	<!--slot:mw_default_start-->




			<div id="slot_0_0" class="uslot    ">



<section class="content-slot uslot1">
	<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 pull-left nospacing">
		<!--flexmodul: wordmodul_mit_bild-->








#flex_0_0_100_2{
	margin-bottom: 30px;
}
@media (min-width: 1187px) {

		
}

@media (min-width: 992px) and (max-width: 1188px) {
	
	
		
}

@media (min-width: 600px) and (max-width: 992px) {
	
		

}

@media (max-width: 600px) {
	
		
}







<!--/flexmodul: wordmodul_mit_bild-->
<!--flexmodul: wordmodul_mit_bild-->





<style>

#flex_0_0_100_4{
	margin-bottom: 30px;
}









#flex_0_0_100_4, #flex_0_0_100_4 a{
	color: rgb(168, 5, 9);
}



@media (min-width: 1187px) {






}

@media (min-width: 992px) and (max-width: 1188px) {





}

@media (min-width: 600px) and (max-width: 992px) {





}

@media (max-width: 600px) {




#flex_0_0_100_4 .bild img{
		width: 100%;
	}



}

</style>







<section class="content-ueberschrift   " id="flex_0_0_100_4"  style="text-align: left; ">


<h3>
Veranstaltungssuche
</h3>


</section>







<!--/flexmodul: wordmodul_mit_bild-->
<!--flexmodul: wordmodul_mit_bild-->





<style>

#flex_0_0_100_6{
	margin-bottom: 30px;
}














@media (min-width: 1187px) {





#flex_0_0_100_6{

				margin-top: 0px;

				margin-right: 0px;

				margin-bottom: 30px;

				margin-left: 0px;


				padding-top: 0px;

				padding-right: 0px;

				padding-bottom: 30px;

				padding-left: 0px;
		}



}

@media (min-width: 992px) and (max-width: 1188px) {




#flex_0_0_100_6{

				margin-top: 0px;

				margin-right: 0px;

				margin-bottom: 30px;

				margin-left: 0px;


				padding-top: 0px;

				padding-right: 0px;

				padding-bottom: 30px;

				padding-left: 0px;
		}



}

@media (min-width: 600px) and (max-width: 992px) {




#flex_0_0_100_6{

				margin-top: 0px;

				margin-right: 0px;

				margin-bottom: 30px;

				margin-left: 0px;


				padding-top: 0px;

				padding-right: 0px;

				padding-bottom: 30px;

				padding-left: 0px;
		}



}

@media (max-width: 600px) {




#flex_0_0_100_6 .bild img{
		width: 100%;
	}



#flex_0_0_100_6{

				margin-top: 0px;

				margin-right: 0px;

				margin-bottom: 30px;

				margin-left: 0px;


				padding-top: 0px;

				padding-right: 0px;

				padding-bottom: 30px;

				padding-left: 0px;
		}


}
</style>






<section class="content-texteditor   " id="flex_0_0_100_6"  style="">



<style>
#veranstaltungssuche input{
	width: 100%;
	line-height: 2.0em;
	height: 35px;
	border: 1px solid rgb(191, 38, 38);
	padding-left: 15px;
	padding-right: 15px;
}

#veranstaltungssuche button{
	width: 100%;
	line-height: 2.0em;
	background-color: rgb(191, 38, 38);
	color: #ffffff;
	border: none;
	height: 35px;
	margin-bottom: 15px;
}


#veranstaltungssuche #suchcontainer .suchmaske_suchwrapper .suchmaske_icon{
	padding-top: 15px;
}
	
#veranstaltungssuche #suchcontainer{
	background-color: rgb(130, 2, 5);
	color: #ffffff;
	margin-bottom: 15px;
}

</style>
<style>

	
@media (min-width: 992px) {
	.middlecol{
		padding-right: 30px; 
		padding-left: 15px;
	}
}	
		
@media (max-width: 991px) and (min-width: 425px) {
	
	.eventdetailpage .footer_wrapper{
		margin-top: 0px;
	}
	
	.fc .fc-toolbar{
		display: block ! important;
	}
	
	.fc-header-toolbar  .fc-toolbar-chunk:nth-child(1){
		width: 100%;
		display: block;
	}
	
	.fc-header-toolbar  .fc-toolbar-chunk:nth-child(2){
		width: 100%;
		display: block;
		margin-top: 15px;
		margin-bottom: 15px;
	}
	
	.fc-header-toolbar  .fc-toolbar-chunk:nth-child(3){
		width: 100%;
		display: block;
	}
		
}

		
@media (max-width: 424px) {
	.middlecol{
		padding-right: 15px; 
		padding-left: 15px;
	}
	
	.eventdetailpage .footer_wrapper{
		margin-top: 0px;
	}
	
	.mehrEvents .icon{
		display: none;
	}
	
	.mehrEvents .inhalt{
		margin-left: 15px ! important;
	}
	
	.fc .fc-toolbar{
		display: block ! important;
		font-size: 4.0vw;
	}
	
	.fc-header-toolbar  .fc-toolbar-chunk:nth-child(1){
		width: 100%;
		display: block;
	}
	
	.fc-header-toolbar  .fc-toolbar-chunk:nth-child(2){
		width: 100%;
		display: block;
		margin-top: 15px;
		margin-bottom: 15px;
	}
	
	.fc-header-toolbar  .fc-toolbar-chunk:nth-child(3){
		width: 100%;
		display: block;
	}
	
}


.ev_details.only-xs{
	margin-top: 60px;
	clear: both;
	padding-left: 15px;
	padding-right: 15px;
}

.ev_vorschlaege.only-xs{
	margin-bottom: 60px;
	padding-left: 15px;
	padding-right: 15px;
}

					
a.linkMehrEvents{
	text-decoration: none;
}

.mehrEvents{
	position: relative;
	background-color: white;
	min-height: 82px;
	margin-bottom: 15px;
}

.mehrEvents header h4{
	margin-top: 10px;
	margin-bottom: 5px;
	
}

.mehrEvents .icon{
	width: 120px;
	background-color: rgb(255,255,255);
	position: absolute;
}

.mehrEvents .icon img{
	width: 100%;
}

.mehrEvents .inhalt{
	margin-left: 130px;
}

.mehrEvents .inhalt p{
	color: rgb(51, 51, 51);
	margin-top: 0px;
	margin-bottom: 0px;
}

.mehrEvents .infoMehrTermine{
	color: rgb(130, 2, 5) ! important;
}

.fc-daygrid-day-frame{
	padding-top: 15px;
	padding-bottom: 15px;
}
					
		
</style>
<a name="suchmaske"></a>



<form action="#suchmaske" accept-charset="UTF-8" method="POST" name="veranstaltungssuche" id="veranstaltungssuche">
	<section id="suchcontainer" class="spacing" style="padding-top: 1px;">
		<div class="suchmaske_suchwrapper col-lg-12 col-md-12 col-sm-12 col-xs-12">
			<div class="suchmaske_header col-lg-12 col-md-12 col-sm-12 col-xs-12">
				<h3>Was suchen Sie?</h3>
			</div>
			<div class="suchmaske_header col-lg-12 col-md-12 col-sm-12 col-xs-12">
				<div class="suchmaske_header col-lg-9 col-md-9 col-sm-9 col-xs-9 fleft nospacing">
					<input id="search" type="text" name="search" value="" class="search_input" placeholder="Suchbegriff eingeben" aria-label="Suchbegriff eingeben">
				</div>
				<div class="suchmaske_header col-lg-3 col-md-3 col-sm-3 col-xs-3 fleft nospacing">
					<button class="suche_button" aria-label="Jetzt suchen">
						<div class="glyphicon glyphicon-search"></div> <i title="Suche" class="fa fa-search fa-lg"></i>
					</button>
				</div>
			</div>
		</div>
		<div class="clearfix"></div>
	<div class="voffset2"></div>
		
	</section>
</form>


<div class="clearfix"></div>


<style>

@media (max-width: 424px) {
	.eventAvailable{
		
	}
	
	.fc-dayGridMonth-view .eventAvailable .fc-daygrid-day-top a{
		color: white;
		display: block;
		background-color: #a80509;
		border: 2px solid #a80509;
		border-radius: 25px;
		width: 32px;
		text-align: center;
	}
	
	.fc-dayGridMonth-view .eventAvailable div.fc-daygrid-day-events > .fc-daygrid-event-harness a.fc-daygrid-dot-event{
		display: none;
	}
	
	
	
	.fc .fc-dayGridMonth-view .fc-daygrid-body-unbalanced .fc-daygrid-day-events{
		min-height: 0px ! important;
	}
}

</style>

	 <script>
/*
$(document).ready(function () {
	$( 'td.fc-daygrid-day div.fc-daygrid-day-events' ).each(function(){
		// console.log($(this));
		// console.log($(this).find('div').length);
		if($(this).find('div').length > 0)
		{
			console.log($(this).prev());
			$(this).prev().addClass('eventAvailable');
		}
	});
});


$('.fc-button-group > button').click(function(){
	$( 'td.fc-daygrid-day div.fc-daygrid-day-events' ).each(function(){
		if($(this).find('div').length > 0)
		{
			$(this).prev().addClass('eventAvailable');
		}
	});
});
*/

</script>



	<div style="width: 100%; text-align: center; margin-top: 60px;" class="not-xs">
	<div class="col-lg-10 col-md-10 col-sm-10 col-xs-10">
		
		<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
			<div style='font-size: 2.0em; font-weight: normal; font-family: "metabold_roman";'>
			<span style="color: rgb(191, 38, 38);">Kon&shy;zerte.</span><br>
			<span style="color: rgb(254, 119, 80);">Work&shy;shops.</span><br>
			<span style="color: rgb(149, 190, 186);">Kur&shy;se.</span><br>
			<span style="color: rgb(255, 82, 101);">Hier spielt deine Musik!</span>
			</div>
		</div>
		<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
			<img src="/stylesheets/miniweb/musikschule/datei_suche2.png" style=" width: 100%;" alt="Grafik mit Lupe">
			<div style="float: right;"><a href="http://www.freepik.com" target="_blank">Grafik © Freepik</a></a>
		</div>
	</div>
</div> 
<div class="clearfix"></div>

</section>







<!--/flexmodul: wordmodul_mit_bild-->
<!--flexmodul: wordmodul_mit_bild-->





<style>

#flex_0_0_100_3{
	margin-bottom: 30px;
}









#flex_0_0_100_3, #flex_0_0_100_3 a{
	color: rgb(168, 5, 9);
}



@media (min-width: 1187px) {


#flex_0_0_100_3{
			border-color: rgb(130, 2, 5);
			border-style: dotted;
			border-top-width: 2px;
			border-right-width: 0px;
			border-bottom-width: 0px;
			border-left-width: 0px;
		}





#flex_0_0_100_3{

				margin-top: 0px;

				margin-right: 0px;

				margin-bottom: 0px;

				margin-left: 0px;


				padding-top: 0px;

				padding-right: 0px;

				padding-bottom: 0px;

				padding-left: 0px;
		}



}

@media (min-width: 992px) and (max-width: 1188px) {


#flex_0_0_100_3{
			border-color: rgb(130, 2, 5);
			border-style: dotted;
			border-top-width: 2px;
			border-right-width: 0px;
			border-bottom-width: 0px;
			border-left-width: 0px;
		}




#flex_0_0_100_3{

				margin-top: 60px;

				margin-right: 0px;

				margin-bottom: 0px;

				margin-left: 0px;


				padding-top: 0px;

				padding-right: 0px;

				padding-bottom: 0px;

				padding-left: 0px;
		}



}

@media (min-width: 600px) and (max-width: 992px) {


#flex_0_0_100_3{
			border-color: rgb(130, 2, 5);
			border-style: dotted;
			border-top-width: 2px;
			border-right-width: 0px;
			border-bottom-width: 0px;
			border-left-width: 0px;
		}




#flex_0_0_100_3{

				margin-top: 60px;

				margin-right: 0px;

				margin-bottom: 0px;

				margin-left: 0px;


				padding-top: 0px;

				padding-right: 0px;

				padding-bottom: 0px;

				padding-left: 0px;
		}



}

@media (max-width: 600px) {


#flex_0_0_100_3{
			border-color: rgb(130, 2, 5);
			border-style: dotted;
			border-top-width: 2px;
			border-right-width: 0px;
			border-bottom-width: 0px;
			border-left-width: 0px;
		}




#flex_0_0_100_3 .bild img{
		width: 100%;
	}



#flex_0_0_100_3{

				margin-top: 60px;

				margin-right: 0px;

				margin-bottom: 0px;

				margin-left: 0px;


				padding-top: 0px;

				padding-right: 0px;

				padding-bottom: 0px;

				padding-left: 0px;
		}


}

</style>







<section class="content-ueberschrift   " id="flex_0_0_100_3"  style="text-align: left; ">


<h3>
Kalender
</h3>


</section>







<!--/flexmodul: wordmodul_mit_bild-->
<!--flexmodul: wordmodul_mit_bild-->





<style>

#flex_0_0_100_0{
	margin-bottom: 30px;
}














@media (min-width: 1187px) {






}

@media (min-width: 992px) and (max-width: 1188px) {





}

@media (min-width: 600px) and (max-width: 992px) {





}

@media (max-width: 600px) {




#flex_0_0_100_0 .bild img{
		width: 100%;
	}



}
</style>




<link href='/javascripts/fullcalendar-5.1.0/lib/mus_main.css' rel='stylesheet' />
<script src='/javascripts/fullcalendar-5.1.0/lib/main.js'></script>
<script src='/javascripts/fullcalendar-5.1.0/lib/locales-all.js'></script>
<script>

  document.addEventListener('DOMContentLoaded', function() {
    var calendarEl = document.getElementById('calendar');

    var calendar = new FullCalendar.Calendar(calendarEl, {
      headerToolbar: {
        left: 'prev,next today',
        center: 'title',
        right: 'dayGridMonth,timeGridWeek,dayGridDay,listWeek'
      },
      initialDate: '2026-07-01',
	  locale:  'de',
	  slotEventOverlap: true,
	  contentHeight: 'auto',
	  <!-- businessHours: true, // display business hours -->
	  dayMaxEventRows: false,
      editable: true,
      navLinks: true, // can click day/week names to navigate views
  //    dayMaxEvents: true, // allow "more" link when too many events
	  eventMouseEnter: function(info) {
        var tooltip = info.event.extendedProps.description;
		var nodeelement = info.el;
		$(nodeelement).prop('title', tooltip);
      },
      events: {
        url: '/javascripts/fullcalendar-5.1.0/php/get-events.php?ts=1782929763',
        failure: function() {
          document.getElementById('script-warning').style.display = 'block'
        }
      },
      loading: function(bool) {
        document.getElementById('loading').style.display =
          bool ? 'block' : 'none';
      },
	  eventDidMount: function(info) {
		<!-- console.log(info); -->
		res = info.event.start.toISOString().slice(0,10);
		$('.fc-day[data-date="' + res + '"]').addClass('eventAvailable');
	  }
    });

    calendar.render();
  });

</script>
<style>

 /* body {
    margin: 0;
    padding: 0;
    font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
    font-size: 14px;
  } */

#script-warning {
    display: none;
    background: #eee;
    border-bottom: 1px solid #ddd;
    padding: 0 10px;
    line-height: 40px;
    text-align: center;
    font-weight: bold;
    font-size: 12px;
    color: red;
  }

#loading {
    display: none;
    position: absolute;
    top: 10px;
    right: 10px;
  }

#calendar {
    max-width: 1100px;
    margin: 0px 0px;
    padding: 0 0px;
  }

</style>






<section class="content-veranstaltungskalender   " id="flex_0_0_100_0"  style="">

<div id='script-warning'>
    <code>php/get-events.php</code> muss laufen.
  </div>

  <div id='loading'>wird geladen...</div>

  <div id='calendar'></div>

</section>







<!--/flexmodul: wordmodul_mit_bild-->

	</div>
</section>




</div>


	<style>





	#slot_0_0{
		position: relative;
	}

	@media (min-width: 1187px) {




}

@media (min-width: 992px) and (max-width: 1188px) {



}

@media (min-width: 600px) and (max-width: 992px) {



}

@media (max-width: 600px) {


}

	</style>

<style>

</style>





	<!--slot:mw_default-->





		<!--IFTS_NO_PARSE-->
		<!--multilang_end-->




