/* ==========================================================================
   Hero conversion layout — overlapping Rückrufservice on product image
   (hub Übersicht + single product pages)
   ========================================================================== */

.picos-hero--product-hub.picos-hero--with-callback,
.picos-hero--single-product {
	--picos-sp-hero-image-max-w: 100%;
	--picos-sp-hero-image-max-h: clamp(300px, 36vh, 440px);
	--picos-sp-hero-callback-width: min(100%, 300px);
	min-height: 0;
	overflow: hidden;
}

.picos-hero--product-hub.picos-hero--with-callback {
	border-bottom: 1px solid var(--border);
}

.picos-hero--product-hub.picos-hero--with-callback .picos-hero__inner,
.picos-hero--product-hub.picos-hero--with-callback .picos-sp-hero__inner,
.picos-hero--single-product .picos-sp-hero__inner {
	align-items: center;
	overflow: hidden;
	min-height: 0;
}

.picos-hero--product-hub.picos-hero--with-callback .picos-sp-hero__lead,
.picos-hero--single-product .picos-sp-hero__lead {
	display: flex;
	flex-direction: column;
	min-width: 0;
	max-width: 36rem;
}

.picos-sp-hero__visual-stage {
	position: relative;
	min-width: 0;
	width: 100%;
	min-height: 0;
	background: transparent;
}

.picos-hero--product-hub.picos-hero--with-callback .picos-sp-hero__media,
.picos-hero--product-hub.picos-hero--with-callback .picos-sp-hero__conversion,
.picos-hero--single-product .picos-sp-hero__media,
.picos-hero--single-product .picos-sp-hero__conversion {
	min-width: 0;
}

.picos-hero--product-hub.picos-hero--with-callback .picos-hero__visual,
.picos-hero--product-hub.picos-hero--with-callback .picos-sp-hero__visual,
.picos-hero--single-product .picos-hero__visual,
.picos-hero--single-product .picos-sp-hero__visual {
	position: static;
	min-height: 0;
	height: auto;
	width: 100%;
	max-width: var(--picos-sp-hero-image-max-w);
	margin-inline: auto;
	overflow: visible;
	background: transparent;
}

.picos-hero--product-hub.picos-hero--with-callback .picos-sp-hero__image-wrap,
.picos-hero--product-hub.picos-hero--with-callback .picos-hero__image-wrap,
.picos-hero--single-product .picos-sp-hero__image-wrap,
.picos-hero--single-product .picos-hero__image-wrap {
	position: static;
	top: auto;
	right: auto;
	left: auto;
	display: block;
	width: 100%;
	max-width: var(--picos-sp-hero-image-max-w);
	margin: 0 auto;
	padding: 0;
	transform: none;
	isolation: auto;
	background: transparent;
}

.picos-hero--product-hub.picos-hero--with-callback .picos-sp-hero__media,
.picos-hero--single-product .picos-sp-hero__media {
	background: transparent;
}

.picos-hero--product-hub.picos-hero--with-callback .picos-hero__image-glow,
.picos-hero--product-hub.picos-hero--with-callback .picos-hero__image-floor,
.picos-hero--single-product .picos-hero__image-glow,
.picos-hero--single-product .picos-hero__image-floor {
	display: none;
}

.picos-hero--product-hub.picos-hero--with-callback .picos-hero__image,
.picos-hero--product-hub.picos-hero--with-callback .picos-sp-hero__image,
.picos-hero--single-product .picos-hero__image,
.picos-hero--single-product .picos-sp-hero__image {
	display: block;
	width: auto;
	max-width: 100%;
	max-height: var(--picos-sp-hero-image-max-h);
	min-height: 0;
	height: auto;
	margin: 0 auto;
	object-fit: contain;
	object-position: center center;
	filter: none;
	box-shadow: none;
	mix-blend-mode: normal;
	background: transparent;
}

.picos-hero--product-hub.picos-hero--with-callback .picos-sp-hero__callback,
.picos-hero--single-product .picos-sp-hero__callback {
	position: static;
	width: 100%;
	max-width: 100%;
}

.picos-hero--product-hub.picos-hero--with-callback .picos-sp-hero__callback-panel,
.picos-hero--single-product .picos-sp-hero__callback-panel {
	box-shadow: 0 8px 24px rgba(17, 24, 39, 0.08);
}

.picos-hero--product-hub.picos-hero--with-callback .picos-sp-hero__callback-embed .picos-fluentform,
.picos-hero--single-product .picos-sp-hero__callback-embed .picos-fluentform {
	--picos-ff-gap: 7px;
	--picos-ff-label-gap: 4px;
}

.picos-hero--product-hub.picos-hero--with-callback .picos-sp-hero__callback-embed .picos-fluentform form.fluent_form,
.picos-hero--single-product .picos-sp-hero__callback-embed .picos-fluentform form.fluent_form {
	display: block;
}

.picos-hero--product-hub.picos-hero--with-callback .picos-sp-hero__callback-embed .picos-fluentform .ff-el-group:not(.ff_submit_btn_wrapper),
.picos-hero--single-product .picos-sp-hero__callback-embed .picos-fluentform .ff-el-group:not(.ff_submit_btn_wrapper) {
	margin-bottom: var(--picos-ff-gap);
	gap: var(--picos-ff-label-gap);
}

.picos-hero--product-hub.picos-hero--with-callback .picos-sp-hero__callback-embed .picos-fluentform .ff-hidden-field,
.picos-hero--product-hub.picos-hero--with-callback .picos-sp-hero__callback-embed .picos-fluentform .ff-el-group.ff-hidden-field,
.picos-hero--product-hub.picos-hero--with-callback .picos-sp-hero__callback-embed .picos-fluentform .picos-ff-internal,
.picos-hero--single-product .picos-sp-hero__callback-embed .picos-fluentform .ff-hidden-field,
.picos-hero--single-product .picos-sp-hero__callback-embed .picos-fluentform .ff-el-group.ff-hidden-field,
.picos-hero--single-product .picos-sp-hero__callback-embed .picos-fluentform .picos-ff-internal {
	display: none !important;
}

.picos-hero--product-hub.picos-hero--with-callback .picos-sp-hero__callback-embed .picos-fluentform .ff-el-input--label label,
.picos-hero--single-product .picos-sp-hero__callback-embed .picos-fluentform .ff-el-input--label label {
	font-size: 12px;
}

.picos-hero--product-hub.picos-hero--with-callback .picos-sp-hero__callback-embed .picos-fluentform .ff-el-group:has([name="gdpr_consent"]) .ff-el-form-check-label,
.picos-hero--product-hub.picos-hero--with-callback .picos-sp-hero__callback-embed .picos-fluentform .ff-t-container .ff-el-form-check-label,
.picos-hero--single-product .picos-sp-hero__callback-embed .picos-fluentform .ff-el-group:has([name="gdpr_consent"]) .ff-el-form-check-label,
.picos-hero--single-product .picos-sp-hero__callback-embed .picos-fluentform .ff-t-container .ff-el-form-check-label {
	font-size: 10px;
	line-height: 1.4;
}

.picos-hero--product-hub.picos-hero--with-callback .picos-sp-hero__callback-embed .picos-fluentform .ff-el-form-control,
.picos-hero--product-hub.picos-hero--with-callback .picos-sp-hero__callback-embed .picos-fluentform select.ff-el-form-control,
.picos-hero--product-hub.picos-hero--with-callback .picos-sp-hero__callback-embed .picos-fluentform textarea.ff-el-form-control,
.picos-hero--single-product .picos-sp-hero__callback-embed .picos-fluentform .ff-el-form-control,
.picos-hero--single-product .picos-sp-hero__callback-embed .picos-fluentform select.ff-el-form-control,
.picos-hero--single-product .picos-sp-hero__callback-embed .picos-fluentform textarea.ff-el-form-control {
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
}

.picos-hero--product-hub.picos-hero--with-callback .picos-sp-hero__callback-embed .picos-fluentform .ff-el-form-control,
.picos-hero--single-product .picos-sp-hero__callback-embed .picos-fluentform .ff-el-form-control {
	min-height: 36px;
	padding: 6px 10px;
	font-size: var(--font-small);
}

.picos-hero--product-hub.picos-hero--with-callback .picos-sp-hero__callback-embed .picos-fluentform .ff-el-group:has([name="gdpr_consent"]),
.picos-hero--single-product .picos-sp-hero__callback-embed .picos-fluentform .ff-el-group:has([name="gdpr_consent"]) {
	margin-bottom: 6px;
	gap: 4px;
}

.picos-hero--product-hub.picos-hero--with-callback .picos-sp-hero__callback-embed .picos-fluentform .ff_submit_btn_wrapper,
.picos-hero--single-product .picos-sp-hero__callback-embed .picos-fluentform .ff_submit_btn_wrapper {
	margin-top: 6px;
	margin-bottom: 0;
}

.picos-hero--product-hub.picos-hero--with-callback .picos-sp-hero__callback-embed .picos-fluentform .ff-btn-submit,
.picos-hero--product-hub.picos-hero--with-callback .picos-sp-hero__callback-embed .picos-fluentform .ff-btn.ff-btn-submit,
.picos-hero--single-product .picos-sp-hero__callback-embed .picos-fluentform .ff-btn-submit,
.picos-hero--single-product .picos-sp-hero__callback-embed .picos-fluentform .ff-btn.ff-btn-submit {
	width: 100%;
	min-height: 40px;
	padding: 8px 16px;
	font-size: var(--font-small);
}

.picos-hub-inquiry.section {
	padding-top: clamp(64px, 8vw, 96px);
	padding-bottom: clamp(72px, 9vw, 112px);
	background: linear-gradient(180deg, var(--bg-white) 0%, #f8fafc 100%);
}

.picos-hub-inquiry .picos-fluentform .ff-el-form-control,
.picos-hub-inquiry .picos-fluentform select.ff-el-form-control,
.picos-hub-inquiry .picos-fluentform textarea.ff-el-form-control {
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
}

@media (min-width: 1024px) {
	.picos-hero--product-hub.picos-hero--with-callback,
	.picos-hero--single-product {
		min-height: 0;
	}

	.picos-hero--product-hub.picos-hero--with-callback .picos-hero__inner,
	.picos-hero--product-hub.picos-hero--with-callback .picos-sp-hero__inner,
	.picos-hero--single-product .picos-sp-hero__inner {
		display: grid;
		grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
		align-items: center;
		column-gap: clamp(28px, 3vw, 48px);
		min-height: 0;
		padding-top: clamp(32px, 4vw, 48px);
		padding-bottom: clamp(32px, 4vw, 48px);
	}

	.picos-hero--product-hub.picos-hero--with-callback .picos-sp-hero__lead,
	.picos-hero--single-product .picos-sp-hero__lead {
		grid-column: 1;
		grid-row: 1;
		align-self: center;
	}

	/* Image in flow; form absolutely overlaid on the right */
	.picos-hero--product-hub.picos-hero--with-callback .picos-sp-hero__visual-stage,
	.picos-hero--single-product .picos-sp-hero__visual-stage {
		grid-column: 2;
		grid-row: 1;
		position: relative;
		display: block;
		min-height: 0;
		overflow: visible;
		background: transparent;
	}

	.picos-hero--product-hub.picos-hero--with-callback .picos-sp-hero__media,
	.picos-hero--single-product .picos-sp-hero__media {
		position: relative;
		z-index: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		padding-right: min(34%, 180px);
		padding-left: 0;
		min-width: 0;
		overflow: visible;
		background: transparent;
	}

	.picos-hero--product-hub.picos-hero--with-callback .picos-sp-hero__conversion,
	.picos-hero--single-product .picos-sp-hero__conversion {
		position: absolute;
		top: 50%;
		right: 0;
		z-index: 2;
		width: var(--picos-sp-hero-callback-width);
		max-width: 320px;
		margin: 0;
		transform: translateY(-50%);
	}

	.picos-hero--product-hub.picos-hero--with-callback .picos-hero__visual,
	.picos-hero--product-hub.picos-hero--with-callback .picos-sp-hero__visual,
	.picos-hero--single-product .picos-hero__visual,
	.picos-hero--single-product .picos-sp-hero__visual {
		width: 100%;
		max-width: 100%;
	}

	.picos-hero--product-hub.picos-hero--with-callback .picos-sp-hero__image-wrap,
	.picos-hero--product-hub.picos-hero--with-callback .picos-hero__image-wrap,
	.picos-hero--single-product .picos-sp-hero__image-wrap,
	.picos-hero--single-product .picos-hero__image-wrap {
		width: 100%;
		max-width: 100%;
		margin: 0;
	}

	.picos-hero--product-hub.picos-hero--with-callback .picos-hero__image,
	.picos-hero--product-hub.picos-hero--with-callback .picos-sp-hero__image,
	.picos-hero--single-product .picos-hero__image,
	.picos-hero--single-product .picos-sp-hero__image {
		width: 100%;
		max-width: 100%;
		height: auto;
		max-height: var(--picos-sp-hero-image-max-h);
		min-height: 0;
		object-fit: contain;
		object-position: center center;
		filter: none;
		box-shadow: none;
	}
}

@media (min-width: 1200px) {
	.picos-hero--product-hub.picos-hero--with-callback,
	.picos-hero--single-product {
		--picos-sp-hero-image-max-h: clamp(340px, 40vh, 500px);
		--picos-sp-hero-callback-width: min(100%, 320px);
	}
}

@media (min-width: 1440px) {
	.picos-hero--product-hub.picos-hero--with-callback .picos-hero__inner,
	.picos-hero--product-hub.picos-hero--with-callback .picos-sp-hero__inner,
	.picos-hero--single-product .picos-sp-hero__inner {
		grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
		column-gap: clamp(32px, 3vw, 56px);
	}

	.picos-hero--product-hub.picos-hero--with-callback,
	.picos-hero--single-product {
		--picos-sp-hero-image-max-h: clamp(380px, 42vh, 560px);
	}

	.picos-hero--product-hub.picos-hero--with-callback .picos-sp-hero__media,
	.picos-hero--single-product .picos-sp-hero__media {
		padding-right: min(30%, 190px);
	}

	.picos-hero--product-hub.picos-hero--with-callback .picos-sp-hero__conversion,
	.picos-hero--single-product .picos-sp-hero__conversion {
		max-width: 340px;
	}
}

@media (max-width: 1023px) {
	.picos-hero--product-hub.picos-hero--with-callback .picos-hero__inner,
	.picos-hero--product-hub.picos-hero--with-callback .picos-sp-hero__inner,
	.picos-hero--single-product .picos-sp-hero__inner {
		display: flex;
		flex-direction: column;
		gap: clamp(24px, 4vw, 32px);
		min-height: 0;
		padding-top: 40px;
		padding-bottom: 40px;
	}

	.picos-hero--product-hub.picos-hero--with-callback .picos-sp-hero__visual-stage,
	.picos-hero--single-product .picos-sp-hero__visual-stage {
		display: flex;
		flex-direction: column;
		gap: clamp(20px, 4vw, 28px);
		order: 2;
		overflow: visible;
	}

	.picos-hero--product-hub.picos-hero--with-callback .picos-sp-hero__media,
	.picos-hero--single-product .picos-sp-hero__media {
		position: static;
		padding: 0;
		display: flex;
		justify-content: center;
		max-width: min(100%, 420px);
		margin-inline: auto;
		overflow: visible;
	}

	.picos-hero--product-hub.picos-hero--with-callback .picos-sp-hero__conversion,
	.picos-hero--single-product .picos-sp-hero__conversion {
		position: static;
		top: auto;
		right: auto;
		transform: none;
		width: 100%;
		max-width: min(100%, 420px);
		margin-inline: auto;
	}

	.picos-hero--product-hub.picos-hero--with-callback .picos-sp-hero__image-wrap,
	.picos-hero--product-hub.picos-hero--with-callback .picos-hero__image-wrap,
	.picos-hero--single-product .picos-sp-hero__image-wrap,
	.picos-hero--single-product .picos-hero__image-wrap {
		width: 100%;
		max-width: 100%;
		margin-left: 0;
	}

	.picos-hero--product-hub.picos-hero--with-callback .picos-sp-hero__callback,
	.picos-hero--single-product .picos-sp-hero__callback {
		max-width: 100%;
		margin-inline: auto;
	}

	.picos-hero--product-hub.picos-hero--with-callback .picos-hero__image,
	.picos-hero--product-hub.picos-hero--with-callback .picos-sp-hero__image,
	.picos-hero--single-product .picos-hero__image,
	.picos-hero--single-product .picos-sp-hero__image {
		width: 100%;
		max-width: 100%;
		min-height: 0;
		max-height: min(36vh, 340px);
	}
}