/*
 * Home „Kontakt” (template-parts/home/contact.php). No section mockup; from
 * the preview docs/preview/new_home7_2.png: warm band, heading with e-mail
 * and phone on the left, the form card on the right. Below 56em the form
 * goes under the heading.
 */

.hf-contact
{
	padding-block: var(--hf-space-section-block);
	background: var(--hf-color-band-strong);
	/* The arrival band links to the tabs; keep them clear of the sticky header. */
	scroll-margin-top: var(--hf-space-l);
}

.hf-contact__inner
{
	display: grid;
	grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
	align-items: start;
	gap: var(--hf-space-l);
}

.hf-contact__eyebrow
{
	margin-bottom: var(--hf-space-s);
}

.hf-contact__title
{
	margin: 0 0 var(--hf-space-l);
	font-size: var(--hf-text-h2-s);
	text-wrap: balance;
}

.hf-contact__list
{
	display: grid;
	gap: var(--hf-space-m);
	margin: 0;
	padding: 0;
	list-style: none;
}

.hf-contact__item
{
	display: flex;
	align-items: center;
	gap: var(--hf-space-s);
}

/* Icons and text as large as in the preview (about 40 / 25 px at 1440). */
.hf-contact__icon
{
	flex: none;
	width: 2.25rem;
	height: 2.25rem;
	color: var(--hf-color-icon);
}

.hf-contact__link
{
	color: var(--hf-color-heading);
	font-size: var(--hf-text-l);
	text-decoration: none;
	overflow-wrap: anywhere;
}

.hf-contact__link:hover
{
	color: var(--hf-color-primary-hover);
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

/* Tabs targeted from the arrival band land below the sticky header. */
.hf-contact .hf-contact-form__tab-input
{
	scroll-margin-top: var(--hf-space-l);
}

@media (max-width: 55.99em)
{
	.hf-contact__inner
	{
		grid-template-columns: minmax(0, 1fr);
	}

	.hf-contact__title
	{
		margin-bottom: var(--hf-space-m);
	}
}