/*
 * 5.12 Anfrage #anfrage: Chat-Optik für das Formular aus Fluent Forms Free.
 * Werte „Handy · Desktop“ aus DESIGN.md 5.12. Das Plugin liefert nur die
 * Technik; seine Standard-Optik ist in inc/formular.php abgeschaltet.
 */

.hk-anfrage {
	padding: 48px 12px 52px;
}

/* ---------- Chat-Karte ---------- */

.hk-chat {
	overflow: hidden;
	border: 1px solid var(--wp--preset--color--hairline);
	border-radius: var(--wp--custom--radius--chat);
	background-color: var(--wp--preset--color--white);
}

.hk-chat-kopf {
	padding: 10px 14px;
	border-bottom: 1px solid var(--wp--preset--color--hairline);
}

.hk-chat-kopf .hk-mit-avatar {
	--hk-avatar: 36px;
	font-size: 15px;
}

.hk-chat-verlauf {
	display: flex;
	flex-direction: column;
	padding: 16px 12px 18px;
	--hk-abstand: 8px;
}

/* ---------- Blasen ---------- */

/* Hilke: creme, links. Erste Blase einer Folge 18 18 18 4, folgende 4 18 18 18. */
.hk-chat :is(.hk-blase, .ff-el-help-message, .hk-chips .ff-el-input--label, .hk-fragen p, .hk-erfolg-text) {
	box-sizing: border-box;
	width: fit-content;
	max-width: 82%;
	margin-right: auto;
	padding: 10px 14px;
	border-radius: 18px 18px 18px 4px;
	background-color: var(--wp--preset--color--creme);
	color: var(--wp--preset--color--ink);
	font-size: 15px;
	font-style: normal;
	line-height: 1.5;
}

.hk-chat .hk-chips .ff-el-input--label {
	margin: 0 auto 0 0;
}

/* Frage-Blase: Tan Nimbus 22 px, cobalt. */
.hk-chat :is(.hk-chips .ff-el-input--label, .hk-frage) {
	font-family: var(--wp--preset--font-family--tan-nimbus);
	font-size: 22px;
	line-height: 1.25;
	color: var(--wp--preset--color--cobalt);
}

.hk-chat .hk-chips .ff-el-input--label label {
	margin: 0;
	padding: 0;
	font: inherit;
	color: inherit;
}

/* Hinweis-Blase: 15 px, 8 px 14 px. Folgt immer einer Frage. */
.hk-chat .hk-chips .ff-el-help-message,
.hk-chat .hk-fragen .hk-hinweis {
	padding: 8px 14px;
	border-radius: 4px 18px 18px 18px;
	font-size: 15px;
	line-height: 1.5;
}

/* Leserin: cobalt, weiß, rechts. Bei der gewählten Antwort begrenzt der Chip-Rahmen die Breite. */
.hk-chat .hk-chips .ff-el-form-check:has(:checked) {
	max-width: 82%;
}

.hk-chat :is(.hk-weg-blase, .hk-chips .ff-el-form-check:has(:checked) .ff-el-form-check-label) {
	box-sizing: border-box;
	width: fit-content;
	max-width: 82%;
	margin-left: auto;
	padding: 10px 14px;
	border: 0;
	border-radius: 18px 18px 4px 18px;
	background-color: var(--wp--preset--color--cobalt);
	color: var(--wp--preset--color--white);
	font-size: 15px;
	font-weight: 400;
	line-height: 1.45;
}

/* „Weg ändern“ und „Antwort ändern“: kleiner Textlink rechts. */
.hk-chat :is(.hk-weg-aendern a, .hk-antwort-aendern) {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 4px;
	border: 0;
	background: none;
	color: var(--wp--preset--color--cobalt);
	font-family: inherit;
	font-size: 13px;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

.hk-chat :is(.hk-weg-aendern, .hk-antwort) {
	display: flex;
	justify-content: flex-end;
}

.hk-chat .hk-antwort {
	margin-top: -6px;
}

/* ---------- Abstände im Verlauf ---------- */

.hk-weg-blasen[hidden],
.hk-weg-blase[hidden] {
	display: none !important;
}

.hk-weg-blasen {
	display: flex;
	flex-direction: column;
	gap: var(--hk-abstand);
}

.hk-chat .fluentform,
.hk-chat .frm-fluent-form,
.hk-chat .frm-fluent-form fieldset {
	margin: 0;
}

.hk-chat .frm-fluent-form fieldset {
	display: flex;
	flex-direction: column;
}

.hk-weg-blasen:not([hidden]) + .fluentform {
	margin-top: var(--hk-abstand);
}

.hk-chat .frm-fluent-form .ff-el-group {
	margin: var(--hk-abstand) 0 0;
}

.hk-chat .frm-fluent-form .ff-el-group:first-of-type,
.hk-chat .frm-fluent-form .hk-chips {
	margin-top: 0;
}

/* ---------- Schritt 1: Frage, Hinweis, fünf Chips ---------- */

.hk-chat .hk-chips {
	display: flex;
	flex-direction: column;
	gap: var(--hk-abstand);
}

.hk-chat .hk-chips .ff-el-input--content {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	column-gap: 6px;
}

/* Hinweis zuerst, dann ein Zeilenumbruch, dann die Chips. */
.hk-chat .hk-chips .ff-el-help-message {
	order: -2;
	margin: 0 auto 0 0;
}

.hk-chat .hk-chips .ff-el-input--content::before {
	content: "";
	order: -1;
	flex-basis: 100%;
	height: 0;
}

.hk-chat .hk-chips .ff-el-form-check {
	position: relative;
	margin: 6px 0 0;
}

/* Das Auswahlfeld selbst ist unsichtbar; sichtbar ist der Chip. */
.hk-chat .hk-chips .ff-el-form-check-input {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}

.hk-chat .hk-chips .ff-el-form-check-label {
	display: inline-flex;
	align-items: center;
	box-sizing: border-box;
	min-height: 44px;
	padding: 6px 14px;
	border: 1.5px solid var(--wp--preset--color--cobalt);
	border-radius: var(--wp--custom--radius--pille);
	background-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--cobalt);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
	text-align: left;
	cursor: pointer;
	transition: transform var(--wp--custom--dauer--lift) ease-out;
}

.hk-chat .hk-chips .ff-el-form-check-label:hover {
	transform: translateY(-2px);
}

.hk-chat .hk-chips .ff-el-form-check:has(:focus-visible) .ff-el-form-check-label {
	outline: 3px solid var(--wp--preset--color--cobalt);
	outline-offset: 2px;
}

/* Nach der Wahl: nur die Antwort als Blase. Solange die Tastatur in der Gruppe ist, bleiben alle Chips sichtbar. */
.hk-chat .hk-chips:has(:checked):not(:has(:focus-visible)) .ff-el-form-check:not(:has(:checked)) {
	display: none;
}

.hk-chat .hk-chips:has(:checked):not(:has(:focus-visible)) .ff-el-form-check:has(:checked) {
	margin-top: var(--hk-abstand);
}

.hk-chat .hk-chips .ff-el-form-check:has(:checked) .ff-el-form-check-label {
	max-width: none;
}

.hk-chat .hk-chips .ff-el-form-check:has(:checked) .ff-el-form-check-label:hover {
	transform: none;
}

/* ---------- Schritt 2: erst nach der Wahl ---------- */

.hk-chat .frm-fluent-form:not(:has(input[name="stand"]:checked)) .hk-schritt-2 {
	display: none !important;
}

.hk-chat .hk-fragen {
	display: flex;
	flex-direction: column;
	gap: var(--hk-abstand);
}

/* Reaktion, dann Frage: die Frage ist die folgende Blase. */
.hk-chat .hk-fragen .hk-frage {
	border-radius: 4px 18px 18px 18px;
}

/* ---------- Formularkasten ---------- */

.hk-chat .frm-fluent-form .hk-kasten {
	margin-top: 0;
	padding: 10px 14px 0;
	background-color: var(--wp--preset--color--paper);
}

.hk-chat .frm-fluent-form .hk-kasten-oben {
	margin-top: var(--hk-abstand);
	padding-top: 14px;
	border-radius: var(--wp--custom--radius--formular) var(--wp--custom--radius--formular) 0 0;
}

.hk-chat .frm-fluent-form .hk-abschicken {
	padding-bottom: 14px;
	border-radius: 0 0 var(--wp--custom--radius--formular) var(--wp--custom--radius--formular);
}

/* Vorname und E-Mail: Handy untereinander. */
.hk-chat .hk-kasten-oben.ff-t-container {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.hk-chat .hk-kasten-oben .ff-t-cell {
	flex-basis: auto !important;
	width: 100%;
	padding: 0;
}

.hk-chat .hk-kasten-oben .ff-el-group {
	margin: 0;
}

.hk-chat .hk-kasten .ff-el-input--label {
	display: block;
	margin: 0 0 4px;
	padding: 0;
}

.hk-chat .hk-kasten .ff-el-input--label label {
	margin: 0;
	color: var(--wp--preset--color--ink);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
}

.hk-chat .hk-kasten .ff-el-form-control {
	display: block;
	box-sizing: border-box;
	width: 100%;
	height: 44px;
	margin: 0;
	padding: 0 12px;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--karte);
	background-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--ink);
	font-family: inherit;
	font-size: 15px;
	line-height: 1.4;
	box-shadow: none;
}

.hk-chat .hk-kasten textarea.ff-el-form-control {
	height: auto;
	padding: 10px 12px;
	resize: none;
}

.hk-chat .hk-kasten .ff-el-form-control::placeholder {
	color: var(--wp--preset--color--ink);
	opacity: 0.75;
}

.hk-chat .hk-kasten .ff-el-form-control:focus {
	border-color: var(--wp--preset--color--border);
}

/* Datenschutz-Häkchen (das Plugin setzt eine Tabellen-Anzeige, daher genauer gezielt). */
.hk-chat .hk-haekchen .ff-el-form-check {
	margin: 0;
}

.hk-chat .hk-haekchen .ff-el-tc label.ff_tc_label {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 44px;
	margin: 0;
	color: var(--wp--preset--color--ink);
	font-size: 13px;
	font-weight: 400;
	line-height: 1.45;
	cursor: pointer;
}

.hk-chat .hk-haekchen .ff-el-tc .ff_tc_checkbox {
	display: flex;
	flex: none;
	padding: 0;
}

.hk-chat .hk-haekchen .ff-el-tc .ff_t_c {
	display: block;
	padding: 0;
}

.hk-chat .hk-haekchen input[type="checkbox"] {
	width: 20px;
	height: 20px;
	margin: 0;
	accent-color: var(--wp--preset--color--cobalt);
}

.hk-chat .hk-notiz p {
	font-size: 14px;
	line-height: 1.5;
}

/* Abschicken: Handy volle Breite. */
.hk-chat .frm-fluent-form .ff-btn-submit {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 100%;
	min-height: 48px;
	margin: 0;
	padding: 0 24px;
	border: 0;
	border-radius: var(--wp--custom--radius--pille);
	background-color: var(--wp--preset--color--cobalt);
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--inter);
	font-size: 16px;
	font-weight: 900;
	line-height: 1.2;
	cursor: pointer;
	opacity: 1;
	transition: transform var(--wp--custom--dauer--lift) ease-out;
}

.hk-chat .frm-fluent-form .ff-btn-submit:hover {
	transform: translateY(-2px);
	background-color: var(--wp--preset--color--cobalt);
	color: var(--wp--preset--color--white);
	opacity: 1;
}

/* Fehler im Feld (Plugin-Meldung unter dem Feld). */
.hk-chat .frm-fluent-form .error,
.hk-chat .frm-fluent-form .text-danger {
	margin-top: 4px;
	color: var(--wp--preset--color--ink);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
}

.hk-chat .frm-fluent-form .ff-el-is-error .ff-el-form-control {
	border: 2px solid var(--wp--preset--color--ink);
}

/* Fehlerblase: nur nach gescheitertem Abschicken, unter dem Kasten. */
.hk-chat .frm-fluent-form .hk-fehler {
	display: none;
	order: 1;
}

.hk-chat .frm-fluent-form.hk-fehler-an .hk-fehler {
	display: block;
}

.hk-chat .ff-errors-in-stack {
	display: none !important;
}

/* ---------- Erfolg ---------- */

.hk-chat .ff-message-success {
	display: flex;
	flex-direction: column;
	gap: var(--hk-abstand);
	margin: var(--hk-abstand) 0 0;
	padding: 0;
	border: 0;
	box-shadow: none;
	background: none;
}

.hk-chat .ff-message-success p {
	margin: 0;
}

.hk-chat .hk-erfolg-titel {
	width: fit-content;
	max-width: 82%;
	padding: 10px 14px;
	border-radius: 18px 18px 18px 4px;
	background-color: var(--wp--preset--color--cobalt);
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--tan-nimbus);
	font-size: 24px;
	line-height: 1.25;
}

.hk-chat .ff-message-success .hk-erfolg-text {
	border-radius: 4px 18px 18px 18px;
}

/* Verlauf, der nach dem Abschicken stehen bleibt (Kopie aus dem Formular, assets/js/hilke.js). */
.hk-chat .hk-verlauf {
	display: flex;
	flex-direction: column;
	gap: var(--hk-abstand);
}

.hk-chat .hk-verlauf > p {
	box-sizing: border-box;
	width: fit-content;
	max-width: 82%;
	margin: 0 auto 0 0;
	padding: 10px 14px;
	border-radius: 18px 18px 18px 4px;
	background-color: var(--wp--preset--color--creme);
	color: var(--wp--preset--color--ink);
	font-size: 15px;
	line-height: 1.5;
}

.hk-chat .hk-verlauf > .hk-verlauf-frage {
	font-family: var(--wp--preset--font-family--tan-nimbus);
	font-size: 22px;
	line-height: 1.25;
	color: var(--wp--preset--color--cobalt);
}

.hk-chat .hk-verlauf > :is(.hk-verlauf-hinweis, .hk-verlauf-folge) {
	border-radius: 4px 18px 18px 18px;
}

.hk-chat .hk-verlauf > .hk-verlauf-hinweis {
	padding: 8px 14px;
}

.hk-chat .hk-verlauf > .hk-verlauf-antwort {
	margin: 0 0 0 auto;
	border-radius: 18px 18px 4px 18px;
	background-color: var(--wp--preset--color--cobalt);
	color: var(--wp--preset--color--white);
	line-height: 1.45;
}

/* Nach dem Abschicken: „Weg ändern“ ergibt keinen Sinn mehr. */
.hk-chat.is-gesendet .hk-weg-aendern,
.hk-chat:has(.ff-message-success) .hk-weg-aendern {
	display: none;
}

/* ---------- Mail-Zeile ---------- */

.hk-mail-zeile {
	padding: 18px 4px 0;
	font-size: 15px;
	line-height: 1.55;
}

/* ---------- Desktop ab 700 px ---------- */

@media (min-width: 700px) {
	.hk-anfrage {
		padding: 96px 24px;
	}

	.hk-anfrage-raster {
		max-width: 1040px;
		margin-inline: auto;
	}

	.hk-chat-kopf {
		padding: 12px 18px;
	}

	.hk-chat-kopf .hk-mit-avatar {
		--hk-avatar: 40px;
		font-size: 16px;
	}

	.hk-chat-verlauf {
		padding: 22px 20px 24px;
		--hk-abstand: 10px;
	}

	.hk-chat :is(.hk-blase, .ff-el-help-message, .hk-chips .ff-el-input--label, .hk-fragen p, .hk-erfolg-text, .hk-weg-blase) {
		max-width: 80%;
		padding: 10px 16px;
		font-size: 16px;
	}

	.hk-chat .hk-chips .ff-el-form-check:has(:checked) {
		max-width: 80%;
	}

	.hk-chat .hk-chips .ff-el-form-check:has(:checked) .ff-el-form-check-label {
		padding: 10px 16px;
		font-size: 16px;
	}

	.hk-chat :is(.hk-chips .ff-el-input--label, .hk-frage) {
		padding: 12px 16px;
		font-size: 26px;
	}

	.hk-chat .hk-chips .ff-el-help-message,
	.hk-chat .hk-fragen .hk-hinweis {
		padding: 9px 16px;
		font-size: 16px;
	}

	.hk-chat :is(.hk-weg-aendern a, .hk-antwort-aendern) {
		font-size: 14px;
	}

	.hk-chat .hk-chips .ff-el-input--content {
		column-gap: 8px;
	}

	.hk-chat .hk-chips .ff-el-form-check {
		margin-top: 8px;
	}

	.hk-chat .hk-chips .ff-el-form-check-label {
		padding: 6px 16px;
		font-size: 15px;
	}

	.hk-chat .frm-fluent-form .hk-kasten {
		padding: 12px 18px 0;
	}

	.hk-chat .frm-fluent-form .hk-kasten-oben {
		padding-top: 18px;
	}

	.hk-chat .frm-fluent-form .hk-abschicken {
		padding-bottom: 18px;
	}

	.hk-chat .hk-kasten-oben.ff-t-container {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
	}

	.hk-chat .hk-kasten .ff-el-input--label label {
		font-size: 15px;
	}

	.hk-chat .hk-kasten .ff-el-form-control {
		height: 46px;
		font-size: 16px;
	}

	.hk-chat .hk-kasten textarea.ff-el-form-control {
		height: auto;
	}

	.hk-chat .hk-haekchen .ff-el-tc label.ff_tc_label {
		font-size: 14px;
	}

	.hk-chat .hk-notiz p {
		font-size: 15px;
	}

	.hk-chat .frm-fluent-form .ff-btn-submit {
		width: auto;
		min-height: 50px;
		padding: 0 32px;
	}

	.hk-chat .hk-erfolg-titel {
		padding: 10px 16px;
		font-size: 28px;
	}

	.hk-chat .hk-verlauf > p {
		max-width: 80%;
		padding: 10px 16px;
		font-size: 16px;
	}

	.hk-chat .hk-verlauf > .hk-verlauf-frage {
		padding: 12px 16px;
		font-size: 26px;
	}

	.hk-chat .hk-verlauf > .hk-verlauf-hinweis {
		padding: 9px 16px;
	}

	.hk-mail-zeile {
		padding: 24px 0 0;
		font-size: 19px;
		line-height: 1.6;
	}

	.hk-mail-zeile::before {
		content: "";
		display: block;
		width: 64px;
		height: 64px;
		margin-bottom: 16px;
		background: url("../papierflieger_pink.svg") center / contain no-repeat;
	}
}

/* Zweispaltig erst ab 1000 px (DESIGN.md, Abschnitt 11); bis 999 px einspaltig, Mail-Zeile unter der Karte. */
@media (min-width: 1000px) {
	.hk-anfrage-raster {
		display: grid;
		grid-template-columns: 640px minmax(0, 1fr);
		gap: 56px;
		align-items: start;
	}
}

@media (prefers-reduced-motion: reduce) {
	.hk-chat .hk-chips .ff-el-form-check-label:hover,
	.hk-chat .frm-fluent-form .ff-btn-submit:hover {
		transform: none;
	}
}

/* Mail-Links im Fließtext: Tippfläche 44 px hoch, Zeilen bleiben gleich. */
:is(.hk-mail-zeile, .hk-fehler) a {
	padding-block: 12.5px;
}