/* skpt.at - Kontaktformular (Fluent Forms), kompakt und in der Seitentypografie */

/* Fluent Forms bringt eigene Farbvariablen mit, u.a. eine blaue
   Primaerfarbe (#1a7efb). Die werden hier auf die Palette umgebogen -
   damit stimmen Fokusrahmen, Rundungen und Fehlerfarben ueberall,
   auch an Stellen, die wir nicht einzeln ansprechen. */
.fluentform,
.ff-default,
.fluentform_wrapper {
	--fluentform-primary: var(--theme-palette-color-4);
	--fluentform-secondary: var(--theme-palette-color-7);
	--fluentform-danger: var(--theme-palette-color-2);
	--fluentform-border-color: var(--theme-palette-color-9);
	--fluentform-border-radius: 8px;
}

/* Fokus explizit nachziehen: die Standardregel setzt zusaetzlich
   background-color:#fff, das wuerde das Card White ueberschreiben. */
.fluentform .ff-el-form-control:focus,
.ff-default .ff-el-form-control:focus {
	background-color: var(--theme-palette-color-12);
	border-color: var(--theme-palette-color-4);
	color: var(--theme-palette-color-7);
	outline: none;
	box-shadow: none;
}

.fluentform .ff-el-group {
	margin-bottom: 14px;
}

.fluentform .ff-el-input--label label {
	font-family: 'Josefin Sans', sans-serif;
	font-weight: 400;
	font-style: normal;
	text-transform: uppercase;
	letter-spacing: .08em;
	font-size: .78rem;
	color: var(--theme-palette-color-8);
	margin-bottom: 4px;
}

.fluentform input[type="text"],
.fluentform input[type="email"],
.fluentform input[type="tel"],
.fluentform textarea {
	font-family: 'Lora', serif;
	font-style: italic;
	font-size: .95rem;
	line-height: 1.4;
	color: var(--theme-palette-color-7);
	background: var(--theme-palette-color-12);
	border: 1px solid var(--theme-palette-color-9);
	border-radius: 8px;
	padding: 8px 12px;
	min-height: 0;
	height: auto;
	box-shadow: none;
}

.fluentform textarea {
	min-height: 90px;
}

.fluentform input[type="text"]:focus,
.fluentform input[type="email"]:focus,
.fluentform input[type="tel"]:focus,
.fluentform textarea:focus {
	border-color: var(--theme-palette-color-4);
	outline: none;
	box-shadow: none;
}

.fluentform .ff-el-form-check {
	display: inline-flex;
	align-items: center;
	margin-right: 18px;
	margin-bottom: 2px;
}

.fluentform .ff-el-form-check label,
.fluentform .ff-el-form-check-label,
.fluentform .ff_t_c label {
	font-family: 'Lora', serif;
	font-style: italic;
	font-size: .9rem;
	text-transform: none;
	letter-spacing: normal;
	color: var(--theme-palette-color-7);
	margin-bottom: 0;
}

.fluentform .ff-el-help-message {
	font-family: 'Lora', serif;
	font-style: italic;
	font-size: .8rem;
	color: var(--theme-palette-color-8);
	margin-top: 2px;
}

.fluentform .ff_t_c {
	font-size: .85rem;
}

.fluentform .ff-btn-submit {
	font-family: 'Josefin Sans', sans-serif !important;
	font-weight: 400;
	font-style: normal;
	text-transform: uppercase;
	letter-spacing: .12em;
	font-size: .85rem;
	background: var(--theme-palette-color-2) !important;
	color: var(--theme-palette-color-6) !important;
	border: none;
	border-radius: 50px;
	padding: 10px 28px;
}

.fluentform .ff-btn-submit:hover {
	background: var(--theme-palette-color-7) !important;
}

/* Ankreuzfelder und Radiobuttons: Haken bzw. Punkt werden sonst in der
 Akzentfarbe des Betriebssystems gezeichnet, meist Blau. */
.fluentform input[type="checkbox"],
.fluentform input[type="radio"] {
	accent-color: var(--theme-palette-color-2);
	width: 1rem;
	height: 1rem;
	margin-right: .5em;
}

.fluentform input[type="checkbox"]:focus-visible,
.fluentform input[type="radio"]:focus-visible {
	outline: 2px solid var(--theme-palette-color-4);
	outline-offset: 2px;
}