/* Anpassung sticky footer*/

#maincontent {
  min-height: 27em;
}

/*#startBox02 footer {
  position: absolute;
  bottom: 0;
}*/

/* Anpassung Seiten-Layout*/
.grid-container {
  max-width: 100%;
  padding: 0;
}

.maincontent {
  width: 70%;
  margin: 0 auto;
  padding-top: 20px;
}

* {
    font-family: Helvetica,Arial,sans-serif;
    font-size: 14px;
    line-height: 1.4rem;
    border: 0px;
    color: #000;
    letter-spacing: 0.02em;
    text-align: justify;
}
p{
  	font-family: Helvetica,Arial,sans-serif;
    font-size: 14px;
    line-height: 1.4rem;
    border: 0px;
    color: #000;
    letter-spacing: 0.02em;
    text-align: left;
}

header {
  width: 100%;
  padding: 0;
}
body { 
  font-family: Helvetica, Arial, sans-serif;
  color: #848a8b;
}
footer {
  clear: both;
  height: auto;
  position: relative;
  width: 100%;
  padding: 0;
}
h1{
  text-transform: uppercase;
  font-weight: 500;
  background-color: #ffffff;
  color: #cccccc;
  /*color: #dcd4c9;*/
  /*color: #848a8b;*/
  font-size: 1.7em;
  /*line-height: 2.0em;*/
  line-height: 1.5em;
}
h3{
  text-transform: uppercase;
  font-weight: 400;
  /*background-color: #ffffff;*/
  color: #ffffff;
  /*color: #dcd4c9;*/
  /*color: #848a8b;*/
  font-size: 1.3em;
  /*line-height: 2.0em;*/
  line-height: 1.1em;
  margin-bottom: 0;
}
.junge-gemeinde .ce-column .image img {
  height: 400px;
}
.footer_line {
  background-color: #94c11f;
  padding-top: 10px;
  height: 80px;
}

footer .grid-padding-x > .cell {
  padding: 0;
}

.footer_line p {
  margin: 0 auto;
  width: max-content;
}

.footer_line p a {
  margin: 0 1.5em;
}

.logo{
  margin-right: 15%;
  margin-left: 15%;
}

.logo .ce-gallery {
  width: 100%;
}

.logo .ce-gallery .ce-column:nth-of-type(1) img {
  float: left;
}
.logo .ce-gallery .ce-column:nth-of-type(2) img {
  float: right;
}

.asymmetricImages .ce-column:nth-of-type(2) img {
  width: 30%;
}
.asymmetricImages .ce-column:nth-of-type(1) img {
  width: 70%;
}

.top-bar {
  padding: 0;
}
.top-bar-left {
  padding: 0;
  background-color: #94c11f;
}
.top-bar ul {
  color: #FF00FF;
  background-color: #94c11f;
}

.footer-menu-bar{
  width: 100%;
  padding-left: 15%;
  padding-right: 15%;
  background-color: #dddddd;
  display: flex;
  flex-direction: column;
}
.footer-menu-bar .side-nav{
  width: 100%;
  padding-left: 15%;
  padding-right: 15%;
  background-color: #dddddd;
  display: flex;
  list-style: none;
}
.footer-main{
  padding: 0;
}
.footer_line a {
  color: #ffffff;
}

.footer_line .active >a {
  color: #1779ba;
}

/* Anpassung Menü */

.menu a {
  color: #ffffff;
  text-transform: uppercase;
  font-weight: bold;
}

.menu .active >a {
  color: #1779ba;
  background-color: #94c11f;
}


.menu-text {
  display: none;
}

.title-bar-title {
  display: none;
}

.drilldown a {
  background-color: #94c11f;
}

.top-menu-bar{
  width: 100%;
  padding-left: 15%;
  padding-right: 15%;
  background-color: #1d87ce; /*#94c11f;*/
}
.title-bar{
  background-color: #94c11f;
}

/* Anpassung content-Elemente */

.header .ce-gallery {
  width: 100%;
  display: flex;
}

#maincontent .ce-gallery {
  width: 100%;
  display: flex;
}

#maincontent .personen .ce-gallery {
  width: max-content;
  display: flex;
}

.personen .columns:first-child {
  margin-right: 0.5em;
}
.ce-textpic{
  display: flex;
}

.ce-intext {
  display: block;
}

#maincontent .ce-intext .ce-gallery {
  width: max-content;
  max-width: 100%;
}

.textandmedia .ce-textpic{
  flex-direction: column;
}
.textandmedia .ce-gallery{
  flex-direction: column;
}
.ce-right{
  flex-direction: row-reverse;
}
.ce-row{
  width: 100%;
}
.row{
  display: flex;
}
/*.columns p{
  padding-left: 0.5em;
}*/
/* Spaltenbreiten einstellen für zweispaltigen Textfluss */
.linkeSpalte {
  width: 100%;
}
.rechteSpalte {
  width: 50%;
}
.dreispalten .columns{
  width: 33%;
  margin-right: 5px;
  margin-left: 5px;
}
.zweispalten .columns{
  width: 50%;
  margin: 5px;
}
.zweispalten.breitschmal .columns:nth-of-type(1){
  width: 66%;
  margin-left: 0px;
  margin-right: 20px;
}
.zweispalten.breitschmal .columns:nth-of-type(2){
  width: 34%;
  margin-left: 20px;
  margin-right: 0px;
}

.zweispalten.schmalbreit .columns:nth-of-type(1){
  width: 30%;
  margin-left: 0px;
  margin-right: 20px;
}
.zweispalten.schmalbreit .columns:nth-of-type(2){
  width: 70%;
  margin-left: 20px;
  margin-right: 0px;
}

.zweispalten.schmalbreit h2 {
  font-size: 1.2em;
}

.zweispalten.newsstyleimageright .columns:nth-of-type(1){
  width: fit-content;
  margin-left: 0px;
  margin-right: 20px;
}
.zweispalten.newsstyleimageright .columns:nth-of-type(2){
  width: fit-content;
  margin-left: 20px;
  margin-right: 0px;
}
.zweispalten.newsstyleimageleft .columns:nth-of-type(1){
  width: fit-content;
  margin-left: 0px;
  margin-right: 20px;
}
.zweispalten.newsstyleimageleft .columns:nth-of-type(2){
  width: fit-content;
  margin-left: 20px;
  margin-right: 0px;
}
.orangebox{
  background-color: #f78d08;
  height: auto;
  width: auto;
  padding-left: 15px;
  padding-right: 15px;
  padding-top: 5px;
  padding-bottom: 5px;
  margin: 0px;
}
.bluebox{
  background-color: #1d87ce;
  height: auto;
  width: auto;
  padding-left: 15px;
  padding-right: 15px;
  padding-top: 5px;
  padding-bottom: 5px;
  margin: 0px;
}
.greenbox{
  background-color: #94c11f;
  height: auto;
  width: auto;
  padding-left: 15px;
  padding-right: 15px;
  padding-top: 5px;
  padding-bottom: 5px;
  margin: 0px;
}
.dashedbox{
  border-color: #f78d08;
  border-style: dashed;
  border-width: 2px;
  height: auto;
  width: auto;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 5px;
  padding-bottom: 5px;
  margin: 0px;
}

.redbox{
  background-color: #860101;
  height: auto;
  width: auto;
  padding-left: 15px;
  padding-right: 15px;
  padding-top: 5px;
  padding-bottom: 5px;
  margin: 0px;
}


.orangebox > h1{
  color: #ffffff;
  background-color: none;
}
.mehrlesenbutton p{
  color: #ffffff;
  padding-left: 10px;
  padding-right: 10px;
  width: fit-content;
  cursor: pointer;
}
.mehrlesenbutton a{
  color: #ffffff;
  padding-left: 10px;
  padding-right: 10px;
  width: fit-content;
  cursor: pointer;
}

.less {
  display: none;
}

.info {
  display: none;
}


.dreispalten .columns{
  width: 33%;
}

#maincontent .illustrationen .ce-gallery {
  width: auto;
}

/* Anpassungen der class columns*/
.columns {
  margin: 0, auto;
  width: 100%;
}
/*.columns p {
  padding: 0.5em;
}*/

.ReihenLayout {
  display:flex;
}
.ReihenLayout .columns {
  min-width: 30%;
  max-width: 50%;
  margin-right: 2em;
}
/* .ReihenLayout .row {
  display: flex;
  
} */


h2 { 
  text-transform: uppercase;
  /*font-weight: bold;*/
  background-color: #ffffff;
  color: #0568ae;
  font-size: 1.0em;
  line-height: 1.0em;
}

.siteLineBottom {
  display: none;
}

/**********************************/
/* Anpassungen responsives Design */
/**********************************/
/*********************Anpassungen iPad*****************/
@media only screen and (max-width: 768px) {
	.maincontent {
		width: 90%;
  		margin: 0 auto;
  		padding-top: 20px;
	}
  	.top-menu-bar{
      	width: 100%;
      	padding-left: 5%;
      	padding-right: 5%;
      	background-color: #94c11f;
    }
  	.logo{
  		margin-right: 5%;
  		margin-left: 5%;
 	}
}
/*Bsp*/
@media only screen and (max-width: 690px) {
  .footer_line p {
    width: 90%;
    text-align: center;
  }
}

@media only screen and (max-width: 870px) {
  .personen .row {
    flex-direction: column;
  }
}

@media only screen and (max-width: 639px) {
  .menu .menu-text {
    display: none;
  }
  .dreispalten .row {
    flex-direction: column;
  }
  .dreispalten .columns {
    width: 100%;
  }
  .raeumecontainer .row {
    flex-direction: column;
  }
    .zweispalten.schmalbreit .row{
  		display: flex;
    	flex-direction: column;
	}
  	.zweispalten.schmalbreit .columns:nth-of-type(1){
  		width: 100%;
  		margin: 0 auto;
	}
	.zweispalten.schmalbreit .columns:nth-of-type(2){
  		width: 100%;
  		margin: 0 auto;
	}
}


/*********************Anpassungen iPhoneX und kleiner *****************/
@media only screen and (max-width: 400px) {
	.maincontent {
    	width: 100%;
    	padding: 5px;
	}
	.footer_line {
    	width: 100%;
    	padding: 5px;
	}
	.top-menu-bar{
  		padding-left: 5px;
  		padding-right: 5px;
	}
	.logo{
  		margin: 0;
  		margin: 0;
  		padding-left: 5px;
  		padding-right: 5px;
	}
    .newsstyleimageright .row{
    	display: flex;
    	flex-direction: column;
  	}
  	.zweispalten.newsstyleimageright .columns:nth-of-type(1){
  		width: fit-content;
  		margin-left: 0px;
      	margin-right: 0px;
	}
  	.zweispalten.newsstyleimageright .columns:nth-of-type(2){
  		width: fit-content;
  		margin-left: 0px;
      	margin-right: 0px;
	}
  	.dreispalten .row{
    	display: flex;
    	flex-direction: column-reverse;
  	}
  	.dreispalten .columns{
    	width: 100%;
    	margin: 0px;
  	}
  	.newsstyleimageleft .row{
    	display: flex;
    	flex-direction: column-reverse;
  	}
  	.zweispalten.newsstyleimageleft .columns:nth-of-type(1){
  		width: fit-content;
  		margin-left: 0px;
      	margin-right: 0px;
	}
  	.zweispalten.newsstyleimageleft .columns:nth-of-type(2){
  		width: fit-content;
  		margin-left: 0px;
      	margin-right: 0px;
	}
  	.zweispalten.breitschmal .row{
  		display: flex;
    	flex-direction: column;
	}
  	.zweispalten.breitschmal .columns:nth-of-type(1){
  		width: 100%;
  		margin-left: 0px;
  		margin-right: 0px;
	}
	.zweispalten.breitschmal .columns:nth-of-type(2){
  		width: 100%;
  		margin-left: 0px;
  		margin-right: 0px;
	}
  	h1{
      font-size: 1.0em;
      line-height: 1.0em;
	}
  	h2{
      font-size: 0.8em;
      line-height: 1.0em;
	}
}