/* ══════════════════════════════════════════════════ *
 * MARK: 1.Global Styles
 * ────────────────────────────────────────────────── */
:root {
	--cvh-color-button-fg: var(--cvh-color-text-dark);
	--cvh-color-button-fg-hover: var(--cvh-color-text-dark);
	--btn-padding: 10px 35px;
	--cvh-color-link-dark: var(--accent-semi-light)
}
body main p:not(:is(hgroup, div).cvh--heading-ctn p) {
	max-inline-size: 75ch;
}

:is(hgroup, div).cvh--heading-ctn.has-category p:first-child {
	text-transform: uppercase;
}
.cvh--text-small {
	font-size: var(--text-s);
} 

h4, h5, h6, .cvh--emulate-h4, .cvh--emulate-h5, .cvh--emulate-h6 {
	color: var(--cvh-color-text-dark);
}

.wp-block-separator {
	color: var(--neutral-light);
	width: 80px;
	margin-right: auto;
	margin-left: auto;
}

:where(a,button,input[type=button]):is(.cvh--button,[class^=cvh--button-],[class*=" cvh--button-"]) {
    font-weight: 700;
}

/* ══════════════════════════════════════════════════ *
 * MARK: 2. Mobile Ansicht 
 * ────────────────────────────────────────────────── */


/* ══════════════════════════════════════════════════ *
 * MARK: 3. Banner
 * ────────────────────────────────────────────────── */
:where([data-has-overlay~="dark"]) {
	--overlay-bg: var(--primary-ultra-dark);
}
.cvh--banner-overlay h1, .cvh--banner-overlay .cvh--emulate-h1 {
	color: var(--cvh-color-text-light);
	text-transform: uppercase;
	font-weight: 400;
}

.cvh--banner-overlay h2, .cvh--banner-overlay .cvh--emulate-h2 {
	font-weight: 300;
}

.cvh--banner-overlay p{
	font-size: var(--h2);
	font-weight: 300;
	color: var(--cvh-color-text-light);
}
[data-has-overlay] {
	min-height: var(--col-width-l);
	display: flex;
	flex-direction: column;
	justify-content: end;
}

:is(:root, #id #id) :where(#cvh--site-banner > div.cvh--section-inner) > div {
  max-width: var(--cvh-col-width-50);
}
 

/* ══════════════════════════════════════════════════ *
 * MARK: 4. CvH Vorlagen
 * ────────────────────────────────────────────────── */
/* #═#═#═#═#═# 4.1 Icon Container #═#═#═#═#═# */
/*
 * MARK: Icon Container
 */
.cvh--icon-box > div {
	border: 2px solid var(--neutral-light);
	padding: var(--cvh-col-gap-s);
}


/* #═#═#═#═#═# 4.2 Bild / Text - volle Breite #═#═#═#═#═# */
/*
 * MARK: Float Layer Image
 */
.cvh--cta-float-layer__root {
	position: relative;
	isolation: isolate;
}

.cvh--cta-float-layer__ctn {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	max-width: calc(50vw - (var(--cvh-col-gap, var(--cvh-col-gap-m)) / 2));
}
.cvh--cta-float-layer__ctn-right {
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	max-width: calc(50vw - (var(--cvh-col-gap, var(--cvh-col-gap-m)) / 2));
}
.cvh--cta-float-layer__ctn img {
	height: 100%;
	object-fit: cover;
}

@media screen and (width < 1200px) {
	.cvh--break-xl .cvh--cta-float-layer__ctn {
		position: static;
		max-width: unset;
	}
}

@media screen and (width < 992px) {
	.cvh--break-l .cvh--cta-float-layer__ctn {
		position: static;
		max-width: unset;
	}
}

@media screen and (width < 768px) {
	.cvh--break-m .cvh--cta-float-layer__ctn {
		position: static;
		max-width: unset;
	}
}

@media screen and (width < 600px) {
	.cvh--break-s .cvh--cta-float-layer__ctn {
		position: static;
		max-width: unset;
	}
}
/* #═#═#═#═#═# 4.6 Team #═#═#═#═#═# */
/*
 * MARK: Team Diagonal
 */
.cvh--team-box .cvh--image-ctn::after {
	content: '\0A';
	-webkit-transform: rotate(360deg);
	border-style: solid;
	border-width: 100px 700px 0px 0;
	border-color: transparent var(--shade-white) transparent transparent;
	z-index: 999;
	position: absolute;
	bottom: 0;
}


/* #═#═#═#═#═# 4.5 Galerie Media overlay #═#═#═#═#═# */
/*
 * MARK: Media Overlay
 */
.cvh--media-overlay__root {
	--media-overlay-card-padding: var(--cvh-space-m, 1.5rem);

	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	position: relative;
	min-height: 300px;
	margin-top: 60px;
}
.cvh--media-overlay__title h3 {
	color: var(--cvh-color-text-dark);
	font-weight: 300;
}

.cvh--media-overlay__img {
	position: absolute;
	inset: 0;
	z-index: -5;
}

.cvh--media-overlay__overlay {
	position: absolute;
	padding: var(--media-overlay-card-padding);
	max-width: 60%;
	width: 100%;
	min-height: 50%;
	background-color: var(--neutral-ultra-light);
	top: -60px;

}

@container (width < 320px) {
	.cvh--media-overlay__overlay {
		max-width: 100%;
	}
}

/*
 * MARK: Span Box for Grid
 */
:is(.cvh--grid, [class^="cvh--grid-"], [class*=" cvh--grid-"]) >  .cvh--box__span-height__2 {
	grid-row: span 2;
}

@media screen and ( width >= 992px ) {
	:is(.cvh--grid, [class^="cvh--grid-"], [class*=" cvh--grid-"]) > :is([class^="cvh--box__span-width__"], [class*=" cvh--box__span-width__"]) {
		padding: var(--cvh-space-m, 3.5rem) var(--cvh-space-xl, 7.5rem);
	}

	:is(.cvh--grid, [class^="cvh--grid-"], [class*=" cvh--grid-"]) > .cvh--box__span-width__3 {
		grid-column: span 9;
	}

	:is(.cvh--grid, [class^="cvh--grid-"], [class*=" cvh--grid-"]) > .cvh--box__span-width__2 {
		grid-column: span 6;
	}
}

@media screen and (  width < 992px ) {
	:is(.cvh--grid, [class^="cvh--grid-"], [class*=" cvh--grid-"]) > :is([class^="cvh--box__span-width__"], [class*=" cvh--box__span-width__"]) {
		grid-column: 1 / -1;
		padding: var(--cvh-space-m, 3.5rem) var(--cvh-space-m, 3.5rem);
	}
}
/* #═#═#═#═#═# 4.6 Blog #═#═#═#═#═# */
/*
 * MARK: Blog
 */
.cvh--card-ctn {
  --card-spacing-y: var(--cvh-space-m);
  --card-spacing-x: var(--cvh-space-m);
  --card-padding-y: var(--cvh-space-m);
  --card-padding-x: var(--cvh-space-m);
  --card-indent-y: calc(var(--card-padding-y) * -1);
  --card-indent-x: calc(var(--card-padding-x) * -1);

}
.cvh--card-content {
  background-color: var(--neutral-ultra-light);
}

.cvh--card-title {
	color: var(--cvh-color-text-dark);
	font-size: var(--text-l);
}

.cvh--card-date-ctn {
	margin-bottom: var(--space-xs);
}

.cvh--card-date-ctn::before {
	content: '\f073';
	font: var(--cvh-font-icon-fas);
	margin-right: 15px;
}

/* ══════════════════════════════════════════════════ *
 * MARK: 5. Utility
 * ────────────────────────────────────────────────── */
/* #═#═#═#═#═# 5.1 Listen Stylings #═#═#═#═#═# */
:is(#id, .cvh--use-checklist ul, ul.cvh--checklist) li::before {
	content: '\e802';
	font-family: "Grimedio Icons", "Font Awesome 6 Free";
	line-height: 1lh;
	font-weight: 900;
	font-size: 1.2em;
    margin-right: 10px;
	color: var(--primary);
}
/* ══════════════════════════════════════════════════ *
 * MARK: 6. Footer
 * ────────────────────────────────────────────────── */

.cvh--grid-row[data-row-options~="divider-x"] > div:not(:last-child)::after {
	background-color: var(--neutral-light);
}