/* PEH Magnifier SEO — inspiration #brxe-981fdf two-row layout */

.peh-magnifier {
	position: relative;
	overflow: hidden;
	padding: 100px 80px;
	background: #ffffff;
}

.peh-magnifier__glow {
	position: absolute;
	border-radius: 50%;
	background: #14a846;
	opacity: 0.3;
	filter: blur(300px);
	pointer-events: none;
	z-index: 0;
}

.peh-magnifier__glow--top {
	width: 696px;
	height: 714px;
	min-width: 696px;
	top: -453px;
	right: -559px;
}

.peh-magnifier__glow--bottom {
	width: 696px;
	height: 714px;
	min-width: 696px;
	left: -600px;
	bottom: -600px;
	z-index: 0;
}

/*
 * Line assets are green strokes on transparent (not black+screen like Reviews).
 * mix-blend-mode: screen against white washes them out — use normal compositing.
 */
.peh-magnifier__lines {
	position: absolute;
	z-index: 0;
	pointer-events: none;
	will-change: transform;
	overflow: visible;
}

.peh-magnifier__lines img {
	display: block;
	width: 2000px;
	min-width: 2000px;
	max-width: none;
	height: auto;
	user-select: none;
}

/* Anchored to .peh-magnifier__inner (1050px) like inspiration #brxe-dab6b6 */
.peh-magnifier__lines--top {
	top: -684px;
	left: -1343px;
}

/*
 * Right-side curves behind the photo — inspiration #brxe-35c3d3
 * is absolute inside the bottom row container, not the full section.
 */
.peh-magnifier__lines--bottom {
	top: -620px;
	right: -1341px;
	left: auto;
}

.peh-magnifier__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	row-gap: 60px;
	max-width: 1050px;
	position: relative;
	z-index: 1;
	overflow: visible;
}

.peh-magnifier__heading {
	text-align: center;
	max-width: 900px;
	margin: 0 auto 8px;
	width: 100%;
	z-index: 2;
}

.peh-magnifier__row {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	column-gap: 80px;
	width: 100%;
	position: relative;
	z-index: 1;
	overflow: visible;
}

.peh-magnifier__row--bottom {
	align-items: flex-start;
}

.peh-magnifier__media {
	display: flex;
	justify-content: center;
	flex: 0 1 auto;
	position: relative;
	z-index: 2;
}

.peh-magnifier__media--top {
	flex: 0 0 auto;
}

.peh-magnifier__media--bottom {
	flex: 0 0 518px;
	max-width: 48%;
}

.peh-magnifier__lens-wrap {
	position: relative;
	display: inline-block;
	max-width: min(100%, 392px);
	line-height: 0;
}

.peh-magnifier__img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 0;
}

.peh-magnifier__photo {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 12px;
	object-fit: cover;
}

.peh-magnifier__glass {
	position: absolute;
	border-radius: 50%;
	width: 162px;
	height: 162px;
	pointer-events: none;
	opacity: 0;
	cursor: none;
	box-shadow: none;
	background-repeat: no-repeat;
	transition: opacity 0.15s ease;
	z-index: 2;
}

.peh-magnifier__glass::after {
	content: "";
	position: absolute;
	inset: -14px;
	background: url("https://rang1.de/wp-content/uploads/2025/07/magnifier_glass_small.svg") center / contain no-repeat;
	pointer-events: none;
}

.peh-magnifier__lens-wrap.is-active .peh-magnifier__glass {
	opacity: 1;
}

.peh-magnifier__copy {
	display: flex;
	flex-direction: column;
	flex: 1 1 0;
	min-width: 0;
	position: relative;
	z-index: 2;
}

.peh-magnifier__copy--top {
	row-gap: 24px;
}

.peh-magnifier__copy--bottom {
	row-gap: 40px;
	padding-top: 60px;
	max-width: 476px;
}

.peh-magnifier__richtext p {
	margin: 0 0 16px;
}

.peh-magnifier__richtext p:last-child {
	margin-bottom: 0;
}

.peh-magnifier__steps {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	row-gap: 16px;
}

.peh-magnifier__step {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	gap: 16px;
	padding: 24px;
	border-radius: 12px;
	border-top: 1px solid rgba(20, 168, 70, 0.12);
	border-bottom: 1px solid rgba(20, 168, 70, 0.12);
	background: rgba(20, 168, 70, 0.04);
}

.peh-magnifier__num {
	flex: 0 0 auto;
	font-family: "Open Sans", sans-serif;
	font-size: 28px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.04em;
	color: #14a846;
	min-width: 35px;
}

.peh-magnifier__step-text {
	margin: 0;
	font-size: 16px;
	line-height: 1.45;
	color: var(--peh-ink, #1c2b27);
}

.peh-magnifier__footer-wrap {
	width: 100%;
	position: relative;
	z-index: 2;
}

.peh-magnifier__footer {
	text-align: center;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.5;
	max-width: 100%;
	margin: 0;
	padding: 24px;
	border-radius: 12px;
	background: #f5f5f5;
	color: var(--peh-ink, #1c2b27);
}

.peh-magnifier__float {
	z-index: 5;
}

.peh-magnifier__float--plane {
	bottom: 4%;
	top: auto;
}

@media (max-width: 1200px) {
	.peh-magnifier__row {
		column-gap: 60px;
	}

	.peh-magnifier__media--bottom {
		flex-basis: 42.58vw;
		max-width: 42.58vw;
	}

	.peh-magnifier__heading {
		max-width: 800px;
	}

	.peh-magnifier__lines--top {
		left: -110vw;
	}

	.peh-magnifier__lines--bottom {
		right: -90vw;
	}
}

@media (max-width: 899px) {
	.peh-magnifier__inner {
		row-gap: 40px;
		align-items: center;
	}

	.peh-magnifier__row,
	.peh-magnifier__row--bottom {
		flex-direction: column;
		row-gap: 32px;
		align-items: stretch;
	}

	.peh-magnifier__media--top {
		order: -1;
	}

	.peh-magnifier__media--bottom {
		flex-basis: auto;
		max-width: 100%;
		width: 100%;
		order: -1;
	}

	.peh-magnifier__copy--bottom {
		padding-top: 0;
		max-width: 100%;
		row-gap: 20px;
	}

	.peh-magnifier__copy--top {
		row-gap: 20px;
	}

	.peh-magnifier__glass {
		display: none;
	}

	.peh-magnifier__heading {
		max-width: 100%;
	}
}

@media (max-width: 586px) {
	.peh-magnifier {
		padding: 60px 24px;
	}

	.peh-magnifier__photo {
		min-height: 320px;
		object-fit: cover;
	}

	.peh-magnifier__step {
		padding: 20px;
	}

	.peh-magnifier__footer {
		padding: 20px;
	}

	.peh-magnifier__lines img {
		width: 1500px;
		min-width: 1500px;
	}

	.peh-magnifier__lines--bottom {
		right: -622px;
		top: -399px;
	}

	.peh-magnifier__glow--top,
	.peh-magnifier__glow--bottom {
		display: none;
	}

	.peh-magnifier__float--plane {
		width: 96px !important;
	}
}

@media (hover: none) {
	.peh-magnifier__glass {
		display: none;
	}
}