/* =========================================================
   FUSSVERMESSUNG & EINLAGENVERSORGUNG 2026
   Benötigt: mueller-startseite-2026.css, produktseiten.css,
   beratung.css und ci.css
   ========================================================= */

/* HERO – nur seitenbezogenes Hintergrundbild */

#top .mueller-service-hero-2026.mueller-fussvermessung-hero-2026 {
	background:
		linear-gradient(
			90deg,
			rgba(0,0,0,.92) 0%,
			rgba(0,0,0,.76) 34%,
			rgba(0,0,0,.28) 68%,
			rgba(0,0,0,.08) 100%
		),
		url("/wp-content/uploads/2026/07/Titel_vermessung.webp") center center / cover no-repeat;
}

/* INTRO – basiert auf Produkt-Info und Beratungskarten */

#top .mueller-fuss-intro-2026 {
	display: block;
	padding: 64px 20px 72px;
}

#top .mueller-fuss-intro-grid {
	display: grid;
	grid-template-columns: minmax(0,.92fr) minmax(480px,1.08fr);
	gap: 58px;
	align-items: stretch;
}

#top .mueller-fuss-intro-2026 .mueller-product-info-content {
	max-width: none;
	padding: 18px 0;
	justify-content: center;
}

#top .mueller-fuss-intro-2026 .mueller-product-info-content h2 {
	font-size: clamp(38px,4vw,52px);
}

#top .mueller-fuss-intro-2026 .mueller-product-info-content p {
	font-size: 16px;
	line-height: 1.72;
	margin-bottom: 22px;
}

#top .mueller-fuss-intro-note {
	display: grid;
	grid-template-columns: 5px minmax(0,1fr);
	grid-template-rows: auto auto;
	column-gap: 20px;
	row-gap: 4px;
	margin-top: 14px;
	padding: 24px 26px;
	background: var(--mueller-gray-100);
	border-radius: var(--radius-md);
	color: rgba(17,17,17,.74);
	font-size: 14px;
	line-height: 1.5;
	box-sizing: border-box;
}

#top .mueller-fuss-intro-note::before {
	content: "";
	grid-column: 1;
	grid-row: 1 / 3;
	width: 5px;
	background: var(--mueller-red);
	border-radius: var(--radius-round);
}

#top .mueller-fuss-intro-note strong {
	grid-column: 2;
	color: var(--mueller-black);
	font-size: 16px;
	font-weight: 800;
}

#top .mueller-fuss-intro-note span {
	grid-column: 2;
	color: rgba(17,17,17,.74);
}

#top .mueller-fuss-intro-image {
	position: relative;
	min-height: 520px;
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-card-dark);
}

#top .mueller-fuss-intro-image::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(
			180deg,
			rgba(0,0,0,.02) 80%,
			rgba(0,0,0,.78) 100%
		);
	pointer-events: none;
}

#top .mueller-fuss-intro-2026 .mueller-fuss-intro-image img {
	height: 100%;
	min-height: 520px;
}

#top .mueller-fuss-intro-image-label {
	position: absolute;
	left: 34px;
	right: 34px;
	bottom: 30px;
	z-index: 2;
	color: var(--mueller-red);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 1.8px;
	text-transform: uppercase;
}

#top .mueller-fuss-intro-image-label span {
	display: block;
	margin-bottom: 9px;
}

#top .mueller-fuss-intro-image-label strong {
	display: block;
	max-width: 480px;
	color: var(--mueller-white);
	font-size: 25px;
	line-height: 1.18;
	letter-spacing: normal;
	text-transform: none;
}

#top .mueller-fuss-benefits {
	grid-template-columns: repeat(4,minmax(0,1fr));
	gap: 18px;
	margin-top: 38px;
}

#top .mueller-fuss-benefit {
	min-height: 220px;
	padding: 30px 24px 28px;
}

#top .mueller-fuss-benefit-icon img {
	width: 58px;
	height: 58px;
	margin: 0 auto 20px;
}

#top .mueller-fuss-benefit > div:last-child,
#top .mueller-fuss-benefit p {
	color: rgba(255,255,255,.86) !important;
	font-size: 14px !important;
	line-height: 1.5 !important;
	text-align: center !important;
	opacity: 1 !important;
	visibility: visible !important;
}

#top .mueller-fuss-benefit h3 {
	font-size: 18px !important;
	margin-bottom: 14px !important;
}

/* ABLAUF – eigener Bildkartenbereich; Kopf nutzt CI-Komponente */

#top .mueller-fuss-ablauf-2026 {
	max-width: var(--mueller-container);
	margin: 0 auto;
	padding: 58px 20px 72px;
	box-sizing: border-box;
}

#top .mueller-fuss-section-head {
	max-width: 820px;
	margin: 0 auto 52px;
	text-align: center;
}

#top .mueller-fuss-section-head p {
	color: rgba(17,17,17,.78) !important;
	font-size: 16px;
	line-height: 1.65;
	margin: 20px 0 0;
}

#top .mueller-fuss-steps-image {
	display: grid;
	grid-template-columns: repeat(3,minmax(0,1fr));
	gap: 20px;
}

#top .mueller-fuss-steps-image .mueller-fuss-step {
	position: relative;
	min-height: 340px;
	display: flex;
	align-items: flex-end;
	overflow: hidden;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-card-dark);
	color: rgba(255,255,255,.92) !important;
	box-sizing: border-box;
	transition: transform .28s ease,box-shadow .28s ease;
}

#top .mueller-fuss-steps-image .mueller-fuss-step:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-card-dark-hover);
}

#top .mueller-fuss-step-schuh {
	background-image:
		linear-gradient(
			180deg,
			rgba(0,0,0,.04),
			rgba(0,0,0,.18) 38%,
			rgba(0,0,0,.94)
		),
		url("/wp-content/uploads/2026/05/ls_halbschuhe2.webp");
}

#top .mueller-fuss-step-scan {
	background-image:
		linear-gradient(
			180deg,
			rgba(0,0,0,.04),
			rgba(0,0,0,.20) 38%,
			rgba(0,0,0,.94)
		),
		url("/wp-content/uploads/2026/07/ls_scanner_2.webp");
}

#top .mueller-fuss-step-einlage {
	background-image:
		linear-gradient(
			180deg,
			rgba(0,0,0,.04),
			rgba(0,0,0,.20) 38%,
			rgba(0,0,0,.94)
		),
		url("/wp-content/uploads/2026/07/ls_einlagen.webp");
}

#top .mueller-fuss-steps-image .mueller-fuss-step::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background:
		linear-gradient(
			90deg,
			rgba(0,0,0,.24),
			rgba(0,0,0,.04) 72%
		);
	pointer-events: none;
}

#top .mueller-fuss-step-number {
	position: absolute;
	top: 24px;
	left: 24px;
	z-index: 3;
	width: 52px;
	height: 52px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--mueller-red);
	color: var(--mueller-white);
	border-radius: var(--radius-sm);
	font-size: 25px;
	font-weight: 900;
}

#top .mueller-fuss-step-content {
	position: relative;
	z-index: 3;
	width: 100%;
	padding: 36px 30px 30px;
	color: rgba(255,255,255,.92) !important;
	font-size: 15px !important;
	line-height: 1.5 !important;
	font-weight: 600 !important;
	box-sizing: border-box;
}

#top .mueller-fuss-step-content h3 {
	max-width: 310px;
	color: var(--mueller-white) !important;
	font-size: 25px !important;
	line-height: 1.08 !important;
	font-weight: 800 !important;
	margin: 0 0 15px !important;
}

#top .mueller-fuss-step-content p {
	max-width: 340px;
	color: rgba(255,255,255,.92) !important;
	font-size: 15px !important;
	line-height: 1.5 !important;
	font-weight: 600 !important;
	margin: 0 !important;
}

/* GEMEINSAME ABSCHNITTSRAHMEN */

#top .mueller-getsteps-2026,
#top .mueller-getsteps-system-2026,
#top .mueller-fuss-dguv-2026 {
	max-width: var(--mueller-container);
	margin: 0 auto;
	padding: 0 20px 76px;
	box-sizing: border-box;
}

#top .mueller-getsteps-2026 {
	padding-top: 36px;
}

#top .mueller-getsteps-panel,
#top .mueller-getsteps-system-panel {
	display: grid;
	overflow: hidden;
	background: var(--mueller-white);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-card-light);
	box-sizing: border-box;
}

/* GET STEPS HAUPTBEREICH */

#top .mueller-getsteps-panel {
	grid-template-columns: repeat(2,minmax(0,1fr));
}

#top .mueller-getsteps-image {
	position: relative;
	min-height: 620px;
	overflow: hidden;
	background: var(--mueller-black);
}

#top .mueller-getsteps-main-image {
	width: 100%;
	height: 100%;
	min-height: 620px;
	display: block;
	object-fit: cover;
	transition: transform .5s ease;
}

#top .mueller-getsteps-image:hover .mueller-getsteps-main-image {
	transform: scale(1.025);
}

#top .mueller-getsteps-image::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background:
		linear-gradient(
			180deg,
			rgba(0,0,0,.04),
			rgba(0,0,0,.12) 45%,
			rgba(0,0,0,.88)
		);
	pointer-events: none;
}

#top .mueller-getsteps-logo-white {
	position: absolute;
	top: 34px;
	left: 34px;
	z-index: 3;
	width: 150px;
}

#top .mueller-getsteps-image-caption {
	position: absolute;
	left: 36px;
	right: 36px;
	bottom: 34px;
	z-index: 3;
}

#top .mueller-getsteps-image-caption > div,
#top .mueller-getsteps-kicker,
#top .mueller-getsteps-system-kicker,
#top .mueller-fuss-dguv-kicker {
	color: var(--mueller-red);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 2px;
	text-transform: uppercase;
	margin-bottom: 13px;
}

#top .mueller-getsteps-image-caption strong {
	display: block;
	max-width: 480px;
	color: var(--mueller-white);
	font-size: 28px;
	line-height: 1.16;
}

#top .mueller-getsteps-content {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 58px 56px;
	background:
		linear-gradient(
			135deg,
			#fff,
			#f4f4f4
		);
	box-sizing: border-box;
}

#top .mueller-getsteps-logo-black {
	width: 148px;
	margin-bottom: 30px;
}

#top .mueller-getsteps-content h2,
#top .mueller-getsteps-system-content h2 {
	color: var(--mueller-black) !important;
	font-size: clamp(36px,3.8vw,50px);
	line-height: 1.06;
	font-weight: 800;
	letter-spacing: -.03em;
	margin: 0 0 28px;
}

#top .mueller-getsteps-text,
#top .mueller-getsteps-system-text {
	color: rgba(17,17,17,.80) !important;
	font-size: 16px;
	line-height: 1.68;
}

#top .mueller-getsteps-text > div,
#top .mueller-getsteps-system-text > div {
	margin-bottom: 18px;
}

#top .mueller-getsteps-text > div:last-child,
#top .mueller-getsteps-system-text > div:last-child {
	margin-bottom: 0;
}

#top .mueller-getsteps-features {
	display: grid;
	grid-template-columns: repeat(2,minmax(0,1fr));
	gap: 18px;
	margin-top: 34px;
}

#top .mueller-getsteps-feature {
	display: grid;
	grid-template-columns: 34px minmax(0,1fr);
	gap: 13px;
	padding: 18px;
	background: var(--mueller-white);
	border: 1px solid var(--mueller-gray-200);
	border-radius: var(--radius-sm);
	box-sizing: border-box;
}

#top .mueller-getsteps-feature-mark,
#top .mueller-getsteps-system-point-icon,
#top .mueller-fuss-dguv-point-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--mueller-red);
	color: var(--mueller-white);
	border-radius: 50%;
	font-weight: 900;
}

#top .mueller-getsteps-feature-mark {
	width: 30px;
	height: 30px;
}

#top .mueller-getsteps-feature strong {
	display: block;
	color: var(--mueller-black);
	font-size: 15px;
	margin-bottom: 5px;
}

#top .mueller-getsteps-feature span {
	color: rgba(17,17,17,.70);
	font-size: 13px;
	line-height: 1.45;
}

/* GET STEPS SYSTEM */

#top .mueller-getsteps-system-panel {
	grid-template-columns: minmax(0,1.12fr) minmax(360px,.88fr);
	border: 1px solid var(--mueller-gray-200);
}

#top .mueller-getsteps-system-content {
	padding: 54px 56px;
}

#top .mueller-getsteps-system-highlight {
	display: grid;
	grid-template-columns: auto minmax(0,1fr);
	gap: 24px;
	align-items: center;
	margin-top: 34px;
	padding: 24px 26px;
	background: var(--mueller-gray-100);
	border-left: 5px solid var(--mueller-red);
	border-radius: var(--radius-sm);
}

#top .mueller-getsteps-system-number {
	color: var(--mueller-red);
	font-size: 48px;
	line-height: 1;
	font-weight: 900;
	letter-spacing: -.04em;
}

#top .mueller-getsteps-system-number-text strong {
	display: block;
	color: var(--mueller-black);
	font-size: 18px;
	margin-bottom: 5px;
}

#top .mueller-getsteps-system-number-text span {
	color: rgba(17,17,17,.70);
	font-size: 14px;
}

#top .mueller-getsteps-system-side {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 560px;
	padding: 54px 46px;
	background:
		linear-gradient(
			90deg,
			rgba(10,10,10,.78),
			rgba(10,10,10,.58) 48%,
			rgba(10,10,10,.34)
		),
		url("/wp-content/uploads/2026/07/ls_si_schuhe_einlagen.webp") center center / cover no-repeat;
	color: var(--mueller-white);
	box-sizing: border-box;
}

#top .mueller-getsteps-system-badge {
	margin-bottom: 34px;
}

#top .mueller-getsteps-system-badge img {
	width: 150px;
}

#top .mueller-getsteps-system-points {
	display: grid;
	gap: 24px;
}

#top .mueller-getsteps-system-point {
	display: grid;
	grid-template-columns: 38px minmax(0,1fr);
	gap: 15px;
}

#top .mueller-getsteps-system-point-icon {
	width: 34px;
	height: 34px;
}

#top .mueller-getsteps-system-point strong {
	display: block;
	color: var(--mueller-white);
	font-size: 17px;
	margin-bottom: 6px;
}

#top .mueller-getsteps-system-point span {
	color: rgba(255,255,255,.84);
	font-size: 14px;
	line-height: 1.5;
}

/* DGUV 112-191 – eigener Sonderbereich */

#top .mueller-fuss-dguv-panel {
	position: relative;
	overflow: hidden;
	padding: 58px;
	background:
		linear-gradient(
			135deg,
			#202020,
			#111
		);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-card-dark);
	box-sizing: border-box;
}

#top .mueller-fuss-dguv-panel::before {
	content: "";
	position: absolute;
	top: -180px;
	right: -140px;
	width: 420px;
	height: 420px;
	border: 70px solid rgba(255,255,255,.025);
	border-radius: 50%;
	pointer-events: none;
}

#top .mueller-fuss-dguv-main {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: 220px minmax(0,1fr);
	gap: 50px;
	align-items: center;
}

#top .mueller-fuss-dguv-seal {
	width: 210px;
	height: 210px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 3px solid var(--mueller-white);
	border-radius: 50%;
	transform: rotate(-4deg);
	box-sizing: border-box;
}

#top .mueller-fuss-dguv-seal-inner {
	width: 170px;
	height: 170px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	border: 2px dashed rgba(255,255,255,.65);
	border-radius: 50%;
	text-align: center;
}

#top .mueller-fuss-dguv-seal span {
	color: var(--mueller-white);
	font-size: 20px;
	font-weight: 900;
	letter-spacing: 2px;
	margin-bottom: 7px;
}

#top .mueller-fuss-dguv-seal strong {
	color: var(--mueller-red);
	font-size: 38px;
	line-height: 1;
	font-weight: 900;
	margin-bottom: 9px;
}

#top .mueller-fuss-dguv-seal em {
	max-width: 120px;
	color: rgba(255,255,255,.78);
	font-size: 11px;
	font-weight: 700;
	font-style: normal;
	text-transform: uppercase;
}

#top .mueller-fuss-dguv-content {
	position: relative;
	z-index: 2;
}

#top .mueller-fuss-dguv-content h2 {
	max-width: 760px;
	color: var(--mueller-white) !important;
	font-size: clamp(36px,4vw,50px);
	line-height: 1.06;
	font-weight: 800;
	letter-spacing: -.03em;
	margin: 0 0 28px;
}

#top .mueller-fuss-dguv-text {
	max-width: 820px;
	color: rgba(255,255,255,.80) !important;
	font-size: 16px;
	line-height: 1.68;
}

#top .mueller-fuss-dguv-text > div {
	margin-bottom: 18px;
}

#top .mueller-fuss-dguv-points {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: repeat(3,minmax(0,1fr));
	gap: 18px;
	margin-top: 44px;
}

#top .mueller-fuss-dguv-point {
	display: grid;
	grid-template-columns: 42px minmax(0,1fr);
	gap: 16px;
	padding: 24px 22px;
	background: rgba(255,255,255,.055);
	border: 1px solid rgba(255,255,255,.09);
	border-radius: var(--radius-sm);
	box-sizing: border-box;
}

#top .mueller-fuss-dguv-point-icon {
	width: 38px;
	height: 38px;
}

#top .mueller-fuss-dguv-point-content strong {
	display: block;
	color: var(--mueller-white);
	font-size: 17px;
	margin-bottom: 8px;
}

#top .mueller-fuss-dguv-point-content > div {
	color: rgba(255,255,255,.72) !important;
	font-size: 14px;
	line-height: 1.5;
}

#top .mueller-fuss-dguv-note {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: auto minmax(0,1fr);
	gap: 24px;
	align-items: center;
	margin-top: 26px;
	padding: 24px 28px;
	background: var(--mueller-white);
	border-radius: var(--radius-sm);
}

#top .mueller-fuss-dguv-note-label {
	padding: 9px 14px;
	background: var(--mueller-red);
	color: var(--mueller-white);
	border-radius: var(--radius-round);
	font-size: 12px;
	font-weight: 900;
	letter-spacing: 1.1px;
	text-transform: uppercase;
}

#top .mueller-fuss-dguv-note-content strong {
	display: block;
	color: var(--mueller-black);
	font-size: 17px;
	margin-bottom: 6px;
}

#top .mueller-fuss-dguv-note-content > div {
	color: rgba(17,17,17,.72) !important;
	font-size: 14px;
	line-height: 1.5;
}

/* ABSCHLUSS-CTA – basiert vollständig auf beratung.css */

#top .mueller-fuss-final-image {
	background-image:
		linear-gradient(
			90deg,
			rgba(0,0,0,.04) 0%,
			rgba(0,0,0,.10) 65%,
			rgba(0,0,0,.24) 100%
		),
		url("/wp-content/uploads/2026/05/titel_pers_beratung.webp") !important;
	background-position: center !important;
	background-size: cover !important;
}

#top .mueller-fuss-final-text {
	max-width: 660px;
	color: rgba(255,255,255,.88) !important;
	font-size: 17px;
	line-height: 1.65;
}

/* RESPONSIVE */

@media only screen and (max-width:1100px) {
	#top .mueller-fuss-intro-grid,
	    #top .mueller-getsteps-panel {
		grid-template-columns: 1fr;
	}

	#top .mueller-fuss-benefits {
		grid-template-columns: repeat(2,minmax(0,1fr));
	}

	#top .mueller-fuss-intro-image,
	    #top .mueller-fuss-intro-2026 .mueller-fuss-intro-image img {
		min-height: 460px;
	}

	#top .mueller-getsteps-image,
	    #top .mueller-getsteps-main-image {
		min-height: 500px;
	}
}

@media only screen and (max-width:1050px) {
	#top .mueller-getsteps-system-panel {
		grid-template-columns: 1fr;
	}

	#top .mueller-fuss-dguv-main {
		grid-template-columns: 180px minmax(0,1fr);
		gap: 38px;
	}

	#top .mueller-fuss-dguv-points {
		grid-template-columns: 1fr;
	}
}

@media only screen and (max-width:989px) {
	#top .mueller-service-hero-2026.mueller-fussvermessung-hero-2026 {
		background:
			linear-gradient(
				90deg,
				rgba(0,0,0,.92),
				rgba(0,0,0,.72)
			),
			url("/wp-content/uploads/2026/07/Titel_vermessung.webp") center center / cover no-repeat;
	}

	#top .mueller-fuss-steps-image {
		grid-template-columns: 1fr;
	}

	#top .mueller-fuss-steps-image .mueller-fuss-step {
		min-height: 320px;
	}
}

@media only screen and (max-width:767px) {
	#top .mueller-fuss-intro-2026,
	    #top .mueller-fuss-ablauf-2026 {
		padding: 48px 20px 58px;
	}

	#top .mueller-fuss-intro-2026 .mueller-product-info-content h2,
	    #top .mueller-getsteps-content h2,
	    #top .mueller-getsteps-system-content h2,
	    #top .mueller-fuss-dguv-content h2 {
		font-size: 34px;
	}

	#top .mueller-fuss-intro-image,
	    #top .mueller-fuss-intro-2026 .mueller-fuss-intro-image img {
		min-height: 380px;
	}

	#top .mueller-fuss-benefits,
	    #top .mueller-getsteps-features {
		grid-template-columns: 1fr;
	}

	#top .mueller-fuss-section-head {
		margin-bottom: 36px;
	}

	#top .mueller-fuss-steps-image .mueller-fuss-step {
		min-height: 290px;
	}

	#top .mueller-fuss-step-content {
		padding: 32px 24px 26px;
	}

	#top .mueller-getsteps-2026,
	    #top .mueller-getsteps-system-2026,
	    #top .mueller-fuss-dguv-2026 {
		padding-bottom: 60px;
	}

	#top .mueller-getsteps-content,
	    #top .mueller-getsteps-system-content,
	    #top .mueller-getsteps-system-side,
	    #top .mueller-fuss-dguv-panel {
		padding: 42px 30px;
	}

	#top .mueller-getsteps-image,
	    #top .mueller-getsteps-main-image {
		min-height: 420px;
	}

	#top .mueller-getsteps-system-highlight,
	    #top .mueller-fuss-dguv-note {
		grid-template-columns: 1fr;
	}

	#top .mueller-fuss-dguv-main {
		grid-template-columns: 1fr;
	}

	#top .mueller-fuss-dguv-seal {
		margin: 0 auto;
	}

	#top .mueller-fuss-dguv-content {
		text-align: center;
	}

	#top .mueller-fuss-dguv-text {
		text-align: left;
	}
}

@media only screen and (max-width:480px) {
	#top .mueller-fuss-intro-2026 .mueller-product-info-content h2,
	    #top .mueller-getsteps-content h2,
	    #top .mueller-getsteps-system-content h2,
	    #top .mueller-fuss-dguv-content h2 {
		font-size: 32px;
	}

	#top .mueller-fuss-intro-image,
	    #top .mueller-fuss-intro-2026 .mueller-fuss-intro-image img {
		min-height: 330px;
	}

	#top .mueller-getsteps-image,
	    #top .mueller-getsteps-main-image {
		min-height: 360px;
	}

	#top .mueller-getsteps-content,
	    #top .mueller-getsteps-system-content,
	    #top .mueller-getsteps-system-side,
	    #top .mueller-fuss-dguv-panel {
		padding: 36px 24px;
	}
}