/**
 * The contact section (.fmt-contact) — see includes/contact-section.php.
 *
 * Layout only: two columns, the intro that stays with the reader, the card the
 * form sits in and the confirmation that replaces it. The form's own fields are
 * styled project-wide in cf7.css, so nothing here reaches inside .wpcf7.
 */

.fmt-contact {
	padding: 104px 0 80px;
	background: var(--bg-2);
}

/* The form column is the wider one — it carries two fields side by side in
   several rows, the intro carries one line of text. */
.fmt-contact__grid {
	display: grid;
	grid-template-columns: 1fr 1.2fr;
	gap: 64px;
	align-items: start;
}

/* No form assigned: one column, and the intro keeps a readable measure instead
   of stretching across the full width. */
.fmt-contact--noform .fmt-contact__grid {
	grid-template-columns: minmax(0, 620px);
}

/* Stays in view while the form is being filled in. The offset clears the sticky
   header. */
.fmt-contact__intro {
	position: sticky;
	top: 110px;
}
.fmt-contact__eyebrow {
	margin-bottom: 14px;
}
.fmt-contact__title {
	max-width: 460px;
	margin-bottom: 18px;
}
.fmt-contact__lead {
	max-width: 420px;
	margin: 0 0 28px;
	font-size: 16px;
	line-height: 1.6;
	color: var(--ink-soft);
}

/* --- Phone, mail, address --------------------------------- */

.fmt-contact__details {
	display: flex;
	flex-direction: column;
	gap: 14px;
	font-size: 14px;
}
/* Ink, not the theme's red link colour: in the design these read as contact
   details that happen to be actionable, not as links in running text. */
.fmt-contact__detail {
	display: flex;
	align-items: center;
	gap: 10px;
	color: var(--ink);
}
.fmt-contact__detail .icon {
	flex-shrink: 0;
	color: var(--ink-mute);
}
.fmt-contact__phone {
	font-weight: 500;
}
.fmt-contact__detail-note {
	font-size: 12px;
	color: var(--ink-mute);
}
/* The address runs over two lines, so its icon sits with the first one. */
.fmt-contact__detail--address {
	align-items: flex-start;
	color: var(--ink-soft);
}
.fmt-contact__detail--address .icon {
	margin-top: 3px;
}

/* --- "Mein Bereich" card ---------------------------------- */

/* Dark, because it is an offer rather than a piece of the contact list. */
.fmt-contact__member {
	margin-top: 32px;
	padding: 20px;
	color: #fff;
	background: var(--ink);
	border: 1px solid var(--line);
	border-radius: 12px;
}
.fmt-contact__member-head {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 10px;
}
.fmt-contact__member-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	background: rgba(255, 255, 255, .12);
	border-radius: 50%;
}
.fmt-contact__member-title {
	font-size: 14px;
	font-weight: 500;
}
.fmt-contact__member-text {
	margin: 0 0 16px;
	font-size: 13px;
	line-height: 1.55;
	color: rgba(255, 255, 255, .7);
}
.fmt-contact__member-btn {
	justify-content: center;
	width: 100%;
}

/* --- The card ---------------------------------------------- */

.fmt-contact__card {
	position: relative;
	padding: 36px 40px;
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: 16px;
	box-shadow: var(--shadow-card);
}

/* --- Confirmation ------------------------------------------ */

/* Revealed by contact-section.js, which also hides the form: the design shows
   one or the other, never both. */
.fmt-contact__card.is-sent .fmt-contact__form {
	display: none;
}
.fmt-contact__sent {
	padding: 40px 0;
	text-align: center;
}
.fmt-contact__sent-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	margin: 0 auto 18px;
	color: var(--red);
	background: var(--bg-2);
	border-radius: 50%;
}
.fmt-contact__sent-title {
	margin: 0 0 8px;
	font-size: 24px;
	font-weight: 500;
	letter-spacing: -0.01em;
}
.fmt-contact__sent-text {
	max-width: 380px;
	margin: 0 auto;
	color: var(--ink-soft);
}

/* =========================================================
   Responsive
   ========================================================= */

/* --- Tablet range · not covered by the design -------------- */

@media (max-width: 1100px) {
	.fmt-contact {
		padding: 72px 0 64px;
	}
	/* One column below the two-column threshold, and the intro has nothing left
	   to stick to: it scrolls out of the way above the card. */
	.fmt-contact__grid,
	.fmt-contact--noform .fmt-contact__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 40px;
	}
	.fmt-contact__intro {
		position: static;
	}
	.fmt-contact__title,
	.fmt-contact__lead {
		max-width: 560px;
	}
	.fmt-contact__card {
		padding: 32px 28px;
	}
}

/* --- Phone · values from the mobile design ----------------- */

@media (max-width: 680px) {
	.fmt-contact {
		padding: 56px 0;
	}
	/* The mobile design's .mwrap gutter, narrower than global.css's 24px. */
	.fmt-contact .wrap {
		padding: 0 20px;
	}
	.fmt-contact__grid {
		gap: 24px;
	}
	.fmt-contact__eyebrow {
		margin-bottom: 12px;
	}
	/* The mobile design's .mh2, smaller than global.css's .h-display here. */
	.fmt-contact__title {
		margin-bottom: 14px;
		font-size: 28px;
		line-height: 1.05;
	}
	.fmt-contact__lead {
		margin-bottom: 20px;
		font-size: 15px;
	}
	.fmt-contact__details {
		gap: 12px;
	}
	.fmt-contact__member {
		margin-top: 24px;
	}
	.fmt-contact__card {
		padding: 24px 20px;
	}
	.fmt-contact__sent {
		padding: 24px 0;
	}
	.fmt-contact__sent-icon {
		width: 60px;
		height: 60px;
		margin-bottom: 16px;
	}
	.fmt-contact__sent-title {
		font-size: 22px;
	}
	.fmt-contact__sent-text {
		font-size: 14px;
	}
}