/* ENQUIRY FORM — .db-form  (contact, wine-catering = 2)
   Markup and styling only. There is NO backend: the prototype's form was
   action="#" and nothing has been built since. Wire a handler (plugin or a
   custom REST endpoint) before this goes anywhere near production, and add
   spam protection — see RELAUNCH-NOTES.md §6. */
/* Two columns from 861px: a fixed 476px head (title + lead) with the fields
   filling the rest, 120px apart. The first build was a single column with a
   5rem title. Both prototype instances agree on the two-column shape —
   .ct-form-sec (Kontakt) and .wc-contact (Wein) — at 476px / 120px / 3.75rem,
   so this is the base rather than a variant. Their remaining differences are
   small and noted at the bottom of this file. */
.db-form .db-form__inner { display: flex; flex-direction: column; gap: 32px; padding-block: 40px; }
.db-form .db-form__head { display: flex; flex-direction: column; gap: 16px; }
.db-form__title { font-size: clamp(1.5rem, 8vw, 3.75rem); line-height: 1.1; }
.db-form__lead { font-size: 16px; line-height: 1.75; color: var(--muted); max-width: 36ch; margin: 0; }
.db-form__form { min-width: 0; }
.db-form__grid { display: grid; grid-template-columns: 1fr; gap: 24px; }

/* ---- fields ---------------------------------------------------------------
   REBUILT 2026-08-08 (§9.46). The field model was wrong end to end: a two-up
   grid of boxed inputs on white with a label ABOVE each, and six inputs where the
   design has four. Figma 368:2372 and the prototype's `.wc-form` agree exactly:

     row     two fields side by side, 40px apart [368:2373 gap 40]
     field   ONE underlined row holding the label and the input side by side,
             `padding-block: 8`, bottom border only [EL-1f6eb53d]
     fields  Firma · Name* · E-Mail* · Telefon* — and nothing else
     area    the one full box: 1px border, padding 12/20, 202 tall [368:2384]
     consent a real 24×24 checkbox with the privacy text [368:2388]

   The invented Datum / Personenzahl / Art-der-Veranstaltung inputs are gone; they
   were never in the frame. */
.db-form__form { display: flex; flex-direction: column; gap: 16px; }
.db-form__row { display: flex; flex-direction: column; gap: 16px; }

/* Each field is wrapped so its error message can sit BELOW the underline. The
   field itself is a row (label beside input) with the border on it, so an error
   inside it would land on the same line, above the rule. */
.db-form__group { display: flex; flex-direction: column; gap: 6px; margin: 0; min-width: 0; }

.db-form__field {
	display: flex;
	align-items: center;
	gap: 16px;
	padding-block: 8px;
	border-bottom: 1px solid var(--line);
	margin: 0;
}

.db-form__label {
	flex: 0 0 auto;
	font-weight: 300;
	font-size: 16px;
	line-height: 1.75;
	color: var(--muted);
	white-space: nowrap;
	/* not the uppercase display face the old model used — the design's field
	   labels are body copy, indistinguishable from a placeholder */
	font-family: var(--font-body);
	text-transform: none;
}
.db-form__req { color: var(--gold); }

.db-form__input {
	flex: 1 1 auto;
	width: 100%;
	min-width: 0;
	padding: 0;
	font-family: var(--font-body);
	font-weight: 300;
	font-size: 16px;
	line-height: 1.75;
	color: var(--ink);
	background: transparent;
	border: 0;
	border-radius: 0;
}
.db-form__input::placeholder { color: var(--muted); }
.db-form__input:focus { outline: none; }
.db-form__field:focus-within { border-bottom-color: var(--ink); }

/* ---- inline errors --------------------------------------------------------
   No native bubble: the form carries `novalidate` and form-validation.js renders
   the message into the page instead. Client asked for this directly — the browser
   bubble is positioned by the browser, styled by the browser, disappears on the
   next click, and is localised to the browser rather than the page.

   The element is always present so nothing reflows when a message appears, and
   it is aria-live so a screen reader announces it without stealing focus. */
.db-form__error {
	display: block;
	font-size: 14px;
	line-height: 1.4;
	color: #B3261E;
}
.db-form__error:empty { display: none; }

.db-form__field.is-invalid { border-bottom-color: #B3261E; }
.db-form__field--area.is-invalid { border-color: #B3261E; }
.db-form__consent.is-invalid .db-form__box { border-color: #B3261E; }

.db-form__field--area {
	align-items: stretch;
	padding: 12px 20px;
	border: 1px solid var(--line);
}
.db-form__field--area .db-form__input { min-height: 202px; resize: vertical; }
/* The Kontakt frame's wish box is 100 tall (368:3273), not the wine page's 202.
   Keyed on the field name rather than a page class — the two forms differ only
   in this one box, and both share every other rule in this file. */
.db-form__field--area .db-form__input[name="wuensche"] { min-height: 100px; }
.db-form__field--area:focus-within { border-color: var(--ink); }

/* label kept for screen readers where the design shows only a placeholder */
.db-form__sr {
	position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---- consent -------------------------------------------------------------- */
.db-form__consent { display: flex; align-items: flex-start; gap: 12px; margin: 8px 0 0; }
.db-form__box {
	position: relative;
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
	margin: 0;
	-webkit-appearance: none;
	appearance: none;
	background: transparent;
	border: 1px solid var(--line);
	border-radius: 0;
	cursor: pointer;
}
.db-form__box:checked::after {
	content: "";
	position: absolute;
	left: 8px;
	top: 3px;
	width: 6px;
	height: 12px;
	border: solid var(--gold);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}
.db-form__box:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.db-form__consent-text { font-weight: 300; font-size: 14px; line-height: 1.45; color: var(--muted); }

.db-form__submit { align-self: flex-start; margin-top: 8px; }
/* The "no backend" note is gone — there IS a backend now (§9.47), and the frame
   never had that line under the button. */

/* Result banner, printed above the form from the redirect flag. */
.db-form__notice {
	margin: 0 0 24px;
	padding: 12px 20px;
	font-size: 16px;
	line-height: 1.6;
	border: 1px solid var(--line);
}
.db-form__notice--ok  { border-color: var(--gold); color: var(--ink); }
.db-form__notice--err { border-color: #B3261E; color: #B3261E; }

/* Honeypot. Off-screen rather than display:none — some bots skip hidden inputs,
   and a real user never reaches it because it is also aria-hidden and untabbable. */
.db-form__trap {
	position: absolute !important;
	left: -9999px !important;
	width: 1px; height: 1px; overflow: hidden;
}

@media (min-width: 861px) {
	/* Two columns 120 apart, the head hugging at 476 [368:2367 gap 120,
	   368:2369 width 476]. Restored here after the field rebuild replaced the
	   block these lived in. */
	/* flex-start, not center. The head is a hugging column in the frame
	   [368:2368] and the row does not centre it — client reported the title
	   sitting mid-height instead of at the top. */
	.db-form .db-form__inner { flex-direction: row; gap: 120px; padding-block: 120px; align-items: flex-start; }
	.db-form .db-form__head { flex: 0 0 476px; gap: 24px; }
	.db-form__title { font-size: 3.75rem; line-height: 1.1333; }
	.db-form__lead { max-width: 324px; }
	.db-form__form { flex: 1 1 auto; }

	/* two fields per row, 40 apart [368:2373] */
	.db-form__row { flex-direction: row; gap: 40px; }
	.db-form__row .db-form__group { flex: 1; min-width: 0; }
}

/* ---- add-on checkboxes and the contact page's intro band (§9.58) ----------
   368:3276 is three two-row columns 80 apart; the consent row and the button
   below them are the same 24px stack the wine form already uses. */
.db-form__extras {
	display: grid;
	grid-template-columns: 1fr;
	gap: 8px 80px;
	margin: 0;
	padding: 0;
	border: 0;
}
.db-form__check { display: flex; align-items: center; gap: 12px; font-weight: 300; font-size: 16px; line-height: 28px; color: var(--muted); cursor: pointer; }
.db-form__check .db-form__box { flex: 0 0 24px; width: 24px; height: 24px; }

/* The frame's select and date/time fields are the same underline row as a text
   input — the browser's own control chrome has to be taken off. */
/* ⚠️ `appearance: none` belongs to the SELECT only. On a date or time input it
   also flattens `::-webkit-calendar-picker-indicator` into a full-width
   invisible overlay — the glyph disappears and no background-image can bring it
   back, which is exactly what happened here. The two fields keep their native
   chrome and only the picker button is restyled below. */
.db-form__field select.db-form__input {
	appearance: none;
	-webkit-appearance: none;
	background: transparent;
	color: var(--ink);
}
.db-form__field input[type="date"].db-form__input,
.db-form__field input[type="time"].db-form__input {
	background: transparent;
	color: var(--ink);
}
/* ⚠️ The date and time fields keep the BROWSER'S OWN picker — the frame's
   calendar and clock are affordances on a native control, not a widget. Styling
   `::-webkit-calendar-picker-indicator` swaps the glyph without taking the click
   target away, so there is no JS and no `showPicker()` shim; Firefox, which has
   no such pseudo-element, simply keeps its own affordance. `appearance: none`
   above strips the field's chrome, not this button. */
.db-form__field--date .db-form__input::-webkit-calendar-picker-indicator,
.db-form__field--time .db-form__input::-webkit-calendar-picker-indicator {
	width: 24px;
	height: 24px;
	margin: 0;
	padding: 0;
	opacity: 1;
	cursor: pointer;
	background-position: center;
	background-repeat: no-repeat;
	background-size: 24px 24px;
}
.db-form__field--date .db-form__input::-webkit-calendar-picker-indicator {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%2325201E' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E");
}
.db-form__field--time .db-form__input::-webkit-calendar-picker-indicator {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%2325201E' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");
}

.db-form__field--select { position: relative; }
.db-form__field--select::after {
	content: "";
	flex: 0 0 24px;
	width: 24px;
	height: 24px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%2325201E' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / 24px 24px no-repeat;
	pointer-events: none;
}

/* ---- contact intro band  (.db-contact-intro) -----------------------------
   368:3231: a 476 column of heading + copy beside a 545px image, 120 apart,
   closed by a hairline. */
.db-contact-intro { border-bottom: 1px solid var(--line2); }
.db-contact-intro .db-contact-intro__inner { display: flex; flex-direction: column; gap: 32px; padding-block: 40px; }
.db-contact-intro__text { display: flex; flex-direction: column; gap: 16px; }
.db-contact-intro__title { font-size: 1.5rem; line-height: 32px; }
.db-contact-intro__lead { font-weight: 300; font-size: 16px; line-height: 28px; color: var(--muted); }
.db-contact-intro__media { margin: 0; }
.db-contact-intro__media img { width: 100%; height: 240px; object-fit: cover; }

@media (min-width: 861px) {
	/* Three columns of two, filled DOWN then across (368:3277 is a row of three
	   two-item columns) — row-major would put Brot, Kalte/warme and Service on
	   the first line instead. */
	.db-form__extras {
		grid-template-columns: none;
		grid-template-rows: repeat(2, auto);
		grid-auto-flow: column;
		grid-auto-columns: max-content;
	}

	.db-contact-intro .db-contact-intro__inner {
		flex-direction: row;
		align-items: flex-start;
		gap: 120px;
		padding-block: 120px;
	}
	.db-contact-intro__text { flex: 0 0 476px; gap: 24px; }
	.db-contact-intro__title { font-size: 3.75rem; line-height: 68px; }
	.db-contact-intro__media { flex: 1 1 auto; min-width: 0; }
	.db-contact-intro__media img { height: 545px; }
}