/*
 * Alle Werte sind als CSS-Variablen definiert. Um das Formular an das
 * Design der Webseite anzupassen, reicht es meist, diese Variablen im
 * Theme-CSS zu überschreiben (siehe readme.txt), statt die Regeln
 * darunter zu duplizieren.
 */
.sscf-form-wrapper {
	--sscf-max-width: 600px;
	--sscf-text-color: #1e1e1e;
	--sscf-label-weight: 600;
	--sscf-gap: 1.2em;
	--sscf-font-size: 1em;
	--sscf-input-padding: 0.6em 0.8em;
	--sscf-input-border-color: #ccc;
	--sscf-input-border-width: 1px;
	--sscf-input-radius: 4px;
	--sscf-input-bg: #fff;
	--sscf-input-focus-color: #2271b1;
	--sscf-required-color: #d63638;
	--sscf-button-bg: #2271b1;
	--sscf-button-color: #fff;
	--sscf-button-radius: 4px;
	--sscf-button-padding: 0.7em 1.6em;
	--sscf-success-bg: #edfaef;
	--sscf-success-color: #1a7f37;
	--sscf-error-bg: #fcedee;
	--sscf-error-color: #d63638;
	--sscf-column-gap: 1em;

	max-width: var(--sscf-max-width);
	margin: 0 auto;
	color: var(--sscf-text-color);
	font-size: var(--sscf-font-size);
}

.sscf-form-title {
	margin-bottom: 1em;
}

/*
 * Felder-Reihe: Felder mit einer Breite < 100% (aus dem Formular-Builder)
 * stehen dank Flexbox automatisch nebeneinander. Ein negatives Margin auf
 * der Reihe gleicht das Innen-Padding der Felder aus, damit der Abstand
 * zwischen den Spalten gleichmäßig bleibt und der äußere Rand fluchtet.
 */
.sscf-fields-row {
	display: flex;
	flex-wrap: wrap;
	margin-left: calc(var(--sscf-column-gap) / -2);
	margin-right: calc(var(--sscf-column-gap) / -2);
}

.sscf-field {
	margin-bottom: var(--sscf-gap);
	padding-left: calc(var(--sscf-column-gap) / 2);
	padding-right: calc(var(--sscf-column-gap) / 2);
	box-sizing: border-box;
	flex: 0 0 100%;
	max-width: 100%;
}

.sscf-field-width-75 {
	flex-basis: 75%;
	max-width: 75%;
}

.sscf-field-width-66 {
	flex-basis: 66.6667%;
	max-width: 66.6667%;
}

.sscf-field-width-50 {
	flex-basis: 50%;
	max-width: 50%;
}

.sscf-field-width-33 {
	flex-basis: 33.3333%;
	max-width: 33.3333%;
}

.sscf-field-width-25 {
	flex-basis: 25%;
	max-width: 25%;
}

/* Auf kleinen Bildschirmen stapeln sich alle Felder wieder untereinander. */
@media (max-width: 480px) {
	.sscf-field-width-75,
	.sscf-field-width-66,
	.sscf-field-width-50,
	.sscf-field-width-33,
	.sscf-field-width-25 {
		flex-basis: 100%;
		max-width: 100%;
	}
}

.sscf-field > label,
.sscf-field-select > label,
.sscf-field-radio > label {
	display: block;
	font-weight: var(--sscf-label-weight);
	margin-bottom: 0.4em;
}

.sscf-field input[type="text"],
.sscf-field input[type="email"],
.sscf-field input[type="tel"],
.sscf-field input[type="number"],
.sscf-field textarea,
.sscf-field select {
	width: 100%;
	padding: var(--sscf-input-padding);
	border: var(--sscf-input-border-width) solid var(--sscf-input-border-color);
	border-radius: var(--sscf-input-radius);
	background: var(--sscf-input-bg);
	color: var(--sscf-text-color);
	font-size: var(--sscf-font-size);
	font-family: inherit;
	box-sizing: border-box;
}

.sscf-field input:focus,
.sscf-field textarea:focus,
.sscf-field select:focus {
	outline: 2px solid var(--sscf-input-focus-color);
	outline-offset: 1px;
}

.sscf-field textarea {
	resize: vertical;
}

.sscf-radio-group {
	display: flex;
	flex-direction: column;
	gap: 0.4em;
}

.sscf-radio-option,
.sscf-checkbox-option {
	display: flex;
	align-items: center;
	gap: 0.5em;
	font-weight: normal;
	cursor: pointer;
}

.sscf-required {
	color: var(--sscf-required-color);
}

.sscf-honeypot {
	position: absolute;
	left: -9999px;
	top: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.sscf-submit-button {
	background: var(--sscf-button-bg);
	color: var(--sscf-button-color);
	border: none;
	padding: var(--sscf-button-padding);
	border-radius: var(--sscf-button-radius);
	font-size: var(--sscf-font-size);
	font-family: inherit;
	cursor: pointer;
}

.sscf-submit-button:hover {
	filter: brightness(0.88);
}

.sscf-submit-button:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.sscf-form-message {
	padding: 0.8em 1em;
	border-radius: var(--sscf-input-radius);
	margin-bottom: 1em;
}

.sscf-form-message.sscf-success {
	background: var(--sscf-success-bg);
	color: var(--sscf-success-color);
	border: 1px solid var(--sscf-success-color);
}

.sscf-form-message.sscf-error {
	background: var(--sscf-error-bg);
	color: var(--sscf-error-color);
	border: 1px solid var(--sscf-error-color);
}