/*
 * Una-Wunsch 2026-08-30: Styles für das Fluent-Forms-Plugin, damit
 * eingebettete Formulare (Kontakt o. ä.) optisch zum dunklen Theme passen
 * statt Fluent Forms' eigenem hellen Standard-Look. Sitewide geladen (wie
 * case-study.css/fonts.css, s. inc/enqueue.php) statt an eine bestimmte
 * Seite/Vorlage gebunden — ein Formular kann grundsätzlich auf jeder Seite
 * per Shortcode/Block landen, ohne dass hier vorab bekannt sein muss, wo
 * genau.
 *
 * Zielt auf Fluent Forms' eigene, dokumentierte Standard-Klassen (".ff-…"-
 * Präfix, Klassiker-Renderer — das Plugin-Standard-Layout, keine
 * "Conversational Form"-Variante). Deckt die gängigen Feldtypen ab
 * (Text/E-Mail/Zahl/Textarea/Auswahl, Checkbox/Radio, Absenden-Button,
 * Validierungs-/Erfolgsmeldungen). Exotischere Addons (mehrstufige
 * Formulare, Signatur-Feld, Bewertungs-Sterne, Datei-Repeater) sind bewusst
 * nicht vorab gestylt — kommen bei Bedarf dazu, sobald tatsächlich genutzt,
 * statt jetzt spekulativ für ungenutzte Varianten zu bauen.
 *
 * Farb-/Formsprache konsequent von den bereits etablierten Mustern
 * übernommen statt neu erfunden: Eingabefelder wie .portfolio-search__input
 * (grid.css) — dunkler, leicht transparenter Grund, doppelter Inset-Schatten
 * statt sichtbarem Rahmen, türkiser Fokusring. Absenden-Button wie
 * .prototype-link .wp-block-button__link (case-study.css) — transparent mit
 * türkisem Rahmen, füllt sich beim Hover/Fokus voll türkis. Fehlermeldungen
 * in Magenta (bereits als Akzentfarbe im Farbsystem vorhanden, an keiner
 * anderen Stelle für einen Warn-/Fehlerzustand verwendet — kein Bedarf für
 * einen weiteren, neuen Farbwert nur für diesen einen Zweck).
 */

.fluentform {
	font-family: 'Fira Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	color: var( --color-text );
	max-width: 100%;
}

.fluentform .ff-el-group {
	margin-bottom: 1.5rem;
}

.fluentform label.ff-el-input--label,
.fluentform .ff-el-input--label label {
	display: block;
	margin-bottom: 0.4rem;
	font-family: 'Fira Sans', sans-serif;
	font-size: 0.9rem;
	font-weight: 500;
	color: var( --color-text );
}

.fluentform .ff-el-input--label .ff_asterisk {
	color: var( --color-accent-magenta );
	margin-left: 0.15em;
}

/* Hilfetext unter einem Feld (Fluent Forms: .ff-el-help-text). */
.fluentform .ff-el-help-text {
	margin-top: 0.4rem;
	font-size: 0.8rem;
	color: var( --color-text-dim );
}

/* Text/E-Mail/Tel/Zahl/URL/Textarea/Auswahl — dieselbe eingesenkte
   Pillenoptik wie das Tag-Suchfeld im Sticky Header (grid.css), nur mit
   kleinerem Radius statt voller Pillenform (die meisten dieser Felder sind
   für eine echte Pille zu hoch/mehrzeilig). */
.fluentform input[type='text'],
.fluentform input[type='email'],
.fluentform input[type='tel'],
.fluentform input[type='number'],
.fluentform input[type='url'],
.fluentform input[type='password'],
.fluentform input[type='date'],
.fluentform input[type='datetime-local'],
.fluentform textarea.ff-el-form-control,
.fluentform select.ff-el-form-control,
.fluentform .ff-el-form-control {
	width: 100%;
	padding: 0.65rem 0.9rem;
	border: none;
	border-radius: 0.5rem;
	background: rgba( 0, 0, 0, 0.3 );
	box-shadow:
		inset 0 0 0.5rem rgba( 0, 0, 0, 0.45 ),
		inset 0 0 1.5rem rgba( 0, 0, 0, 0.5 );
	color: var( --color-text );
	font-family: 'Fira Sans', sans-serif;
	font-size: 0.95rem;
	line-height: 1.4;
	transition: box-shadow 0.2s ease;
}

.fluentform textarea.ff-el-form-control {
	min-height: 8rem;
	resize: vertical;
}

.fluentform ::placeholder {
	font-family: 'Fira Sans', sans-serif;
	color: var( --color-text-dim );
	opacity: 1;
}

.fluentform select.ff-el-form-control {
	appearance: none;
	background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23a9bdb9'%3E%3Cpath fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z' clip-rule='evenodd'/%3E%3C/svg%3E" );
	background-repeat: no-repeat;
	background-position: right 0.75rem center;
	background-size: 1.1rem;
	padding-right: 2.5rem;
}

@media ( hover: hover ) and ( pointer: fine ) {
	.fluentform input:focus-visible,
	.fluentform textarea:focus-visible,
	.fluentform select:focus-visible,
	.fluentform .ff-el-form-control:focus-visible {
		outline: 2px solid var( --color-accent-turquoise );
		outline-offset: 2px;
	}
}

/* Checkbox/Radio (Fluent Forms: .ff-el-form-check umschließt Input +
   eigenes Label). Native Kontrollkästchen statt eigenem Nachbau — auf
   dunklem Grund per color-scheme:dark (bereits global auf html gesetzt,
   style.css) rendert der Browser sie ohnehin passend dunkel; accent-color
   übernimmt zusätzlich die Marken-Akzentfarbe für den Hakenzustand. */
.fluentform .ff-el-form-check {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	margin-bottom: 0.5rem;
}

.fluentform .ff-el-form-check-input {
	accent-color: var( --color-accent-turquoise );
	width: 1.05rem;
	height: 1.05rem;
	margin-top: 0.15rem;
	flex-shrink: 0;
}

.fluentform .ff-el-form-check-label {
	font-family: 'Fira Sans', sans-serif;
	font-size: 0.9rem;
	color: var( --color-text );
}

/* Absenden-Button — dieselbe Optik wie der "Prototyp live testen"-Link
   (case-study.css), damit ein Formular sich nicht wie ein Fremdkörper im
   restlichen Case-Study-Look anfühlt. */
.fluentform button.ff-btn-submit,
.fluentform .ff-btn-submit {
	display: inline-block;
	padding: 0.7rem 1.75rem;
	background: transparent;
	border: 1px solid var( --color-accent-turquoise );
	border-radius: 999px;
	color: var( --color-accent-turquoise );
	font-family: 'Fira Sans', sans-serif;
	font-size: 0.95rem;
	font-weight: 500;
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease;
}

@media ( hover: hover ) and ( pointer: fine ) {
	.fluentform button.ff-btn-submit:hover,
	.fluentform .ff-btn-submit:hover,
	.fluentform button.ff-btn-submit:focus-visible,
	.fluentform .ff-btn-submit:focus-visible {
		background: var( --color-accent-turquoise );
		color: var( --color-navy );
	}
}

/* Validierungsfehler an einem einzelnen Feld. */
.fluentform .error-message,
.fluentform .ff-el-is-error .ff-el-help-text {
	margin-top: 0.4rem;
	font-size: 0.8rem;
	color: var( --color-accent-magenta );
}

.fluentform .ff-el-is-error .ff-el-form-control {
	box-shadow:
		inset 0 0 0 1px var( --color-accent-magenta ),
		inset 0 0 0.5rem rgba( 0, 0, 0, 0.45 ),
		inset 0 0 1.5rem rgba( 0, 0, 0, 0.5 );
}

/* Erfolgs-/Fehlermeldung nach dem Absenden — dieselbe abgesetzte Box-Optik
   wie .tests-box (case-study.css), nur mit Statusfarbe am linken Rand statt
   allseitigem Rahmen. */
.fluentform .ff-message-success,
.fluentform .ff_success_message {
	padding: 1rem 1.25rem;
	margin-bottom: 1.5rem;
	background: var( --color-box-bg );
	border-left: 3px solid var( --color-accent-turquoise );
	border-radius: 0.4rem;
	color: var( --color-text );
	font-family: 'Fira Sans', sans-serif;
}

.fluentform .ff-message-danger,
.fluentform .ff_error_message {
	padding: 1rem 1.25rem;
	margin-bottom: 1.5rem;
	background: var( --color-box-bg );
	border-left: 3px solid var( --color-accent-magenta );
	border-radius: 0.4rem;
	color: var( --color-text );
	font-family: 'Fira Sans', sans-serif;
}