#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;
}

@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 .beruet.beruetspecial1 {
		width: 100%;
	}
	.bereich .bergal{
		width: 50%;
	}
	.bereich .bergal.bergalspecial1 {
		width: 100%;
	}
	.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.maxanzcolumns2 .spl {
		width: 45%;
		min-width: 15rem;
	}	
	.bereichspalten .spl img {
		max-width: 300px;
	}
	
}

@media (min-width: 55em) {
	.bereich .bergal.bergalspecial1 {
		width: 50%;
	}
	.bereich .beruet.beruetspecial1 {
		width: 50%;
	}

}

.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 {
}
.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;
	}
	#pageHeader h1 {
		text-align: center;
	}

	.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: 60rem;
		padding: 1rem;
	}


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

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

.berstyle10 {
	margin-top: 5rem;
}
.bergalspecial1 {
	position: relative;
	background: #ededed;
	display: flex;
	flex-wrap: nowrap;
	transition-delay: 0ms;
	transition-duration: 300ms;
	transition-property: all;
	transition-timing-function: ease-in;
	-moz-transition-delay: 0ms;
	-moz-transition-duration: 300ms;
	-moz-transition-property: all;
	-moz-transition-timing-function: ease-in;
	-webkit-transition-delay: 0ms;
	-webkit-transition-duration: 300ms;
	-webkit-transition-property: all;
	-webkit-transition-timing-function: ease-in;	
}
.bereich:hover .bergalspecial1 {
	background: #d7e5ea;
}

.bergalspecial1inner {
	display: flex;
	flex-wrap: wrap;
	align-content: flex-end;
	text-align: right;
	padding: 0 0 0 0;
	width: 60%;
}
.special1inner {
	border-right: 0.4rem solid #b3adb0;
	padding: 1rem 1rem 0.3rem 2rem;
}
.bergalspecial1inner .intro {
	text-align: right;
	width: 100%;
}
.special1innerfoto {
	width: 40%;
}
.special1innerfoto img {
	width: 80%;
	margin: -2.5rem 10% 1.8rem 10%;
}

.bereichspalten.maxanzcolumns2 a.spl {
	display: flex;
	flex-wrap: nowrap;
	background: #d2d2d2;
	background: #d7e5ea;
	position: relative;
	margin-top: 3rem;
}
.bereichspalten.maxanzcolumns2 a.spl:hover {
	background: #d2d2d2;
}
.bereichspalten.maxanzcolumns2 a.spl:nth-child(2n+1) {
	flex-direction: row-reverse;
}
.bereichspalten.maxanzcolumns2 a.spl .sptext {
	display: flex;
	flex-wrap: wrap;
	align-content: flex-end;
	text-align: right;
	width: 60%;
	margin-top: 1rem;
}
.bereichspalten.maxanzcolumns2 a.spl:nth-child(2n) .sptext {
	text-align: left;
}

#content .bereichspalten.maxanzcolumns2 a.spl .sptext p {
	font-size: 1rem;
}
#content .bereichspalten.maxanzcolumns2 a.spl .sptext h2 {
	font-size: 1.8rem;
}
#content .bereichspalten.maxanzcolumns2 a.spl button {
	font-size: 1rem;
}

.bereichspalten.maxanzcolumns2 a.spl .sptext header,
.bereichspalten.maxanzcolumns2 a.spl .sptext h2 {
	text-align: right;
	width: 100%;
	padding-right: 0.7rem;
}
.bereichspalten.maxanzcolumns2 a.spl:nth-child(2n) .sptext header,
.bereichspalten.maxanzcolumns2 a.spl:nth-child(2n) .sptext h2 {
	text-align: left;
	padding-right: 0;
	padding-left: 0.7rem;
}

.bereichspalten.maxanzcolumns2 a.spl .sptext .sptextsummary {
	border-right: 0.4rem solid #b3adb0;
	padding-bottom: 1.5rem;
	width: 100%;
}
.bereichspalten.maxanzcolumns2 a.spl:nth-child(2n) .sptext .sptextsummary {
	border-right: 0;
	border-left: 0.4rem solid #b3adb0;
}
.bereichspalten.maxanzcolumns2 a.spl .spfoto {
	width: 40%;
}
.bereichspalten.maxanzcolumns2 a.spl .spfoto img {
	width: 80%;
	margin: -2.5rem 10% 1.8rem 10%;
}
.bereich2sp.maxanzcolumns2 picture {
	background: none;
}
#content .bereichspalten.maxanzcolumns2 a.spl button.more {
	position: absolute;
	bottom: 0.3rem;
	left: 1rem;
	z-index: 10;
}
#content .bereichspalten.maxanzcolumns2 a.spl:nth-child(2n) button.more {
	left: inherit;
	right: 1rem;
}