.contentSubContent .Section {
	padding: 2rem 0;
}

/* LoStage Verschachtelung verhindern */
.contentSubContent div.LoStage { max-width: none; width: 100%; padding: 0; margin: 0; }


.contentSubContent .sub .title {position: relative;}
.contentSubContent .sub .title h2 {
	transition: all 200ms;
	margin: 0;
	padding: 10px 0;
}

.contentSubContent .sub.open .title h2,
.contentSubContent .sub .title:hover h2 {
	color: var(--logo-color-1-light);
}
.contentSubContent .sub .title:before {
	content: '»';
	position: absolute;
	margin-left: -20px;
	top: 8px;
	opacity: 0;
	font-size: 22px;
	transition: opacity 300ms, transform 300ms 500ms;
	transform-origin: 50% 50%;
	transform: translateX(-100px);
	opacity: 0;
}
.contentSubContent .sub .title:hover:before {
	transition: opacity 300ms, transform 300ms 0ms;
	transform: translateX(0);
	opacity: 1;
}
.contentSubContent .sub {
	position: relative;
	background-size: cover;
	background-repeat: no-repeat;
	overflow: hidden;
}

.contentSubContent .contentMainGallery {}

.contentSubContent .sub.bild-rechts.nobgcolor { border-left: 10px dotted var(--neutral-color-light); }
/* .contentSubContent .sub.bild-rechts.nobgcolor { background: linear-gradient(to right, #eee 1%, transparent 5%, transparent 100%); } */


/* Subcontent mit Bild oder Ansprechpartner */
.contentSubContent .contentDisplay {}

/* neu rho content css Klassen bild-links, bild-rechts */
.contentSubContent .bild-links .contentDisplay,
.contentSubContent .bild-rechts .contentDisplay { display: flex; align-items: stretch; justify-content: space-between; gap: 0; }
.contentSubContent .bild-links .contentMainGallery,
.contentSubContent .bild-rechts .contentMainGallery { flex-basis: 50%; float: none; max-width: inherit; margin-left: 0; margin-bottom: 0; 
							background-color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: space-around; }
.contentSubContent .bild-links .contentBody,
.contentSubContent .bild-rechts .contentBody { flex-basis: 50%; box-sizing: border-box; padding: 1rem; margin: auto 0px; }

.contentSubContent .bild-links .contentDisplay .contentBody { order: 2; }
.contentSubContent .bild-rechts .contentDisplay .contentBody { order: 1; }
.contentSubContent .bild-rechts .contentDisplay .contentMainGallery { order: 2 }

/* kein Float Clearer für Klassen .bild-links & .bild-rechts, da die per Flex dargestellt werden */
.contentSubContent .bild-links .contentDisplay.ClearFloat::after, .contentSubContent .bild-rechts .contentDisplay.ClearFloat::after  { display: none; }
.contentSubContent .bild-links .contentDisplay .clearBoth.cfx, .contentSubContent .bild-rechts .contentDisplay .clearBoth.cfx  { display: none; }

/* contentPerson */
.contentSubContent .bild-links .contentPerson,
.contentSubContent .bild-rechts .contentPerson { flex-basis: 50%; float: none; box-sizing: border-box; max-width: inherit; margin-left: 0; margin-bottom: 0; 
							background-color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: space-around; }
.contentSubContent .bild-rechts .contentDisplay .contentPerson { order: 2 }
.contentSubContent .contentDisplay .contentPerson { padding: var(--padding-topbottom) var(--padding-leftright); }

.contentSubContent .contentPerson .userProfileCard { color: var(--font-color-dark); }
.contentSubContent .contentPerson .userProfileCard a { color: var(--font-color-dark) !important; }

@media all and (max-width: 1000px) {
	.contentSubContent .contentDisplay { flex-wrap: wrap; }
	.contentSubContent .contentBody { order: 1; flex-basis: 100% !important; }
	.contentSubContent .contentMainGallery { order: 2; flex-basis: 100% !important; }
	.contentSubContent .contentPerson { order: 2; flex-basis: 100% !important; }
	.contentSubContent .sub.bild-rechts.nobgcolor { border-left: none; }
}

.contentSubContent .sub .SectionHead.title {
	border: none;
	background-color: #fff;
	color: var(--font-color-dark);
}
.contentSubContent .sub .SectionHead.title h2 {
}

.contentSubContent .contentDisplay .centerTitle, .contentSubContent .contentDisplay .subTitle {
	/* display: none; */
}
.contentSubContent .sub .title .plus {
	position: absolute;
	right: 10px;
	top: -3px;
	display: inline-block;
	width: 32px;
	height: 32px;
}
.contentSubContent .sub .title .plus:before,
.contentSubContent .sub .title .plus:after {
	content: '';
	display: block;
	position: absolute;
	background-color: #555;
	transition: background 200ms, transform 500ms;
} 
.contentSubContent .sub .title .plus:before {
	width: 32px;
	height: 2px;
	top: 15px;
	left: 0px;
	opacity: 1;
}
.contentSubContent .sub .title .plus:after {
	width: 2px;
	height: 32px;
	left: 15px;
	top: 0;
}
.contentSubContent .sub.open .title .plus:before {
	width: 1px;
	left: 15px;
	opacity: 0;
	transform: rotate(90deg);
}
.contentSubContent .sub.open .title .plus:after {
	transform: rotate(270deg);
}

.contentSubContent .sub .title:hover .plus:before,
.contentSubContent .sub .title:hover .plus:after,
.contentSubContent .sub.open .title .plus:before,
.contentSubContent .sub.open .title .plus:after {
	background-color: var(--logo-color-1-light);
}

/*
@media all and (max-width: 1200px) {
	.contentSubContent .Section .contentDisplay { flex-wrap: wrap; }
	.contentSubContent .contentDisplay .contentBody, .contentSubContent .contentDisplay .contentMainGallery { flex-basis: 50%; }
}
@media all and (max-width: 800px) {
	.contentSubContent .Section .contentDisplay { flex-wrap: wrap; }
	.contentSubContent .contentDisplay .contentBody, .contentSubContent .contentDisplay .contentMainGallery { flex-basis: 100%; }
}
*/

/* Scroll Animation */
.contentSubContent .sub.ani-start { opacity: 0; }
.contentSubContent .sub.ani-end { opacity: 1; transition: opacity 1s; }
