/**
 * Online Marketing Beratung — Figma 1060:2535 (1440 canvas).
 * Shared sections reuse .inia-lu-* rules from layout-leistungen.css
 * (page shell also has .inia-leistungen-page).
 */

/* —— Hero —— */
.inia-omb-page .inia-omb-hero {
	width: 100%;
	max-width: 1200px;
	min-height: 763px;
}

.inia-omb-page .inia-omb-hero > .e-con-inner {
	display: flex !important;
	flex-direction: row !important;
	/* Figma: left 596 + gap 79 + phone 405 @ x=675 */
	justify-content: flex-start !important;
	align-items: flex-start !important;
	width: 100%;
	gap: 79px !important;
}

.inia-omb-page .inia-omb-hero-left {
	width: 596px !important;
	max-width: 596px;
	flex: 0 0 596px;
}

.inia-omb-page .inia-omb-hero-eyebrow .inia-eyebrow,
.inia-omb-page .inia-omb-hero-eyebrow p {
	margin: 0 !important;
	color: #ffffff !important;
	font-family: "DM Sans", sans-serif !important;
	font-size: 12px !important;
	line-height: 16px !important;
	font-weight: 600 !important;
	letter-spacing: 1.8px !important;
	text-transform: uppercase;
}

.inia-omb-page .inia-omb-hero-left .elementor-heading-title {
	color: #ffffff !important;
	font-size: 48px !important;
	line-height: 58px !important;
	font-weight: 600 !important;
}

.inia-omb-page .inia-omb-hero-list ul {
	margin: 0;
	padding-left: 24px;
	color: #ffffff;
}

.inia-omb-page .inia-omb-hero-list li {
	color: #ffffff;
	font-size: 16px;
	line-height: 24px;
	font-weight: 500;
}

.inia-omb-page .inia-omb-hero-phone,
.inia-omb-page .inia-omb-hero-phone .elementor-widget-container {
	width: 405px !important;
	max-width: 405px;
	flex: 0 0 405px;
}

.inia-omb-page .inia-omb-phone {
	width: 405px;
	height: 763px;
	box-sizing: border-box;
	background: rgba(255, 255, 255, 0.1);
	border: 1px solid #ffffff;
	border-radius: 24px;
	padding: 24px;
	display: flex;
	flex-direction: column;
	gap: 24px;
	overflow: hidden;
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}

.inia-omb-page .inia-omb-phone__chrome {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 82px;
}

.inia-omb-page .inia-omb-phone__avatar {
	width: 62px;
	height: 62px;
	margin: 10px;
	border-radius: 88px;
	object-fit: cover;
	display: block;
	flex-shrink: 0;
}

.inia-omb-page .inia-omb-phone__handle {
	color: #ffffff;
	font-family: "DM Sans", sans-serif;
	font-size: 16px;
	line-height: 24px;
	font-weight: 500;
}

.inia-omb-page .inia-omb-phone__video {
	width: 357px;
	height: 609px;
	border-radius: 24px;
	overflow: hidden;
	background: rgba(0, 0, 0, 0.2);
}

.inia-omb-page .inia-omb-phone__video video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.35s ease;
}

.inia-omb-page .inia-omb-phone:hover .inia-omb-phone__video video {
	transform: scale(1.03);
}

/* —— Feature cards —— */
.inia-omb-page .inia-omb-features {
	width: 100%;
	max-width: 996px;
}

.inia-omb-page .inia-omb-feature-stack {
	width: 896px;
	max-width: 100%;
}

.inia-omb-page .inia-omb-feature-row {
	width: 100%;
	margin-bottom: -4px;
	/* Elementor nested e-con defaults to column — align on cross-axis */
	flex-direction: column !important;
}

.inia-omb-page .inia-omb-feature-row--left {
	align-items: flex-start !important;
}

.inia-omb-page .inia-omb-feature-row--right > .e-con-inner,
.inia-omb-page .inia-omb-feature-row--right {
	align-items: flex-end !important;
	justify-content: flex-start !important;
}

.inia-omb-page .inia-omb-feature-card {
	width: 611px !important;
	max-width: 100%;
	min-height: 269px;
	flex: 0 0 auto !important;
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.inia-omb-page .inia-omb-feature-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 14px 44px rgba(0, 0, 0, 0.22);
}

.inia-omb-page .inia-omb-eyebrow p {
	margin: 0 !important;
	color: var(--inai-electric-blue, #2d5bff) !important;
	font-family: "DM Sans", sans-serif !important;
	font-size: 12px !important;
	line-height: 16px !important;
	font-weight: 600 !important;
	letter-spacing: 1.8px !important;
	text-transform: uppercase;
}

.inia-omb-page .inia-omb-feature-icon img {
	width: 85px !important;
	height: 70px !important;
	object-fit: contain;
}

/* —— Case study —— */
.inia-omb-page .inia-omb-case {
	width: 100%;
	max-width: 1440px;
}

.inia-omb-page .inia-omb-case > .e-con-inner {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: wrap !important;
	gap: 120px !important;
	justify-content: center;
}

.inia-omb-page .inia-omb-case-results {
	width: 580px !important;
	max-width: min(580px, 100%);
	box-sizing: border-box;
	/* Figma card stack: pad 32 + eyebrow 16 + gaps 24×2 + live 96 + chart 231 ≈ 455 */
	min-height: 455px;
}

.inia-omb-page .inia-omb-live-card {
	background: rgba(241, 241, 242, 0.8);
	border: 1px solid #ffffff;
	border-radius: 16px;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
	padding: 8px 16px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 8px;
	width: 287px;
	max-width: 287px;
	height: 96px;
	box-sizing: border-box;
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}

.inia-omb-page .inia-omb-live-card__label {
	margin: 0;
	opacity: 0.5;
	color: var(--inai-electric-blue, #2d5bff);
	font-family: "DM Sans", sans-serif;
	font-size: 12px;
	line-height: 16px;
	font-weight: 600;
	letter-spacing: 1.8px;
	text-transform: uppercase;
	white-space: nowrap;
}

.inia-omb-page .inia-omb-live-card__live {
	display: flex;
	align-items: center;
	gap: 4px;
	font-family: "DM Sans", sans-serif;
	font-size: 16px;
	line-height: 24px;
	font-weight: 500;
	white-space: nowrap;
}

.inia-omb-page .inia-omb-live-card__live img {
	width: 21px;
	height: 21px;
	display: block;
	flex-shrink: 0;
}

.inia-omb-page .inia-omb-live-card__metrics {
	display: flex;
	flex-wrap: nowrap;
	gap: 8px;
	color: #4a8c3c;
	font-family: "DM Sans", sans-serif;
	font-size: 16px;
	line-height: 24px;
	font-weight: 500;
	white-space: nowrap;
}

.inia-omb-page .inia-omb-live-card__metrics span {
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.inia-omb-page .inia-omb-live-card__metrics img {
	width: 12px;
	height: 15px;
	display: block;
	flex-shrink: 0;
}

.inia-omb-page .inia-omb-case-chart,
.inia-omb-page .inia-omb-case-chart .elementor-widget-container {
	width: 100% !important;
}

.inia-omb-page .inia-omb-case-chart img {
	width: 516px !important;
	max-width: 100%;
	height: 231px !important;
	object-fit: cover;
	border-radius: 24px;
	border: 1px solid #ffffff;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
	display: block;
	transition: transform 0.35s ease;
}

.inia-omb-page .inia-omb-case-chart:hover img {
	transform: scale(1.02);
}

/* —— iPhone (Figma 1171:4854 — 1200×1152 absolute canvas) —— */
.inia-omb-page .inia-omb-iphone {
	position: relative;
	width: 100%;
	max-width: 1200px;
	height: 1152px;
	min-height: 1152px;
	overflow: visible;
}

.inia-omb-page .inia-omb-iphone > .e-con-inner {
	position: relative !important;
	width: 100% !important;
	height: 1152px !important;
	min-height: 1152px !important;
	display: block !important;
}

.inia-omb-page .inia-omb-iphone-heading,
.inia-omb-page .inia-omb-iphone > .e-con-inner > .elementor-widget-heading,
.inia-omb-page .inia-omb-iphone > .elementor-widget-heading {
	position: absolute !important;
	top: 0 !important;
	left: 50% !important;
	transform: translateX(-50%);
	width: 758px !important;
	max-width: 100%;
	z-index: 2;
	margin: 0 !important;
}

.inia-omb-page .inia-omb-iphone .inia-omb-iphone-heading .elementor-heading-title,
.inia-omb-page .inia-omb-iphone .elementor-heading-title {
	margin: 0 !important;
	font-family: var(--inai-font-display, "Bricolage Grotesque", sans-serif) !important;
	font-size: 45px !important;
	line-height: 1.2 !important;
	font-weight: 700 !important;
	color: var(--inai-black, #000) !important;
	text-align: center;
	font-variation-settings: "opsz" 14, "wdth" 100;
}

.inia-omb-page .inia-omb-iphone-stage,
.inia-omb-page .inia-omb-iphone-stage > .e-con-inner {
	position: absolute !important;
	inset: 0 !important;
	width: 100% !important;
	height: 1152px !important;
	min-height: 1152px !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* Line @ x=0 y=126 · 850×857 */
.inia-omb-page .inia-omb-iphone-line {
	position: absolute !important;
	left: 0 !important;
	top: 126px !important;
	width: 850px !important;
	height: 857px !important;
	max-width: none !important;
	z-index: 0;
	pointer-events: none;
	margin: 0 !important;
}

.inia-omb-page .inia-omb-iphone-line .elementor-widget-container {
	position: absolute !important;
	inset: 0 !important;
	left: 0 !important;
	top: 0 !important;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

.inia-omb-page .inia-omb-iphone-line img {
	display: block !important;
	width: 850px !important;
	height: 857px !important;
	max-width: none !important;
	object-fit: fill;
}

/* Phone @ x=398 y=308 · 405×844 — GIF fill cropped like Figma */
.inia-omb-page .inia-omb-iphone-device {
	position: absolute !important;
	left: 398px !important;
	top: 308px !important;
	width: 405px !important;
	height: 844px !important;
	max-width: 405px !important;
	margin: 0 !important;
	padding: 0 !important;
	transform: none !important;
	z-index: 1;
	overflow: hidden !important;
	border-radius: 69px;
	background: #111;
}

.inia-omb-page .inia-omb-iphone-device .elementor-widget-container {
	position: absolute !important;
	inset: 0 !important;
	left: 0 !important;
	top: 0 !important;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
	transform: none !important;
	overflow: hidden !important;
	border-radius: 69px;
}

.inia-omb-page .inia-omb-iphone-device img {
	position: absolute !important;
	/* Figma image transform: left -32.86%, width 166.61%, height ~100% */
	left: -32.86% !important;
	top: 0 !important;
	width: 166.61% !important;
	height: 100.02% !important;
	max-width: none !important;
	object-fit: cover;
	border-radius: 0 !important;
	display: block;
}

/* —— Vorteile —— */
.inia-omb-page .inia-omb-vorteile {
	width: 100%;
	max-width: 996px;
}

.inia-omb-page .inia-omb-vorteile > .e-con-inner {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: wrap !important;
	column-gap: 24px !important;
	row-gap: 64px !important;
}

.inia-omb-page .inia-omb-vorteil {
	width: 486px !important;
	max-width: 100%;
	min-height: 249px;
	align-items: flex-start !important;
}

.inia-omb-page .inia-omb-vorteil .elementor-heading-title {
	margin: 0 !important;
	font-family: var(--inai-font-display, "Bricolage Grotesque", sans-serif) !important;
	font-size: 24px !important;
	line-height: 31px !important;
	font-weight: 600 !important;
	color: var(--inai-black, #000) !important;
	font-variation-settings: "opsz" 14, "wdth" 100;
}

/* Figma Vorteile body: Bricolage Medium 17 / 1.2 (not DM Sans 16/24) */
.inia-omb-page .inia-omb-vorteil .elementor-widget-text-editor,
.inia-omb-page .inia-omb-vorteil .elementor-widget-text-editor p {
	margin: 0 !important;
	padding: 0 !important;
	font-family: var(--inai-font-display, "Bricolage Grotesque", sans-serif) !important;
	font-size: 17px !important;
	/* 20/17 ≈ Figma body block height 160 at 392px */
	line-height: 1.176 !important;
	font-weight: 500 !important;
	color: var(--inai-black, #000) !important;
	font-variation-settings: "opsz" 14, "wdth" 100;
	word-break: break-word;
}

.inia-omb-page .inia-omb-done img {
	width: 70px !important;
	height: 70px !important;
	object-fit: contain;
}

/* —— Mid CTA —— */
.inia-omb-page .inia-omb-mid-cta {
	position: relative;
	width: 100%;
	max-width: 1200px;
	min-height: 580px;
	overflow: visible;
	background:
		radial-gradient(90% 80% at 50% -20%, rgba(45, 91, 255, 0.55) 0%, rgba(255, 255, 255, 0) 70%),
		rgba(241, 241, 242, 0.2);
	box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}

.inia-omb-page .inia-omb-mid-cta-body {
	max-width: 678px !important;
	margin-inline: auto !important;
	text-align: center;
}

.inia-omb-page .inia-omb-float,
.inia-omb-page .inia-omb-float .elementor-widget-container {
	position: absolute !important;
	z-index: 2;
	width: 84px !important;
	height: 84px !important;
	background: #f1f1f2 !important;
	border-radius: 15px !important;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2) !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 10px !important;
	pointer-events: none;
}

.inia-omb-page .inia-omb-float img {
	width: 45px !important;
	height: 40px !important;
	object-fit: contain;
}

/*
 * Figma Icon Box x/y are axis-aligned bounds after rotation.
 * Place unrotated 84px tile so its AABB lands on those coords.
 */
.inia-omb-page .inia-omb-float--zahlen {
	left: 116px !important;
	top: 236px !important;
	transform: rotate(-21.9deg);
	transform-origin: center center;
}

.inia-omb-page .inia-omb-float--analyse {
	left: 310px !important;
	top: 436px !important;
	transform: rotate(12deg);
	transform-origin: center center;
}

.inia-omb-page .inia-omb-float--balance {
	left: 1007px !important;
	top: 103px !important;
	transform: rotate(8deg);
	transform-origin: center center;
}

.inia-omb-page .inia-omb-float--netzwerk {
	left: 853px !important;
	top: 418px !important;
	transform: rotate(-8deg);
	transform-origin: center center;
}

/* —— Responsive —— */
@media (max-width: 1199px) {
	.inia-omb-page .inia-omb-hero > .e-con-inner,
	.inia-omb-page .inia-omb-case > .e-con-inner {
		flex-direction: column !important;
		align-items: center !important;
		gap: 40px !important;
	}

	.inia-omb-page .inia-omb-hero-left,
	.inia-omb-page .inia-omb-hero-phone,
	.inia-omb-page .inia-omb-phone,
	.inia-omb-page .inia-omb-case-copy,
	.inia-omb-page .inia-omb-case-results,
	.inia-omb-page .inia-omb-feature-card,
	.inia-omb-page .inia-omb-vorteil {
		width: 100% !important;
		max-width: 100% !important;
	}

	.inia-omb-page .inia-omb-hero-phone img,
	.inia-omb-page .inia-omb-phone img,
	.inia-omb-page .inia-omb-hero img {
		width: 100% !important;
		max-width: 100% !important;
		height: auto !important;
	}

	/* Keep the small chrome avatar/logo at its intended size (not full width) */
	.inia-omb-page .inia-omb-phone__avatar,
	.inia-omb-page img.inia-omb-phone__avatar {
		width: 62px !important;
		height: 62px !important;
		max-width: 62px !important;
		flex: 0 0 62px;
	}

	.inia-omb-page .inia-omb-phone__chrome {
		flex-direction: row !important;
		flex-wrap: nowrap !important;
		align-items: center !important;
		min-height: 0 !important;
	}

	/* Spacing between stacked feature cards */
	.inia-omb-page .inia-omb-feature-stack {
		row-gap: 16px !important;
		gap: 16px !important;
	}

	.inia-omb-page .inia-omb-feature-row {
		margin-bottom: 0 !important;
		margin-top: 0 !important;
	}

	.inia-omb-page .inia-omb-feature-card {
		height: auto !important;
		min-height: 0 !important;
	}

	.inia-omb-page .inia-omb-feature-card > .e-con-inner {
		flex-wrap: nowrap !important;
		flex-direction: column !important;
		height: auto !important;
	}

	.inia-omb-page .inia-omb-phone__video {
		width: 100%;
		height: auto;
		aspect-ratio: 357 / 609;
	}

	.inia-omb-page .inia-omb-hero > .e-con-inner {
		gap: 40px !important;
	}

	.inia-omb-page .inia-omb-hero-left {
		flex: 1 1 auto;
	}

	.inia-omb-page .inia-omb-feature-row--right > .e-con-inner,
	.inia-omb-page .inia-omb-feature-row--right {
		align-items: stretch !important;
		justify-content: flex-start !important;
	}

	.inia-omb-page .inia-omb-case-chart img {
		width: 100% !important;
		height: auto !important;
	}

	.inia-omb-page .inia-omb-case {
		padding: 48px 20px !important;
	}

	.inia-omb-page .inia-omb-case-results {
		width: 100% !important;
		max-width: 100% !important;
		min-height: 0;
		padding: 24px 16px !important;
	}

	.inia-omb-page .inia-omb-live-card {
		width: 100% !important;
		max-width: 100% !important;
		height: auto;
		min-height: 96px;
	}

	.inia-omb-page .inia-omb-live-card__metrics {
		flex-wrap: wrap;
		white-space: normal;
	}

	.inia-omb-page .inia-omb-live-card__label,
	.inia-omb-page .inia-omb-live-card__live {
		white-space: normal;
	}

	.inia-omb-page .inia-omb-hero-left,
	.inia-omb-page .inia-omb-hero-phone {
		flex: 1 1 auto !important;
	}

	.inia-omb-page .inia-omb-iphone,
	.inia-omb-page .inia-omb-iphone > .e-con-inner {
		height: auto !important;
		min-height: 0 !important;
	}

	.inia-omb-page .inia-omb-iphone-heading,
	.inia-omb-page .inia-omb-iphone > .e-con-inner > .elementor-widget-heading,
	.inia-omb-page .inia-omb-iphone > .elementor-widget-heading {
		position: relative !important;
		left: auto !important;
		transform: none !important;
		width: 100% !important;
		padding: 0 16px;
		margin-bottom: 24px !important;
	}

	.inia-omb-page .inia-omb-iphone .elementor-heading-title {
		font-size: 32px !important;
		line-height: 1.2 !important;
	}

	.inia-omb-page .inia-omb-iphone-stage,
	.inia-omb-page .inia-omb-iphone-stage > .e-con-inner {
		position: relative !important;
		inset: auto !important;
		height: auto !important;
		min-height: 0 !important;
		display: flex !important;
		justify-content: center !important;
	}

	.inia-omb-page .inia-omb-iphone-line {
		display: none !important;
	}

	.inia-omb-page .inia-omb-iphone-device {
		position: relative !important;
		left: auto !important;
		top: auto !important;
		width: min(320px, 80vw) !important;
		height: calc(min(320px, 80vw) * 844 / 405) !important;
		max-width: 320px !important;
		margin: 0 auto !important;
	}

	.inia-omb-page .inia-omb-iphone-device .elementor-widget-container {
		position: absolute !important;
		inset: 0 !important;
		left: 0 !important;
		top: 0 !important;
		width: 100% !important;
		height: 100% !important;
	}

	.inia-omb-page .inia-omb-float {
		display: none !important;
	}

	.inia-omb-page .inia-omb-mid-cta {
		padding: 48px 24px !important;
		min-height: 0;
	}
}

@media (max-width: 767px) {
	.inia-omb-page .inia-omb-hero {
		min-height: 0;
	}

	/* Consistent 16px side gutters for OMB-specific sections on phones */
	.inia-omb-page .inia-omb-hero > .e-con-inner,
	.inia-omb-page .inia-omb-features > .e-con-inner,
	.inia-omb-page .inia-omb-vorteile > .e-con-inner {
		padding-inline: 16px !important;
		box-sizing: border-box;
	}

	.inia-omb-page .inia-omb-hero-left {
		flex: 1 1 auto !important;
		max-width: 100% !important;
	}

	.inia-omb-page .inia-omb-hero-phone,
	.inia-omb-page .inia-omb-hero-phone .elementor-widget-container,
	.inia-omb-page .inia-omb-phone {
		flex: none !important;
		width: 100% !important;
		max-width: 100% !important;
		height: auto;
		margin-inline: auto;
	}

	.inia-omb-page .inia-omb-phone__video {
		width: 100%;
		max-width: 100%;
	}

	.inia-omb-page .inia-omb-hero-left .elementor-heading-title {
		font-size: 32px !important;
		line-height: 40px !important;
	}

	/* Consistent section heading size on phones (matches other pages) */
	.inia-omb-page .inia-omb-features h2.elementor-heading-title,
	.inia-omb-page .inia-omb-case h2.elementor-heading-title,
	.inia-omb-page .inia-omb-mid-cta h2.elementor-heading-title,
	.inia-omb-page .inia-omb-iphone .inia-omb-iphone-heading .elementor-heading-title,
	.inia-omb-page .inia-omb-iphone .elementor-heading-title {
		font-size: 28px !important;
		line-height: 34px !important;
	}

	.inia-omb-page .inia-omb-feature-stack,
	.inia-omb-page .inia-omb-features {
		width: 100%;
		max-width: 100%;
	}

	.inia-omb-page .inia-omb-feature-card {
		min-height: 0;
	}

	.inia-omb-page .inia-omb-vorteile > .e-con-inner {
		column-gap: 0 !important;
		row-gap: 40px !important;
	}

	.inia-omb-page .inia-omb-vorteil {
		min-height: 0;
	}

	.inia-omb-page .inia-omb-iphone {
		min-height: 0;
	}

	.inia-omb-page .inia-omb-iphone-device,
	.inia-omb-page .inia-omb-iphone-device .elementor-widget-container {
		width: min(280px, 80vw) !important;
		height: calc(min(280px, 80vw) * 844 / 405) !important;
		max-width: 100% !important;
	}

	.inia-omb-page .inia-omb-mid-cta {
		padding: 40px 20px !important;
	}
}

@media (max-width: 374px) {
	.inia-omb-page .inia-omb-hero-left .elementor-heading-title {
		font-size: 28px !important;
		line-height: 36px !important;
	}

	.inia-omb-page .inia-omb-iphone-device,
	.inia-omb-page .inia-omb-iphone-device .elementor-widget-container {
		width: min(240px, 80vw) !important;
		height: calc(min(240px, 80vw) * 844 / 405) !important;
	}
}