/*
 * emo2026, form pages (page-newsletter.php, page-vertriebsanfrage.php).
 *
 * The two form-driven slug-templates live here. Both reuse the editorial
 * shell from content.css (.site-main.content + .content-hero) for the
 * page header so typography lines up with the rest of the site, then
 * layer their own form-card and field styling on top.
 *
 * Visual contract: the field/label/input/textarea/submit styling mirrors
 * .content-kontakt__* on /kontakt/ exactly so a visitor moving between
 * Kontakt → Newsletter → Vertriebsanfrage sees one consistent form
 * vocabulary. Where a form needs something Kontakt didn't (a select, a
 * checkbox-with-link, a required-marker asterisk, a narrow centered
 * card), this file adds it without re-styling the shared primitives.
 *
 * Tokens come from tokens.css. Page-local custom properties at the top
 * capture geometry that's truly form-only (card widths, card padding,
 * 2-col split for vertriebsanfrage), none belong in the global vocabulary.
 *
 * Plain CSS, no preprocessor, no nesting. Targets stable Firefox
 * (the user's debug browser), Chromium, Safari.
 */

:root {
	/* Newsletter card, narrow centered single-purpose form. */
	--forms-narrow-card-max:   480px;
	--forms-narrow-page-max:   var(--content-column-wide);

	/* Vertriebsanfrage 2-column section. Mirrors .content-kontakt
	   geometry but with an even split (50/50) since the left column
	   holds prose, not a structured info block. */
	--forms-split-max:         var(--content-column-archive);
	--forms-split-gap:         var(--space-10);

	/* Form card surface, same elevated grey + radius the contact
	   form uses. Captured as a local var so both pages can reach it
	   without re-typing the token chain. */
	--forms-card-bg:           var(--color-bg-elevated);
	--forms-card-radius:       var(--radius-card);
	--forms-card-pad:          var(--space-8);

	/* Vertical rhythm between fields inside a card, matches Kontakt. */
	--forms-field-gap:         var(--space-5);

	/* Closing trust line / "Lieber direkt sprechen?" row. */
	--forms-meta-pad-top:      var(--space-6);
	--forms-closing-pad-top:   var(--space-10);
	--forms-closing-pad-bottom: var(--space-10);
}

/* ============================================================
 * Shared form primitives.
 *
 * Class naming intentionally parallels .content-kontakt__* so the
 * two contact-style forms (kontakt + vertriebsanfrage) and the
 * single-field newsletter form all read from the same vocabulary
 * for labels/inputs/buttons. The .forms-* prefix scopes the new
 * controls (select, checkbox, required-marker) without leaking
 * into .content-kontakt's own selectors.
 * ============================================================ */

.forms-card {
	display: flex;
	flex-direction: column;
	gap: var(--forms-field-gap);
	padding: var(--forms-card-pad);
	background-color: var(--forms-card-bg);
	border-radius: var(--forms-card-radius);
	/* No global border-box reset in this theme: without this, the
	 * newsletter card's width:100% + padding overflowed the page gutter
	 * by 6px per side at 375px. */
	box-sizing: border-box;
}

.forms-field {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}

/* Honeypot: invisible to people, present for bots. Not display:none so
   the field keeps existing for autofill-style bots that check. Mirrors
   .content-kontakt__field--hp on /kontakt/. */
.forms-field--hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.forms-label {
	font-family: var(--font-sans);
	font-size: var(--font-size-14);
	font-weight: 600;
	letter-spacing: var(--letter-spacing-wide);
	text-transform: uppercase;
	color: var(--color-text-secondary);
}

/* Visible "*" marker on required-field labels. The same span carries
   a screen-reader-only suffix ("(Pflichtfeld)") so AT users hear the
   requirement explicitly rather than parsing punctuation. */
.forms-required {
	margin-left: var(--space-1);
	color: var(--color-text-primary);
	font-weight: 600;
}

/* Key to the "*" marker, once per form, above the first field. */
.forms-legend {
	margin: 0 0 var(--space-4);
	font-size: var(--font-size-14);
	color: var(--color-text-secondary);
}

.forms-legend .forms-required {
	margin-left: 0;
}

.forms-input,
.forms-textarea,
.forms-select {
	font-family: var(--font-sans);
	font-size: var(--font-size-18);
	line-height: var(--line-height-base);
	color: var(--color-text-primary);
	padding: var(--space-3) var(--space-4);
	background-color: var(--color-bg-base);
	border: 1px solid var(--color-border-hairline);
	border-radius: var(--radius-md);
	transition: border-color var(--motion-duration-fast) var(--motion-ease-standard),
		box-shadow var(--motion-duration-fast) var(--motion-ease-standard);
}

.forms-textarea {
	min-height: 160px;
	resize: vertical;
}

/* Native select gets a custom chevron, Apple-clean, single dropdown
   icon on the right. We use a data-URI so there's no extra HTTP request
   and no PNG to ship. The chevron is a simple SVG path drawn in the
   secondary text color. */
.forms-select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	padding-right: var(--space-9);
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='none' stroke='%236e6e73' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M1 1l5 5 5-5'/></svg>");
	background-repeat: no-repeat;
	background-position: right var(--space-4) center;
	background-size: 12px 8px;
}

.forms-input:focus,
.forms-textarea:focus,
.forms-select:focus {
	outline: 0;
	border-color: var(--color-link);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-link) 18%, transparent);
}

/* Inline validation (spec 8): :user-invalid fires only after the user
   has interacted with a field, so the error appears next to the control
   while filling, never on pristine forms and without any JS. Covers the
   kontakt form's own input classes too, forms.css loads on all three
   form pages. */
.forms-input:user-invalid,
.forms-textarea:user-invalid,
.forms-select:user-invalid,
.content-kontakt__input:user-invalid,
.content-kontakt__textarea:user-invalid {
	border-color: var(--color-danger);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-danger) 12%, transparent);
}

/* Datenschutz consent, checkbox sits inline with a wrapping label that
   contains a /datenschutz/ link. The checkbox is left-aligned and the
   text wraps below long copy without indenting under the box. */
.forms-consent {
	display: flex;
	align-items: flex-start;
	gap: var(--space-3);
	font-family: var(--font-sans);
	font-size: var(--font-size-16);
	line-height: var(--line-height-base);
	color: var(--color-text-secondary);
}

.forms-consent__box {
	/* Pull the checkbox down a hair so its visual center aligns with
	   the cap-height of the first text line, without this the box
	   sits a couple of pixels too high in Firefox. */
	margin-top: 3px;
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	accent-color: var(--color-link);
	cursor: pointer;
}

.forms-consent__text {
	cursor: pointer;
}

.forms-consent__text a {
	color: var(--color-link);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: border-color var(--motion-duration-fast) var(--motion-ease-standard);
}

.forms-consent__text a:hover,
.forms-consent__text a:focus-visible {
	border-bottom-color: var(--color-link);
}

/* Submit button, same pill shape and motion as the kontakt form, but
   sits centered on the narrow newsletter card and left-aligned (default)
   on the wider vertriebsanfrage card. The flag classes below opt in to
   each placement; default is align-self: flex-start to match Kontakt. */
.forms-submit {
	align-self: flex-start;
	display: inline-flex;
	align-items: baseline;
	gap: var(--space-2);
	padding: var(--space-3) var(--space-7);
	font-family: var(--font-sans);
	font-size: var(--font-size-18);
	font-weight: 500;
	color: var(--color-cta-ink);
	/* CTA fill, rides the --color-cta vocabulary (Apple filled-button
	   blue by default; the design variants remap it to their styleguide
	   "Button 2" accent). */
	background-color: var(--color-cta);
	border: 0;
	border-radius: var(--radius-control);
	cursor: pointer;
	transition: background-color var(--motion-duration-fast) var(--motion-ease-standard),
		transform var(--motion-duration-fast) var(--motion-ease-standard);
}

.forms-submit:hover,
.forms-submit:focus-visible {
	background-color: var(--color-cta-hover);
}

.forms-submit:focus-visible {
	outline: 2px solid var(--color-link);
	outline-offset: 4px;
}

/* Pointer-down feedback (spec 1); press duration inside :active so the
   press snaps while the release eases back via the base transition. */
.forms-submit:active {
	background-color: color-mix(in srgb, var(--color-cta) 88%, #000);
	transform: scale(0.98);
	transition-duration: var(--motion-duration-press);
}

/* In-flight state, set by the inline submit script on the form pages.
   The button is disabled then, so the dim carries the message. */
.forms-submit.is-sending,
.content-kontakt__submit.is-sending {
	opacity: 0.6;
	cursor: default;
}

.forms-submit--center {
	align-self: center;
}

/* ============================================================
 * Newsletter, single centered narrow card.
 * ============================================================ */

.forms-newsletter {
	max-width: var(--forms-narrow-page-max);
	margin: var(--space-9) auto 0;
	padding: 0 var(--content-gutter);
	display: flex;
	flex-direction: column;
	align-items: center;
}

.forms-newsletter__card {
	width: 100%;
	max-width: var(--forms-narrow-card-max);
	/* Flex child of the centered column: min-width defaults to auto, so the
	 * email input's intrinsic width pushed the card 6px past the page gutter
	 * on both sides at 375px. */
	min-width: 0;
}

.forms-newsletter__card .forms-input {
	width: 100%;
	min-width: 0;
	box-sizing: border-box;
}

.forms-newsletter__trust {
	max-width: var(--forms-narrow-card-max);
	margin: var(--space-6) auto 0;
	font-family: var(--font-sans);
	font-size: var(--font-size-14);
	line-height: var(--line-height-base);
	color: var(--color-text-muted);
	text-align: center;
}

/* ============================================================
 * Vertriebsanfrage, 2-column intro + form, then closing block.
 * Mirrors .content-kontakt geometry but with a 50/50 split since
 * the left column is prose, not a structured info block.
 * ============================================================ */

.forms-vertrieb {
	max-width: var(--forms-split-max);
	margin: var(--space-9) auto 0;
	padding: 0 var(--content-gutter);
	display: grid;
	grid-template-columns: 1fr 1.2fr;
	gap: var(--forms-split-gap);
	align-items: start;
}

.forms-vertrieb__intro {
	font-family: var(--font-sans);
	font-size: var(--font-size-21);
	line-height: var(--line-height-loose);
	color: var(--color-text-secondary);
}

.forms-vertrieb__intro p {
	margin: 0;
}

.forms-vertrieb__intro p + p {
	margin-top: var(--space-4);
}

.forms-vertrieb__form {
	width: 100%;
}

/* "Lieber direkt sprechen?" row sits below the form inside the right
   column, same scale as the trust line on the newsletter page. */
.forms-vertrieb__direct {
	margin-top: var(--forms-meta-pad-top);
	font-family: var(--font-sans);
	font-size: var(--font-size-14);
	line-height: var(--line-height-base);
	color: var(--color-text-muted);
}

.forms-vertrieb__direct-label {
	font-weight: 600;
	color: var(--color-text-secondary);
}

.forms-vertrieb__direct a {
	color: var(--color-link);
	text-decoration: none;
}

.forms-vertrieb__direct a:hover,
.forms-vertrieb__direct a:focus-visible {
	text-decoration: underline;
}

.forms-vertrieb__direct-sep {
	margin: 0 var(--space-2);
	color: var(--color-border-hairline);
}

/* Closing block below the 2-column section, single sentence + alt
   contact methods, centered, muted. */
.forms-closing {
	max-width: var(--content-column-narrow);
	margin: var(--forms-closing-pad-top) auto 0;
	padding: var(--forms-closing-pad-top) var(--content-gutter) 0;
	border-top: 1px solid var(--color-border-hairline);
	font-family: var(--font-sans);
	font-size: var(--font-size-18);
	line-height: var(--line-height-loose);
	color: var(--color-text-secondary);
	text-align: center;
}

.forms-closing a {
	color: var(--color-link);
	text-decoration: none;
}

.forms-closing a:hover,
.forms-closing a:focus-visible {
	text-decoration: underline;
}

/* ============================================================
 * Responsive, match the chrome breakpoint at 833px.
 * Vertriebsanfrage collapses to single column with the FORM
 * column first (per spec) so visitors on phones land on the
 * actionable form, not the intro paragraph.
 * ============================================================ */

@media (max-width: 833px) {
	:root {
		--forms-card-pad:           var(--space-6);
		--forms-split-gap:          var(--space-7);
		--forms-closing-pad-top:    var(--space-7);
		--forms-closing-pad-bottom: var(--space-7);
	}

	.forms-vertrieb {
		grid-template-columns: 1fr;
		gap: var(--space-7);
	}

	/* Form-first stacking: the form column is source-order #2, so flip
	   it to visual #1 on narrow viewports. The intro paragraph slides
	   underneath. */
	.forms-vertrieb__form-col {
		order: 1;
	}

	.forms-vertrieb__intro-col {
		order: 2;
	}
}

/* ============================================================
 * Reduced motion, disable focus/hover transitions.
 * ============================================================ */

@media (prefers-reduced-motion: reduce) {
	.forms-input,
	.forms-textarea,
	.forms-select,
	.forms-submit,
	.forms-consent__text a {
		transition: none;
	}

	/* No press transform under reduced motion; the darkened fill
	   keeps the pointer-down feedback (spec 7). */
	.forms-submit:active {
		transform: none;
	}
}

/* ============================================================
 * a11y, supplemental focus indicators.
 *
 * The .forms-input / .forms-textarea / .forms-select rules above already
 * draw a soft blue glow ring on :focus, which is the visual we want for
 * mouse and keyboard focus alike. That box-shadow ring is invisible in
 * Windows High-Contrast Mode (forced-colors) because it isn't a real
 * outline, so we layer a transparent outline that the OS can repaint.
 *
 * The consent checkbox and consent link both gain explicit outlines
 * because the existing rules only added a border-color shift, which
 * keyboard users with a cursor parked elsewhere on the page would miss.
 *
 * The submit button outline above already covers the "Anmelden / Senden"
 * CTA; we only add the consent + checkbox here.
 * ============================================================ */

.forms-input:focus-visible,
.forms-textarea:focus-visible,
.forms-select:focus-visible {
	outline: 2px solid transparent; /* forced-colors fallback */
}

.forms-consent__box:focus-visible {
	outline: 2px solid var(--color-link);
	outline-offset: 2px;
	border-radius: var(--radius-sm);
}

.forms-consent__text a:focus-visible {
	outline: 2px solid var(--color-link);
	outline-offset: 2px;
	border-radius: var(--radius-sm);
}

.forms-vertrieb__direct a:focus-visible,
.forms-closing a:focus-visible {
	outline: 2px solid var(--color-link);
	outline-offset: 2px;
	border-radius: var(--radius-sm);
}