/* CSS Document */
.contentSubContent  {
	--bg-head: #fefefe;
	--color-head: var(--font-color-dark, #444);
	--color-head-hover: var(--logo-color-1, #444);
	--font-color: var(--font-color-dark, #444);
	--element-radius: var(--border-radius, 10px);
	--button-radius: var(--border-radius-small, 5px);
}

.contentSubContent .sub {
	position: relative;
	background-size: cover;
	background-repeat: no-repeat;
	overflow: hidden;
	border-radius: var(--element-radius);
}

/* Stage für Header und Subcontent */
.contentSubContent .stage, .contentSubContent label.head div {
  position: relative;
  display: block;
  max-width: var(--stage-maxwidth);
  width: var(--stage-width);
  padding: 0;
  margin: auto;
}

.contentSubContent .sub.nobgcolor .stage, .contentSubContent .sub.nobgcolor label.head div {
  /* width: 100%; */
}


.contentSubContent .sub.bgimage::before {
  background-color: rgba(255, 255, 255, 60%);
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
}

/* Header */
.contentSubContent .sub .head { position: relative; display: block; cursor: pointer; background-color: var(--bg-head); }

.contentSubContent .sub.locked .head { display: none; }

.contentSubContent input.switch { display: none; }

/* Steuerung open/closed */
/* css only Variante, aber problematisch bei height div > 200vh (clipping) */
.contentSubContent input.switch:not(:checked) ~ div.container { max-height: 0; padding: 0; }
.contentSubContent input.switch:checked ~ div.container { max-height: 200vh; }
/* .contentSubContent input.switch { display: block; } */


.contentSubContent .sub .head h2 { transition: all 200ms; margin: 0; padding: 10px 0; color: var(--color-head) !important; }
.contentSubContent .sub .head h2:hover { color: var(--color-head-hover) !important; }

/* Header Plus Icon und Animation */
.contentSubContent .sub .head .plus {
	position: absolute;
	right: 10px;
	top: calc( 50% - 16px);
	display: inline-block;
	width: 32px;
	height: 32px;
}
.contentSubContent .sub .head .plus:before,
.contentSubContent .sub .head .plus:after {
	content: '';
	display: block;
	position: absolute;
	background-color: var(--color-head);
	transition: background 200ms, transform 500ms;
} 
.contentSubContent .sub .head .plus:before { width: 32px; height: 2px; top: 15px; left: 0px; opacity: 1; }
.contentSubContent .sub .head .plus:after { width: 2px; height: 32px; left: 15px; top: 0; }
.contentSubContent .sub .head:hover .plus:before,
.contentSubContent .sub .head:hover .plus:after { background-color: var(--color-head-hover); }

.contentSubContent .sub input.switch:checked ~ label.head .plus:before { width: 1px; left: 15px; opacity: 0; transform: rotate(90deg); }
.contentSubContent .sub input.switch:checked ~ label.head .plus:after { transform: rotate(270deg); }

/* open / close Animation */
.contentSubContent .container { height: 100%; overflow: hidden; transition: max-height 0.5s ease, padding 0.5s ease; }

/* Head Animation Pfeil */
.contentSubContent .sub .head h2:before { content: '»'; position: absolute; opacity: 0; transform: translateX(-100px); transition: all 300ms; }
.contentSubContent .sub .head h2:hover:before { opacity: 1; transform: translateX(-20px); }


/* Content */
.contentSubContent .sub:not(.locked) .content .title { display: none; }

.contentSubContent .sub { color: var(--font-color); }

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

.contentSubContent .contentDisplay .contentBody { hyphens: auto; }

/* Scroll Animation */
.contentSubContent .sub.ani-start .contentMainGallery img { transform: translatey(300px); }
.contentSubContent .sub.ani-end .contentMainGallery img { transform: translatey(0); transition: transform calc(var(--transition-time)*5); }
.contentSubContent .sub.ani-start { opacity: 0; }
.contentSubContent .sub.ani-end { opacity: 1; transition: opacity 1s; }


/* 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; 
							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; padding-right: 0; }
.contentSubContent .bild-rechts .contentDisplay .contentBody { order: 1; padding-left: 0; }
.contentSubContent .bild-rechts .contentDisplay .contentMainGallery { order: 2 }

/* optische linke Border für Bild rechts ohne Hintergrund */
.contentSubContent .sub.bild-rechts.    { border-left: 10px dotted var(--neutral-color-light); }

/* 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: transparent; 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 .contentDisplay .contentPerson .entry { background-color: transparent; }

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


/* Tabbed Subcontent */
.contentSubContent div.tabmenu { display: none; }		/* im Normalfall Tabmenü nicht anzeigen */
.page.agenturtabbed .contentSubContent div.tabmenu { display: block; }		/* auf speziellen Seiten Tabmenü anzeigen */
.contentSubContent input.tabmenu { display: none; }
.page.agenturtabbed .contentSubContent .tabmenu nav { margin: 20px 0; display: flex; flex-wrap: wrap; column-gap: 5px; row-gap: 15px; }
.page.agenturtabbed .contentSubContent .tabmenu nav label {
	display: block;
	padding: 15px 25px;
	background-color: var(--neutral-color-light);
	border-radius: var(--button-radius);
	cursor:	pointer;
	transition: background var(--transition-time) ease-out, transform var(--transition-time);
}
.page.agenturtabbed .contentSubContent .tabmenu nav label {
  background: linear-gradient(to bottom, var(--logo-color-1) 50%, var(--neutral-color-light) 50%);
  background-size: 100% 200%;
  background-position: left bottom;
}
.page.agenturtabbed .contentSubContent .tabmenu nav label:after { top: 100%; left: 50%; border: solid transparent; content: " "; 
			position: absolute; border-top-color: var(--logo-color-1); border-width: 12px; margin-left: -12px; display: none; }
			
			
			
.contentSubContent  .introtext {
line-height: 1.3rem;
  font-size: clamp(0.8rem, 1.5vw, 0.8rem);
  text-transform: uppercase;
  letter-spacing: 3px;
  display: inline;
  font-weight: 500;
}


/* normale open / closed Steuerung außer Kraft setzen */
.page.agenturtabbed .contentSubContent input.switch ~ div.container { max-height: initial; }

.page.agenturtabbed .contentSubContent div.sub { display: none; }
.page.agenturtabbed .contentSubContent div.sub .head { display: none; }
.page.agenturtabbed .contentSubContent div.sub .title { display: none; }
/* .page.agenturtabbed .contentSubContent div.sub .contentDisplay .contentBody { padding: var(--padding-topbottom) 0; } */
.page.agenturtabbed .contentSubContent .tabmenu nav label:hover { transform: scale(1, 1.05); }

/* media queries */
@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 .contentDisplay .contentBody { padding-left: 0; padding-right: 0; }
}

@media all and (max-width: 600px) {
	.page.agenturtabbed .contentSubContent .tabmenu nav { row-gap: 1px; }
	.page.agenturtabbed .contentSubContent .tabmenu nav label:after { border-top-color: transparent; }
	.page.agenturtabbed .contentSubContent .tabmenu nav label { padding: 5px 25px; flex-basis: 100%; }
	.page.agenturtabbed .contentSubContent div.sub .title { display: block; }
}