/* ── Contact — Ansprechpartner + Lead-Formular ────────────────────────────── */

.contact {
	background: var(--c-surface);
	padding-block: 3.5rem;
	border-top: 0.0625rem solid var(--c-divider);
}

.contact__inner {
	display: grid;
	grid-template-columns: 1fr 2fr;
	gap: 3rem;
	align-items: start;
}

/* Ansprechpartner column */

.contact__person {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.contact__person-img {
	width: 100%;
	max-width: 12rem;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: var(--radius);
	background: var(--c-bg);
}

/* CSS placeholder when no real photo is available */
.contact__person-img--placeholder {
	width: 10rem;
	height: 10rem;
	border-radius: var(--radius);
	background: var(--c-bg);
	border: 0.0625rem solid var(--c-border-light);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--c-text);
	font-size: 0.8125rem;
	font-weight: 500;
	text-align: center;
	line-height: 1.3;
}

.contact__person-name {
	font-size: 1rem;
	font-weight: 700;
	color: var(--c-text);
	margin: 0;
}

.contact__person-role {
	font-size: 0.875rem;
	color: var(--c-text);
	margin: 0;
	opacity: 0.7;
}

.contact__person-tel {
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--c-primary);
	text-decoration: none;
	display: flex;
	align-items: center;
	gap: 0.375rem;
}

.contact__person-tel:hover {
	text-decoration: underline;
}

.contact__person-mail {
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--c-primary);
	text-decoration: none;
	word-break: break-word;
}

.contact__person-mail:hover {
	text-decoration: underline;
}

/* Form column */

.contact__form-wrap {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

.contact__form-header {
	margin-bottom: 0;
}

.contact__form-title {
	font-size: var(--fs-h2);
	font-weight: 700;
	color: var(--c-text);
	margin: 0 0 0.5rem;
}

.contact__form-lead {
	font-size: var(--fs-body);
	color: var(--c-text);
	margin: 0;
	opacity: 0.8;
}

.contact__form {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem 1.5rem;
}

.contact__form label {
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--c-text);
}

.contact__form label.contact__form-full {
	grid-column: 1 / -1;
}

.contact__form input,
.contact__form textarea {
	font-family: var(--font);
	font-size: var(--fs-body);
	color: var(--c-text);
	background: var(--c-bg);
	border: 0.0625rem solid var(--c-border-light);
	border-radius: 0.25rem;
	padding: 0.625rem 0.875rem;
	width: 100%;
	transition: border-color 0.15s;
}

.contact__form input:focus,
.contact__form textarea:focus {
	outline: none;
	border-color: var(--c-primary);
}

.contact__form textarea {
	resize: vertical;
	min-height: 8rem;
}

.contact__hint {
	grid-column: 1 / -1;
	font-size: 0.8125rem;
	color: var(--c-text-muted);
	margin: 0;
	display: flex;
	align-items: center;
	gap: 0.375rem;
}

.contact__hint::before {
	content: "✓";
	color: var(--c-primary);
	font-weight: 700;
}

.contact__form-actions {
	grid-column: 1 / -1;
	display: flex;
	align-items: center;
	gap: 1.5rem;
	flex-wrap: wrap;
}

.contact__privacy {
	font-size: 0.8125rem;
	color: var(--c-text-muted);
	margin: 0;
}

.contact__privacy a {
	color: var(--c-primary);
	text-decoration: underline;
}

/* Responsive */

@media (max-width: 62rem) {
	.contact__inner {
		grid-template-columns: 1fr;
		gap: 2rem;
	}

	.contact__person {
		flex-direction: row;
		align-items: center;
		flex-wrap: wrap;
	}

	.contact__person-img--placeholder {
		flex-shrink: 0;
	}
}

@media (max-width: 48rem) {
	.contact {
		padding-block: 2.5rem;
	}

	.contact__form {
		grid-template-columns: 1fr;
	}

	.contact__form label.contact__form-full {
		grid-column: 1;
	}

	.contact__hint,
	.contact__form-actions {
		grid-column: 1;
	}
}