/* ══════════════════════════════════════════════════ *
 * MARK: 1.Global Styles
 * ────────────────────────────────────────────────── */
#cvh--site-header .menu-item-label:not(.submenu .menu-item-label) {
	text-transform: uppercase;
}

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


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


/* ══════════════════════════════════════════════════ *
 * MARK: 3. Icon Link-Container
 * ────────────────────────────────────────────────── */
.cvh--icon-box-ctn {
	padding: var(--cvh-space-s, 2.5rem);
}

a.cvh--icon-box-ctn:hover {
	background-color: var(--base);

	& * {
		--cvh-color-text-dynamic: var(--cvh-color-text-light) !important;
		--cvh-color-heading-dynamic: var(--cvh-color-heading-light) !important;
	}
}


/* ══════════════════════════════════════════════════ *
 * MARK: 4. CvH Vorlagen
 * ────────────────────────────────────────────────── */
/* #═#═#═#═#═# 4.1 Gestapelte Bilder / Text - überlagert #═#═#═#═#═# */
/*
 * MARK: Layered Images
 */
.cvh--layered-images {
	display: flex;
	flex-direction: column;
}

.cvh--layered-images > * {
	max-width: 75%;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

.cvh--layered-images > *:nth-child(odd) {
	align-self: flex-start;
}

.cvh--layered-images > *:nth-child(even) {
	align-self: flex-end;
}

.cvh--layered-images > *:not(:first-child) {
	margin-top: calc(var(--cvh-space-xl, 7.5rem) * -1);
}


/* #═#═#═#═#═# 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 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.3 Formular mit akzent Farbe #═#═#═#═#═# */
/*
 * MARK: Form with Accent Color
 */
.cvh--form-accent__ctn {
	padding: var(--cvh-space-m);
	background-color: var(--accent);
}


/* #═#═#═#═#═# 4.4 Testimonial Grid #═#═#═#═#═# */
/*
 * MARK: Flow Grid
 */
.cvh--flow-grid__root {
	--_grid-max-col_count: 2;
	--_grid-min-col_size: 350px;
	--_grid-col_gap: 0;
	--_grid-row_gap: 0;

	/* calculations, do not touch */
	--_grid-col_size-calc: calc(
		(100% - var(--_grid-col_gap) * var(--_grid-max-col_count)) /
		var(--_grid-max-col_count)
	);
	--_grid-col_min_size-calc: min( 100%, max(var(--_grid-min-col_size), var(--_grid-col_size-calc)));


	display: grid;
	column-gap: var(--_grid-col_gap);
	row-gap: var(--_grid-row_gap);
	grid-template-columns: repeat(
		auto-fit,
		minmax(var(--_grid-col_min_size-calc), 1fr)
	) !important;
}

.cvh--flow-grid__root.has-col-gap {
	--_grid-col_gap: var(--cvh-col-gap, var(--cvh-col-gap-m));
}

.cvh--flow-grid__root > .cvh--flow-grid__float {
	position: relative;
	overflow: clip;
	aspect-ratio: 16/9;
	min-height: 100%;
	max-width: 100%;
}

.cvh--flow-grid__root > .cvh--flow-grid__float > * {
	position: absolute;
	inset: 0;
}

/* ??? {
	display: flex;
	align-items: stretch;
	flex-direction: column;
} */

/* ??? {
	flex-grow: 1;
	width: 100%;
} */


/* #═#═#═#═#═# 4.5 Galerie Media overlay #═#═#═#═#═# */
/*
 * MARK: Media Overlay
 */
.cvh--media-overlay__root {
	--_media-overlay__title-padding: 0.5rem;
	--_media-overlay__title-size: calc(var(--text-l) * var(--cvh-line-height-m) + 1em);

	--_media-overlay__card-padding: var(--cvh-space-xs, 1.5rem);
	--_media-overlay__background: var(--base-light);

	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: center;
	position: relative;
	isolation: isolate;
	overflow: clip;
	min-height: 300px;
	container: media-overlay / inline-size;

	& .cvh--media-overlay__overlay {
		translate: 0 calc(100% - (var(--_media-overlay__title-size, 0) + (2 * var(--_media-overlay__title-padding))));
	}

	&:is(:hover, :focus) .cvh--media-overlay__overlay {
		translate: 0 0;

		&::after {
			opacity: 1;
		}
	}
}

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

.cvh--media-overlay__overlay {
	--cvh-color-heading-dynamic: var(--cvh-color-heading-light);
	--cvh-color-text-dynamic: var(--cvh-color-text-light);
	position: relative;
	transition: var(--cvh-transition-normal);
	backdrop-filter: blur(5px);
	padding: var(--_media-overlay__card-padding);
	max-width: 80%;
	width: 100%;
	min-height: 50%;

	&::after {
		content: '\0A';
		position: absolute;
		inset: 0;
		z-index: -5;
		background-color: var(--_media-overlay__background);
		opacity: 0.6;
		transition: inherit;
	}
}

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

.cvh--media-overlay__title {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	flex-wrap: nowrap;
	min-height: calc(var(--_media-overlay__title-size) + (2 * var(--_media-overlay__title-padding)));
	margin-top: calc(var(--_media-overlay__card-padding) * -1);
	padding-block: var(--_media-overlay__title-padding);
	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 News Box #═#═#═#═#═# */
.cvh--news-box{
	border: 2px solid white;
}

/* ══════════════════════════════════════════════════ *
 * MARK: 5. Utility
 * ────────────────────────────────────────────────── */
/* #═#═#═#═#═# 5.1 Listen Stylings #═#═#═#═#═# */
:is(#id, .cvh--use-checklist ul, ul.cvh--checklist) li::before {
	content: '\2713';
	font: var(--cvh-font-icon-fas);
	line-height: 1lh;
	font-size: 1.2em;
    margin-right: 10px;
}