/* CSS Document */



* {
 -webkit-box-sizing:border-box;
 -moz-box-sizing: border-box;
 box-sizing:border-box;
}

html, body {
	height: 100%;
 	width:100%;
	padding:0;
 	margin:0;
}



@media only screen and (min-width:768px){
	
div.logo-wrap, footer #footer-inner {
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	}
 
div.logo-wrap > div {
	width: 50%;
}
}


@media only screen and (min-width:1024px){.logo-name h1 {text-align:right;font-size: 3.5rem;} }
@media only screen and (max-width:1024px){.logo-name h1 {text-align:right;font-size: 3rem;} }
@media only screen and (max-width:900px){.logo-name h1 {text-align:right;font-size: 2rem;} }
@media only screen and (max-width:9600px){.logo-name h1 {text-align:center;} }


/* ### Inhalt ### */


.layout-1spalte .layout-space-r-l,
.layout-2spalten .layout-space-r-l,
.layout-2spalten_50 .layout-space-r-l,
.layout-jumbotron .layout-space-r-l,
.layout-drei-zeilen .layout-space-r-l {padding: 0 25px; min-height: 500px;}

.space-content {padding:0;}
.space-content .contenttable td {vertical-align: top;}

/* ################## Gridelements ####################### */

.grid-row .frame-default,
.grid-container {padding: 0;}
/*.grid-row {padding: 0 12px;}*/

@media only screen and (min-width: 860px) {
.grid-row,
.spalten-jumbotron  {
	display: -webkit-box;
  	display: -webkit-flex;
  	display: -ms-flexbox;
  	display: flex;
	padding: 24px;
	}
.grid-col,
.spalten-jumbotron_1,
.spalten-jumbotron_2,
.spalten-jumbotron_3
	{
	-webkit-box-flex: 1;
    -moz-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
	padding-right: 24px;
	}
	.col-lg-3
	{
	-webkit-box-flex: 3;
    -moz-box-flex: 3;
    -webkit-flex: 3;
    -ms-flex: 3;
    flex: 3;
	padding-right: 24px;
	}
	.col-lg-4
	{
	-webkit-box-flex: 4;
    -moz-box-flex: 4;
    -webkit-flex: 4;
    -ms-flex: 4;
    flex: 4;
	padding-right: 24px;
	}
	.col-lg-6
	{
	-webkit-box-flex: 6;
    -moz-box-flex: 6;
    -webkit-flex: 6;
    -ms-flex: 6;
    flex: 6;
	padding-right: 24px;
	}
	.col-lg-8
	{
	-webkit-box-flex: 8;
    -moz-box-flex: 8;
    -webkit-flex: 8;
    -ms-flex: 8;
    flex: 8;
	padding-right: 24px;
	}
	.col-lg-9
	{
	-webkit-box-flex: 9;
    -moz-box-flex: 9;
    -webkit-flex: 9;
    -ms-flex: 9;
    flex: 9;
	padding-right: 24px;
	}
	
	.grid-col:last-child,
	.col-lg-3:last-child,
	.col-lg-4:last-child,
	.col-lg-6:last-child,
	.col-lg-8:last-child,
	.col-lg-9:last-child,
	.spalten-jumbotron_3:last-child {padding-right: 0;}
}
/*Spalten Jumbotron*/
/*.spalten-jumbotron div {width: 100%;}*/
@media only screen and (min-width:768px){
.spalten-jumbotron > div:first-child {margin-right: 25px; }
.spalten-jumbotron > div:last-child {margin-left: 25px; }
	.spalten-jumbotron > div {width: 33%; }
	.spalten-jumbotron > div > div {width: 100%;}
	.spalten-jumbotron {height: 100%;}

.grid-col {
	padding-right: 24px;
}
}
.grid-col:last-child {
	padding-right: 0;
}
/*@media only screen and (max-width:768px){ .multicolumnContainer .column {float: none; width: 100%;} }*/


	
/* Responsive Bilder */
	
.space-content img,
.space-content figure,
.space-content .ce-outer,
.space-content .ce-inner,
.space-content .ce-row
{
	/*width: 100%;*/ max-width: 100%; height: auto;

}

@media only screen and (min-width:768px) {
.space-content .ce-row {
		display: -webkit-box;
		display: -moz-box;
		display: -ms-flexbox;
		display: -webkit-flex;
		display: flex;
		margin-bottom: 10px; 
	}
.space-content	.ce-column { 
	-webkit-box-flex: 1;
	-moz-box-flex: 1; 
	width: 20%; 
	-webkit-flex: 1;
	-ms-flex: 1;
	flex: 1; 
	}
}

@media only screen and (max-width:767px) {	
	.space-content .ce-row {
		min-width: 100%;
		display: -webkit-box;
		display: -moz-box;
		display: -ms-flexbox;
		display: -webkit-flex;
		display: flex;
		-webkit-flex-direction: column; 
  		flex-direction: column;
	}

.space-content .ce-gallery {width: 100%;}
.space-content .ce-column {margin-right:0; margin-bottom: 10px;}
.space-content	img, .space-content	figure { min-width: 100%; height: auto;}
	
.space-content .ce-inner, .space-content .ce-outer {width: 100%; height: auto;}
}

/*### video ###*/

video {
	width: 100%;
}
audio {
	max-width: 100%;
}


.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 0;
    height: 0;
    overflow: hidden;
}

.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}



/* ##################### eigenes Accordion*/

/*.frame-accordion {
	margin: auto !important;
	max-width: 1600px !important;
	padding: 0 50px;
}*/

.frame-accordion .ce-bodytext li:last-child {
	padding-bottom: 25px;
}

/* Versteckt alle Inhalte standardmäßig */
.frame-accordion .frame .ce-textpic {
    max-height: 0;
    overflow: hidden;
    padding: 0;
    transition: max-height 0.5s ease, padding 0.5s ease;
    border-top: 1px solid #ccc;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

/* Sichtbar machen des Inhalts mit Animation */
.frame-accordion .frame.active .ce-textpic {
    max-height: 300px; /* Schätzen Sie die maximale Höhe des Inhalts */
    padding: 15px 15px 50px 15px;
	background-color: #FFFFFF;
}

/* Style für Header */
.frame-accordion .frame header {
    cursor: pointer;
    padding: 15px;
    background-color: #f9f9f9;
    border: 1px solid #ccc;
    border-radius: 5px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background-color 0.3s, box-shadow 0.3s;
}

/* Mouseover-Effekt für Header */
.frame-accordion .frame header:hover {
    background-color: #e0e0e0;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* Aktiver Rahmen: Sichtbarer Inhalt und Styling */
.frame-accordion .frame.active header {
    background-color: #797979;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

/* Standardstil für h2 */
.frame-accordion .frame header h2 {
	font-size: 1.6rem;
    margin: 0;
    color: #5B5B5B; /* Standardfarbe */
    transition: color 0.3s ease; /* Sanfter Übergang bei Farbänderung */
	font-family: Share;
}

/* Aktive Überschrift */
.frame-accordion .frame.active header h2 {
    color: #fff; /* Farbe für aktive Überschrift */
}


/* pfeil für das accordeon */

.frame-accordion .frame header {
    position: relative; /* Damit das Pseudo-Element absolut positioniert werden kann */
    cursor: pointer;
}

/* Erstellen eines Pfeils mit Pseudo-Element */
.frame-accordion .frame header::after {
    content: '\25BE'; /* Geschlossener Pfeil (nach unten) */
    position: absolute;
    right: 20px; /* Abstand von der rechten Seite */
    transition: transform 0.3s; /* Sanfte Übergänge für die Drehung */
}

.frame-accordion .frame.active header::after {
    content: '\25B4'; /* Offener Pfeil (nach oben) */
    /* Kein zusätzliches Transformieren nötig */
	color: white;
}