/* ==========================================================================
   LIEPS COMPONENT – STICKY HEADING
   ========================================================================== */

:root {
	--sticky-heading-gap: 2px;
	--sticky-heading-top: 0;
}

.sticky-heading {
	position: relative;
	margin-top: 2rem;
}

.sticky-heading > .container,
.sticky-heading > .container-fluid {
	position: relative;
	height: auto;
}

.sticky-heading.vh-full > .container,
.sticky-heading.vh-full > .container-fluid {
	min-height: 100vh;
}

.sticky-heading :is(.frame-type-header, .frame-type-text) :is(h1, h2, h3, h4, h5, h6) {
	position: sticky;
	top: var(--sticky-heading-top);
	z-index: 10;
	margin-top: 0;
	will-change: transform;
}

@media (max-width: 1919.98px) {
	:root {
		--sticky-heading-top: calc(var(--site-header-height) + var(--sticky-heading-gap));
	}

	body:has(.sticky-heading) header.header:not(.clicked):not(.contact-open) {
		background-color: rgba(var(--bs-body-bg-rgb), 1) !important;
	}
}

@media (max-width: 575.98px) {
	.sticky-heading {
		margin-top: 1rem;
	}

	.sticky-heading :is(.frame-type-header, .frame-type-text) h2 {
		display: flex;
		align-items: center;
		gap: .75rem;
		margin: 0;
		padding: .35rem 0;
		font-size: 1.35rem;
		line-height: 1;
	}

	.sticky-heading .h2_hash :is(.frame-type-header, .frame-type-text) h2::before {
		font-size: 2.5rem;
		line-height: 1;
	}
}

@media (min-width: 576px) and (max-width: 767.98px) {
	.sticky-heading :is(.frame-type-header, .frame-type-text) h2 {
		display: flex;
		align-items: center;
		gap: .75rem;
		margin: 0;
		padding: .4rem 0;
		font-size: 1.5rem;
		line-height: 1;
	}

	.sticky-heading .h2_hash :is(.frame-type-header, .frame-type-text) h2::before {
		font-size: 3rem;
		line-height: 1;
	}
}

@media (min-width: 768px) and (max-width: 991.98px) {
	.sticky-heading :is(.frame-type-header, .frame-type-text) h2 {
		display: flex;
		align-items: center;
		gap: .75rem;
		margin: 0;
		padding: .45rem 0;
		font-size: 1.65rem;
		line-height: 1;
	}

	.sticky-heading .h2_hash :is(.frame-type-header, .frame-type-text) h2::before {
		font-size: 3.5rem;
		line-height: 1;
	}
}

@media (min-width: 992px) {
	.sticky-heading :is(.frame-type-header, .frame-type-text) h2 {
		margin-top: 0;
		padding-top: 0;
		padding-bottom: 0;
	}
}

@media (min-width: 1200px) {
	.sticky-heading :is(.frame-type-header, .frame-type-text) :is(h1, h2, h3, h4, h5, h6).ce-headline-right,
	.sticky-heading :is(.frame-type-header, .frame-type-text) :is(h1, h2, h3, h4, h5, h6).ce-headline-left {
		width: max-content;
		max-width: none;
		white-space: nowrap;
	}

	.sticky-heading :is(h1, h2, h3, h4, h5, h6).ce-headline-right {
		margin-left: auto;
		margin-right: 0;
		text-align: right;
	}

	.sticky-heading :is(h1, h2, h3, h4, h5, h6).ce-headline-left {
		margin-left: 0;
		margin-right: auto;
		text-align: left;
	}
}

.sticky-heading__trigger {
	position: absolute;
	width: 1px;
	height: 1px;
	pointer-events: none;
}