/**
 * FormFinn front-end styles.
 *
 * Deliberately minimal and mostly inherit-from-theme: WPForms shipped with
 * `disable-css: 1` on these sites, i.e. the theme already styles the form. This
 * only adds what the markup genuinely needs — layout, the honeypot's
 * invisibility, and error/confirmation states.
 */

/**
 * Tokens: erst das Theme fragen, dann selbst antworten.
 *
 * Das Plugin laeuft auch unter Themes, die diese Presets nicht kennen — deshalb
 * ein Fallback. Er ist aber die zweite Wahl, nicht die erste: wo scharr-2026
 * seine Palette definiert, gewinnt sie, und eine Aenderung dort kommt hier ohne
 * Zutun an. Die Werte einfach hart hineinzuschreiben haette genauso ausgesehen
 * und waere beim ersten Palettenwechsel stumm auseinandergelaufen.
 *
 * Kein Messing: das lebt im Deck und nirgends sonst.
 */
.ff-form {
	--ff-ink: var(--wp--preset--color--ink, #1a1d21);
	--ff-rule: var(--wp--preset--color--rule, #dfdfd9);
	--ff-accent: var(--wp--preset--color--accent, #1c4a63);
	--ff-error: #b32d2e;
	--ff-font-label: var(--wp--preset--font-family--sans, inherit);
	--ff-font-mono: var(--wp--preset--font-family--mono, ui-monospace, monospace);
}

.ff-form .ff-field {
	margin-bottom: 1.25em;
}

.ff-form label {
	display: block;
	margin-bottom: 0.35em;
	font-weight: 600;
}

.ff-form input[type="text"],
.ff-form input[type="email"],
.ff-form input[type="tel"],
.ff-form textarea,
.ff-form select {
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
}

.ff-form .ff-req {
	color: #b32d2e;
}

/* Checkbox rows read as one line, label beside the box. */
.ff-form .ff-check {
	display: flex;
	align-items: flex-start;
	gap: 0.6em;
	font-weight: 400;
}

.ff-form .ff-check input[type="checkbox"] {
	margin-top: 0.25em;
	flex: 0 0 auto;
}

/*
 * The honeypot must be invisible to humans but NOT display:none — some bots
 * skip hidden fields on purpose. Push it out of the viewport instead, and take
 * it out of the tab order and the accessibility tree.
 */
.ff-form .ff-hp {
	position: absolute !important;
	left: -9999px !important;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.ff-form .ff-error {
	display: block;
	margin-top: 0.3em;
	color: #b32d2e;
	font-size: 0.9em;
}

.ff-form .ff-message:not(:empty) {
	margin-top: 1em;
	padding: 0.75em 1em;
	border-left: 4px solid #b32d2e;
	background: rgba( 179, 45, 46, 0.06 );
}

.ff-confirmation {
	padding: 1em 1.25em;
	border-left: 4px solid #1a7f37;
	background: rgba( 26, 127, 55, 0.07 );
}

.ff-form .ff-submit[disabled] {
	opacity: 0.6;
	cursor: progress;
}

.ff-admin-warning {
	padding: 0.75em 1em;
	border-left: 4px solid #dba617;
	background: rgba( 219, 166, 23, 0.1 );
}

/* Fortschritt über die Pflichtfelder. Zurückhaltend: eine Zahl, kein Balken,
   keine Farbe. Sie sagt, was fehlt — nicht, was dort stehen soll. Verschwindet,
   sobald alles beantwortet ist; wer fertig ist, braucht keinen Zähler. */
.ff-form .ff-progress {
	margin: 0 0 0.75rem;
	font-size: 0.8125rem;
	opacity: 0.7;
}

/* ---------------------------------------------------------------------------
 * Abschnitte
 *
 * Achtzehn Felder in einer Spalte sind eine Scroll-Wueste: man sieht nie, wo man
 * ist und wie viel noch kommt. Vier Abschnitte mit Ueberschrift geben dem
 * Formular eine Gliederung — und beantworten die Frage „wie lange dauert das
 * noch" ohne Fortschrittsbalken.
 *
 * Die kurzen Angaben (Name, Mail, Kunde, Zeitraum) teilen sich Zeilen. Ein
 * Eingabefeld ueber die volle Textbreite fuer „Zeitraum" verspricht eine Antwort,
 * die es nicht gibt: die Feldbreite ist eine Aussage darueber, was hineingehoert.
 * ------------------------------------------------------------------------ */

.ff-form .ff-section {
	margin-block: 2.25rem;
	padding-block-start: 1.5rem;
	border-block-start: 1px solid var(--ff-rule, #dfdfd9);
}

/* Der erste Abschnitt braucht keine Linie nach oben — darueber steht schon die
   Ueberschrift der Seite. */
.ff-form .ff-section:first-of-type {
	margin-block-start: 0;
	padding-block-start: 0;
	border-block-start: 0;
}

/* Felder ohne Abschnitt in einem gegliederten Formular: sichtbar, aber ohne
   eigenen Rahmen. */
.ff-form .ff-section--bare {
	border-block-start: 0;
	padding-block-start: 0;
}

.ff-form .ff-section__head {
	margin: 0 0 0.2rem;
	font-family: var(--ff-font-label, inherit);
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: 0.01em;
}

/* Keine Zeilenlaengen-Bremse: 58ch waren auf der Inhaltsbreite dieser Seite
   knapp die Haelfte — der Hinweis brach mitten im Satz um und sah aus, als
   gehoere er in die linke Spalte. Ein Satz darf die Breite haben, unter der er
   steht. */
.ff-form .ff-section__hint {
	margin: 0 0 1.25rem;
	font-size: 0.85rem;
	line-height: 1.5;
	opacity: 0.7;
}

.ff-form .ff-section__fields {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 1.25rem;
	align-items: start;
}

/* Volle Breite ist der Normalfall: nur was ausdruecklich `half` ist, teilt. */
.ff-form .ff-section__fields > .ff-field {
	grid-column: 1 / -1;
}

.ff-form .ff-section__fields > .ff-field--half {
	grid-column: span 1;
}

/* Schmal: kein Nebeneinander. Zwei halbe Felder auf 320 Pixeln sind zwei zu
   schmale Felder. */
@media (max-width: 34rem) {
	.ff-form .ff-section__fields > .ff-field--half {
		grid-column: 1 / -1;
	}
}

/* ---------------------------------------------------------------------------
 * Skala
 *
 * Sechs Stufen nebeneinander statt sechs Dropdowns untereinander. Das Raster
 * hat sieben Spalten: drei negative, die Luecke, drei positive. Die Luecke ist
 * eine echte Spalte, kein Rand — sie traegt die Aussage des Instruments (es
 * gibt kein „geht so") und darf nicht verrutschen.
 *
 * Keine Farbcodierung der Seiten. Ein Formular, das eine Antwort freundlicher
 * aussehen laesst als die andere, fragt nicht mehr.
 * ------------------------------------------------------------------------ */

.ff-form .ff-field--scale {
	margin-block: 1.75rem;
}

.ff-form .ff-scale {
	border: 0;
	padding: 0;
	margin: 0;
	min-inline-size: 0;      /* Sonst weigert sich ein fieldset zu schrumpfen. */
}

.ff-form .ff-scale__legend {
	padding: 0;
	margin-block-end: 0.6rem;
	font-family: var(--ff-font-label, inherit);
	font-size: 0.95rem;
	font-weight: 600;
	letter-spacing: 0.01em;
}

/* Der Hinweis gehoert zwischen Frage und Antwort, nicht daneben: man liest ihn
   genau einmal, naemlich bevor man klickt. */
.ff-form .ff-scale__hint {
	margin: -0.3rem 0 0.55rem;
	font-size: 0.8rem;
	line-height: 1.45;
	opacity: 0.65;
}

.ff-form .ff-scale__track {
	display: grid;
	grid-template-columns: repeat(3, 1fr) 0.65rem repeat(3, 1fr);
	gap: 0.35rem;
	align-items: stretch;
}

.ff-form .ff-scale__gap {
	/* Die fehlende Mitte, sichtbar gemacht: eine Kante, keine Stufe. */
	inline-size: 1px;
	justify-self: center;
	background: var(--ff-rule, #dfdfd9);
}

.ff-form .ff-scale__step {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	gap: 0.15rem;
	padding: 0.55rem 0.3rem 0.5rem;
	border: 1px solid var(--ff-rule, #dfdfd9);
	border-radius: 2px;
	cursor: pointer;
	text-align: center;
	background: transparent;
	transition: background-color 120ms ease, border-color 120ms ease;
}

.ff-form .ff-scale__step:hover {
	border-color: var(--ff-ink, #1a1d21);
}

/* Der Radio bleibt bedienbar und auffindbar, nur unsichtbar: nicht
 * display:none — das nimmt ihn aus der Tab-Reihenfolge und aus dem
 * Screenreader. */
.ff-form .ff-scale__step input {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.ff-form .ff-scale__mark {
	font-family: var(--ff-font-mono, ui-monospace, monospace);
	font-size: 1.05rem;
	line-height: 1;
	letter-spacing: -0.05em;
	white-space: nowrap;
}

.ff-form .ff-scale__word {
	font-family: var(--ff-font-label, inherit);
	font-size: 0.7rem;
	line-height: 1.2;
	opacity: 0.72;
	text-wrap: balance;
}

.ff-form .ff-scale__step:has(input:checked) {
	background: var(--ff-accent, #1c4a63);
	border-color: var(--ff-accent, #1c4a63);
	color: #fff;
}

.ff-form .ff-scale__step:has(input:checked) .ff-scale__word {
	opacity: 0.9;
}

/* Fokus gehoert an die Stufe, nicht an den versteckten Radio — sonst sieht man
 * beim Durchtabben nicht, wo man ist. */
.ff-form .ff-scale__step:has(input:focus-visible) {
	outline: 2px solid var(--ff-accent, #1c4a63);
	outline-offset: 2px;
}

.ff-form .ff-has-errors .ff-scale:has(input:invalid) .ff-scale__step {
	border-color: var(--ff-error, #a4262c);
}

/* Die Enden benennen die Skala dort, wo die Stufen es nicht mehr koennen.
 * Breit ist das ueberfluessig — da traegt jede Stufe ihr Wort. */
.ff-form .ff-scale__ends {
	display: none;
}

/* Schmal: die Woerter kosten mehr Platz als sie einbringen — die Zeichen
 * tragen die Skala allein, und die Enden werden einmal darunter benannt. */
@media (max-width: 34rem) {
	.ff-form .ff-scale__track {
		grid-template-columns: repeat(3, 1fr) 0.4rem repeat(3, 1fr);
		gap: 0.25rem;
	}

	.ff-form .ff-scale__step {
		padding: 0.6rem 0.15rem;
	}

	.ff-form .ff-scale__word {
		/* Nicht entfernt, nur verborgen: der Screenreader liest weiter „Sehr
		 * positiv" statt „++". */
		position: absolute;
		inline-size: 1px;
		block-size: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	.ff-form .ff-scale__mark {
		font-size: 0.95rem;
	}

	.ff-form .ff-scale__ends {
		display: flex;
		justify-content: space-between;
		gap: 1rem;
		margin: 0.4rem 0 0;
		font-family: var(--ff-font-label, inherit);
		font-size: 0.7rem;
		opacity: 0.6;
	}

	.ff-form .ff-scale__ends span:last-child {
		text-align: right;
	}
}

/* ---------------------------------------------------------------------------
 * Die Freigabe-Kästchen
 *
 * Die Rangfolge ist hier die Aussage, nicht die Dekoration: das Volle ist der
 * Weg, die Reduktion die Ausnahme. Stünden beide gleichrangig untereinander,
 * wären sie wieder ein Menü — und bei gleichrangigen Optionen greift die Tendenz
 * zur Mitte: der Unsichere wählt die vorsichtigere, unabhängig davon, was er
 * eigentlich gegeben hätte. Ein Menü, das die Reduktion als gleichwertige Wahl
 * anbietet, erzeugt die Reduktion.
 * ------------------------------------------------------------------------ */

/* Der Geltungsbereich steht IM Kästchen, nicht im Kleingedruckten darunter: die
   Grenzen sind der Grund fürs Ja, nicht die Fußnote dazu. */
.ff-form .ff-scope {
	display: block;
	margin-block-start: 0.4rem;
	font-size: 0.82rem;
	line-height: 1.55;
	opacity: 0.78;
}

/* Die Ausnahme: eingerückt, kleiner, an das Zitat-Kästchen angebunden. Man muss
   sie wollen — nicht bloß nicht vermeiden. */
.ff-form .ff-field--checkbox:has(input[name="mkt_nur_rolle"]) {
	margin-inline-start: 1.8rem;
	margin-block-start: -0.5rem;
	padding-inline-start: 0.9rem;
	border-inline-start: 1px solid var(--ff-rule, #dfdfd9);
	font-size: 0.88rem;
}

.ff-form .ff-field--checkbox:has(input[name="mkt_nur_rolle"]) .ff-check {
	opacity: 0.82;
}

/* Die Einwilligung zur Verarbeitung ist etwas anderes als die beiden Freigaben:
   sie ist Pflicht, die anderen sind Angebote. Etwas Luft davor trennt das. */
.ff-form .ff-field--checkbox:has(input[name="consent"]) {
	margin-block-start: 1.4rem;
	padding-block-start: 1rem;
	border-block-start: 1px solid var(--ff-rule, #dfdfd9);
}

/* ---------------------------------------------------------------------------
 * „Ich habe eine Kennung"
 *
 * Zugeklappt und klein: die meisten kommen über ihren eigenen Link und brauchen
 * das nie. Wer es braucht, hat ein Blatt in der Hand und sucht genau danach —
 * dem hilft eine Zeile mehr als ein Kasten, der allen anderen im Weg steht.
 * ------------------------------------------------------------------------ */

.ff-code {
	margin-block-end: 1.75rem;
	font-size: 0.85rem;
}

.ff-code summary {
	cursor: pointer;
	opacity: 0.7;
}

.ff-code summary:hover {
	opacity: 1;
}

.ff-code form {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	margin-block-start: 0.7rem;
}

.ff-code label {
	font-family: var(--ff-font-label, inherit);
	font-weight: 600;
}

.ff-code input {
	inline-size: 8em;
	font-family: var(--ff-font-mono, ui-monospace, monospace);
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.ff-code__error {
	margin: 0.6rem 0 0;
	color: var(--ff-error, #b32d2e);
}

/* Der Papier-Hinweis unter dem Formular: da, aber leise. Er muss gefunden
   werden, wenn jemand ihn sucht — nicht angeboten, solange niemand fragt. */
.ff-invite__print {
	margin-block-start: 1.5rem;
	font-size: 0.8rem;
	opacity: 0.6;
}

.ff-invite__print:hover {
	opacity: 1;
}

/* Der Hinweis am Code-Feld: ein Beispiel sagt mehr als eine Beschreibung. Wer
   „JV6-5CM" liest, weiß auf einen Blick, ob er das Richtige in der Hand hat. */
.ff-code__hint {
	margin: 0.6rem 0 0;
	font-size: 0.8rem;
	opacity: 0.7;
	max-inline-size: 52ch;
}

/* Die Antwort der Auskunft steht am Feld, nicht auf der nächsten Seite. */
.ff-code__status:empty {
	display: none;
}

.ff-code__status {
	margin: 0.5rem 0 0;
	font-size: 0.8rem;
	opacity: 0.7;
}

.ff-code__status--fehler {
	color: var(--ff-error, #b32d2e);
	opacity: 1;
}