.whyitworks-bg-cover {
	background-size: cover !important;
	background-position: center !important;
}

/* -----------------------------------------------------------------------------
   Color overrides (Porto skin variables)
   - replace Porto "red" primary with #ef8e00
   - add green accent via tertiary #153a0c
   Keep greys/darks (secondary/quaternary/dark) as-is.
----------------------------------------------------------------------------- */
:root {
	/* Primary (was #e41645) -> orange */
	--primary: #ef8e00;
	--primary-100: #d37d00;
	--primary-200: #c47400;
	--primary-300: #b66a00;
	--primary--100: #ff9c1a;
	--primary--200: #ffa733;
	--primary--300: #ffb34d;
	--primary-rgba-0: rgba(239, 142, 0, 0);
	--primary-rgba-10: rgba(239, 142, 0, 0.1);
	--primary-rgba-20: rgba(239, 142, 0, 0.2);
	--primary-rgba-30: rgba(239, 142, 0, 0.3);
	--primary-rgba-40: rgba(239, 142, 0, 0.4);
	--primary-rgba-50: rgba(239, 142, 0, 0.5);
	--primary-rgba-60: rgba(239, 142, 0, 0.6);
	--primary-rgba-70: rgba(239, 142, 0, 0.7);
	--primary-rgba-80: rgba(239, 142, 0, 0.8);
	--primary-rgba-90: rgba(239, 142, 0, 0.9);

	/* Tertiary (was light grey) -> green accent */
	--tertiary: #153a0c;
	--tertiary-100: #12320a;
	--tertiary-200: #102b09;
	--tertiary-300: #223829;
	--tertiary--100: #1a4a0f;
	--tertiary--200: #1f5a12;
	--tertiary--300: #246b16;
	--tertiary-rgba-0: rgba(21, 58, 12, 0);
	--tertiary-rgba-10: rgba(21, 58, 12, 0.1);
	--tertiary-rgba-20: rgba(21, 58, 12, 0.2);
	--tertiary-rgba-30: rgba(21, 58, 12, 0.3);
	--tertiary-rgba-40: rgba(21, 58, 12, 0.4);
	--tertiary-rgba-50: rgba(21, 58, 12, 0.5);
	--tertiary-rgba-60: rgba(21, 58, 12, 0.6);
	--tertiary-rgba-70: rgba(21, 58, 12, 0.7);
	--tertiary-rgba-80: rgba(21, 58, 12, 0.8);
	--tertiary-rgba-90: rgba(21, 58, 12, 0.9);
}

/* Porto footer: newsletter subscribe (fp_newsletter) */
.custom-newsletter-form .newsletter-input-wrapper {
	border-bottom: 1px solid rgba(255, 255, 255, 0.25);
	padding-bottom: 10px;
}

.custom-newsletter-form input#fp_email::placeholder {
	color: rgba(255, 255, 255, 0.55);
}

.custom-newsletter-form input#fp_email:focus {
	outline: none;
}

.custom-newsletter-success {
	color: #28a745;
	font-size: 0.95rem;
	line-height: 1.4;
}

.custom-newsletter-error {
	color: #ff6b6b;
	font-size: 0.95rem;
	line-height: 1.4;
	margin-bottom: 10px;
}

/* Make deep links like /#c1 work nicely with the sticky Porto header. */
[id^="c"] {
	scroll-margin-top: 120px;
}

/* Porto-like footer form styling (TYPO3 form content element in colPos 21). */
#footer .frame-type-form_formframework .form-group {
	margin-bottom: 0.75rem;
}

#footer .frame-type-form_formframework label.form-label {
	display: none;
}

#footer .frame-type-form_formframework .actions {
	margin-top: 1rem;
}

/* -----------------------------------------------------------------------------
   Mobile navigation (Porto header)
   Fix: the expanded collapse menu was clipped because `.header-body` has
   `overflow: hidden` (Porto shrink header), so the menu opened "behind" the hero.
----------------------------------------------------------------------------- */
#header .header-body {
	overflow: visible !important;
}

@media (max-width: 991.98px) {
	#header .header-nav-main nav.collapse.show {
		background: #1c1c1c;
		padding: 10px 0;
		max-height: calc(100vh - 120px);
		overflow-y: auto;
	}

	#header .header-nav-main nav .nav {
		flex-direction: column;
	}
}

/* -----------------------------------------------------------------------------
   Newsletter Origin Page (/newsletter-versand, pid=29)
   Keep content elements editable + Luxletter-compatible (CType=text) but render
   them like a newsletter (email container width, calm typography).
----------------------------------------------------------------------------- */
#page-29 .whyitworks-newsletter-web-preview {
	/* Avoid Porto body spacing quirks on this special page */
	margin: 0;
}

#page-29 .whyitworks-newsletter-container {
	width: 100%;
}

#page-29 .whyitworks-newsletter-origin .frame-type-text {
	background: transparent;
	border: 0;
	border-radius: 0;
	padding: 0;
	margin: 0 0 18px 0;
}

#page-29 .whyitworks-newsletter-origin .frame-type-text header {
	margin-bottom: 8px;
}

#page-29 .whyitworks-newsletter-origin .frame-type-text header h2 {
	color: #fff;
	font-weight: 700;
	letter-spacing: 0;
	margin: 0;
	font-size: 20px;
	line-height: 1.3;
	font-family: Arial, Helvetica, sans-serif;
}

#page-29 .whyitworks-newsletter-origin p {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	line-height: 1.7;
	color: #cfcfcf;
}

#page-29 .whyitworks-newsletter-origin a {
	color: var(--primary);
	text-decoration: underline;
}

#page-29 .whyitworks-newsletter-origin .frame-type-text p:last-child {
	margin-bottom: 0;
}