#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: 0;
	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;
}	
.bereich.berr {
  flex-direction: row-reverse;
}
.bereich.berl {
  flex-direction: row;
}
.bereich.bermu {
  flex-direction: column;
}
.bereich.bermo {
  flex-direction: column-reverse;
}

.beruet {
}
#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;
}

@media (min-width: 45em) {
	.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%;
	}
	.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: right;
	}
	.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: 20%;
		min-width: 25rem;
	}
	.bereichspalten .spl img {
		max-width: 300px;
	}
	
}

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

@media (min-width: 65em) {
	.bereichabstand {
		 background-size: auto 50px !important;
	}

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

}

.bergallist,
.bereichvideo {
	transform: skewY(-3deg);
	background: #f0f1f2 !important;
	padding: 1rem;
	margin: 2rem 0;
}
.listbegin .bereichvideo {
	transform: none;
	margin: 0;
	padding: 1rem 0 0 0;
}

@media (min-width: 72em) {

	#pageHeader,	
	.bereich.bermo  .bereichtext,
	.bereich.bermu  .bereichtext,
	.bereichikonlist,
	.bereichohnebildt {
		display: flex;
		justify-content: space-around;
	}

	.gitterout {
		display: flex;
		justify-content: center;
	}

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

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

	.gitterbegin article:first-child {
		border-right: 1px solid #67b045;
		padding-right: 1rem;
	}
	body.page-id-13178 .gitterbegin article:first-child {
		border-right: none;
		padding-right: 0;
	}
	.gitterbegin .bereichtext {
		padding-left: 2rem;
	}
	.gitterbegin .bereichohnebildt .bereichtext,
	.gitterbegin .bereichohnebildt .bereichheader {
		min-width: inherit;
		width: auto;
		max-width: inherit;
	}

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

.bereichvideo .beruet,
.bereichvideo .bergal {
	transform: skewY(3deg);
}
.listbegin .bereichvideo .beruet,
.listbegin .bereichvideo .bergal {
	transform: none;
}
.listbegin .bereichvideo .beruet h2 {
	text-align: center;
}
