/**
 * Contact page — match newdesign/pages/22-contact-desktop.pdf (1920 artboard).
 * Scoped to #contact. Content shell: .spiro-contact__shell.spiro-content-width (1630).
 */

#contact {
	--sc-navy: var(--spiro-color-navy, #002c41);
	--sc-blue: var(--spiro-color-blue, #007ec1);
	--sc-ink: var(--spiro-color-ink, #000000);
	--sc-bg: var(--spiro-color-bg, #f6f6f6);
	--sc-gutter: var(--spiro-gutter, 50px);
	--sc-max: var(--spiro-content-max, 1630px);
	width: 100%;
	margin: 0;
	padding: 0;
	background: var(--sc-bg);
	font-family: var(--spiro-font-family, "Outfit", Arial, sans-serif);
	color: var(--sc-ink);
}

#contact > .spiro-contact__shell {
	display: block;
	width: 100%;
	box-sizing: border-box;
	padding-bottom: clamp(48px, 5vw, 80px);
}

#contact .spiro-contact__shell > .max-width-780 {
	display: none !important;
}

#contact .spiro-contact__shell > .spiro-contact__intro,
#contact .spiro-contact__shell > .spiro-contact__region-boxes,
#contact .spiro-contact__shell > .blue_contact_info,
#contact .spiro-contact__shell > .max-width-460,
#contact .spiro-contact__shell > .map_region,
#contact .spiro-contact__shell > .spiro-contact__maps {
	width: 100%;
	max-width: none !important;
	box-sizing: border-box;
}

/* Legacy CMS region row — boxes come from Blue Boxes via inc_form */
#contact .spiro-contact__shell > .blue_contact_info,
#contact .spiro-contact__shell > .blue_boxes:not(.spiro-contact__region-boxes) {
	display: none !important;
}

#contact .spiro-contact__shell > .spiro-contact__region-boxes > .container,
#contact .spiro-contact__shell > .max-width-460 > .container,
#contact .spiro-contact__shell .map_region > .container {
	width: 100%;
	max-width: none;
	margin: 0;
	padding-left: 0;
	padding-right: 0;
	box-sizing: border-box;
}

/* --------------------------------------------------------------------------
   Intro — 63px title + Contact form jump (PDF y≈223 / jump y≈305)
   -------------------------------------------------------------------------- */

.spiro-contact__intro {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	width: 100%;
	margin: 0;
	padding: 72px 0 88px;
	box-sizing: border-box;
}

.spiro-contact__title {
	margin: 0;
	max-width: none;
	font-size: var(--spiro-type-hero);
	font-weight: var(--spiro-font-weight-extrabold, 800);
	line-height: 1.0;
	letter-spacing: 0;
	text-transform: uppercase;
	color: var(--sc-ink);
}

.spiro-contact__jump {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	flex-shrink: 0;
	align-self: center;
	margin: 0;
	padding: 10px 22px 10px 10px;
	min-height: 54px;
	border: 0;
	border-radius: 999px;
	background: #fff;
	color: var(--spiro-color-dark, #000000) !important;
	font-size: var(--spiro-type-btn);
	font-weight: var(--spiro-font-weight-medium, 500);
	line-height: 1.2;
	text-decoration: none !important;
	box-shadow: none;
	transition: background-color 0.2s ease;
}

.spiro-contact__jump:hover,
.spiro-contact__jump:focus {
	background: #fff;
	border: 0;
	color: var(--spiro-color-dark, #000000) !important;
	text-decoration: none !important;
}

#spiro-contact-form {
	scroll-margin-top: 120px;
}

.spiro-contact__jump-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--sc-blue);
	color: #fff;
}

.spiro-contact__jump-icon svg {
	display: block;
	width: 14px;
	height: 14px;
}

/* --------------------------------------------------------------------------
   Region cards — 3 equal columns (PDF cards 485×618, gap ≈45)
   Override homepage 4-col / 25%-width blue_boxes grid.
   -------------------------------------------------------------------------- */

#contact .spiro-contact__region-boxes {
	margin: 0;
	padding: 0 0 96px;
	box-sizing: border-box;
}

#contact .spiro-contact__region-boxes > .container {
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
}

#contact .spiro-contact__region-boxes .flex_container,
#contact .spiro-contact__region-boxes > .container > .row.flex_container,
#contact .spiro-contact__region-boxes > .container > .flex_container {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	gap: 46px !important;
	justify-content: stretch;
	align-items: stretch;
	width: 100%;
}

#contact .spiro-contact__region-boxes .spiro-blue-box--contact {
	border-radius: 9px;
	min-height: 618px;
}

#contact .spiro-contact__region-boxes .spiro-blue-box--contact .spiro-blue-box__inner {
	display: grid;
	grid-template-columns: clamp(90px, 18%, 120px) minmax(0, 1fr);
	column-gap: clamp(14px, 2.5%, 22px);
	align-items: start;
	padding: 40px 36px 48px 32px;
}

#contact .spiro-contact__region-boxes .spiro-blue-box--contact .spiro-blue-box__icon {
	grid-column: 1;
	justify-content: center;
	padding-top: 0.15em;
}

#contact .spiro-contact__region-boxes .spiro-blue-box--contact .spiro-blue-box__icon img {
	max-width: 64px;
	max-height: 87px;
	width: 64px;
	height: auto;
}

#contact .spiro-contact__region-boxes .spiro-blue-box--contact .spiro-blue-box__content {
	grid-column: 2;
	min-width: 0;
}

#contact .spiro-contact__region-boxes .spiro-blue-box--contact .spiro-blue-box__title {
	margin: 0 0 52px;
	font-size: 33px;
	font-weight: var(--spiro-font-weight-extrabold, 800);
	line-height: 1.1;
	letter-spacing: 0;
	text-transform: uppercase;
	color: var(--sc-blue);
}

#contact .spiro-contact__region-boxes .spiro-blue-box--contact .spiro-blue-box__body {
	font-size: 21px;
	line-height: 1.55;
	font-weight: var(--spiro-font-weight-regular, 400);
}

#contact .spiro-contact__region-boxes .spiro-blue-box--contact .spiro-blue-box__body p {
	margin: 0 0 52px;
}

#contact .spiro-contact__region-boxes .spiro-blue-box--contact .spiro-blue-box__body p:last-child {
	margin-bottom: 0;
}

#contact .spiro-contact__region-boxes .spiro-blue-box--contact .spiro-blue-box__body strong,
#contact .spiro-contact__region-boxes .spiro-blue-box--contact .spiro-blue-box__body b {
	font-weight: var(--spiro-font-weight-bold, 700);
	color: #fff !important;
}

#contact .spiro-contact__region-boxes .spiro-blue-box--contact .spiro-blue-box__body a {
	color: #fff !important;
	text-decoration: underline;
}

/* --------------------------------------------------------------------------
   Form — title left (49px), fields right (PDF inputs 357×51, gap ≈12)
   -------------------------------------------------------------------------- */

#contact .spiro-contact__shell > .max-width-460 {
	background: transparent;
	padding: 0 0 72px;
	box-sizing: border-box;
}

#contact .spiro-contact__shell > .max-width-460 > .container {
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

#contact .spiro-contact__shell > .max-width-460 .row.flex_container,
#contact .spiro-contact__shell > .max-width-460 .flex_container {
	margin-left: 0 !important;
	margin-right: 0 !important;
	width: 100% !important;
	max-width: 100%;
}

#contact .spiro-contact__shell > .max-width-460 .cell_1_1,
#contact .spiro-contact__shell > .max-width-460 .full-height {
	width: 100%;
	max-width: none;
	margin: 0 !important;
	padding: 0 !important;
}

#contact .contact_form_cm,
#contact .kontact_form,
#contact .pd-bottom,
#contact .remove_margin {
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
}

#contact .contact_form.row,
#contact .contact_form .row,
#contact .secondary_box_title.row,
#contact .secondary_box_title.col-sm-12 {
	margin-left: 0 !important;
	margin-right: 0 !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
	width: 100%;
	max-width: none;
}

#contact .contact_form {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
	column-gap: clamp(32px, 4vw, 64px);
	row-gap: 0;
	align-items: start;
	padding: 0;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
}

#contact .spiro-contact__form-title {
	margin: 0;
	max-width: none;
	font-size: var(--spiro-type-section);
	font-weight: var(--spiro-font-weight-extrabold, 800);
	line-height: 1.06;
	letter-spacing: 0;
	text-transform: uppercase;
	text-align: left !important;
	color: var(--sc-ink);
}

#contact .spiro-contact__form-title p {
	margin: 0;
	color: inherit;
	font: inherit;
	text-align: left !important;
}

#contact .secondary_box_title,
#contact .form_heading {
	grid-column: 1;
	margin: 0;
	text-align: left !important;
}

#contact .contact_form > .clearfix,
#contact .contact_form > br {
	display: none;
}

#contact .screen-reader-error,
#contact .screen-reader-response {
	grid-column: 1 / -1;
}

#contact .contact_form > .spiro-contact__fields {
	grid-column: 2;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	grid-template-areas:
		"fn ln"
		"co ad"
		"pl ci"
		"cy mt"
		"em msg"
		"ph msg"
		"lg msg";
	gap: 11px;
	margin: 0;
	width: 100%;
}

#contact .spiro-cf--fn { grid-area: fn; }
#contact .spiro-cf--ln { grid-area: ln; }
#contact .spiro-cf--co { grid-area: co; }
#contact .spiro-cf--ad { grid-area: ad; }
#contact .spiro-cf--pl { grid-area: pl; }
#contact .spiro-cf--ci { grid-area: ci; }
#contact .spiro-cf--cy { grid-area: cy; }
#contact .spiro-cf--mt { grid-area: mt; }
#contact .spiro-cf--em { grid-area: em; }
#contact .spiro-cf--ph { grid-area: ph; }
#contact .spiro-cf--lg { grid-area: lg; }
#contact .spiro-cf--msg { grid-area: msg; }

#contact .spiro-cf {
	position: relative;
	min-width: 0;
	margin: 0;
	padding: 0;
}

#contact .spiro-cf--msg {
	display: flex;
}

#contact .spiro-cf--msg .nachricht,
#contact .spiro-cf--msg textarea {
	flex: 1 1 auto;
	height: 100%;
	min-height: 100%;
}

/* Field hints: shared in spiro-tokens.css; contact ink/star color */
#contact .spiro-field-hint {
	color: var(--sc-ink);
}

#contact .spiro-field-hint__star {
	color: var(--sc-blue);
}

#contact .contact_form .form-control,
#contact .contact_form input[type="text"],
#contact .contact_form input[type="email"],
#contact .contact_form input[type="tel"],
#contact .contact_form select,
#contact .contact_form textarea {
	width: 100%;
	height: 51px;
	margin: 0;
	padding: 0 18px;
	border: 0 !important;
	border-radius: 6px;
	background: #fff;
	color: var(--sc-ink);
	font-family: inherit;
	font-size: var(--spiro-type-btn);
	font-weight: var(--spiro-font-weight-medium, 500);
	line-height: 1.3;
	box-shadow: none;
	box-sizing: border-box;
	appearance: none;
	-webkit-appearance: none;
}

#contact .contact_form select.form-control {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23000000' d='M1.4 1.4L6 6l4.6-4.6L12 2.8 6 8.8 0 2.8z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 16px center;
	padding-right: 40px;
}

#contact .contact_form textarea.form-control {
	height: 100%;
	min-height: 174px;
	padding: 14px 18px;
	resize: vertical;
}

#contact .contact_form .form-control::placeholder {
	color: var(--sc-ink);
	opacity: 1;
	font-weight: var(--spiro-font-weight-medium, 500);
}

#contact .contact_form .form-control:focus {
	outline: 2px solid var(--sc-blue);
	outline-offset: 0;
	box-shadow: none;
}

#contact .contact_form > .row:has(#Newsletter) {
	display: none !important;
}

#contact .contact_form > .spiro-contact__form-footer,
#contact .contact_form > .senden_button {
	grid-column: 2;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-top: 14px;
	padding: 0;
}

#contact .contact_form > .screen-reader-error,
#contact .contact_form > .screen-reader-response {
	grid-column: 2;
}

#contact .contact_form #submit,
#contact .contact_form .btn.btn-custom {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 127px;
	height: 54px;
	margin: 0;
	padding: 0 28px;
	border: 0;
	border-radius: 999px;
	background: var(--sc-blue) !important;
	color: #fff !important;
	font-size: var(--spiro-type-btn);
	font-weight: var(--spiro-font-weight-medium, 500);
	cursor: pointer;
	float: none !important;
	box-shadow: none;
}

#contact .contact_form #submit:hover,
#contact .contact_form .btn.btn-custom:hover {
	filter: var(--spiro-hover-dim);
}

#contact .spiro-contact__required {
	margin: 0;
	color: var(--sc-ink);
	font-size: 15px;
	font-weight: var(--spiro-font-weight-medium, 500);
	line-height: 1.3;
	text-align: right;
}

#contact .spiro-contact__required-star {
	color: var(--sc-blue);
}

@media (max-width: 1100px) {
	.spiro-contact__title {
		font-size: clamp(36px, 5vw, 56px);
	}

	#contact .spiro-contact__form-title {
		font-size: clamp(32px, 3.5vw, 44px);
	}

	#contact .spiro-contact__region-boxes .spiro-blue-box--contact {
		min-height: 0;
	}

	#contact .spiro-contact__region-boxes .spiro-blue-box--contact .spiro-blue-box__title {
		font-size: clamp(24px, 2.4vw, 33px);
	}

	#contact .spiro-contact__region-boxes .spiro-blue-box--contact .spiro-blue-box__body {
		font-size: clamp(16px, 1.5vw, 21px);
	}
}

@media (max-width: 900px) {
	#contact .contact_form {
		grid-template-columns: 1fr;
		gap: 28px;
	}

	/* Single column — do not keep desktop grid-column: 2 (creates implicit overflow column) */
	#contact .contact_form > .spiro-contact__fields,
	#contact .contact_form > .spiro-contact__form-footer,
	#contact .contact_form > .senden_button,
	#contact .contact_form > .screen-reader-error,
	#contact .contact_form > .screen-reader-response {
		grid-column: 1;
	}

	#contact .contact_form > .spiro-contact__fields {
		grid-template-columns: 1fr;
		grid-template-areas:
			"fn"
			"ln"
			"co"
			"ad"
			"pl"
			"ci"
			"cy"
			"mt"
			"em"
			"ph"
			"msg"
			"lg";
	}

	#contact .spiro-cf--msg textarea {
		min-height: 140px;
	}

	.spiro-contact__intro {
		flex-direction: column;
		align-items: flex-start;
		padding: 48px 0 56px;
	}

	.spiro-contact__jump {
		align-self: flex-start;
	}

	#contact .spiro-contact__region-boxes {
		padding-bottom: 56px;
	}
}

/* 1350–768: two 45% cards per row, third centered */
@media (max-width: 1350px) and (min-width: 768px) {
	#contact .spiro-contact__region-boxes .flex_container,
	#contact .spiro-contact__region-boxes > .container > .row.flex_container,
	#contact .spiro-contact__region-boxes > .container > .flex_container {
		display: flex !important;
		flex-wrap: wrap;
		justify-content: center;
		align-items: stretch;
		gap: 36px !important;
		grid-template-columns: none !important;
	}

	#contact .spiro-contact__region-boxes .flex_container > [class*="cell_"] {
		flex: 0 0 45%;
		width: 45% !important;
		max-width: 45% !important;
	}
}

@media (max-width: 767px) {
	#contact .spiro-contact__region-boxes .flex_container,
	#contact .spiro-contact__region-boxes > .container > .row.flex_container,
	#contact .spiro-contact__region-boxes > .container > .flex_container {
		display: flex !important;
		flex-direction: column;
		flex-wrap: nowrap;
		justify-content: flex-start;
		align-items: stretch;
		gap: 24px !important;
		grid-template-columns: none !important;
	}

	#contact .spiro-contact__region-boxes .flex_container > [class*="cell_"] {
		flex: 0 0 auto;
		width: 100% !important;
		max-width: 100% !important;
	}
}

@media (max-width: 480px) {
	#contact .spiro-contact__region-boxes .spiro-blue-box--contact .spiro-blue-box__inner {
		grid-template-columns: minmax(0, 1fr);
		justify-items: center;
		row-gap: 16px;
		text-align: center;
	}

	#contact .spiro-contact__region-boxes .spiro-blue-box--contact .spiro-blue-box__icon {
		grid-column: 1;
		grid-row: 1;
		justify-content: center;
		padding-top: 0;
	}

	#contact .spiro-contact__region-boxes .spiro-blue-box--contact .spiro-blue-box__content {
		grid-column: 1;
		grid-row: 2;
		align-items: center;
		text-align: center;
	}
}

/* --------------------------------------------------------------------------
   Maps — 49px titles, 24px Medium copy, ~713×460 embeds
   -------------------------------------------------------------------------- */

#contact .spiro-contact__maps {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(36px, 4vw, 56px);
	align-items: start;
	width: 100%;
	padding-top: 24px;
	padding-bottom: 40px;
	box-sizing: border-box;
	overflow: hidden;
	background: transparent;
}

@media (min-width: 1000px) {
	#contact .spiro-contact__maps {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		column-gap: 82px;
	}
}

#contact .spiro-contact__maps .map_region {
	margin: 0 !important;
	padding: 0 !important;
	width: 100%;
	max-width: 100% !important;
	min-width: 0;
	box-sizing: border-box;
	border: 0 !important;
	background: transparent;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

#contact .spiro-contact__maps .map_region.separator-bott,
#contact .spiro-contact__maps .map_region.spacer-bott-90 {
	border: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
}

#contact .spiro-contact__maps .map_region > .container {
	width: 100%;
	max-width: 100%;
	margin: 0;
	padding: 0;
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	min-width: 0;
	box-sizing: border-box;
}

#contact .spiro-contact__maps .flex_container {
	display: flex !important;
	flex-direction: column;
	flex: 1 1 auto;
	gap: 28px;
	margin: 0 !important;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	height: 100%;
	box-sizing: border-box;
}

#contact .spiro-contact__maps .flex_container::before,
#contact .spiro-contact__maps .flex_container::after {
	content: none !important;
	display: none !important;
}

#contact .spiro-contact__maps .cell_1_2 {
	min-width: 0 !important;
	max-width: 100% !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	float: none !important;
	box-sizing: border-box;
}

/* Text block first, map second */
#contact .spiro-contact__maps .cell_1_2:has(h2) {
	order: -1;
}

#contact .spiro-contact__maps h2 {
	margin: 0 0 18px;
}

#contact .spiro-contact__maps h2 p {
	margin: 0;
	color: var(--sc-ink) !important;
	font-size: var(--spiro-type-section) !important;
	font-weight: var(--spiro-font-weight-extrabold, 800) !important;
	line-height: 1.06 !important;
	letter-spacing: 0 !important;
	text-transform: uppercase;
}

#contact .spiro-contact__maps .description_content {
	margin: 0 0 28px;
}

#contact .spiro-contact__maps .description_content p {
	color: var(--sc-ink) !important;
	font-size: var(--spiro-type-body) !important;
	font-weight: var(--spiro-font-weight-medium, 500) !important;
	line-height: 1.35 !important;
	margin: 0 0 0.2em !important;
}

#contact .spiro-contact__maps .description_content p:empty,
#contact .spiro-contact__maps .description_content p:has(> br:only-child),
#contact .spiro-contact__maps .description_content p:has(> span:empty:only-child) {
	display: none;
}

/* CMS spacer paragraphs ( ) */
#contact .spiro-contact__maps .description_content p {
	min-height: 0;
}

#contact .spiro-contact__maps .map-container,
#contact .spiro-contact__maps .map,
#contact .spiro-contact__maps .spiro-contact__map-embed,
#contact .spiro-contact__maps iframe {
	display: block;
	width: 100% !important;
	max-width: 100% !important;
	height: 460px;
	border: 0;
	border-radius: 8px;
	overflow: hidden;
	box-sizing: border-box;
	background: #e8eef2;
}

#contact .spiro-contact__maps .spiro-contact__map-embed iframe {
	height: 100%;
}

@media (max-width: 999px) {
	#contact .spiro-contact__maps h2 p {
		font-size: clamp(28px, 5vw, 40px) !important;
	}

	#contact .spiro-contact__maps .description_content p {
		font-size: clamp(17px, 2.4vw, 22px) !important;
	}

	#contact .spiro-contact__maps .map-container,
	#contact .spiro-contact__maps .map,
	#contact .spiro-contact__maps .spiro-contact__map-embed,
	#contact .spiro-contact__maps iframe {
		height: clamp(260px, 55vw, 400px);
	}
}