/* 
Theme Name: BITS Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Based on Hello Elementor
Template: hello-elementor
Version: 2.0.0
Text Domain: hello-elementor-child
*/

/* Add your custom styles here */

:root {
	--color-primary: #387145;
	--spx-header-h: 120px;
}

.elementor-location-header {
	position: fixed;
	inset: 0 0 auto 0;
	z-index: 999;
	background: transparent;
	pointer-events: none;            /* the empty area must not eat clicks */
}

.elementor-location-header > .e-con {
	pointer-events: auto;
}

/* top bar: always visible, covers the nav when it retracts */
.spx-sticky {
	position: relative;
	z-index: 2;
	background: #387145;
}

/* nav bar: slides up behind the top bar */
.spx-navi {
	position: relative;
	z-index: 1;
	background: #fff;                /* your nav background */
	transition: transform .35s cubic-bezier(.4, 0, .2, 1);
	will-change: transform;
}

body.spx-nav-hidden .spx-navi {
	transform: translateY(-100%);
}

/* push the page down under the fixed header */
/*body { padding-top: var(--spx-header-h); }*/

html {
	overscroll-behavior-y: none;   /* Chrome Android, Safari 16+ */
	background: var(--spx-header-bg);
}


@media (prefers-reduced-motion: reduce) {
	.spx-navi { transition: none; }
}

body .imprint a,
body .imprint span {
	font-size: 22px;
	display: inline-block;
}

body .imprint span {
	margin-top: 10px;
	line-height: 124%;
}

.spx-imprint p {
	margin-bottom: 38px;
	line-height: 1;
}

.spx-header-h2 h2 {
	font-family: "Cera-Pro", Sans-serif;
	font-size: 40px;
	line-height: 124%;
	margin-block-start: .5rem !important;
}


#masthead {
	position: fixed !important;
	background: #fff;
	width: 100%;
	border-bottom: 1px solid #e0ddd6;
}

.spx-header {
	max-width: 1400px !important;
	margin: 0 auto;
	padding: 10px 20px;
}

.spx-header-icons .elementor-icon-list-items.elementor-inline-items {
	margin: 0 !important;
}

.spx-header .elementor-icon-list-item.elementor-inline-item:last-child {
	margin-right: 0 !important;
}

#menu-main {
	background: #fff;
	gap: 32px;
}

#menu-main::after {
	display: none;
}

#menu-main li a {
	text-align: left;
}

#menu-main li a:hover,
#menu-main li a:active {
	color: #387145 !important;
	text-decoration: underline;
}

#menu-footer li a:hover,
#menu-footer li a:active {
	text-decoration: none;
}

#menu-item-133 a {
	background: var( --e-global-color-primary );
	border: 2px solid var( --e-global-color-primary );
	transition: all 0.3s;
	color: #fff;
	transition: all 0.3s;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	padding: 0 20px;
}

#menu-item-133 a:hover,
#menu-item-133 a:active {
	color: var( --e-global-color-primary );
	text-decoration: none !important;
	background: white;
	border: 2px solid var( --e-global-color-primary );
}

footer .eael-simple-menu-container {
	min-height: auto;
}

.privacy-policy footer p {
	color: #fff;
}

footer p {
	margin: 0 !important;
}

.privacy-policy h2 {
	margin-top: 30px;
	font-family: "Cera-Pro", Sans-serif;
	font-size: 32px;
	color: var(--e-global-color-primary);
	margin-top: 20px !important;
}

@media all and (min-width: 1024px) {
	header .eael-simple-menu-container .eael-simple-menu li a {
		line-height: 1.5;
	}

	header .eael-simple-menu-container .eael-simple-menu.eael-simple-menu-horizontal li {
		height: 50px;
		display: flex;
		align-items: center;
	}
}

header p {
	margin: 0 !important;
}

.spx-header-phone a {
	color: #387145;
	text-decoration: none;
	font-size: 14px;
	font-weight: 700;
}

#leistungen h4 {
	margin-bottom: 10px;
}

.spx-about p {
	margin-bottom: 20px;
}

.spx-header-phone a:hover {
	text-decoration: underline;
}

.spx-tag,
.spx-tag p {
	font-size: 24px;
	line-height: 124%;
	text-transform: uppercase;
	font-family: Cera-Stencil, sans-serif;
	margin-bottom: 0;
}

#content h2 {
	margin-block-start: 0;
}

.spx-accordion p {
	font-size: 18px;
	color: #fff;
	line-height: 124%;
	padding-bottom: 4px;
	max-width: 92%;
}

.spx-accordion-faq p {
	font-size: 18px;
	line-height: 124%;
	padding-bottom: 4px;
	max-width: 92%;
}

.spx-icon-box .elementor-icon {
	margin-top: 7px;
}

.spx-icon-box-faq .elementor-icon {
	margin-top: 15px;
}

@media (min-width: 1025px) {
	.spx-steps {
		display: grid;
		grid-template-columns: auto max-content 1fr;
		column-gap: 1rem;
		row-gap: 2.5rem;
		align-items: start;
	}

	.spx-steps > .spx-icon-box,
	.spx-steps > .spx-icon-box > .elementor-icon-box-wrapper,
	.spx-steps .elementor-icon-box-content {
		display: contents;
	}

	.spx-steps .elementor-icon-box-title {
		margin-block-end: 0;
		padding-inline-end: 1rem;
	}

	.spx-steps .elementor-icon-box-description {
		margin-block: 0;
		padding-block-start: 0.35em;
	}
}

.spx-accordion details.e-n-accordion-item {
	border-bottom: 2px solid rgba(255,255,255,.2);
	min-height: 64px !important;
}

.spx-accordion details.e-n-accordion-item:first-child {
	border-top: 2px solid rgba(255,255,255,.2);
}

.spx-accordion-faq details.e-n-accordion-item {
	border-bottom: 2px solid rgba(0,0,0,0.2);
	min-height: 64px !important;
}

.spx-accordion-faq details.e-n-accordion-item:first-child {
	border-top: none;
}

.spx-mobile-nav .eael-simple-menu li a {
	border: none !important;
}


/* stack both icons on top of each other */
.spx-accordion .e-n-accordion-item-title-icon,
.spx-accordion-faq .e-n-accordion-item-title-icon {
	display: grid;
	place-items: center;
}

/*.spx-accordion-faq .e-n-accordion-item-title-icon {
margin-right: 14px;
}*/

.spx-accordion .e-n-accordion-item-title-icon > .e-opened,
.spx-accordion .e-n-accordion-item-title-icon > .e-closed,
.spx-accordion-faq .e-n-accordion-item-title-icon > .e-opened,
.spx-accordion-faq .e-n-accordion-item-title-icon > .e-closed {
	grid-area: 1 / 1;
	display: flex !important;      /* overrides Elementor's display: none */
	transition: opacity .2s ease-in-out;
	pointer-events: none;
}

/* closed state */
.spx-accordion .e-n-accordion-item-title-icon > .e-opened { opacity: 0; }
.spx-accordion .e-n-accordion-item-title-icon > .e-closed { opacity: 1; }
.spx-accordion-faq .e-n-accordion-item-title-icon > .e-opened { opacity: 0; }
.spx-accordion-faq .e-n-accordion-item-title-icon > .e-closed { opacity: 1; }

/* open state */
.spx-accordion details[open] .e-n-accordion-item-title-icon > .e-opened { opacity: 1; }
.spx-accordion details[open] .e-n-accordion-item-title-icon > .e-closed { opacity: 0; }
.spx-accordion-faq details[open] .e-n-accordion-item-title-icon > .e-opened { opacity: 1; }
.spx-accordion-faq details[open] .e-n-accordion-item-title-icon > .e-closed { opacity: 0; }


.spx-popup h4,
.spx-popup p,
.spx-popup ul li {
	color: var( --e-global-color-primary );
}

.spx-popup h4,
.spx-popup ul li p {
	margin-bottom: 0 !important;
}

.spx-popup ul {
	padding-left: 30px;
}

.spx-popup ul:not(:last-child) {
	margin-bottom: 20px;
}

.spx-popup ul li::marker {
	font-size: 1rem;
}

.spx-box-leistungen .eael-infobox.icon-on-top {
	height: 100%;
}

.spx-box-leistungen {
	display: flex;
}

.spx-box-leistungen > .eael-infobox {
	display: flex;
	flex-direction: column;
	flex: 1;
}

.spx-box-leistungen .infobox-content {
	display: flex;
	flex-direction: column;
	flex: 1;
}

.spx-box-leistungen .infobox-button {
	margin-top: auto;
}

.spx-box-leistungen > .eael-infobox {
	position: relative;
	overflow: hidden;
	background: var( --e-global-color-primary );
}

.spx-box-leistungen > .eael-infobox::before {
	content: "";
	position: absolute;
	inset: 0;
	background: #fff;
	transform: scaleY(0);
	transform-origin: top;
	transition: transform .45s cubic-bezier(.4, 0, .2, 1);
	z-index: 0;
}

.spx-box-leistungen > .eael-infobox:hover::before {
	transform: scaleY(1);
}

/* content has to sit above the sliding layer */
.spx-box-leistungen .infobox-content {
	position: relative;
	z-index: 1;
}

/* colour changes */
.spx-box-leistungen .title,
.spx-box-leistungen p,
.spx-box-leistungen .infobox-button-text {
	transition: color .45s cubic-bezier(.4, 0, .2, 1);
}

.spx-box-leistungen > .eael-infobox:hover .title,
.spx-box-leistungen > .eael-infobox:hover p,
.spx-box-leistungen > .eael-infobox:hover .infobox-button-text {
	color: var(--e-global-color-primary) !important;
}

/* undo the mask/filter approach if you added it */
.spx-box-leistungen .eael_infobox_button_icon_right {
	display: inline-block;
	transition: opacity .45s cubic-bezier(.4, 0, .2, 1);
}

.spx-box-leistungen .eael-infobox-button {
	position: relative;
}

.spx-box-leistungen .eael-infobox-button::after {
	content: "";
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 16px;
	height: 16px;
	background: url("/wp-content/uploads/2026/08/spx-right-green.svg") center / contain no-repeat;
	opacity: 0;
	transition: opacity .45s cubic-bezier(.4, 0, .2, 1);
	pointer-events: none;
}

.spx-box-leistungen > .eael-infobox:hover .eael_infobox_button_icon_right {
	opacity: 0;
}

.spx-box-leistungen > .eael-infobox:hover .eael-infobox-button::after {
	opacity: 1;
}


.spx-ol ol {
	list-style: none;
	counter-reset: item;
	position: relative;
	padding-left: 0;
}
.spx-ol li {
	counter-increment: item;
	margin-bottom: 5px;
	border-bottom: 1px solid #e0ddd6;
	padding: 20px 0 20px 70px;
	font-size: 14px;
	color: #555;
	line-height: 1.65;
}
spx-header
.spx-ol li strong {
	font-size: 16px;
	margin-bottom: 8px;
	display: block;
	color: #1a1a1a;
}

.spx-ol li::before {
	margin-right: 10px;
	content: counter(item);
	width: 40px;
	height: 40px;
	background: #387145;
	color: #fff;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	font-weight: 700;
	position: absolute;
	left: 0;
}
spx-header
footer p {
	margin: 0;
}

/* outside any media query */
.spx-nav-arrow { display: none; }

@media (max-width: 1024px) {

	#menu-footer {
		gap: 30px;
	}

	body .imprint span {
		margin-top: 10px;
		line-height: 116%;
	}

	.spx-imprint p {
		margin-bottom: 26px;
	}

	.spx-header-h2 h2 {
		font-size: 28px;
		line-height: 116%;
	}

	.spx-steps .elementor-widget-icon-box.elementor-mobile-position-block-start .elementor-icon-box-wrapper,
	.spx-icon-box-faq .elementor-icon-box-wrapper {
		align-items: start !important;
		flex-direction: row !important;
	}

	.spx-mobile-left p {
		text-align: left !important;
	}

	.spx-header {
		padding: 23px 20px;
	}

	.privacy-policy h2 {
		font-size: 26px;
	}

	.spx-mobile-nav .elementor-nav-menu--dropdown { display: none !important; }

	.spx-mobile-nav .elementor-nav-menu--main {
		position: relative;
		width: 100%;
	}

	.spx-mobile-nav .elementor-nav-menu--main > .elementor-nav-menu {
		display: flex;
		flex-wrap: nowrap;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-behavior: smooth;
		scroll-snap-type: x proximity;
		scroll-padding-inline: 3rem;
		scrollbar-width: none;
		overscroll-behavior-inline: none;
		-webkit-overflow-scrolling: touch;
		margin: 0;
		padding-inline: 0rem;
	}

	.spx-mobile-nav .elementor-nav-menu--main > .elementor-nav-menu::-webkit-scrollbar {
		display: none;
	}

	.spx-mobile-nav .elementor-nav-menu--main > .elementor-nav-menu > li {
		flex: 0 0 auto;
		scroll-snap-align: start;
	}

	.spx-nav-arrow {
		position: absolute;
		inset-block: 0;
		z-index: 2;
		display: none;
		place-items: center;
		width: 2.75rem;
		background: transparent !important;
		border: none !important;
		color: #fff !important;
	}

	.spx-nav-arrow svg {
		height: 100%;
	}

	.spx-nav-arrow--prev { inset-inline-start: 0; }
	.spx-nav-arrow--prev svg { transform: scaleX(-1); }
	.spx-nav-arrow--next { inset-inline-end: 0; }

	.elementor-nav-menu--main[data-more="left"]  > .spx-nav-arrow--prev,
	.elementor-nav-menu--main[data-more="both"]  > .spx-nav-arrow--prev,
	.elementor-nav-menu--main[data-more="right"] > .spx-nav-arrow--next,
	.elementor-nav-menu--main[data-more="both"]  > .spx-nav-arrow--next {
		display: grid;
	}

	.elementor-nav-menu--main[data-more="right"] > .elementor-nav-menu {
		mask-image: linear-gradient(to right,
			#000 calc(100% - 5rem), transparent calc(100% - 1.5rem));
	}
	.elementor-nav-menu--main[data-more="left"] > .elementor-nav-menu {
		mask-image: linear-gradient(to right,
			transparent 1.5rem, #000 5rem);
	}
	.elementor-nav-menu--main[data-more="both"] > .elementor-nav-menu {
		mask-image: linear-gradient(to right,
			transparent 1.5rem, #000 5rem,
			#000 calc(100% - 5rem), transparent calc(100% - 1.5rem));
	}

	@media (prefers-reduced-motion: reduce) {
		.spx-mobile-nav .elementor-nav-menu--main > .elementor-nav-menu {
			scroll-behavior: auto;
		}
	}

	.home .spx-hero h1,
	.home .spx-hero h2,
	.home .spx-hero h3 {
		text-align: center;
	}

	body .imprint a, body .imprint span {
		font-size: 20px;
	}

	.privacy-policy h2 {
		margin-top: 12px !important;
	}

	.spx-popup ul li {
		font-size: 16px;
		line-height: 124% !important;
	}

	.spx-sub-h3 h3 {
		margin: 0 !important;
	}

	.spx-popup-container {
		max-height: 80vh;
	}

	.spx-hero {
		padding-top: var(--spx-header-h);
	}

}