/* Product page upgrades inspired by the Adobe XD prototype. */

.ralu-product-trust-stack .et_pb_code_inner,
.ralu-product-highlight-stack .et_pb_code_inner {
	display: block;
}

.ralu-product-rating {
	align-items: center;
	color: #072140;
	display: flex;
	font-family: Quicksand, Helvetica, Arial, Lucida, sans-serif;
	font-size: 13px;
	font-weight: 600;
	gap: 8px;
	line-height: 1;
	margin: 0 0 12px;
}

.ralu-product-rating__stars {
	color: #f9bb08;
	display: inline-flex;
	font-size: 18px;
	gap: 1px;
	letter-spacing: 0;
}

.ralu-product-rating__stars .is-empty {
	color: #d6dde3;
}

.ralu-product-rating__count {
	color: #6e7b86;
	font-size: 12px;
}

.ralu-product-payments {
	background: #f6f8fa;
	border: 1px solid #e7edf1;
	border-radius: 6px;
	box-sizing: border-box;
	margin: 16px 0 22px;
	padding: 0 12px;
}

.ralu-product-payments__list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	list-style: none !important;
	margin: 0;
	padding: 0;
}

.ralu-product-payments__list--secondary {
	border-top: 1px solid #dfe7ec;
}

.ralu-product-payments__list--1-items {
	grid-template-columns: minmax(0, 1fr);
}

.ralu-product-payments__list--2-items {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ralu-product-payments__item {
	align-content: center;
	display: grid;
	gap: 8px;
	grid-template-rows: 32px auto;
	justify-items: center;
	list-style: none !important;
	min-width: 0;
	padding: 14px 10px;
	text-align: center;
}

.ralu-product-payments__item + .ralu-product-payments__item {
	border-left: 1px solid #dfe7ec;
}

.ralu-product-payments__item--secondary {
	gap: 6px;
	grid-template-rows: 32px auto;
	min-height: 82px;
	padding-bottom: 11px;
	padding-top: 11px;
}

.ralu-product-payments__marks {
	align-items: center;
	display: flex;
	gap: 5px;
	height: 32px;
	justify-content: center;
	max-width: 100%;
}

.ralu-product-payments__marks img {
	display: block;
	flex: 0 0 auto;
	height: auto;
	max-height: 32px;
	max-width: 100%;
	width: auto;
}

.ralu-product-payments__marks--bank img {
	height: 32px;
	width: 32px;
}

.ralu-product-payments__marks--cards img {
	max-width: 32px;
}

.ralu-product-payments__marks--paypal img {
	max-height: 20px;
	max-width: 46px;
}

.ralu-product-payments__marks--wallet img {
	max-height: 28px;
	max-width: 46px;
}

.ralu-product-payments__klarna-mark {
	align-items: center;
	background: #ffb3c7;
	border-radius: 2px;
	color: #111;
	display: inline-flex;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	font-weight: 700;
	height: 26px;
	line-height: 1;
	padding: 0 8px;
}

.ralu-product-payments__copy,
.ralu-product-payments__copy strong,
.ralu-product-payments__copy span {
	display: block;
	max-width: 100%;
	overflow-wrap: anywhere;
}

.ralu-product-payments__copy strong {
	color: #072140;
	font-family: Quicksand, Helvetica, Arial, Lucida, sans-serif;
	font-size: 11px;
	font-weight: 700;
	line-height: 1.3;
	overflow-wrap: normal;
	white-space: nowrap;
}

.ralu-product-payments__copy span {
	color: #526273;
	font-family: Open Sans, Helvetica, Arial, Lucida, sans-serif;
	font-size: 11px;
	font-weight: 400;
	line-height: 1.35;
	margin-top: 2px;
}

.ralu-product-highlights {
	display: grid;
	gap: 9px;
	list-style: none !important;
	margin: 0;
	padding: 0;
}

.ralu-product-highlights li {
	color: #4b5c6a;
	font-size: 14px;
	line-height: 1.45;
	list-style: none !important;
	padding-left: 25px;
	position: relative;
}

.ralu-product-highlights li::before {
	color: #05a660;
	content: "✓";
	font-weight: 700;
	left: 0;
	position: absolute;
	top: 0;
}

/* Delivery-time line (Germanized renders as
   <p class="wc-gzd-additional-info delivery-time-info">).
   The single-product context replaces the legacy icon-truck markup with
   <span class="ralu-product-delivery__icon"> via a PHP filter, see
   ralu_product_layout_filter_delivery_time_html(). */
.ralu-product-delivery,
.single-product .wc-gzd-additional-info.delivery-time-info {
	align-items: center;
	color: #526273;
	display: flex;
	flex-wrap: wrap;
	font-size: 13px;
	gap: 6px 10px;
	margin: 18px 0 0;
}

/* Delivery-truck icon — vom Shopbetreiber-bereitgestelltes PNG.
   Datei: assets/images/product-layouts/delivery-truck.png (quadratisch). */
.ralu-product-delivery__icon {
	background-image: url("../images/product-layouts/delivery-truck.png");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	display: inline-block;
	flex: 0 0 24px;
	height: 24px;
	width: 24px;
}

.ralu-product-delivery__prefix,
.ralu-product-delivery__text {
	color: inherit;
	font-size: inherit;
	line-height: 1.4;
}

.single-product .wc-gzd-additional-info.delivery-time-info .lieferzeit-text {
	color: inherit;
}

/* Defensive: hide any leftover <i class="icon-truck"> if PHP strip missed it. */
.single-product .wc-gzd-additional-info.delivery-time-info i.icon-truck,
.ralu-product-delivery i.icon-truck {
	display: none !important;
}

.ralu-product-delivery i {
	color: #072140;
}

.ralu-xd-page {
	background: #fff;
	color: #072140;
	font-family: Quicksand, Helvetica, Arial, Lucida, sans-serif;
	overflow: hidden;
	width: 100%;
}

.ralu-xd-page h1,
.ralu-xd-page h2,
.ralu-xd-page h3 {
	color: #072140;
	font-family: Quicksand, Helvetica, Arial, Lucida, sans-serif;
	font-weight: 700;
	letter-spacing: 0;
}

.ralu-xd-hero {
	display: grid;
	gap: 72px;
	grid-template-columns: minmax(0, 1.25fr) minmax(360px, 0.75fr);
	margin: 0 auto;
	max-width: 1640px;
	padding: 115px 7vw 100px;
}

.ralu-xd-hero > * {
	min-width: 0;
}

.ralu-xd-media {
	align-items: start;
	display: grid;
	gap: 1.5rem;
	grid-template-columns: 150px minmax(0, 1fr);
	min-width: 0;
}

.ralu-xd-media__thumbs {
	align-content: start;
	align-self: start;
	display: grid;
	gap: 1.5rem;
	grid-auto-rows: max-content;
}

.ralu-xd-media__thumb {
	aspect-ratio: 1 / 1;
	background: #f2f7f9;
	border: 2px solid transparent;
	border-radius: 15px;
	box-shadow: none;
	cursor: pointer;
	overflow: hidden;
	padding: 0;
	transition: border-color 0.2s ease, transform 0.2s ease;
}

.ralu-xd-media__thumb.is-active,
.ralu-xd-media__thumb:hover,
.ralu-xd-media__thumb:focus-visible {
	border-color: #0587c3;
	outline: none;
	transform: translateY(-2px);
}

.ralu-xd-media__thumb img {
	display: block;
	height: 100%;
	object-fit: cover;
	object-position: center;
	width: 100%;
}

.ralu-xd-media__stage {
	align-items: center;
	aspect-ratio: auto;
	background: #f4f9fb;
	border-radius: 15px;
	display: flex;
	flex-direction: column;
	gap: 25px;
	justify-content: center;
	overflow: hidden;
	min-width: 0;
	padding: 1.6em 0 2em;
	position: relative;
	transform: translateZ(0);
}

.ralu-xd-media__stage > img[data-ralu-product-gallery-image] {
	aspect-ratio: 1.44 / 1;
	filter: drop-shadow(0 24px 35px rgba(5, 135, 195, 0.22));
	object-fit: contain;
	width: min(84%, 720px);
}

.ralu-xd-sale-badge {
	background: #f7523d;
	border-radius: 3px;
	color: #fff;
	font-size: 15px;
	font-weight: 700;
	left: 24px;
	line-height: 1;
	max-width: calc(100% - 48px);
	padding: 12px 18px;
	position: absolute;
	text-transform: capitalize;
	top: 24px;
	z-index: 3;
}

.ralu-xd-storer {
	height: auto;
	max-width: 140px;
	pointer-events: none;
	position: absolute;
	right: 16px;
	top: 16px;
	width: clamp(72px, 18%, 140px);
	z-index: 4;
}

.ralu-xd-media__features {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding: 0;
	position: relative;
	width: 100%;
	box-sizing: border-box;
}

.ralu-xd-media__features .sonderboxen {
	flex: 1 1 auto;
	max-width: 100%;
	min-width: 341px;
	width: auto;
}

.ralu-xd-media__features .sonderboxen .sondermerkmal {
	min-width: 110px;
	width: 110px;
}

.ralu-xd-media__features .infokasten {
	align-items: center;
	background-color: transparent;
	box-shadow: none;
	flex: 1 1 220px;
	margin-left: 0;
	margin-right: 0;
	max-width: 100%;
	min-width: 0;
	transform: none;
}

/* Undo the skew(11deg) compensation that style.css applies to .infokasten *
   so the icon and label are no longer pre-skewed inside the XD template. */
.ralu-xd-media__features .infokasten * {
	transform: none;
}

.ralu-xd-buybox {
	align-self: start;
	max-width: 100%;
	min-width: 0;
	padding-top: 4px;
	width: 100%;
}

.ralu-xd-title {
	font-size: 38px;
	line-height: 1.12;
	margin: 0 0 16px;
}

.ralu-xd-price-row {
	align-items: start;
	display: grid;
	gap: 18px;
	grid-template-columns: minmax(0, 1fr) auto;
	margin: 8px 0 14px;
}

.ralu-xd-price {
	margin: 0;
}

.ralu-xd-price .price,
.ralu-xd-price > .amount,
.ralu-xd-price .woocommerce-Price-amount {
	color: #f7523d;
	font-family: 'Quicksand', sans-serif;
	font-size: 22px;
	font-weight: 700;
}

.ralu-xd-price-row .ralu-xd-price del {
	display: block;
}

.ralu-xd-price del .woocommerce-Price-amount {
	color: #8d9aa6;
	font-size: 16px;
	font-weight: 400;
}

.single-product .ralu-xd-page .ralu-xd-energy .energy-efficiency-component {
	align-items: flex-end !important;
	bottom: auto !important;
	display: flex !important;
	justify-content: flex-start !important;
	left: auto !important;
	margin: 0 !important;
	max-width: none !important;
	position: relative !important;
	top: auto !important;
	width: auto !important;
}

.single-product .ralu-xd-page .ralu-xd-energy .energy-efficiency-lightbox-link {
	position: relative !important;
	z-index: 1 !important;
}

.single-product .ralu-xd-page .ralu-xd-energy .product-data-link {
	white-space: nowrap;
}

.ralu-xd-summary {
	color: #072140;
	font-family: Open Sans, Helvetica, Arial, Lucida, sans-serif;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.55;
	margin: 18px 0;
	overflow-wrap: anywhere;
}

.ralu-xd-summary p,
.ralu-xd-title {
	font-family: 'Quicksand', sans-serif;
	max-width: 100%;
	overflow-wrap: anywhere;
}

.ralu-xd-cart {
	margin-top: 28px;
}

.ralu-xd-cart form.cart {
	align-items: stretch;
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}

/* Quantity pill — minus / number / plus, JS-enhanced via .ralu-xd-qty-btn */
.ralu-xd-cart .quantity {
	align-items: center;
	background: #fff;
	border: 1px solid #dce6ec;
	border-radius: 999px;
	display: inline-flex;
	flex: 0 0 auto;
	gap: 4px;
	min-height: 56px;
	padding: 4px 8px;
}

.ralu-xd-cart .quantity input.qty {
	background: transparent !important;
	border: 0 !important;
	color: #072140 !important;
	font-size: 17px !important;
	font-weight: 600 !important;
	height: 44px;
	width: 48px;
	text-align: center;
	-moz-appearance: textfield;
	appearance: textfield;
	padding: 0;
	box-shadow: none !important;
}

.ralu-xd-cart .quantity input.qty::-webkit-outer-spin-button,
.ralu-xd-cart .quantity input.qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.ralu-xd-cart .ralu-xd-qty-btn {
	appearance: none;
	background: transparent;
	border: 0;
	color: #1f3a5f;
	cursor: pointer;
	font-family: inherit;
	font-size: 22px;
	font-weight: 400;
	line-height: 1;
	padding: 0;
	width: 36px;
	height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: opacity 0.15s ease;
}

.ralu-xd-cart .ralu-xd-qty-btn:hover {
	opacity: 0.6;
}

.ralu-xd-cart .ralu-xd-qty-btn:focus-visible {
	outline: 2px solid #4a86c4;
	outline-offset: 2px;
	border-radius: 999px;
}

.ralu-xd-cart .ralu-xd-qty-btn::before,
.ralu-xd-cart .ralu-xd-qty-btn::after {
	display: none !important;
	content: none !important;
}

/* Add-to-Cart button with leading basket icon */
.ralu-xd-cart button.single_add_to_cart_button {
	align-items: center;
	background: #2d4a6b !important;
	border: 0 !important;
	border-radius: 999px !important;
	color: #fff !important;
	display: inline-flex !important;
	flex: 1 1 auto;
	font-family: Quicksand, Helvetica, Arial, Lucida, sans-serif !important;
	font-size: 16px !important;
	font-weight: 400 !important;
	gap: 12px;
	justify-content: center;
	min-height: 56px;
	min-width: 0;
	padding: 14px 28px !important;
	text-transform: none !important;
	transition: background 0.2s ease, transform 0.15s ease;
	white-space: nowrap;
}

.ralu-xd-cart button.single_add_to_cart_button:hover {
	background: #1f3a5f !important;
	color: #fff !important;
}

.ralu-xd-cart button.single_add_to_cart_button::before {
	content: '' !important;
	display: inline-block !important;
	width: 22px !important;
	height: 22px !important;
	flex: 0 0 22px;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20576%20512'%20fill%3D'%23ffffff'%3E%3Cpath%20d%3D'M253.3%2035.1c6.1-11.8%201.5-26.3-10.2-32.4s-26.3-1.5-32.4%2010.2L117.6%20192%2032%20192c-17.7%200-32%2014.3-32%2032s14.3%2032%2032%2032l5.1%200L48.8%20442.8c2.4%2030.2%2027.6%2053.2%2057.9%2053.2l362.7%200c30.2%200%2055.5-23%2057.9-53.2L538.9%20256l5.1%200c17.7%200%2032-14.3%2032-32s-14.3-32-32-32l-85.6%200L360.3%2012.9c-6.1-11.8-20.6-16.3-32.4-10.2s-16.3%2020.6-10.2%2032.4L404.3%20192l-232.6%200L253.3%2035.1zM192%20304l0%2096c0%208.8-7.2%2016-16%2016s-16-7.2-16-16l0-96c0-8.8%207.2-16%2016-16s16%207.2%2016%2016zm96-16c8.8%200%2016%207.2%2016%2016l0%2096c0%208.8-7.2%2016-16%2016s-16-7.2-16-16l0-96c0-8.8%207.2-16%2016-16zm128%2016l0%2096c0%208.8-7.2%2016-16%2016s-16-7.2-16-16l0-96c0-8.8%207.2-16%2016-16s16%207.2%2016%2016z'%2F%3E%3C%2Fsvg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: center !important;
	background-size: contain !important;
	/* Override default WC/Theme ::before (used for AJAX loader: opacity 0 + position absolute) */
	opacity: 1 !important;
	position: static !important;
	top: auto !important;
	left: auto !important;
	right: auto !important;
	bottom: auto !important;
	transform: none !important;
	margin: 0 !important;
	font-size: 0 !important;
	line-height: 1 !important;
	vertical-align: middle;
}

.ralu-xd-cart button.single_add_to_cart_button::after {
	display: none !important;
	content: none !important;
}

.ralu-xd-specs {
	background: #072140;
	color: #fff;
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
	min-height: 800px;
	overflow: hidden;
}

.ralu-xd-specs__content {
	padding: 130px 10vw 120px 11vw;
}

.ralu-xd-specs h2 {
	color: #fff;
	font-size: 34px;
	margin-bottom: 70px;
}

.ralu-xd-accordion details {
	border-bottom: 1px solid rgba(255, 255, 255, 0.22);
}

.ralu-xd-accordion summary {
	color: #fff;
	cursor: pointer;
	font-size: 17px;
	list-style: none;
	padding: 26px 0;
	position: relative;
}

.ralu-xd-accordion summary:focus-visible {
	outline: 2px solid #4bb1f1;
	outline-offset: 4px;
}

.ralu-xd-accordion summary::-webkit-details-marker {
	display: none;
}

.ralu-xd-accordion summary::after {
	content: "+";
	font-size: 24px;
	position: absolute;
	right: 0;
	top: 22px;
}

.ralu-xd-accordion details[open] summary::after {
	content: "–";
}

.ralu-xd-accordion__panel {
	color: rgba(255, 255, 255, 0.86);
	font-family: Open Sans, Helvetica, Arial, Lucida, sans-serif;
	font-size: 14px;
	line-height: 1.7;
	padding: 0 0 28px;
}

.ralu-xd-specs__image {
	align-items: center;
	/* Background image is driven per product via the ACF field
	   "spezifikationen-hintergrund". PHP sets --ralu-specs-bg inline; if the
	   field is empty, the PHP fallback uses the legacy default URL. */
	background-image:
		linear-gradient(90deg, rgba(7, 33, 64, 0.12), rgba(7, 33, 64, 0.04)),
		var(--ralu-specs-bg, url("/wp-content/uploads/2021/01/klimaanlage-schlafzimmer.jpg"));
	background-position: center;
	background-size: cover;
	clip-path: polygon(15% 0, 100% 0, 100% 100%, 0 100%);
	display: flex;
	justify-content: center;
	min-height: 800px;
	position: relative;
}

.ralu-xd-specs__image span {
	align-items: center;
	aspect-ratio: 1;
	background: #072140;
	border: 5px solid #05d26e;
	border-radius: 50%;
	color: #fff;
	display: flex;
	font-size: 17px;
	font-weight: 700;
	justify-content: center;
	line-height: 1.35;
	max-width: 185px;
	padding: 24px;
	text-align: center;
}

/* =====================================================================
   COMPARE SECTION (v2) — Claude-Design layout, scoped under
   .ralu-xd-compare-v2 so nothing here leaks into the rest of the theme.
   ===================================================================== */

.ralu-xd-compare-v2 {
	--rxc-ink:               #1f3a5f;
	--rxc-ink-soft:          #2c4a6b;
	--rxc-text:              #1e2a3a;
	--rxc-muted:             #6b7a8c;
	--rxc-card-white:        #ffffff;
	--rxc-card-blue:         rgba(222, 234, 237, 0.3);
	--rxc-card-blue-edge:    rgba(222, 234, 237, 0.3);
	--rxc-card-grey:         rgba(222, 234, 237, 0.3);
	--rxc-card-grey-edge:    rgba(222, 234, 237, 0.3);
	--rxc-border:            #e6e9ee;
	--rxc-hairline-white:    rgba(31, 58, 95, 0.06);
	--rxc-hairline-blue:     rgba(31, 58, 95, 0.08);
	--rxc-hairline-grey:     rgba(31, 58, 95, 0.07);
	--rxc-shadow:            0px 3px 40px rgba(0, 0, 0, 0.16);
	--rxc-shadow-hover:      0 2px 4px rgba(31, 58, 95, 0.06), 0 18px 40px -16px rgba(31, 58, 95, 0.22);
	--rxc-radius:            14px;
	--rxc-radius-btn:        999px;
	--rxc-col-gap:           clamp(14px, 2.2vw, 32px);
	--rxc-row-pad-y:         clamp(14px, 1.4vw, 20px);
	--rxc-row-pad-x:         clamp(14px, 1.6vw, 22px);

	font-family: inherit;
	font-size: 16px;
	line-height: 1.5;
	color: var(--rxc-text);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	box-sizing: border-box;
	margin: 0 auto;
	max-width: 1320px;
	padding: clamp(24px, 4vw, 56px) clamp(16px, 4vw, 48px) 80px;
}

.ralu-xd-compare-v2 *,
.ralu-xd-compare-v2 *::before,
.ralu-xd-compare-v2 *::after {
	box-sizing: border-box;
}

.ralu-xd-compare-v2__head {
	margin: 0 auto clamp(24px, 3vw, 40px);
	max-width: 720px;
	text-align: center;
}

.ralu-xd-compare-v2__head h2 {
	font-family: inherit;
	font-size: clamp(24px, 2.6vw, 34px);
	font-weight: 700;
	color: var(--rxc-ink);
	margin: 0;
	letter-spacing: -0.01em;
	text-align: center;
}

/* ========== DESKTOP / TABLET LAYOUT (subgrid) ========== */
.ralu-xd-compare-v2 .compare {
	display: grid;
	grid-template-columns: minmax(180px, 1fr) repeat(3, minmax(0, 2.2fr));
	grid-template-rows:
		auto   /* 1: media */
		auto   /* 2: title */
		auto   /* 3: Preis */
		auto   /* 4: Max. Raumgröße */
		auto   /* 5: Kühl- und Heizfunktion */
		auto   /* 6: Solo Heizquelle */
		auto   /* 7: Geräuschpegel */
		auto   /* 8: Energie-Effizienz-Klasse */
		auto;  /* 9: CTA */
	column-gap: var(--rxc-col-gap);
	row-gap: 0;
	align-items: stretch;
}

.ralu-xd-compare-v2 .labels {
	grid-column: 1;
	grid-row: 1 / -1;
	display: grid;
	grid-template-rows: subgrid;
}

.ralu-xd-compare-v2 .labels > * {
	display: flex;
	align-items: center;
	color: var(--rxc-ink);
	font-weight: 500;
	font-size: clamp(14px, 1.05vw, 16px);
	padding: var(--rxc-row-pad-y) 0;
}

.ralu-xd-compare-v2 .l-media-spacer,
.ralu-xd-compare-v2 .l-title-spacer,
.ralu-xd-compare-v2 .l-cta-spacer {
	padding: 0;
}

.ralu-xd-compare-v2 .card {
	grid-row: 1 / -1;
	display: grid;
	grid-template-rows: subgrid;
	border-radius: var(--rxc-radius);
	box-shadow: var(--rxc-shadow);
	border: 1px solid var(--rxc-border);
	overflow: hidden;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
	position: relative;
	background: var(--rxc-card-white);
}

.ralu-xd-compare-v2 .card:hover {
	transform: translateY(-3px);
	box-shadow: var(--rxc-shadow-hover);
}

.ralu-xd-compare-v2 .card--white { background: var(--rxc-card-white); }
.ralu-xd-compare-v2 .card--blue  { background: var(--rxc-card-blue); border-color: var(--rxc-card-blue-edge); }
.ralu-xd-compare-v2 .card--grey  { background: var(--rxc-card-grey); border-color: var(--rxc-card-grey-edge); }

.ralu-xd-compare-v2 .card__media {
	grid-row: 1;
	padding: clamp(18px, 2.2vw, 32px) clamp(18px, 2.2vw, 32px) 8px;
	display: flex;
	justify-content: center;
	align-items: flex-end;
}

.ralu-xd-compare-v2 .card__media a {
	display: block;
	width: 100%;
	max-width: 320px;
}

.ralu-xd-compare-v2 .card__media img {
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: contain;
	border-radius: 8px;
	display: block;
}

.ralu-xd-compare-v2 .card__title {
	grid-row: 2;
	text-align: center;
	padding: clamp(14px, 1.8vw, 22px) clamp(16px, 2vw, 24px) clamp(10px, 1.4vw, 16px);
	color: var(--rxc-ink);
	font-weight: 700;
	font-size: clamp(15px, 1.15vw, 18px);
	line-height: 1.35;
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: inherit;
}

.ralu-xd-compare-v2 .card__title a {
	color: inherit;
	text-decoration: none;
}

.ralu-xd-compare-v2 .card__title a:hover {
	text-decoration: underline;
}

.ralu-xd-compare-v2 .card__row {
	text-align: center;
	padding: var(--rxc-row-pad-y) var(--rxc-row-pad-x);
	font-size: clamp(15px, 1.05vw, 17px);
	color: var(--rxc-text);
	border: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 56px;
}

.ralu-xd-compare-v2 .card--blue .card__row { border-top-color: var(--rxc-hairline-blue); }
.ralu-xd-compare-v2 .card--grey .card__row { border-top-color: var(--rxc-hairline-grey); }

.ralu-xd-compare-v2 .card__row-1 { grid-row: 3; }
.ralu-xd-compare-v2 .card__row-2 { grid-row: 4; }
.ralu-xd-compare-v2 .card__row-3 { grid-row: 5; }
.ralu-xd-compare-v2 .card__row-4 { grid-row: 6; }
.ralu-xd-compare-v2 .card__row-5 { grid-row: 7; }
.ralu-xd-compare-v2 .card__row-6 { grid-row: 8; }

.ralu-xd-compare-v2 .card__cta {
	grid-row: 9;
	padding: clamp(18px, 2vw, 28px) clamp(18px, 2vw, 28px) clamp(22px, 2.4vw, 32px);
	display: flex;
	align-items: center;
	justify-content: center;
	border-top: 1px solid var(--rxc-hairline-white);
	margin-top: 8px;
}

.ralu-xd-compare-v2 .card--blue .card__cta { border-top-color: var(--rxc-hairline-blue); }
.ralu-xd-compare-v2 .card--grey .card__cta { border-top-color: var(--rxc-hairline-grey); }

/* Mobile inline labels (hidden on desktop) */
.ralu-xd-compare-v2 .card__row .row-label { display: none; }

/* Check / cross icons */
.ralu-xd-compare-v2 .check,
.ralu-xd-compare-v2 .cross {
	display: inline-flex;
	width: 28px;
	height: 28px;
	align-items: center;
	justify-content: center;
	color: var(--rxc-ink);
	font-size: 22px;
	line-height: 1;
	font-weight: 600;
}

/* PRICE block — kept compact so the row matches sibling rows */
.ralu-xd-compare-v2 .price {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	line-height: 1.2;
}

.ralu-xd-compare-v2 .price--single {
	color: var(--rxc-ink) !important;
	font-weight: 600;
	font-size: clamp(15px, 1.1vw, 17px) !important;
}

.ralu-xd-compare-v2 .price__top {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	color: var(--rxc-muted);
	white-space: nowrap;
}

.ralu-xd-compare-v2 .price__old,
.ralu-xd-compare-v2 .price__old .woocommerce-Price-amount {
	text-decoration: line-through;
}

.ralu-xd-compare-v2 .price__sale-tag {
	background: #fff3cd;
	color: #8a5a00;
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	padding: 2px 7px;
	border-radius: 999px;
	border: 1px solid #f0e0a8;
	white-space: nowrap;
}

.ralu-xd-compare-v2 .price__new,
.ralu-xd-compare-v2 .price__new .woocommerce-Price-amount {
	color: #c0392b;
	font-weight: 700;
	font-size: clamp(15px, 1.15vw, 18px);
}

/* CTA button */
.ralu-xd-compare-v2 .btn {
	appearance: none;
	-webkit-tap-highlight-color: transparent;
	border: 0;
	background: var(--rxc-ink);
	color: #fff !important;
	font-family: inherit;
	font-weight: normal;
	font-size: 15px;
	padding: 12px 28px;
	border-radius: var(--rxc-radius-btn);
	cursor: pointer;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
	min-width: 160px;
	justify-content: center;
	line-height: 1.2;
}

.ralu-xd-compare-v2 .btn:hover {
	background: var(--rxc-ink-soft);
	box-shadow: 0 6px 16px -6px rgba(31, 58, 95, 0.45);
	color: #fff !important;
}

.ralu-xd-compare-v2 .btn:active { transform: translateY(1px); }

.ralu-xd-compare-v2 .btn:focus-visible {
	outline: 2px solid #4a86c4;
	outline-offset: 3px;
}

/* Neutralize Divi's pseudo-element arrow on .btn anchors. */
.ralu-xd-compare-v2 .btn::before,
.ralu-xd-compare-v2 .btn::after {
	display: none !important;
	content: none !important;
}

/* Row values: keep simple strings on a single line; price block stacks. */
.ralu-xd-compare-v2 .card__row .row-value { white-space: nowrap; }
.ralu-xd-compare-v2 .card__row-1 .row-value { white-space: normal; }

/* ========== MOBILE LAYOUT ========== */
@media (max-width: 960px) {
	.ralu-xd-compare-v2 .compare {
		display: flex;
		flex-direction: column;
		gap: 20px;
	}

	.ralu-xd-compare-v2 .labels { display: none; }

	.ralu-xd-compare-v2 .card {
		grid-row: auto;
		display: flex;
		flex-direction: column;
		grid-template-rows: none;
	}

	.ralu-xd-compare-v2 .card__row {
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		text-align: right;
		gap: 16px;
		padding: 14px clamp(18px, 5vw, 24px);
		min-height: 0;
	}

	.ralu-xd-compare-v2 .card__row .row-label {
		display: inline;
		color: var(--rxc-ink);
		font-weight: 500;
		text-align: left;
		flex: 1;
		font-size: 14px;
	}

	.ralu-xd-compare-v2 .card__row .row-value {
		text-align: right;
		flex: 0 0 auto;
	}

	.ralu-xd-compare-v2 .card__media { padding: 24px 24px 8px; }
	.ralu-xd-compare-v2 .card__media img { max-width: 260px; }
	.ralu-xd-compare-v2 .card__title { padding: 16px 24px 8px; min-height: 0; }
	.ralu-xd-compare-v2 .card__cta { padding: 16px 24px 24px; }

	.ralu-xd-compare-v2 .price { align-items: flex-end; }
	.ralu-xd-compare-v2 .price__top { font-size: 12px; }
}

/* Subtle entrance animation. */
.ralu-xd-compare-v2 .card { animation: rxc-rise 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.ralu-xd-compare-v2 .card:nth-of-type(2) { animation-delay: 0.06s; }
.ralu-xd-compare-v2 .card:nth-of-type(3) { animation-delay: 0.12s; }

@keyframes rxc-rise {
	from { transform: translateY(8px); }
	to   { transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
	.ralu-xd-compare-v2 .card {
		animation: none;
		transition: none;
	}
}

.ralu-xd-story {
	background-color: #0c4464;
	background-image: linear-gradient(180deg, rgba(7, 33, 64, 0.08), rgba(7, 33, 64, 0.18) 42%, rgba(7, 33, 64, 0.86) 100%), var(--ralu-story-bg);
	background-position: center top;
	background-size: cover;
	color: #fff;
	overflow: hidden;
	padding: 86px 7vw 0;
}

.ralu-xd-story h2,
.ralu-xd-story h3 {
	color: #fff;
}

.ralu-xd-story__intro {
	margin: 0 auto 76px;
	max-width: 640px;
	text-align: center;
}

.ralu-xd-story__intro span {
	background-color: rgba(255, 255, 255, 0.1);
	border: 1px solid rgba(255, 255, 255, 0.38);
	border-radius: 4px;
	display: inline-block;
	font-size: 18px;
	margin-bottom: 48px;
	padding: 13px 48px;
}

.ralu-xd-story__intro h2 {
	font-size: 30px;
	line-height: 1.35;
	margin: 0 auto 58px;
	max-width: 580px;
}

.ralu-xd-story__product-image {
	display: block;
	filter: drop-shadow(0 18px 28px rgba(0, 0, 0, 0.28));
	height: auto;
	margin: 0 auto;
	max-height: clamp(220px, 32vh, 360px);
	max-width: 80%;
	object-fit: contain;
	width: auto;
}

.ralu-xd-story__benefits {
	display: grid;
	gap: 80px;
	grid-template-columns: repeat(3, minmax(0, 280px));
	justify-content: center;
	margin: 0 auto 110px;
	max-width: 1024px;
}

.ralu-xd-story__benefits div {
	align-items: center;
	display: flex;
	gap: 24px;
}

.ralu-xd-story__benefits img {
	flex: 0 0 85px;
	height: 85px;
	width: 85px;
}

.ralu-xd-story__benefits span {
	font-size: 16px;
	font-weight: 500;
	line-height: 1.35;
	max-width: 200px;
}

.ralu-xd-story__control {
	align-items: end;
	display: grid;
	gap: 95px;
	grid-template-columns: minmax(0, 520px) minmax(280px, 380px);
	margin: 0 auto;
	max-width: 1024px;
}

.ralu-xd-story__control h2 {
	font-size: 29px;
	line-height: 1.25;
	margin-bottom: 36px;
}

.ralu-xd-story__control > div {
	align-self: center;
	padding-bottom: 128px;
}

.ralu-xd-story__control p,
.ralu-xd-story__control li {
	font-family: inherit;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.7;
}

.ralu-xd-story__control ul {
	display: grid;
	gap: 20px;
	list-style: none;
	margin: 44px 0 0;
	padding: 0;
}

.ralu-xd-story__control li {
	padding-left: 54px;
	position: relative;
}

.ralu-xd-story__control li::before {
	content: "✓";
	left: 0;
	position: absolute;
	top: 0;
}

.ralu-xd-story__phone {
	align-self: end;
	display: block;
	filter: drop-shadow(0 28px 45px rgba(0, 0, 0, 0.28));
	max-width: 100%;
	width: 345px;
}

.ralu-xd-support {
	background: linear-gradient(135deg, #2d8bc7 0%, #0d4ea7 100%);
	color: #fff;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	min-height: 440px;
}

.ralu-xd-support__image {
	background-position: center;
	background-size: cover;
	clip-path: polygon(0 0, 82% 0, 100% 100%, 0 100%);
	min-height: 440px;
}

.ralu-xd-support__content {
	align-self: center;
	max-width: 720px;
	padding: 76px 4vw 76px 5vw;
}

.ralu-xd-support__content span {
	display: block;
	font-size: 18px;
	margin-bottom: 22px;
}

.ralu-xd-support__content h2 {
	color: #fff;
	font-size: 27px;
	line-height: 1.25;
	margin-bottom: 36px;
}

.ralu-xd-support__content p {
	font-family: inherit;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.65;
	max-width: 420px;
}

.ralu-xd-support__actions {
	display: flex;
	flex-wrap: nowrap;
	gap: 16px;
	margin-top: 42px;
}

.ralu-xd-support__actions a {
	align-items: center;
	border: 1px solid rgba(255, 255, 255, 0.75);
	border-radius: 999px;
	color: #fff;
	display: inline-flex;
	font-size: 16px;
	justify-content: center;
	line-height: 1;
	min-height: 42px;
	min-width: 180px;
	padding: 1em 24px;
}

.ralu-xd-support__actions a:focus-visible,
.ralu-xd-support__actions a:hover {
	background: rgba(255, 255, 255, 0.16);
	outline: none;
}

.ralu-xd-support__phone {
	background: rgba(255, 255, 255, 0.22);
	border-color: transparent !important;
	flex: 0 0 233px;
}

.ralu-xd-support__button {
	flex: 0 0 286px;
}

.ralu-xd-support__phone::before {
	content: "\f095";
	font-family: 'icomoon' !important;
	font-size: 18px;
	margin-right: 14px;
}

.ralu-xd-support__button::after {
	content: "\203a";
	font-size: 18px;
	line-height: 1;
	margin-left: 16px;
}

/* B2B / Fachpartner CTA — compact info box that follows the support section.
   Visually subtler than the support block but uses the same colour family. */
.ralu-xd-b2b {
	background: #f3f8fb;
	padding: 56px 7vw;
}

.ralu-xd-b2b__inner {
	align-items: center;
	background: #fff;
	border-left: 4px solid #36576d;
	border-radius: 8px;
	box-shadow: 0 8px 24px rgba(7, 33, 64, 0.06);
	display: flex;
	flex-wrap: wrap;
	gap: 32px;
	justify-content: space-between;
	margin: 0 auto;
	max-width: 980px;
	padding: 32px 40px;
}

.ralu-xd-b2b__content {
	flex: 1;
	min-width: 0;
}

.ralu-xd-b2b__eyebrow {
	color: #36576d;
	font-family: 'Quicksand', sans-serif;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	margin: 0 0 8px;
	text-transform: uppercase;
}

.ralu-xd-b2b__title {
	color: #072140;
	font-size: 22px;
	line-height: 1.25;
	margin: 0 0 8px;
}

.ralu-xd-b2b__text {
	color: #36576d;
	font-family: Open Sans, Helvetica, Arial, Lucida, sans-serif;
	font-size: 14px;
	line-height: 1.5;
	margin: 0;
}

.ralu-xd-b2b__button {
	align-items: center;
	background: #36576d;
	border-radius: 999px;
	color: #fff;
	display: inline-flex;
	flex: 0 0 auto;
	font-size: 14px;
	font-weight: 700;
	justify-content: center;
	min-height: 48px;
	padding: 12px 28px;
	text-decoration: none;
	transition: background-color 0.2s ease, transform 0.2s ease;
}

.ralu-xd-b2b__button:hover,
.ralu-xd-b2b__button:focus-visible {
	background: #072140;
	color: #fff;
	outline: none;
	transform: translateY(-1px);
}

.ralu-xd-b2b__button::after {
	content: "\203a";
	font-size: 18px;
	line-height: 1;
	margin-left: 14px;
}

.ralu-existing-product-sections {
	background: #fff;
}

.et_pb_code.ralu-product-trust-stack {
	background: #fff;
	position: relative;
	z-index: 3;
}

.ralu-existing-product-sections .ralu-xd-compare {
	padding-top: 95px;
}

@media (min-width: 1181px) and (max-width: 1320px) {
	.ralu-xd-support__content {
		padding-right: 3vw;
	}
}

@media (max-width: 1180px) {
	.ralu-xd-hero {
		gap: 44px;
		grid-template-columns: 1fr;
		padding-top: 80px;
	}

	.ralu-xd-buybox {
		max-width: 100%;
		padding: 0 7vw;
	}

	.ralu-xd-media {
		grid-template-columns: 140px minmax(0, 1fr);
	}

	.ralu-xd-specs,
	.ralu-xd-support,
	.ralu-xd-story__control {
		grid-template-columns: 1fr;
	}

	.ralu-xd-story {
		padding-bottom: 0;
	}

	.ralu-xd-story__benefits {
		gap: 34px;
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.ralu-xd-story__control {
		gap: 50px;
		max-width: 720px;
	}

	.ralu-xd-story__control > div {
		padding-bottom: 0;
	}

	.ralu-xd-story__phone {
		justify-self: center;
		width: min(360px, 80vw);
	}

	.ralu-xd-specs__image,
	.ralu-xd-support__image {
		clip-path: none;
		min-height: 430px;
	}
}

@media (max-width: 760px) {
	.ralu-product-payments {
		margin-bottom: 14px;
	}

	.ralu-xd-hero {
		box-sizing: border-box;
		padding: 44px 20px 70px;
		width: 100%;
	}

	.ralu-xd-media {
		display: flex;
		flex-direction: column-reverse;
		gap: 18px;
		max-width: 100%;
		width: 100%;
	}

	.ralu-xd-buybox {
		max-width: calc(100vw - 40px);
		width: 100%;
	}

	.ralu-xd-buybox > *,
	.ralu-xd-summary,
	.ralu-xd-summary p {
		max-width: calc(100vw - 40px);
		white-space: normal;
	}

	.ralu-xd-summary p {
		width: 34ch;
	}

	.ralu-xd-media__thumbs {
		display: flex;
		gap: 12px;
		overflow-x: auto;
		padding-bottom: 8px;
	}

	.ralu-xd-media__thumb {
		flex: 0 0 86px;
	}

	.ralu-xd-media__stage {
		/* aspect-ratio, flex-direction, gap and padding are inherited from the
		   base rule above (auto / column / 25px / 25px 0 0). Only override the
		   mobile-specific bits. */
		height: auto;
		max-width: 100%;
		overflow: visible;
		width: 100%;
	}

	.ralu-xd-media__stage > img[data-ralu-product-gallery-image] {
		/* aspect-ratio: 1.44 / 1 is inherited from the base rule. */
		width: 86%;
	}

	.ralu-xd-media__features {
		display: flex;
		justify-content: space-between;
		max-width: 100%;
		min-width: 0;
		overflow-x: auto;
		position: static;
		width: 100%;
	}

	.ralu-xd-media__features .sonderboxen {
		display: flex;
		flex: 0 0 auto;
	}

	.ralu-xd-media__features .infokasten {
		flex: 0 0 220px;
	}

	.ralu-xd-price-row {
		grid-template-columns: 1fr;
	}

	.single-product .ralu-xd-page .ralu-xd-energy .energy-efficiency-component {
		align-items: flex-start !important;
	}

	.ralu-xd-title,
	.ralu-xd-compare h2,
	.ralu-xd-story__intro h2,
	.ralu-xd-story__control h2,
	.ralu-xd-support__content h2 {
		font-size: 25px;
	}

	.ralu-xd-cart form.cart {
		display: grid;
	}

	.ralu-xd-specs__content,
	.ralu-xd-compare,
	.ralu-xd-support__content {
		padding: 60px 20px;
	}

	.ralu-xd-b2b {
		padding: 40px 20px;
	}

	.ralu-xd-b2b__inner {
		flex-direction: column;
		gap: 20px;
		padding: 28px 24px;
		text-align: left;
	}

	.ralu-xd-b2b__button {
		width: 100%;
	}

	.ralu-xd-story {
		padding: 60px 20px 0;
	}

	.ralu-xd-specs h2 {
		font-size: 26px;
		margin-bottom: 32px;
	}

	.ralu-xd-story__intro {
		margin-bottom: 54px;
	}

	.ralu-xd-story__intro span {
		margin-bottom: 34px;
		padding: 12px 24px;
	}

	.ralu-xd-story__intro h2 {
		margin-bottom: 42px;
	}

	.ralu-xd-story__product-image {
		max-height: clamp(180px, 30vh, 320px);
		max-width: 80%;
		width: auto;
	}

	.ralu-xd-story__benefits {
		gap: 28px;
		grid-template-columns: 1fr;
		margin-bottom: 64px;
	}

	.ralu-xd-story__benefits div {
		gap: 18px;
		justify-content: flex-start;
	}

	.ralu-xd-story__benefits img {
		flex-basis: 58px;
		height: 58px;
		width: 58px;
	}

	.ralu-xd-story__benefits span {
		max-width: none;
	}

	.ralu-xd-story__control {
		gap: 36px;
	}

	.ralu-xd-story__control li {
		padding-left: 34px;
	}

	.ralu-xd-support__actions a {
		flex: 1 1 100%;
		width: 100%;
	}

	.ralu-xd-support__actions {
		flex-wrap: wrap;
	}

	.ralu-xd-support__image {
		min-height: 360px;
	}
}

@media (max-width: 600px) {
	.ralu-product-payments {
		padding: 0 14px;
	}

	.ralu-product-payments__list {
		grid-template-columns: 1fr;
	}

	.ralu-product-payments__list--secondary {
		grid-template-columns: 1fr;
	}

	.ralu-product-payments__item {
		align-items: center;
		gap: 12px;
		grid-template-columns: 86px minmax(0, 1fr);
		grid-template-rows: auto;
		justify-items: start;
		min-height: 64px;
		padding: 11px 4px;
		text-align: left;
	}

	.ralu-product-payments__item + .ralu-product-payments__item {
		border-left: 0;
		border-top: 1px solid #dfe7ec;
	}

	.ralu-product-payments__marks {
		justify-content: flex-start;
		width: 86px;
	}

	.ralu-product-payments__marks--cards {
		gap: 4px;
		width: 100px;
	}

	.ralu-product-payments__item--cards {
		grid-template-columns: 104px minmax(0, 1fr);
	}

	.ralu-product-payments__item--secondary {
		grid-template-columns: 86px minmax(0, 1fr);
		justify-content: stretch;
		min-height: 58px;
	}
}

@media only screen and (max-width: 849px) and (min-width: 601px) {
	.sonderboxen .sondermerkmal {
		align-items: center;
		display: flex;
		flex-direction: column;
		font-size: 10px;
		justify-content: center;
		padding: 6px;
	}
}