body.page-id-7013 {
	--mh-ease-out: cubic-bezier(.16, 1, .3, 1);
	--mh-gold: #c8a96e;
	--mh-hero-zoom: 124%;
	--mh-ink: #0f1923;
	overflow-x: hidden;
}

@property --mh-hero-zoom {
	syntax: "<percentage>";
	inherits: true;
	initial-value: 124%;
}

body.page-id-7013 .page_content_wrap {
	overflow: visible;
	padding-top: 0 !important;
}

body.page-id-7013 .page_wrap,
body.page-id-7013 .content_wrap,
body.page-id-7013 .content_wrap_fullscreen,
body.page-id-7013 [class*="content_wrap"] > .content {
	width: 100% !important;
	max-width: none !important;
}

body.page-id-7013.mh-motion-ready .mh-anim {
	opacity: 0;
	transform: translate3d(0, 28px, 0);
	transition:
		opacity .82s var(--mh-ease-out),
		transform .82s var(--mh-ease-out),
		filter .82s var(--mh-ease-out);
	transition-delay: var(--mh-delay, 0ms);
	will-change: opacity, transform;
}

body.page-id-7013.mh-motion-ready .mh-anim.mh-inview {
	opacity: 1;
	transform: translate3d(0, 0, 0);
}

body.page-id-7013.mh-motion-ready .mh-anim.mh-anim-left {
	transform: translate3d(-32px, 0, 0);
}

body.page-id-7013.mh-motion-ready .mh-anim.mh-anim-left.mh-inview {
	transform: translate3d(0, 0, 0);
}

body.page-id-7013.mh-motion-ready .mh-anim.mh-anim-scale {
	filter: saturate(.88);
	transform: translate3d(0, 22px, 0) scale(.975);
}

body.page-id-7013.mh-motion-ready .mh-anim.mh-anim-scale.mh-inview {
	filter: saturate(1);
	transform: translate3d(0, 0, 0) scale(1);
}

body.page-id-7013 .mh-test-hero {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	box-sizing: border-box;
	width: 100vw;
	width: 100dvw;
	max-width: 100vw;
	max-width: 100dvw;
	/* Wysokość steruje Elementor (min_height sekcji hero = 69vh). NIE wymuszamy
	   tu 100vh — to powodowało „przeskok" wysokości po dołożeniu klasy
	   .mh-test-hero przez JS (hero renderował się na 69vh, potem skakał na 100vh). */
	margin-left: calc(50% - 50vw);
	margin-left: calc(50% - 50dvw);
	margin-right: calc(50% - 50vw);
	margin-right: calc(50% - 50dvw);
	background-color: var(--mh-ink);
	background-image: var(--mh-hero-bg);
	background-position: 53% 43% !important;
	background-repeat: no-repeat !important;
	background-size: var(--mh-hero-zoom) auto !important;
	animation: mhTestHeroBgZoom 18s var(--mh-ease-out) both;
}

body.page-id-7013 .mh-test-hero::before {
	content: none;
}

body.page-id-7013 .mh-test-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background:
		linear-gradient(90deg, rgba(15, 25, 35, .48), rgba(15, 25, 35, .08) 58%, rgba(15, 25, 35, .38)),
		linear-gradient(180deg, rgba(15, 25, 35, .12), rgba(15, 25, 35, .38));
}

body.page-id-7013 .mh-test-hero > * {
	position: relative;
	z-index: 1;
}

body.page-id-7013 .mh-test-hero .trx-addons-advanced-title-item,
body.page-id-7013 .mh-test-hero .elementor-heading-title,
body.page-id-7013 .mh-test-hero .elementor-button {
	text-shadow: 0 18px 48px rgba(15, 25, 35, .28);
}

body.page-id-7013 .mh-stagger-scope > .e-con,
body.page-id-7013 .mh-stagger-scope > .elementor-widget,
body.page-id-7013 .mh-stagger-scope .e-n-tab-title,
body.page-id-7013 .mh-stagger-scope .elementor-widget-image {
	transition-delay: var(--mh-delay, 0ms);
}

body.page-id-7013 .mh-card-motion,
body.page-id-7013 .mh-image-motion img,
body.page-id-7013 .e-n-tab-title,
body.page-id-7013 .elementor-button {
	transition:
		transform .32s ease,
		box-shadow .32s ease,
		border-color .32s ease,
		background-color .32s ease,
		opacity .32s ease;
}

body.page-id-7013 .mh-card-motion:hover {
	transform: translate3d(0, -8px, 0);
	box-shadow: 0 24px 58px rgba(15, 25, 35, .14);
	border-color: rgba(200, 169, 110, .45);
}

body.page-id-7013 .mh-image-motion {
	overflow: hidden;
}

body.page-id-7013 .mh-image-motion img {
	display: block;
	will-change: transform;
}

body.page-id-7013 .mh-image-motion:hover img {
	transform: scale(1.045);
}

body.page-id-7013 .elementor-button:hover,
body.page-id-7013 .e-n-tab-title:hover {
	transform: translate3d(0, -2px, 0);
}

body.page-id-7013 .mh-timeline-motion {
	position: relative;
}

body.page-id-7013 .mh-timeline-motion::before {
	content: "";
	position: absolute;
	left: clamp(18px, 3vw, 34px);
	top: 10px;
	bottom: 10px;
	width: 1px;
	background: linear-gradient(180deg, rgba(200, 169, 110, 0), rgba(200, 169, 110, .7), rgba(200, 169, 110, 0));
	transform: scaleY(0);
	transform-origin: top;
	transition: transform 1s var(--mh-ease-out);
}

body.page-id-7013 .mh-timeline-motion.mh-inview::before {
	transform: scaleY(1);
}

/* Direct, keyboard-accessible paths from the category comparison tabs to the
 * matching offer pages. */
body.page-id-7013 .mh-category-link-wrap {
	margin-top: 22px;
}

body.page-id-7013 .mh-category-link {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	color: #0f1923;
	font-weight: 700;
	text-decoration: none;
	border-bottom: 2px solid #c8a96e;
	padding-bottom: 5px;
	transition: gap .25s var(--mh-ease-out), color .25s ease;
}

body.page-id-7013 .mh-category-link:hover,
body.page-id-7013 .mh-category-link:focus-visible {
	color: #8c6c35;
	gap: 14px;
}

/* Zakładki sekcji „Modulare Lösungen" (element 88117c2) trzymały wcześniej po
 * jednym zdjęciu kategorii nad linkiem — kadr 1:1 z `cover` je ujednolicał.
 * Od 21.08.2026 zakładki niosą treści wyposażenia a–g, a materiał to rysunek
 * przekroju ściany, plansze dekorów fasad i pionowe zdjęcia sanitariatów.
 * Wymuszony kwadrat obcinał im legendy i podpisy, więc kadrowanie znika —
 * grafiki renderują się w proporcjach oryginału na szerokość kolumny.
 * Gdyby wróciły kwadratowe kafle kategorii, regułę trzeba przywrócić ZAWĘŻONĄ
 * do kontenera z tymi kaflami, nie do całego widgetu zakładek. */

@keyframes mhTestHeroBgZoom {
	from {
		--mh-hero-zoom: 128%;
	}
	to {
		--mh-hero-zoom: 124%;
	}
}

@media (max-aspect-ratio: 4 / 3) {
	body.page-id-7013 .mh-test-hero {
		background-size: cover !important;
		background-position: center center;
		animation-name: none;
	}
}

@media (min-aspect-ratio: 16 / 9) {
	body.page-id-7013 .mh-test-hero {
		background-position: 53% 43% !important;
		--mh-hero-zoom: 124%;
	}
}

@media (max-width: 767px) {
	body.page-id-7013.mh-motion-ready .mh-anim,
	body.page-id-7013.mh-motion-ready .mh-anim.mh-anim-left,
	body.page-id-7013.mh-motion-ready .mh-anim.mh-anim-scale {
		transform: translate3d(0, 18px, 0);
	}

	body.page-id-7013.mh-motion-ready .mh-anim.mh-inview {
		transform: translate3d(0, 0, 0);
	}
}

@media (prefers-reduced-motion: reduce) {
	body.page-id-7013 *,
	body.page-id-7013 *::before,
	body.page-id-7013 *::after {
		animation: none !important;
		scroll-behavior: auto !important;
		transition-duration: .001ms !important;
	}

	body.page-id-7013.mh-motion-ready .mh-anim,
	body.page-id-7013.mh-motion-ready .mh-anim.mh-anim-left,
	body.page-id-7013.mh-motion-ready .mh-anim.mh-anim-scale {
		opacity: 1 !important;
		filter: none !important;
		transform: none !important;
	}
}

/* Sekcja „Alles ab Werk installiert" (sekcja 2, scripts/build-home-ausstattung.php).
 *
 * Rząd 1: siedem `trx_elm_info_box` z ikoną SVG. Elementor rozkłada dzieci
 * kontenera flexem po szerokości treści — przy siedmiu boxach o różnej długości
 * tytułu kolumny wychodziły nierówne. Siatka daje siedem równych kolumn na
 * desktopie, cztery na tablecie i dwie na telefonie (dwie, nie jedna: box to
 * ikona + dwa wiersze tekstu, w jednej kolumnie siedem takich to 1400 px
 * przewijania dla listy cech).
 *
 * Rząd 2: cztery kafle kategorii ze zdjęciem hero landingu — jedyna droga ze
 * strony głównej do landingów. Kadr 4:3 z `cover`, bo zdjęcia hero mają różne
 * proporcje (pionowe realizacje vs poziome pawilony). Ostre krawędzie jak
 * wszędzie. */
body.page-id-7013 .mh-feature-grid.e-con,
body.page-id-7013 .mh-category-grid.e-con {
	display: grid !important;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	column-gap: 28px;
	row-gap: 32px;
}

body.page-id-7013 .mh-category-grid.e-con {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

body.page-id-7013 .mh-feature-grid.e-con > .elementor-element,
body.page-id-7013 .mh-category-grid.e-con > .elementor-element {
	width: auto;
	max-width: none;
	margin: 0;
}

body.page-id-7013 .mh-feature .trx-addons-info-box-icon-wrap {
	text-align: left;
}

body.page-id-7013 .mh-feature .trx-addons-info-box-icon svg {
	width: 40px;
	height: 40px;
	fill: none;
	transition: transform .35s var(--mh-ease-out, ease);
}

body.page-id-7013 .mh-feature .trx-addons-info-box-container:hover .trx-addons-info-box-icon svg {
	transform: translateY(-3px);
}

body.page-id-7013 .mh-feature .trx-addons-info-box-subtitle {
	color: #626b72;
}

body.page-id-7013 .mh-cat-tile .trx-addons-info-box-icon-type-image img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 0;
}

body.page-id-7013 .mh-cat-tile .trx-addons-info-box-title span[aria-hidden] {
	display: inline-block;
	margin-left: 6px;
	color: #c8a96e;
	transition: transform .25s var(--mh-ease-out, ease);
}

body.page-id-7013 .mh-cat-tile .trx-addons-info-box-container:hover .trx-addons-info-box-title span[aria-hidden] {
	transform: translateX(5px);
}

@media (max-width: 1024px) {
	body.page-id-7013 .mh-feature-grid.e-con {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	body.page-id-7013 .mh-category-grid.e-con {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	body.page-id-7013 .mh-feature-grid.e-con,
	body.page-id-7013 .mh-category-grid.e-con {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 18px;
		row-gap: 26px;
	}
}