/* -------------------------------------------- Import Google Fonts ------------------------------------------- */

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400italic,400,700);

/* ---------------------------------------------- Normalisierung ---------------------------------------------- */
@import url("normalize.css");

/* set box-sizing to border-box for all elements */
* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}


/* 
Farbcodes
dunkelblau #053751
hellblau #5AC1CF
pink #E95876
fastweiss #f8f8f8
schwarz #000000


*/


/* fixing vertical scrolbar */
body, html { min-height: 100.5%; }

html {
	font-family: 'Open Sans', Arial, sans-serif;
	font-size: 100%;
	background-color: #5AC1CF;
	
}

/* default font and background settings, min-width */
body {
	font-size: 16px; /* Fallback */
	font-size: 1rem;
	background-color: #5AC1CF;
	min-width: 16em;
	max-width: 60em;
	margin: 1em auto;
}

.block{ overflow: hidden; }


/* font-size for headlines */
h1 { font-size: 26px; /* Fallback */ font-size: 1.625rem; }

h2 { font-size: 22px; /* Fallback */ font-size: 1.375rem; }

h3 { font-size: 18px; /* Fallback */ font-size: 1.125rem; }

h4 { font-size: 16px; /* Fallback */ font-size: 1rem; }

h1{
	margin: 0;
	line-height: 100%;
	margin-bottom: 0.2em;
}

 h2, h3, h4 {
	/*margin: 16px 0; *//* Fallback */
	margin: 0;
	line-height: 100%;
	margin-top: 0.6em;
	margin-bottom: 0.4em;
}

#timeline h2{
	background-color: #5AC1CF;
	color: black;
	padding: 0.3em;
	

}

/* margins and line-height for paragraphs */
p {
	margin: 0 0 0.5em;
	line-height: 1.3;
}

li{ list-style-type: disc; }

hr{
width: 100%;
height: 5px;
background-color: #5AC1CF;
color: #5AC1CF;
border: none;

} 



/* klickbare news-teaser haben keinen unterstrich */
h2 a{ text-decoration: none; }

/* links */
a:link { text-decoration:underline; color:black; }
a:visited { text-decoration:underline; color:black; }
a:hover { text-decoration:underline; color:#E95876; }
a:active { text-decoration:underline; color:#E95876; }
a:focus { text-decoration:underline; color: #E95876; }

.extern{
	padding-right: 17px;
	background: url(../img/extern_2.png) right no-repeat;
}

.download{
	padding-right: 18px;
	background: url(../img/download_link_1.png) right no-repeat;
}

.email{
	padding-right: 18px;
	background: url(../img/email_icon_16.png) right no-repeat;
}


.clear { clear: both; }

.image_container{ margin: 0; line-height: 0px; display: inline-block; }


.float_left{ float: left; }



/* default padding */
#header { padding: 0.5em;
border-bottom-style: solid;
	border-bottom-color: #5AC1CF;
	border-bottom-width: 4px;
 }


#custom { padding: 0 10px 1em; }

#mainnav, #main{ padding: 0.5em; 

}

#main{
	border-left-style: solid;
	border-left-color: #5AC1CF;
	border-left-width: 4px;
	
}
#wrapper{
 background-color: #f8f8f8;
	/*border-radius: 10px;  */
	margin-bottom:0.5em;
	/*margin-left:0.5em;
	margin-right:0.5em;	*/
}


/* --------------------------- Styles for header and footer --------------------------- */

#header p{
	font-size: 1.1em;
	margin: 0;
	font-weight: bold;
	padding-left: 1em;
	padding-top: 2em;
	overflow:hidden;
}

#footer {
	/*offizielles Contrast-blau*/
   padding: 0.5em; 
	overflow: auto;
	border-top-width: 4px;
	border-top-style: solid;
	border-top-color: #5AC1CF;
}


#lectarylogo a {
font-size: 0.1em;
	
}

#navbread{ overflow: auto; }


#skiplist { display: none; }


.invisible {
	display: inline;
	height: 0;
	left: -1000px;
	overflow: hidden;
	position: absolute;
	top: -1000px;
	width: 0;
}

.mod_nl_list ul{
	padding: 0;
}
.mod_nl_list ul li{
list-style: none;
font-size: 1.2em;
}

.mod_nl_reader .back{
margin-top: 1em;
border-top: 1px;
border-top-style: solid;
border-color: #f8f8f8 ;
}

.newsletter{
	border-bottom: 2px;
	border-bottom-style: solid;
	border-color: #f8f8f8 ;
	
}

.minimalist-accordion__panel[aria-hidden=true] {
  display: none;
}

.minimalist-accordion__header {
  display: block;
}

button{
	cursor: pointer;
	border: none;
}

button:hover{
	background-color: #053751;
}


/* arround the accordion */
.minimalist-accordion{
/*  border: 2px solid #933;
/*  border-radius: 1em; */
  

  padding: .5em;
}

/*style fpr the butto */
.minimalist-accordion__header {
  display: block;
  font-size: 18px; /* Fallback */ font-size: 1.125rem; 
  margin-bottom: 0.5em;
  padding-left: .25em;
  padding-right: .25em
  text-align: left;
   color: black;
	text-decoration: none;
	background-color: #5AC1CF;
}


/* title opened */
.minimalist-accordion__header[aria-expanded="true"]{
	 background-color: #053751;
	 color: white;
}
.minimalist-accordion__header[aria-expanded="true"]:after {
   content:"\A0\25bc";
  
}

/* title closed */
.minimalist-accordion__header[aria-expanded="false"]{
	background-color: #5AC1CF;
	color: black;
}

.minimalist-accordion__header[aria-expanded="false"]:after {
  content:"\A0\25b6";
  
}

.minimalist-accordion__panel {
  padding-bottom: 1em;
  border-bottom: 2px solid #5AC1CF;
  margin-bottom: 1em;
}

.minimalist-accordion__panel:last-child
{
  padding-bottom: 1em;
  border-bottom: 0;
  margin-bottom: 1em;
}

/* title in content hidden by default */
.minimalist-accordion__title {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}






/* --------------------------- Styles for main part --------------------------- */



#start_bild{
	float: left;
	margin: 0;
	margin-right: 0.5em;
	margin-bottom: 0.5em;
	line-height: 0;
}

#start_adresse{ float: left; margin-left: 0.5em; margin-bottom: 0.5em; }


.promi, .layout_latest, .layout_old {
	border-bottom: solid;
	border-bottom-width: 2px;
	border-bottom-style: solid;
	border-bottom-color: #2c5dad;
}

/* text um Bild fließen lassen */
.promi .ce_text{ overflow:visible; }

.ce_image{ margin: 0.5em; }

.caption{ line-height: 1em; font-size: 0.8em; }

.center{ text-align: center; }


.center img{ width: 100%; height: auto; }


.cboxElement{ font-size: 0; }

.mod_article{ margin-bottom: 1em; }

.site_head, .site_img {
	margin-bottom: 0em;
}

.site_img {
text-align: center;
margin-bottom:1em;
}

.site_img .ce_image{
	display: inline-block;
	margin: 0.1em;
	text-align: left; /* OPTIONAL, um Text wieder von links zu richten */
}

.media{
	text-align: center;
}

.media .ce_text{
text-align: left;
}
.ce_player{
	display: inline-block;
}


/*---------- flex box für Anleitung -----------------------*/

.flex-wrapper{
  display: flex;
  align-items:stretch;
  flex-wrap: wrap;
  
}
.flex-container{
 /* width: 370px;*/
 width: auto;
}


.flex-container img{
	margin-left: 0.5em;
	margin-right: 0.5em;
	vertical-align: middle;
}

.flexintern{
	padding-top: 1.5em;
}





/* -----------------------  navigation -------------------------- */
	
	.mod_navigation ul,
	.mod_customnav ul { padding: 0; margin: 0; }

/*	.mod_navigation ul{ border-radius: 0 0 1rem 1rem; max-height: 35rem; } */
	.mod_navigation ul{max-height: 35rem; }
	
	.mod_navigation li{
	padding-top: 2px;
	padding-bottom: 2px;
	list-style-type: none;
}

	
/*	.mod_navigation li #last{ border-radius: 0 0 1rem 1rem; }  */

	
	.mod_navigation li a,
	.mod_navigation li span {
	padding: 3px 4px 3px 6px;
	display: block;
	background: #eee;
	color: #000000;
	text-decoration: none;
}

	
	
	.mod_navigation li a:link,
	.mod_navigation li a:visited{
		background-color:  #5AC1CF;
	border-left: 4px solid #5AC1CF;
	color: black;
}

	.mod_navigation li a:hover {
	
	background-color: #E95876;
	border-left: 4px solid #E95876;
	color: white;
	
	text-decoration: none;
}

	.mod_navigation li .active {

	background-color: #053751;
	border-color: #053751;
	color: white;
	/*border-left: 4px solid #efd51f;*/
	
}

	
	.mod_navigation li.active a, .mod_navigation li.active span { background: #053751; color: white; }

	
	
/* -----------------------  custom navigation -------------------------- */	
	
	

/*	.mod_navigation ul{ border-radius: 0 0 1rem 1rem; max-height: 35rem; } */
	.mod_customnav ul{max-height: 35rem; }
	
	.mod_customnav li{
	padding-top: 2px;
	padding-bottom: 2px;
	list-style-type: none;
}

	
/*	.mod_navigation li #last{ border-radius: 0 0 1rem 1rem; }  */

	
	.mod_customnav li a,
	.mod_customnav li span {
	padding: 3px 4px 3px 6px;
	display: block;
	background: #eee;
	color: #000000;
	text-decoration: none;
}

	
	
	.mod_customnav li a:link,
	.mod_customnav li a:visited{
		background-color:  #5AC1CF;
	border-left: 4px solid #5AC1CF;
	color: black;
}

	.mod_customnav li a:hover {
	
	background-color: #E95876;
	border-left: 4px solid #E95876;
	color: white;
	
	text-decoration: none;
}

	.mod_customnav li .active {

	background-color: #053751;
	border-color: #053751;
	color: white;
	/*border-left: 4px solid #efd51f;*/
	
}

	
	.mod_customnav li.active a, .mod_customnav li.active span { background: #053751; color: white; }




	
	


	
	/* Hide mobile navigation button for desktop view */
	#header .menubutton { display: none; }

	

	
/* ------------------ Footer navigation -------------*/
	
	#footer .mod_customnav{
	vertical-align: middle;
	display: inline;
	 }

	#footer .mod_customnav ul { float: right; width: auto; padding-top: 3px; }

	
	#footer .mod_customnav li {
	width: auto;
	float: left;
	padding: 2px;
	list-style-type: none;
}

	
	#footer .mod_customnav a,
	#footer .mod_customnav span{
	display: block;
	text-decoration: none;
	font-size: 0.8em;
	margin-right: 1em;
	color: white;
	padding: 2px;
	}

	#footer .mod_customnav li a{
	padding: 2px; 
	padding-right: 5px;
	padding-left: 5px;	
	}
	
	
	#footer .mod_customnav li a:link,
	#footer .mod_customnav li a:visited{ color: black; background-color: #5AC1CF; }

	#footer .mod_customnav li .active {
	color: white;
	background-color: #053751;
	
}

	#footer .mod_customnav li a:hover {
	color: white;
	text-decoration: none;
	background-color: #E95876;
}

	

	#footerimg{
	float: left;
	width: auto;
	font-size: 0.1em;
	line-height: 0.1em;
}

#footerimg img{
	margin-right: 5px;
}

/* ---------- Sponsoren --------------- */	
	
	#sponsoren_img{ text-align: center; }

	
	#sponsoren_img .ce_image{
	display: inline-block;
	height: 184px;
	width: 184px;
	margin: 0.5em;
	border-color: #5AC1CF;
	border-width: 2px;
	border-style: solid;
	text-align: left; /* OPTIONAL, um Text wieder von links zu richten */
}




/* ------ Neuigkeiten ------- */
.layout_latest h2, .layout_old h2{
margin-top: 0.3em;
}

.layout_old.odd{
	background-color: #e1eaf7;
}


.layout_old.odd a, .layout_old.odd a:visited { text-decoration: none; background-color: #e1eaf7;}

.layout_old.odd a:hover, layout_old.odd a:active { text-decoration: none; background-color: #ffffff; }


/* mobile ansicht ...bei mobile first sollt das eigentlich default sein */	
@media screen and (max-width: 32em) {

#header{ padding-bottom: 0; }

#header p{ display: none; }
#header .imgfull{
	/*display: none;*/
	height: 80px;
 width: 80px;
}

body{
	margin:0;
}

#main{
	border-left-width: 0;
}

#navbread{ display: none; }



	/* Positioning of menu button */
	#header .menubutton {
	position: absolute;
	top: 1em;
	right: 1em;
	display: block;
}

	/* Styles for menu button */
	#header .menubutton a {
	display: block;
	color: white;
	background: #053751;
	text-decoration: none;
	padding: 0.5em;
	border-radius: 0.25em;
	border: none;
}

	/* Add down arrow to "show menu" button */
	#header .menubutton a.showmenu:after { content: " \25bc"; font-size: 0.7rem; }

	/* Add up arrow to "hide menu" button */
	#header .menubutton a.hidemenu:after { content: " \25b2"; font-size: 0.7rem; }

	/* Hide "hide menu" button by default */
	#header .menubutton a.hidemenu { display: none; }

	/* Hide "show menu" button after click */
	#top:target #header .menubutton a.showmenu { display: none; }

	/* Show "hide menu" button after click */
	#top:target #header .menubutton a.hidemenu { display: block; }


	/* Styles for menu */
	.mod_customnav { padding: 0 1rem; margin: 0; }

	.mod_customnav ul {
	max-height: 0; /* menu not visible by default */
	overflow: hidden;
/*	border-radius: 0 0 1rem 1rem;*/
	transition: 0.5s;
}

	/* 
	 *  Override "max-height: 0" after click on menu button. New value has to match the
	 *  actual height of menu, otherwise the transition is not displayed correctly.
	 */

	#top:target .mod_customnav ul { max-height: 35rem; }
	
	
/* für schmales Layout nur das erste Bild anzeigen*/	
.site_img .ce_image{
	display:none;
}
.site_img .ce_image.first{
	display:inline-block;
}

#start_img{ display: none; }

	
/* bei schmalen Bildschirmen Bild und Text übereinander */
.promi .ce_image{ float: none; }
}


/* ============== zweispaltiges Layout für breitere Viewports ===============*/ 
@media (min-width: 32em) {	
  
/*body{ margin: 1em auto; }*/


#header .inside{ 
border: none;
vertical-align: middle
}

#mainnav { float: left; width: 12em; }

#main { margin-left: 12em; }


/* header anzeigen */
#header p{ display: block; }

#lectarylogo{
	float:left;
	line-height: 0;
}

/* breadcrumb anzeigen */
#navbread{ display: block; }

/* bei breiten Bildschirmen Bilder neben Text */
.promi .ce_image{ float: left; }


}