/* -------------------------------------------------- */
/* Kontakt                                              */
/* -------------------------------------------------- */

/* The section used to be a full-bleed 50/50 split with a photo filling the
   right half. With the photo gone it is an ordinary contained section: the
   form carries the page and the contact details sit beside it, so someone who
   just wants an address doesn't have to read a form to find one. */
.kontakt-layout {
	display: grid;
	grid-template-columns: 2fr 1fr;
	gap: 4rem;
	align-items: start;
}

.kontakt-form {
	--radius-child: var(--radius-nested);

	background: #fff;
	border: var(--border-hairline);
	border-radius: var(--radius);
	padding: 3rem;
	box-shadow: var(--shadow-card);
}

.kontakt-form form p {
	margin-bottom: 1.25rem;
}

.kontakt-form label {
	display: block;
	font-size: var(--text-sm);
	font-weight: 700;
	color: var(--color-ink);
}

.kontakt-form input[type="text"],
.kontakt-form input[type="email"],
.kontakt-form input[type="tel"],
.kontakt-form textarea {
	width: 100%;
	margin-top: 0.4em;
	border: var(--border-hairline);
	background: var(--color-bg-alt);
	border-radius: var(--radius-child);
	padding: 0.9em 1.2em;
	font: inherit;
}

.kontakt-form input:focus,
.kontakt-form textarea:focus {
	outline: 2px solid var(--color-gradient-start);
	outline-offset: 1px;
	background: #fff;
}

.kontakt-form textarea {
	min-height: 140px;
	resize: vertical;
}

.kontakt-form .wpcf7-submit {
	display: inline-block;
	background: linear-gradient(var(--gradient-angle), var(--color-gradient-start), var(--color-gradient-end));
	color: #fff;
	font-family: var(--font-display);
	font-size: var(--text-sm);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	padding: 0.9em 1.8em;
	border-radius: var(--radius-nested);
	border: 0;
	cursor: pointer;
	/* Same gradient recipe as .btn[data-kontakt-modal] (02-buttons.css), so
	   it gets the same hover feedback too — this button isn't built from
	   that class (Contact Form 7 renders its own <input>), so the lift +
	   shadow has to be repeated here rather than inherited. */
	box-shadow: 0 8px 20px -8px rgba(62, 60, 144, 0.6);
	transition: transform var(--transition), box-shadow var(--transition);
}

.kontakt-form .wpcf7-submit:hover {
	transform: translateY(var(--hover-lift-control));
	box-shadow: 0 12px 24px -8px rgba(62, 60, 144, 0.7);
}

/* Details column */

/* letsdoo_render_hub_mark() (inc/template-helpers.php) inlined — same brand
   accent the header/footer carry, small and left-aligned above the "Direkt
   erreichen" heading rather than centred like the header's, since this
   column is itself left-aligned text. Shared by the Kontakt page's own aside
   and the identical one in template-parts/kontakt-modal.php — one rule for
   both since the markup is the same in each. No width/height on the SVG
   itself (only viewBox, see 03-header.css's own note on this), so sizing it
   is this rule's job, same pattern used everywhere else it's inlined. */
/* Logo beside the company name now, not stacked above the whole block —
   the row carries the bottom margin that used to live on .kontakt-infos__firma
   itself, since that paragraph is no longer the last word on spacing before
   the address list starts. */
.kontakt-infos__firma-row {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-bottom: 2rem;
}

.kontakt-infos__mark {
	flex: none;
}

.kontakt-infos__mark svg {
	display: block;
	width: auto;
	height: 80px;
}

.kontakt-infos__firma {
	font-weight: 700;
	color: var(--color-ink);
	margin: 0;
}

.kontakt-info-liste {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 1.5rem;
}

/* Icon spans both rows so the label and value stack to its right. */
.kontakt-info {
	--radius-child: var(--radius-nested);

	display: grid;
	grid-template-columns: auto 1fr;
	column-gap: 1.25rem;
	align-items: center;
	background: #fff;
	border: var(--border-hairline);
	border-radius: var(--radius);
	padding: 1.5rem;
}

.kontakt-info__icon {
	grid-row: 1 / span 2;
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	border-radius: var(--radius-child);
	background: var(--color-gradient-end);
	color: #fff;
}

.kontakt-info__label {
	grid-column: 2;
	font-size: var(--text-2xs);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: #8a8a8a;
}

.kontakt-info__wert {
	grid-column: 2;
	color: var(--color-ink);
	font-size: var(--text-sm);
	text-decoration: none;
}

a.kontakt-info__wert:hover {
	color: var(--color-gradient-start);
}