/* Enquiry form, page_contact.php (/kontakt and "Jetzt anfragen" on a house).
 *
 * Its own file, linked with ?v=<mtime> by page_contact.php. style_002.css is
 * cached for a year, so rules added there would reach returning visitors long
 * after the markup they belong to.
 *
 * Built for the phone first: 95% of enquiries start on a house page, most of
 * them on a phone. One column, labels above fields, 16px text (iOS zooms into
 * anything smaller), 48px tap targets.
 */

.enq {
	--enq-ink: #1a1a1a;
	--enq-muted: #5c5c5c;
	--enq-line: #767676;       /* 4.5:1 on white; the site's #a0a0a0 is 2.6:1 */
	--enq-line-soft: #dcdcdc;
	--enq-focus: #0c51ae;      /* the site's link blue */
	--enq-error: #b3261e;
	--enq-selected: #333;      /* the site's dark button */
	--enq-radius: 8px;
	color: var(--enq-ink);
}

/* The page wrapper gave the form 24px margin plus 24px padding per side,
   leaving 279px of a 375px phone. */
@media screen and (max-width: 576px) {
	.enq-page { margin: 12px 0; }
	.enq { padding: 16px; }
}
@media screen and (min-width: 577px) {
	.enq-page { margin: 24px; }
	.enq { padding: 24px 32px 32px; }
}

/* Without a house there is only the form; a full-width card left its
   right half empty. */
.enq--solo { max-width: 680px; }

.enq__title {
	font-size: 28px;
	line-height: 1.15;
	margin: 8px 0 8px;
}
@media screen and (min-width: 577px) {
	.enq__title { font-size: 36px; }
}

.enq__lead {
	color: var(--enq-muted);
	margin: 0 0 20px;
}

.enq__layout {
	display: grid;
	gap: 20px;
}
.enq-form {
	max-width: 560px;
	min-width: 0;
}

@media screen and (min-width: 860px) {
	.enq__layout--house {
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
		gap: 48px;
		align-items: start;
	}
	.enq__layout--house .enq-house {
		position: sticky;
		top: 24px;
	}
}

/* --- The house being asked about ----------------------------------------
   A compact row on the phone, so the form starts on the first screen; the
   full photo beside the form on a wide screen. */

.enq-house {
	display: grid;
	grid-template-columns: 88px minmax(0, 1fr);
	gap: 12px;
	align-items: center;
	padding: 10px;
	border: 1px solid var(--enq-line-soft);
	border-radius: var(--enq-radius);
}
.enq-house__img {
	display: block;
	width: 88px;
	height: 66px;
	object-fit: cover;
	border-radius: 6px;
}
.enq-house__name {
	font-family: "Source Serif Pro", serif;
	font-weight: 700;
	font-size: 18px;
	line-height: 1.2;
	margin: 0 0 2px;
}
.enq-house__name a { color: inherit; }
.enq-house__meta {
	font-size: 15px;
	line-height: 1.35;
	color: var(--enq-muted);
	margin: 0;
}

@media screen and (min-width: 860px) {
	.enq-house {
		grid-template-columns: minmax(0, 1fr);
		padding: 0;
		border: 0;
		align-items: start;
	}
	.enq-house__img {
		width: 100%;
		height: auto;
		aspect-ratio: 4 / 3;
		border-radius: var(--enq-radius);
	}
	.enq-house__name { font-size: 22px; margin-top: 4px; }
	.enq-house__meta { font-size: 16px; }
}

/* --- Fields -------------------------------------------------------------- */

.enq-field {
	margin: 0 0 20px;
	padding: 0;
	border: 0;
	min-width: 0;
}
.enq-field__label {
	display: block;
	float: none;
	padding: 0;
	margin: 0 0 6px;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--enq-ink);
}
.enq-field__opt {
	font-size: 14px;
	font-weight: 400;
	color: var(--enq-muted);
}
.enq-field__hint {
	font-size: 14px;
	line-height: 1.4;
	color: var(--enq-muted);
	margin: -2px 0 8px;
}

.enq-form .enq-input {
	box-sizing: border-box;
	display: block;
	width: 100%;
	min-height: 48px;
	margin: 0;
	padding: 10px 12px;
	font-family: inherit;
	font-size: 16px;
	line-height: 1.4;
	color: var(--enq-ink);
	background: #fff;
	border: 1px solid var(--enq-line);
	border-radius: var(--enq-radius);
	-webkit-appearance: none;
	appearance: none;
}
.enq-form textarea.enq-input {
	min-height: 150px;
	resize: vertical;
}
/* iOS centres a picked date and collapses an empty date field */
.enq-form .enq-input::-webkit-date-and-time-value { text-align: left; }
.enq-form .enq-input::-webkit-datetime-edit { padding: 0; }

.enq-form .enq-input:focus {
	outline: 3px solid var(--enq-focus);
	outline-offset: 1px;
	border-color: var(--enq-focus);
}
.enq-form .enq-input[aria-invalid="true"] {
	border: 2px solid var(--enq-error);
	padding: 9px 11px;
}
.enq-field__error {
	margin: 6px 0 0;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--enq-error);
}
.enq-form__alert {
	margin: 0 0 20px;
	padding: 12px 14px;
	border: 2px solid var(--enq-error);
	border-radius: var(--enq-radius);
	font-weight: 600;
	color: var(--enq-error);
}

/* Two short fields side by side, on the phone too. */
.enq-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 12px;
}

/* --- Ja / Nein ------------------------------------------------------------
   Real radio buttons, visually replaced by two pills with the word inside,
   so the whole pill is the tap target. */

.enq-choice__options {
	display: flex;
	gap: 8px;
}
.enq-choice__option {
	position: relative;
	flex: 1 1 0;
	max-width: 96px;
	margin: 0;
	padding: 0;
	font-weight: 400;
}
.enq-choice__option input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
	margin: 0;
}
.enq-choice__option span {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 0 12px;
	font-size: 16px;
	font-weight: 600;
	border: 1px solid var(--enq-line);
	border-radius: 999px;
	background: #fff;
	cursor: pointer;
	-webkit-user-select: none;
	user-select: none;
}
.enq-choice__option input:checked + span {
	background: var(--enq-selected);
	border-color: var(--enq-selected);
	color: #fff;
}
.enq-choice__option input:focus-visible + span {
	outline: 3px solid var(--enq-focus);
	outline-offset: 2px;
}

/* --- Send ---------------------------------------------------------------- */

.enq-hp { display: none !important; }

.enq-submit {
	display: block;
	width: 100%;
	min-height: 52px;
	margin: 8px 0 12px;
}
@media screen and (min-width: 577px) {
	.enq-submit {
		display: inline-block;
		width: auto;
		min-width: 240px;
	}
}
.enq-submit:focus-visible {
	outline: 3px solid var(--enq-focus);
	outline-offset: 2px;
}

.enq-form__note,
.enq-form__privacy {
	font-size: 14px;
	line-height: 1.45;
	color: var(--enq-muted);
	margin: 0 0 12px;
}
.enq-form__privacy {
	display: flex;
	gap: 8px;
	align-items: flex-start;
}
.enq-form__privacy img {
	flex: none;
	margin-top: 1px;
}