/* ══════════════════════════════════════════════════ *
 * MARK: 1.Global Styles
 * ────────────────────────────────────────────────── */
:is(#id, :root) {
	--cvh-font-icon-eastek: normal 400 1em / 1 'Eastek Icons';
}

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

:where(main,footer) ul:not(nav ul) li:not(:is(ul,ol) ul li,:is(.cvh--menu-invert-hover ul,ul.cvh--menu-invert-hover,.wp-block-social-links,.cvh--unstyled-list) li,.frm_rootline_group li):before {
	content: counter(ul-index, disc);
	margin-right: 0.5rem;
}


/* #═#═#═#═#═# 1.1 Headings #═#═#═#═#═# */
h2, .cvh--emulate-h2,
h3, .cvh--emulate-h3 {
	font-weight: 700;
}


/* ══════════════════════════════════════════════════ *
 * 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--grid-auto-2-col > div {
	& .cvh--cta-float-layer__ctn {
		position: absolute;
		top: 50%;
		bottom: 0;
		translate: 0 -50%;
		max-width: calc(50vw - (var(--cvh-col-gap, var(--cvh-col-gap-m)) / 2));
		width: 100%;
	}

	&:first-child .cvh--cta-float-layer__ctn {
		left: 0;
	}

	&:last-child .cvh--cta-float-layer__ctn {
		right: 0;
	}
}

.cvh--cta-float-layer__ctn img {
	height: 100%;
	object-fit: cover;
}

@media screen and (width < 1200px) {
	.cvh--grid-auto-2-col.cvh--break-xl > div .cvh--cta-float-layer__ctn {
		position: static;
		translate: unset;
		max-width: unset;
	}
}

@media screen and (width < 992px) {
	.cvh--grid-auto-2-col.cvh--break-l > div .cvh--cta-float-layer__ctn {
		position: static;
		translate: unset;
		max-width: unset;
	}
}

@media screen and (width < 768px) {
	.cvh--grid-auto-2-col.cvh--break-m > div .cvh--cta-float-layer__ctn {
		position: static;
		translate: unset;
		max-width: unset;
	}
}

@media screen and (width < 600px) {
	.cvh--grid-auto-2-col.cvh--break-s > div .cvh--cta-float-layer__ctn {
		position: static;
		translate: unset;
		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-dark);

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


/* ══════════════════════════════════════════════════ *
 * 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;
}


/* ══════════════════════════════════════════════════ *
 * MARK: 6. Header
 * ────────────────────────────────────────────────── */
/* #═#═#═#═#═# 6.1 Container #═#═#═#═#═# */
header#cvh--site-header::before {
	border-bottom: unset !important;
}


/* #═#═#═#═#═# 6.2 Buttons #═#═#═#═#═# */
#cvh--site-nav-button-row {
	:is(.cvh--button, [class^="cvh--button-"], [class*=" cvh--button-"]) {
		--cs-major-dynamic: transparent;
		--cs-minor-dynamic: var(--cvh-color-text-dark);

		font-size: 0.8em;

		&:not([id^="nav-buttons-"]) [data-element="icon"] {
			color: var(--secondary);
		}
	}


	& [id^="nav-buttons-"] {
		display: flex;
		align-items: center;
		justify-content: center;

		width: 2.5em;
		aspect-ratio: 1 / 1;
		border-radius: 50%;

		& > [data-element="text"] {
			display: none;
		}
	}

	#nav-buttons-yt {
		--cs-major-dynamic: #FF0000;
		--cs-minor-dynamic: var(--cvh-color-text-light);
	}

	#nav-buttons-facebook {
		--cs-major-dynamic: #4267B2;
		--cs-minor-dynamic: var(--cvh-color-text-light);
	}

	#nav-buttons-twitter {
		--cs-major-dynamic: #14171a;
		--cs-minor-dynamic: var(--cvh-color-text-light);
	}	
}


/* #═#═#═#═#═# 6.3 Navigation #═#═#═#═#═# */
#cvh--menu-navigation-ctn > ul,
#cvh--menu-navigation-ctn > ul li:is(:hover, :focus-within) {
	--cvh-color-link-dark-hover: var(--secondary-hover);
}

#cvh--menu-navigation-ctn > ul:not(:hover, :focus-within) li.current-menu-item:not(:hover, :focus-within) {
	--cvh-color-text-dynamic: var(--secondary);
}


#cvh--site-navigation cvh-submenu {
	&::part(container) {
		left: 0;
		transform: unset;
		border: none;
		background-color: var(--_dropdown-bg, var(--cvh-color-header, var(--shade-white)));
	}

	&::part(button),
	&::part(container)::before {
		background-color: var(--_dropdown-bg, var(--cvh-color-header, var(--shade-white)));
	}

	& > .menu-item-label {
		transition: var(--cvh-transition-normal);
		transition-property: color;
	}

	&::part(button):is(:hover, :focus-visible) {
			--cvh-color-text-dynamic: var(--secondary);
		}

	&[open] {
		--cvh-color-text-dynamic: var(--cvh-color-text-light);
		--_dropdown-bg: var(--neutral-dark);
	}
}


/* #═#═#═#═#═# 6.3.2 Link Design anpassungen #═#═#═#═#═# */
.menu-link__home-icon > a::before {
	content: '\e80c';
	font: var(--cvh-font-icon-eastek);
	line-height: 1;
	font-size: 1.2em;
	margin-right: 0.5rem;
	vertical-align: middle;
}

cvh-menu[layout="inline"] .menu-link__home-icon > a > .menu-item-label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	white-space: nowrap;
}

.menu-link__external > a > .menu-item-label::after {
	content: '\f08e';
	font: var(--cvh-font-icon-fas);
	line-height: 1;
	font-size: 0.7em;
	margin-left: 0.5rem;
	vertical-align: middle;
}


/* ══════════════════════════════════════════════════ *
 * MARK: 7. Breadcrumb
 * ────────────────────────────────────────────────── */
#cvh--site-breadcrumb :is(ol, ul).breadcrumb li.active {
	--cvh-color-text-dynamic: var(--secondary);
}

#cvh--site-breadcrumb .breadcrumb li:not(:last-child)::after {
	content: '\002F' !important;
	font-family: var(--cvh-font-text) !important;
	font-size: var(--cvh-text-m) !important;
	transform: unset !important;
}


/* ══════════════════════════════════════════════════ *
 * MARK: 8. Call to Actions
 * ────────────────────────────────────────────────── */
.bg--secondary :where(a,button,input[type=button]):is(.cvh--button,[class^=cvh--button-],[class*=" cvh--button-"]) {
	--cs-major-dynamic: var(--cvh-color-text-light);
	--cs-minor-dynamic: var(--cvh-color-text-dark);

	&:is(:hover, :focus) {
		--cs-major-dynamic: var(--cvh-color-text-light);
		--cs-minor-dynamic: var(--secondary-hover);
	}
}


/* ══════════════════════════════════════════════════ *
 * MARK: 9. Accordions
 * ────────────────────────────────────────────────── */
.cvh--accordion-wrap {
	--_accordion-title-bg: var(--neutral-ultra-light);
	--_accordion-title-bg-hover: var(--neutral-dark);
	--_accordion-title-fg: var(--cvh-color-text-dark);
	--_accordion-title-fg-hover: var(--cvh-color-text-light);

	& > .cvh--accordion-item[data-is-open] {
		--_accordion-title-bg: var(--neutral-dark);
		--_accordion-title-bg-hover: var(--neutral-dark);
		--_accordion-title-fg: var(--cvh-color-text-light);
		--_accordion-title-fg-hover: var(--cvh-color-text-light);
	}

	& .cvh--accordion-title > * {
		font-weight: 350;
	}
}


/* ══════════════════════════════════════════════════ *
 * MARK: 10. Footer
 * ────────────────────────────────────────────────── */
/* Footer Logo */
footer #cvh--site-widgets > .cvh--section-inner {
	container: footer-logo / inline-size;
}

footer .cvh--logo-ctn.cvh--svg-ctn {
	--obj-width: 100%;
}