#bereiche {
/*  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: stretch;
  align-content: stretch;*/
  width: 100%;
}
.bilderflex {
	width: 100%;
}
.bilderflexorder1 {
	flex-direction: column;
}
.bilderflexorder2 {
	flex-direction: column-reverse;
}

.bilderflex .bergal .lightgallery,
.bereich {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: stretch;
  align-content: stretch;
  width: 100%;
}
.bereichspalten {
  justify-content: space-around;
  justify-content: center;
}
.bereichspalten .spl {
	text-align: center;
	min-width: 90%;
	margin: 1rem;
	text-decoration: none;
}
.bereichspalten .spl img {
}

.bilderflex .bergal .lightgallery div {
	display: flex;
	align-items: center;
	margin: 1rem;
	width: auto;
}
.bilderflex .bergal .lightgallery div img {
	max-width: 100%;
	height: auto;
}
.bilderflex .bergal .lightgallery div.gallinkdesc {
	margin: 0;
}	
.bilderberl,
.bereich.berr {
  flex-direction: row-reverse;
}
.bereich.berl {
  flex-direction: row;
}
.bereich.bermu {
  flex-direction: column;
}
.bereich.bermo {
  flex-direction: column-reverse;
}

.beruet {
	padding: 1rem;
}
#bereiche .secial1 .beruet {
	margin-bottom: 2rem;
}

.bergal {
	width: 100%;
}
#bereiche .bilder3 .bergal {
	margin-bottom: 4rem; /* weil next prev buttons nach unten unter Bild verschoben sind mit position absolute */
}

.bergalposition {
	margin-top: 4rem;
}
#contentBody .bergalposition .bergal .bx-wrapper {
	margin: -2rem 15% 2rem 15%;
	width: 70%;
}
#contentBody .bertextposition .beruet {
	box-sizing: border-box;
	padding: 20px;
}
#contentBody .bereich.berl.bertextposition .beruet {
	text-align: left;
}

.bereich.berdeco {
	background: transparent;
}
.bereich.berdeco .beruet .bereichheader {
}
.bereich.bermu .bergal,
.bereich.bermo .bergal {
	text-align: center;
}
.bereich.bermu .beruet .bereichheader,
.bereich.bermo .beruet .bereichheader {
	text-align: center;
}

.bereichkachel {
	background-position: center bottom;
	background-repeat: no-repeat;
	background-size: contain;
	background-color: #f0f1f1;
	width: 25rem;
	margin: 1rem;
	padding: 0.5rem 0.5rem 26rem 0.5rem;
	border: 1px solid #FCC643;
	border-radius: 5px;
}
.bereichkachel h2 {
	text-transform: uppercase;
	font-size: 1.8rem;
	color: #888;
}

.bereichkachelnlist a {
	text-decoration: none;
}
.bilderflex .bergal .lightgallery a {
	width: 100%;	
}
.bilderflex .bergal .lightgallery img {
	width: auto;	
}

.bergal2 .lightgallery {
  display: flex;
  flex-wrap: wrap;
  padding: 0 4px;
}

.bercolumn {
  display: flex;
	  flex-direction: column;
  width: 100%;
  max-width: 100%;
  padding: 0 4px;
}

.bereichspalten .spl .sptextsummary {
	padding: 0 1rem 1rem 1rem;
}

#bereiche .bergal a {
	width: 100%;
}

@media (min-width: 45em) {

	.bilderberl .bergal,
	.bilderberr .bergal {
		margin-top: -100px;
	}
	.bilderberl .imagelist span,
	.bilderberr .imagelist span {
		float: right;
		margin: 0 0 5% 5%;
		vertical-align: top;
		width: 45%;
	}
	.bilderberl .imagelist span {
		float: left;
	}

	.bilderberl .imagelist span:nth-child(2n+1),
	.bilderberr .imagelist span:nth-child(2n+1) {
		margin-top: -15%;
	}
	.bilderberl .imagelist span:nth-child(2n),
	.bilderberr .imagelist span:nth-child(2n) {
		margin-top: 0;
	}
	.bilderberl .imagelist span:nth-child(1),
	.bilderberr .imagelist span:nth-child(1) {
		margin-top: 0;
	}
	.bilderberl .imagelist span:nth-child(2),
	.bilderberr .imagelist span:nth-child(2) {
		margin-top: 15%;
	}

	.berr .bergal .swiper,
	.berl .bergal .swiper {
		margin: -80px 0 80px 0;
	}

	.bilderflex .bergal .lightgallery div img {
		max-height: 300px;
		min-height: 150px;
		width: auto;
	}
	body.home .bilderflex .bergal .lightgallery div img {
		max-height: 300px;
		min-height: 0;
		height: auto;
		width: auto;
	}
	
	.bercolumn {
	  display: flex;
	  width: 50%;
	  flex-direction: column;
	  justify-content: space-between;
	  max-width: 50%;
	  padding: 0 4px;
	}
	
	.bereich .beruet {
		width: 50%;
	}
	.bereich .bergal {
		width: 50%;
	}
	.bereich.bilderberm .bergal,
	.bereich.bilderberm .beruet {
		width: 100%;
	}

	.listbegin .bereich .beruet,
	.listbegin .bereich .bergal {
		width: 100%;
	}
	
	.bereich.bermu .beruet,
	.bereich.bermo .beruet {
		width: 100%;
	}	
	.bereich.bermu .bergal,
	.bereich.bermo .bergal {
		width: 100%;
	}
	.bereich.berl .bergal,
	.bereich.berr .beruet {
		text-align: left;
	}
	.bereich.berr.bereichvideo .bergal,
	.bereich.berl.bereichvideo .bergal {
		text-align: center;
	}
	.bereich.berl .beruet,
	.bereich.berr .bergal {
		text-align: left;
	}

	.bilderflex .bergal .lightgallery div {
/*		width: 30%; */
	}

	.bereichspalten .spl {
		width: 30%;
		min-width: 10rem;
	}
	.bereichspalten .spl img {
		max-width: 300px;
	}
	
}

.bereichabstand {
	 background-size: auto 80px !important;
}

@media (min-width: 65em) {
	#bereiche article.bereich {
		padding-right: 50px;
	}

	.bereichabstand {
		 background-size: auto 50px !important;
	}

	.bercolumn {
	  display: flex;
	  justify-content: flex-start;
	  width: 25%;
	  max-width: 25%;
	  padding: 0 4px;
	}

}

.bergallist,
.bereichvideo {
}
.listbegin .bereichvideo {
	margin: 0;
	padding: 1rem 0 0 0;
}

@media (min-width: 72em) {
	.bereichikonlist {
		width: 100%;
		display: flex;
		justify-content: space-around;
	}

	.bereichikonlistInner {
		max-width: 60rem;
	}
	#pageHeader,
	#contentInner,	
	.bereich.bermo  .bereichtext,
	.bereich.bermu  .bereichtext,
	.bereichikonlistInner,
	.bereichohnebildt {
		display: flex;
		justify-content: space-around;
	}
	.bilderflex .bergal .lightgallery div {
/*		width: 25%; */
	}

	#pageHeader h1,	
	#contentInner .contentInner,
	.bereichikonlist .bereichheader,
	.bereichohnebildt .bereichheader,
	.bereich.bermo .bereichtextinner,
	.bereich.bermu .bereichtextinner,
	.bereichohnebildt .bereichtext,
	#children .berm .bereichtext,
	.bereiche2 .berm .bereichtext {
		min-width: 400px;
		width: 60rem;
		max-width: 100%;
	}

	#contentInner .contentInner {
		width: 40rem;
	}


	.bereichvideo {
		padding: 0px;
		margin: 0px 0;
	}
	
}

.bereichvideo .beruet,
.bereichvideo .bergal {
}
.listbegin .bereichvideo .beruet,
.listbegin .bereichvideo .bergal {
}
.listbegin .bereichvideo .beruet h2 {
	text-align: center;
}