/*
 * Kontaktformular (Phase 16, Block mr/contact-form). Nur Design-Tokens des Themes mit festen Rückfallwerten,
 * Ebene components wie die Rechner. Zielgrössen mindestens 44 px, sichtbarer Fokus 2 px, keine Animation.
 */

@layer reset, base, tokens, layout, components, utilities;

@layer components {
.mr-contact {
	box-sizing: border-box;
	max-width: 40rem;
	margin: var(--mr-space-xl, 2rem) 0;
	color: var(--mr-text, #111827);
	overflow-wrap: anywhere;
}

.mr-contact *,
.mr-contact *::before,
.mr-contact *::after {
	box-sizing: border-box;
	animation: none;
	transition: none;
}

.mr-contact__title {
	margin: 0 0 var(--mr-space-md, 1rem);
	font-size: var(--mr-fs-heading, 1.375rem);
	line-height: var(--mr-lh-heading, 1.2);
}

.mr-contact__form {
	display: grid;
	gap: var(--mr-space-lg, 1.5rem);
}

.mr-contact__field {
	display: grid;
	gap: var(--mr-space-xs, 0.25rem);
	min-width: 0;
}

.mr-contact__label {
	font-size: var(--mr-fs-body, 1rem);
	font-weight: 700;
	line-height: var(--mr-lh-small, 1.5);
}

.mr-contact__required {
	font-weight: 400;
	color: var(--mr-text-muted, #374151);
}

.mr-contact__hint,
.mr-contact__privacy {
	margin: 0;
	color: var(--mr-text-muted, #374151);
	font-size: var(--mr-fs-small, 0.875rem);
	line-height: var(--mr-lh-small, 1.5);
}

.mr-contact__error {
	margin: 0;
	color: var(--mr-error, #B91C1C);
	font-size: var(--mr-fs-small, 0.875rem);
	font-weight: 700;
	line-height: var(--mr-lh-small, 1.5);
}

.mr-contact__input,
.mr-contact__select,
.mr-contact__textarea {
	width: 100%;
	min-width: 0;
	min-height: 44px;
	padding: var(--mr-space-sm, 0.5rem) 0.75rem;
	border: 1px solid var(--mr-line-strong, #6B7280);
	border-radius: var(--mr-radius-sm, 4px);
	background: var(--mr-surface, #fff);
	color: var(--mr-text, #111827);
	font: inherit;
	font-size: var(--mr-fs-body, 1rem);
}

.mr-contact__textarea {
	min-height: 10rem;
	resize: vertical;
}

.mr-contact__input[aria-invalid="true"],
.mr-contact__select[aria-invalid="true"],
.mr-contact__textarea[aria-invalid="true"] {
	border: 2px solid var(--mr-error, #B91C1C);
}

.mr-contact__input:focus-visible,
.mr-contact__select:focus-visible,
.mr-contact__textarea:focus-visible,
.mr-contact__button:focus-visible,
.mr-contact a:focus-visible,
.mr-contact__summary:focus-visible,
.mr-contact__success:focus-visible {
	outline: 2px solid var(--mr-focus, #2563EB);
	outline-offset: 2px;
}

.mr-contact__summary,
.mr-contact__success {
	margin: 0 0 var(--mr-space-lg, 1.5rem);
	padding: var(--mr-space-md, 1rem);
	border: 2px solid var(--mr-error, #B91C1C);
	border-radius: var(--mr-radius-md, 6px);
	background: var(--mr-surface, #fff);
}

.mr-contact__success {
	border-color: var(--mr-teal, #0E7C86);
}

.mr-contact__summary-title {
	margin: 0 0 var(--mr-space-sm, 0.5rem);
	font-size: var(--mr-fs-body, 1rem);
}

.mr-contact__summary ul {
	margin: 0;
	padding-left: 1.25rem;
}

.mr-contact__summary-text {
	margin: 0;
}

.mr-contact a {
	color: var(--mr-link, #2563EB);
	text-decoration: underline;
}

.mr-contact__summary a {
	color: var(--mr-error, #B91C1C);
	display: inline-block;
	min-height: 24px;
	padding: 0.125rem 0;
}

.mr-contact__actions {
	margin: 0;
}

.mr-contact__button {
	min-height: 44px;
	min-width: 44px;
	padding: var(--mr-space-sm, 0.5rem) 1.25rem;
	border: 2px solid var(--mr-text, #111827);
	border-radius: var(--mr-radius-sm, 4px);
	background: var(--mr-text, #111827);
	color: var(--mr-surface, #fff);
	font: inherit;
	font-weight: 700;
	cursor: pointer;
}

/* Honigtopf: für Menschen unsichtbar, für Hilfsmittel nicht vorhanden. */
.mr-contact__hp {
	display: none;
}
}