/*
 * Pferdetherapie Hanisch
 * Individueller Seiteninhalt | Kontakt
 * Seitenspezifische Inhalte, Layouts und deren Animationen.
 */

/* Kontaktbereich */


/* Gemeinsame Formularbeschriftung für Kontakt und Buchung. */
.contact-form-eyebrow {
	margin: 0 0 28px;
	color: var(--olive);
	font-size: .7rem;
	font-weight: 600;
	letter-spacing: .19em;
	text-transform: uppercase;
	padding-bottom: 19px;
	
	border-bottom: 1px solid var(--beige);
}


/* Formularlayout */
.contact-form-wrap {
	min-width: 0;
	padding: clamp(25px, 4vw, 50px);
	background: rgba(255, 255, 255, .67);
	border: 1px solid var(--line);
}


.contact-form {
	--field-normal-bg: var(--bg);
	--field-error-bg: #fff0ef;
	--field-autofill-bg: #faffbd;
	--field-outside-bg: color-mix(in srgb, white 67%, var(--bg) 33%);
}

.form-grid {
	min-width: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 19px;
}

.form-wide {
	grid-column: 1 / -1;
}

.form-field {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.form-field label {
	color: var(--olive);
	font-size: .85rem;
	font-weight: 600;
}

/* Eingabefelder und Safari-Date/Time-Rahmen haben dieselben Außenmaße. */
.form-field> :is(input, select, textarea),
.form-field>.native-input-frame {
	box-sizing: border-box;
	min-width: 0;
	width: 100%;
	max-width: 100%;
	border: 1px solid var(--line);
	border-radius: 2px;
	background: var(--field-normal-bg, var(--bg));
	color: var(--text);
}

.form-field> :is(input, select, textarea) {
	min-height: 46px;
	padding: 10px 12px;
	font: inherit;
}

.form-field textarea {
	resize: vertical;
}

.native-input-frame {
	position: relative;
	display: block;
	height: 46px;
	overflow: hidden;
}

.form-field>.native-input-frame>input {
	position: absolute;
	inset: 0;
	box-sizing: border-box;
	width: 100%;
	min-width: 0;
	max-width: 100%;
	height: 100%;
	min-height: 0;
	margin: 0;
	padding: 0 12px;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: var(--text);
	font: inherit;
	text-align: center;
}

/* Safari zeichnet den angezeigten Wert innerhalb des nativen Eingabefeldes. */
.native-input-frame>input::-webkit-date-and-time-value,
.native-input-frame>input::-webkit-datetime-edit {
	text-align: left;
}

/* Schwebende Beschriftung; die 26px erhalten den bisherigen Platz oberhalb des Feldes. */
.contact-form .form-grid>.form-field {
	--field-current-bg: var(--field-normal-bg);
	position: relative;
	padding-top: 26px;
	gap: 0;
}

.contact-form .form-grid>.form-field>label {
	position: absolute;
	z-index: 2;
	top: 49px;
	left: 12px;
	max-width: calc(100% - 24px);
	padding: 0 4px;
	margin-left: -4px;
	transform: translateY(-50%);
	transform-origin: left center;
	background: var(--field-current-bg);
	cursor: text;
	transition: top .5s ease, transform .5s ease, background .5s ease;
}

.contact-form .form-grid>.form-field:is(
    :focus-within,
    .has-value,
    :has(> input:-webkit-autofill),
    :has(> input:autofill)
	)>label {
	top: 26px;
	transform: translateY(-50%) scale(.88);
	background: linear-gradient(to bottom,
			var(--field-outside-bg) 0 50%,
			var(--field-current-bg) 50% 100%);
}

.contact-form .form-grid>.form-field>.field-error {
	margin-top: 8px;
}

.contact-form .form-field:not(:focus-within):not(.has-value) .native-input-frame>input::-webkit-datetime-edit {
	color: transparent;
}

/* Autofill-Farbe wird kontrolliert gesetzt, damit Beschriftung und Feld übereinstimmen. */
.contact-form .form-field:has(> input:-webkit-autofill) {
	--field-current-bg: var(--field-autofill-bg);
}

.contact-form .form-field>input:-webkit-autofill {
	-webkit-box-shadow: 0 0 0 1000px var(--field-autofill-bg) inset !important;
}

/* Bei ungültigen Eingaben hat die Fehlermarkierung Vorrang vor Autofill. */
.contact-form .form-field:has([aria-invalid="true"]) {
	--field-current-bg: var(--field-error-bg);
}

.form-field> :is(input, select, textarea)[aria-invalid="true"],
.native-input-frame:has(> input[aria-invalid="true"]) {
	border-color: #a52f2f;
	background: var(--field-error-bg, #fff0ef);
}

.contact-form .form-field>input:-webkit-autofill[aria-invalid="true"] {
	-webkit-box-shadow: 0 0 0 1000px var(--field-error-bg) inset !important;
}

.field-error {
	color: #8b332c;
	font-size: .85rem;
	line-height: 1.4;
}

.field-error[hidden] {
	display: none;
}

/* Kein zusätzlicher äußerer Fokusrahmen; Rand und Fehlerzustand bleiben sichtbar. */
.contact-form .form-field> :is(input, select, textarea):is(:focus, :focus-visible),
.contact-form .form-field>.native-input-frame:focus-within,
.contact-form .form-field>.native-input-frame>input:focus-visible {
	outline: none !important;
	box-shadow: none !important;
}

/* Autofill benötigt den inneren Farbschatten auch während des Fokus. */
.contact-form .form-field>input:-webkit-autofill:is(:focus, :focus-visible) {
	-webkit-box-shadow: 0 0 0 1000px var(--field-current-bg) inset !important;
}

.contact-form .button {
	margin-top: 25px;
	cursor: pointer;
}

.contact-form .button:disabled {
	opacity: .6;
	cursor: wait;
}

.form-status {
	min-height: 1.5em;
	line-height: 1.5;
	color: var(--olive);
}

.form-status[data-error="true"] {
	color: #8b332c;
}

.form-trap {
	position: absolute;
	left: -10000px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}


@media (max-width: 700px) {


.contact-form-wrap {
		padding: 24px 18px;
	}

	.form-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.form-wide {
		grid-column: 1;
	}

	/* 16px verhindert die automatische Eingabe-Vergrößerung auf iPhones. */
	.form-field> :is(input, select, textarea),
	.form-field>.native-input-frame>input {
		font-size: 16px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.contact-form .form-grid>.form-field>label {
		transition: none;
	}
}


/* Gemeinsame Inhaltsgrundlagen stehen in styles.css. */


/* Kontaktboxen: Typografie und Abstände entsprechen den Vorschau-Boxen. */
.contact-editorial {
	max-width: none;
	margin: 0;
	display: grid;
	gap: 24px;
	--contact-surface: rgba(255, 255, 255, .67);
	--contact-text-size: var(--content-text-size);
	--contact-text-leading: var(--content-text-leading);
	font-size: var(--contact-text-size);
	line-height: var(--contact-text-leading);
}

.contact-content-box {
	min-width: 0;
	padding: 30px;
	border: 1px solid rgba(192, 151, 94, .16);
	border-radius: 4px;
	background: rgba(238, 234, 230, .58);
}

.contact-editorial .contact-box-heading {
	text-align: center;
}

.contact-editorial .contact-box-eyebrow {
	max-width: none;
	margin: 0 0 8px;
	font-size: var(--content-eyebrow-size);
	line-height: 1.8;
	font-weight: 500;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--beige);
}

.contact-editorial .contact-box-heading h3 {
	color: var(--text);
	font-weight: 400;
	line-height: 1.05;
	letter-spacing: normal;
	font-size: var(--content-heading-size);
}

.contact-heading-rule {
	width: 56px;
	height: 1px;
	margin: 18px auto 0;
	background: var(--beige);
}

.contact-editorial .contact-opening-text {
	max-width: 65ch;
	margin: 30px auto 0;
	text-align: center;
	color: var(--text);
}

/* Kontaktkarten: Raster, gleich hohe Flächen und responsive Trennlinien. */
.contact-direct {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 32px;
	margin: 30px 0 0;
	grid-auto-rows: 1fr;
}

.contact-direct-content>span:first-child {
	display: block;
	color: var(--muted);
	font-size: .7rem;
	margin-bottom: 8px;
}

.contact-direct strong {
	color: var(--olive);
	font-size: .83rem;
	font-weight: 500;
	overflow-wrap: anywhere;
}

.contact-direct-content {
	margin: -3px -20px -3px -10px;
	padding: 3px 20px 3px 10px;
}

.contact-direct> :is(a, div) {
	position: relative;
	padding: 20px 20px 20px 10px;
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
	min-width: 0;
	background: linear-gradient(to bottom, transparent 9px, var(--contact-surface) 9px, var(--contact-surface) calc(100% - 9px), transparent calc(100% - 9px));
	background-origin: border-box;
}

@media(max-width:1023px) {
	.contact-direct {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 20px;
		row-gap: 0;
	}

	.contact-direct> :is(a, div):nth-child(n+3) {
		border-top: 0;
	}

}

@media(max-width:700px) {
	.contact-direct {
		grid-template-columns: 1fr;
		gap: 0;
	}

	.contact-direct> :is(a, div)+:is(a, div) {
		border-top: 0;
	}

	.contact-direct> :is(a, div):nth-child(n+2) {
		border-top: 0;
	}

}


/* Deine Nachricht: Grundlayout und responsive Abstände an einer Stelle. */
.contact-request {
	display: grid;
	grid-template-columns: minmax(0, .8fr) minmax(0, 1.25fr);
	gap: clamp(40px, 7vw, 90px);
	align-items: start;
	margin-top: 30px;
}

@media(max-width:1023px) {
	.contact-request {
		gap: 30px;
	}
}

@media(max-width:700px) {
	.contact-request {
		grid-template-columns: 1fr;
		margin-top: 25px;
		gap: 34px;
	}
}


.contact-guidance ul {
	list-style: none;
	padding: 0;
	margin: 27px 0;
}

.contact-guidance li {
	padding: 13px 0;
	border-bottom: 1px solid var(--line);
}

.contact-next {
	margin: 34px 0 0;
}

.contact-editorial .contact-next .content-subheading {
	font-size: var(--contact-text-size);
}

.contact-next p {
	margin-top: 10px;
	color: var(--muted);
}

.contact-editorial .contact-privacy {
	max-width: none;
	width: 100%;
	font-size: .7rem;
	line-height: 1.7;
	color: var(--muted);
	margin-top: 12px;
}

.contact-editorial .contact-form-wrap {
	padding: 24px;
	background: var(--contact-surface);
	border: 0;
	border-radius: 2px;
}

.contact-editorial .contact-form {
	--field-outside-bg: color-mix(in srgb, white 67%, color-mix(in srgb, #eeeae6 58%, var(--bg) 42%) 33%);
}

.contact-editorial .contact-form .form-field>:is(input, select, textarea):focus-visible,
.contact-editorial .contact-form .native-input-frame:focus-within {
	outline: 2px solid var(--olive) !important;
	outline-offset: 3px;
}


@media(max-width:1023px) {


.contact-editorial .form-grid {
		grid-template-columns: 1fr;
	}

	.contact-editorial .form-wide {
		grid-column: 1;
	}
}

@media(max-width:700px) {
	

	.contact-content-box {
		padding: 24px 20px;
	}

	.contact-editorial .contact-form-wrap {
		padding: 18px;
	}


}

/* Gleich hohe helle Flächen; die äußeren Kontaktfelder behalten ihre Höhe. */


/* Jede Kontaktbox wird erst durch ihren eigenen sichtbaren Anteil eingeblendet. */
.contact-editorial .contact-content-box.reveal {
	opacity: 0;
	transform: translateY(86px);
	transition: opacity 1s ease, transform 1s ease;
}

.contact-editorial .contact-content-box.reveal.is-visible {
	opacity: 1;
	transform: translateY(0);
}

@media(max-width:700px) {
	.contact-editorial .contact-content-box.reveal {
		transform: translateY(48px);
		transition: opacity .6s ease, transform .6s ease;
	}

	.contact-editorial .contact-content-box.reveal.is-visible {
		transform: translateY(0);
	}
}

@media(prefers-reduced-motion:reduce) {
	.contact-editorial .contact-content-box.reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

html:not([data-reveal-state]) .contact-editorial .contact-content-box.reveal {
	opacity: 1;
	transform: none;
	transition: none;
}


/* Einheitliche Kontaktflächen und gemeinsame Trennlinien bei gestapelten Reihen. */


@media(max-width:700px) {
	.contact-editorial .contact-opening-text {
		margin-top: 25px;
	}


}

/* Kompaktere Felder und zurückhaltende Beschriftungen im Ausgangszustand. */
.contact-editorial .contact-form .form-field> :is(input, select) {
	height: 40px;
	min-height: 40px;
	padding: 6px 12px;
}

.contact-editorial .contact-form .native-input-frame {
	height: 40px;
}

.contact-editorial .contact-form .form-field>textarea {
	height: 140px;
	min-height: 120px;
	padding: 8px 12px;
}

.contact-editorial .contact-form .form-grid>.form-field>label {
	top: 46px;
}

.contact-editorial .contact-form .form-grid>.form-field:is(:focus-within, .has-value)>label {
	top: 26px;
}

.contact-editorial .contact-form .form-field:not(:focus-within):not(.has-value)>label {
	font-weight: 400;
	color: var(--muted);
}

/* Fließtexte entsprechen in jeder Ansicht den Vorschautexten. */
.contact-editorial :is(.contact-opening-text, .contact-guidance-intro, .contact-guidance li, .contact-next p, .contact-privacy) {
	font-family: "Montserrat Local", Montserrat, Arial, sans-serif;
	font-size: var(--contact-text-size);
	line-height: var(--contact-text-leading);
	font-weight: 400;
	font-style: normal;
	letter-spacing: normal;
	color: var(--text);
}

/* Zusätzliche Formularüberschrift nur in der gestapelten mobilen Ansicht. */
.contact-form-column {
	min-width: 0;
}

.contact-mobile-form-heading {
	display: none;
}

@media(max-width:700px) {
	

	.contact-editorial .contact-mobile-form-heading {
		display: block;
		margin: 0 0 10px;
		font-size: var(--contact-text-size);
	}
}


/* Nur Kontakt: mobile Breite des Hero-Einleitungstextes. */
@media (max-width: 700px) {
	.page-hero-lead.contact-hero-lead {
		max-width: 150px;
	}
}

/* Ganzes Script-Wort; Umlautpunkte stammen aus der globalen .umlaut-Klasse. */
.contact-hero-word {
	white-space: nowrap;
}