/* Webux Formular (field block) - frontend. Ported from the .lv-form design. */

/* Abstand zu einer direkt darueberstehenden Sektionsueberschrift. Ohne diese
   Regel greift nur der Blockabstand des Layouts (24px), und die Formularkarte
   klebte an Titel und Lead - sie ist aber ein eigener, in sich geschlossener
   Block mit Rahmen und Schatten und braucht mehr Luft als zwei Textzeilen
   untereinander. Der clamp haelt den Zuwachs auf schmalen Viewports klein. */
.webux-section-heading + .wp-block-webux-form {
	margin-top: clamp(28px, 4vw, 52px);
}
.webux-form {
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
	background: #fff;
	border: 1px solid #ece7de;
	border-radius: 24px;
	padding: 40px;
	box-shadow: 0 8px 28px rgba(26, 26, 26, 0.06), 0 1px 2px rgba(26, 26, 26, 0.04);
}

.webux-form__field {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.webux-form__field--full { flex: 1 1 100%; }
.webux-form__field--half { flex: 1 1 calc(50% - 9px); }

.webux-form__field label {
	font-size: 14px;
	font-weight: 500;
	color: #1a1a1a;
}

/* Pflichtfeld-Sternchen auf der dunklen Primaerstufe: die helle Stufe traegt auf
   Weiss nur 3.00:1 (Liventra Salbei #8A9A7B) bzw. 3.81:1 (Theme-Default) und
   verfehlt damit AA fuer 14px-Text. Gleicher Farbton, ein Schritt dunkler -
   dieselbe Korrektur, die die Kontaktseite bisher seitenlokal setzen musste. */
.webux-form__req { color: var(--wp--preset--color--primary-dark, var(--wp--preset--color--primary, #8b8178)); }

.webux-form input,
.webux-form textarea,
.webux-form select {
	width: 100%;
	border: 1px solid #cfc9c0;
	border-radius: 12px;
	padding: 0 16px;
	height: 48px;
	font-size: 15px;
	color: #1a1a1a;
	background: #fff;
	font-family: inherit;
}

.webux-form textarea {
	height: auto;
	min-height: 120px;
	padding: 14px 16px;
	resize: vertical;
	line-height: 1.5;
}

.webux-form select {
	padding-right: 42px;
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238a847d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 16px center;
}

.webux-form input::placeholder,
.webux-form textarea::placeholder { color: #8a847d; }

.webux-form input:focus,
.webux-form textarea:focus,
.webux-form select:focus {
	outline: 2px solid var(--wp--preset--color--primary, #8b8178);
	outline-offset: 1px;
	border-color: transparent;
}

.webux-form__consent {
	flex: 1 1 100%;
	display: flex;
	align-items: flex-start;
	gap: 12px;
	font-size: 14px;
	font-weight: 400;
	color: #6b6661;
	line-height: 1.5;
}

/* WCAG 2.5.8: 20px was under the 24x24 minimum. The label text toggles the box
   as well, but the box itself is what a finger aims at. margin-top drops to 0
   because the taller box already lines up with the first text line. */
.webux-form__consent input {
	width: 24px;
	height: 24px;
	flex: 0 0 auto;
	margin: 0;
	accent-color: var(--wp--preset--color--primary, #8b8178);
}

.webux-form__consent a { color: #8b8178; text-decoration: underline; }

.webux-form__actions { flex: 1 1 100%; }

/* Hinweis unter dem Button (portiert von .lv-form-note). */
.webux-form__note {
	flex: 1 1 100%;
	font-size: 13px;
	color: #8a847d;
	margin: 0;
}

/* Gruppen-Überschrift im Formular (portiert von .lv-tippgeber-formlabel). */
.webux-form__grouplabel {
	flex: 1 1 100%;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 1.68px;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary, #8b8178);
	line-height: 1.2;
	margin: 0;
}

/* Breathing room only when a heading actually follows preceding fields.
   :first-child cannot be used here: the hidden inputs and the honeypot always
   sit in front of the first heading, so it would never match. */
.webux-form__field + .webux-form__grouplabel,
.webux-form__consent + .webux-form__grouplabel {
	margin-top: 10px;
}

.webux-form__submit {
	height: 52px;
	padding: 0 30px;
	border: 0;
	border-radius: 999px;
	background: var(--wp--preset--color--primary, #8b8178);
	color: #fff;
	font-size: 16px;
	font-weight: 500;
	letter-spacing: 0.16px;
	cursor: pointer;
	font-family: inherit;
}

.webux-form__submit:hover { background: var(--wp--preset--color--primary-dark, #6f665d); }
.webux-form__submit[disabled] { opacity: 0.6; cursor: default; }

/* Honeypot: visually hidden, still fillable by bots. */
.webux-form__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Submission status message. */
.webux-form__msg {
	flex: 1 1 100%;
	margin: 0;
	font-size: 14px;
	display: none;
}
.webux-form__msg.is-success {
	display: block;
	color: #1a7f4b;
}
.webux-form__msg.is-error {
	display: block;
	color: #b3261e;
}

@media (max-width: 600px) {
	.webux-form { padding: 28px; }
	.webux-form__field--half { flex: 1 1 100%; }
	/* iOS Safari zooms the page in as soon as a focused control is smaller than
	   16px. 15px is the design size and stays on every wider screen; only the
	   phone breakpoint pays the extra pixel. */
	.webux-form input,
	.webux-form textarea,
	.webux-form select { font-size: 16px; }
	/* Finger targets: the visible chip is the whole control (the checkbox is
	   visually hidden), so it carries the 44px itself. */
	.webux-form__pill span { height: 44px; padding: 0 16px; }
}

.webux-form__captcha { flex: 1 1 100%; }

/* ===== Layout „Datei-Zone rechts" ===== */
.webux-form--aside-file {
	flex-wrap: nowrap;
	align-items: center;
	gap: 40px;
}

/* Die linke Spalte übernimmt das Feld-Raster des Formulars (gap 18px), damit
   --half weiterhin auf calc(50% - 9px) aufgeht. */
.webux-form__main {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
}

.webux-form__aside { flex: 0 0 380px; }

@media (max-width: 900px) {
	.webux-form--aside-file { flex-wrap: wrap; gap: 18px; }
	.webux-form__main, .webux-form__aside { flex-basis: 100%; }
}

/* Pills: Mehrfachauswahl als Chips (portiert von .lv-suchabo-pill). */
.webux-form__pills-label {
	font-size: 14px;
	font-weight: 500;
	color: #1a1a1a;
}

.webux-form__pills {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.webux-form__pill input {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}

.webux-form__pill span {
	display: inline-flex;
	align-items: center;
	height: 36px;
	padding: 0 13px;
	border-radius: 999px;
	border: 1px solid #cfc9c0;
	background: #fff;
	color: #6b6661;
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
}

.webux-form__pill input:checked + span {
	background: #f4efe3;
	border-color: #e8dec8;
	color: #1a1a1a;
}

.webux-form__pill input:focus-visible + span {
	outline: 2px solid var(--wp--preset--color--primary, #8b8178);
	outline-offset: 1px;
}

/* Datei-Upload: gestrichelte Drag-&-Drop-Zone. Das <label> ist die Zone selbst,
   ein Klick öffnet daher den Dateidialog (label[for] -> input). */
.webux-form__dropzone {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 40px 32px;
	border: 1.5px dashed #d8d2c7;
	border-radius: 16px;
	background: #faf8f2;
	text-align: center;
	cursor: pointer;
}

/* sr-only statt display:none: das Feld muss fokussierbar bleiben. Zwei Klassen
   schlagen die breitere Regel `.webux-form input` (Klasse + Element). */
.webux-form .webux-form__dropzone-input {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: 0;
	border: 0;
	opacity: 0;
	overflow: hidden;
	white-space: nowrap;
	clip-path: inset(50%);
}

/* Fokus wird am Container sichtbar, weil das Feld selbst verborgen ist. */
.webux-form__dropzone:focus-within {
	outline: 2px solid var(--wp--preset--color--primary, #8b8178);
	outline-offset: 2px;
}

.webux-form__dropzone.is-dragover {
	border-color: #8b8178;
	background: #f4efe3;
}

.webux-form__dropzone-icon { color: #8b8178; }
.webux-form__dropzone-title { font-size: 15px; font-weight: 500; color: #1a1a1a; line-height: 1.2; }
.webux-form__dropzone-hint { font-size: 13px; color: #8a847d; line-height: 1.2; }
.webux-form__dropzone-file { font-size: 13px; font-weight: 500; color: #1a1a1a; line-height: 1.2; }
/* Ohne Dateinamen darf die Zeile keine gap-Lücke erzeugen. Bewusst NICHT
   display:none: das Element ist eine aria-live-Region und muss schon vor der
   ersten Änderung im Accessibility-Tree stehen, sonst wird der Dateiname beim
   ersten Mal nicht angesagt. Der negative Abstand hebt nur die gap auf. */
.webux-form__dropzone-file:empty { margin-top: -10px; }

/* ===== Wizard (Schritte-Modus) — portiert von .lv-bewertung-wizard ===== */
.webux-form--steps {
	display: flex;
	flex-wrap: nowrap;
	gap: 0;
	padding: 0;
	overflow: hidden;
	max-width: 1200px;
	margin-inline: auto;
}

.webux-form__rail {
	flex: 0 0 344px;
	display: flex;
	flex-direction: column;
	gap: 22px;
	padding: 40px 32px;
	background: #faf8f2;
}

.webux-form__rail-title { margin: 0; font-size: 16px; font-weight: 600; color: #1a1a1a; line-height: 1.3; }
.webux-form__step-row { display: flex; align-items: center; gap: 14px; }
.webux-form__step-num {
	display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
	width: 30px; height: 30px; border-radius: 999px;
	background: #f4efe3; color: #8a847d; font-size: 13px; font-weight: 600; line-height: 1;
}
.webux-form__step-label { font-size: 15px; font-weight: 500; color: #6b6661; line-height: 1.2; }
.webux-form__step-row.is-active .webux-form__step-num { background: #8b8178; color: #fff; }
.webux-form__step-row.is-active .webux-form__step-label { color: #1a1a1a; }

.webux-form__panels { flex: 1 1 0; min-width: 0; }
/* Row + wrap, not column: with `flex-direction: column` the flex-basis of
   `--half` sized the HEIGHT, so the width setting was a no-op at every viewport
   and PLZ/Ort never sat side by side. Every direct child spans the full row by
   default; only `--half` opts out (below, above the phone breakpoint). */
.webux-form__panel { display: none; flex-direction: row; flex-wrap: wrap; gap: 24px; padding: 44px; }
.webux-form__panel > * { flex: 1 1 100%; min-width: 0; }
.webux-form__panel.is-active { display: flex; }
/* Only from the tablet breakpoint up: on a phone the ≤600px rule stacks every
   field, and that rule must not be outranked from here. The basis subtracts
   half of the panel gap (24px), not of the form gap (18px). */
@media (min-width: 601px) {
	/* flex-grow 0: with grow 1 a half field that ends up ALONE on its wrap line
	   (odd number of half fields in a step) stretched to the full panel width and
	   looked identical to a `--full` field below it. The basis alone already lets
	   a pair fill the row exactly - 2 x calc(50% - 12px) + the 24px gap = 100%. */
	.webux-form__panel > .webux-form__field--half { flex: 0 1 calc(50% - 12px); }
}
.webux-form__schritt {
	margin: 0; font-size: 13px; font-weight: 500; letter-spacing: 0.6px;
	text-transform: uppercase; color: #6b6661; line-height: 1.2;
}
.webux-form__question {
	margin: 0; font-size: 26px; font-weight: 600; letter-spacing: -0.26px; color: #1a1a1a; line-height: 1.2;
}

/* Auswahl-Kacheln (radio) */
.webux-form__tiles { display: flex; flex-wrap: wrap; gap: 16px; align-items: stretch; width: 100%; }
/* Höchstens drei pro Reihe: `flex: 1 1 0` teilte die Zeile durch die Anzahl der
   Kacheln, sechs Optionen bekamen also je ein Sechstel - lange Beschriftungen wie
   „Wohn-/Geschäftshaus" liefen über. Mit einer Drittel-Basis brechen sechs
   Optionen in zwei Reihen um, und drei oder weniger füllen die Zeile wie bisher. */
/* display:flex, damit `height:100%` am inneren <span> ueberhaupt aufloest - als
   Block-Label haette es keine definierte Hoehe und die Karte bliebe bei ihrer
   Inhaltshoehe. */
.webux-form__tile { flex: 1 1 calc((100% - 32px) / 3); min-width: 0; display: flex; }
.webux-form__tile input { position: absolute; opacity: 0; width: 0; height: 0; }
/* Direktes Kind: das Icon liegt als eigener <span> im Kachel-Span und darf die
   Kachel-Optik nicht erben. */
.webux-form__tile > span {
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
	/* Der Rahmen sitzt auf diesem <span>, nicht auf dem Label. Er muss das Label
	   deshalb voll ausfuellen - in BEIDE Richtungen: ohne `height` blieben
	   einzeilige Kacheln niedriger als zweizeilige, ohne `flex: 1` schrumpft der
	   Span als Flex-Element auf seine Textbreite und die sichtbaren Karten waren
	   unterschiedlich breit, obwohl die Labels gleich breit sind. */
	flex: 1 1 auto; min-width: 0;
	height: 100%; box-sizing: border-box;
	padding: 24px 16px; background: #fff; border: 1px solid #cfc9c0; border-radius: 16px;
	font-size: 15px; font-weight: 500; color: #6b6661; line-height: 1.2; cursor: pointer;
	/* Lange Komposita umbrechen lassen statt über den Rand schieben. */
	text-align: center; overflow-wrap: break-word; hyphens: auto;
}
/* Ausgewählt: 2px Rahmen ohne Sprung. Der 1px-Border bleibt geometrisch stehen,
   der zweite Pixel kommt als Inset-Ring dazu (kein Layout-Einfluss) - so muss
   das Padding nicht gegengerechnet werden. */
.webux-form__tile input:checked + span {
	background: #faf8f2; border-color: #8b8178; box-shadow: inset 0 0 0 1px #8b8178; color: #1a1a1a;
}
.webux-form__tile input:focus-visible + span { outline: 2px solid var(--wp--preset--color--primary, #8b8178); outline-offset: 1px; }

/* Kachel-Icon (28x28), erbt die Kachelfarbe - ausgewählt bleibt es akzentfarben,
   während der Text auf #1a1a1a wechselt. */
.webux-form__tile-icon { display: inline-flex; }
.webux-form__tile-icon svg { display: block; width: 28px; height: 28px; }
.webux-form__tile input:checked + span .webux-form__tile-icon { color: #8b8178; }

.webux-form__nav { display: flex; gap: 12px; }
.webux-form__next, .webux-form__back {
	display: inline-flex; align-items: center; justify-content: center;
	height: 44px; padding: 0 24px; border: 0; border-radius: 999px;
	font-family: inherit; font-size: 15px; font-weight: 500; letter-spacing: 0.15px; line-height: 1; cursor: pointer;
}
.webux-form__next { background: #8b8178; color: #fff; }
.webux-form__next:hover { background: #6f665e; }
.webux-form__back { background: #f4efe3; color: #1a1a1a; }
.webux-form--steps .webux-form__submit { height: 44px; font-size: 15px; padding: 0 24px; }

@media (max-width: 900px) {
	/* Stack the rail on top of the panels. flex-wrap:wrap alone did NOT work:
	   the panels have flex-basis:0, so with a full-width rail they "fit" in the
	   leftover 0px and never wrap to their own row — they collapsed to 0px and
	   the fields rendered off-screen behind the form's overflow:hidden. Column
	   direction guarantees each takes the full width. */
	.webux-form--steps { flex-direction: column; flex-wrap: nowrap; }
	.webux-form__rail { flex-basis: auto; width: 100%; }
	.webux-form__panels { width: 100%; }
	.webux-form__panel { padding: 32px; }
	.webux-form__tile { flex-basis: calc((100% - 16px) / 2); }
}

/* ===== Fortschrittsbalken (Wizard, Block-Feld „progress") =====
   Reines Opt-in: ohne den Schalter gibt render.php kein Markup aus. Die Leiste
   sitzt als erstes Kind der Panel-Spalte, also direkt über dem aktiven Schritt,
   und übernimmt dessen seitliches Padding. Semantik liegt auf dem Track
   (role="progressbar" mit aria-valuemin/now/max und aria-valuetext) - die
   Füllung ist reine Optik. */
.webux-form__progress {
	padding: 32px 44px 0;
}

.webux-form__progress-track {
	position: relative;
	height: 6px;
	border-radius: 999px;
	background: #f4efe3;
	overflow: hidden;
}

.webux-form__progress-fill {
	display: block;
	height: 100%;
	border-radius: 999px;
	background: var(--wp--preset--color--primary, #8b8178);
	transition: width 240ms ease;
}

@media (prefers-reduced-motion: reduce) {
	.webux-form__progress-fill { transition: none; }
}

/* Steht die Leiste über dem Schritt, doppelt ihr Abstand mit dem Panel-Padding;
   das Panel bringt seine 44px selbst mit. */
@media (max-width: 900px) {
	.webux-form__progress { padding: 24px 32px 0; }
}

/* Auf dem Handy stand die Schritt-Leiste (Titel + 5 Zeilen, ~360px) vor der
   ersten Frage - mehr als die halbe Bildschirmhöhe, bevor überhaupt etwas
   beantwortet werden kann. Sie entfällt genau dann, wenn der Fortschrittsbalken
   dieselbe Information ohnehin trägt; ohne Balken bleibt alles wie bisher, und
   Browser ohne :has() ebenfalls. */
@media (max-width: 600px) {
	.webux-form--steps:has(.webux-form__progress) .webux-form__rail { display: none; }
	.webux-form__panel { padding: 28px; }
	.webux-form__progress { padding: 24px 28px 0; }
}

/* ===== Motivierender Hinweis je Schritt (3. Abschnitt in „Schritte") =====
   Leise Zeile direkt unter der Frage. Der Panel-Gap von 24px ist für die enge
   Bindung an die Frage zu gross, deshalb wird er hier zurückgenommen. */
/* #8a847d reached only 3.70:1 on white (AA needs 4.5:1); #6b6661 is the tone the
   consent text in this same form already uses (5.68:1). */
.webux-form__hint {
	margin: -14px 0 0;
	font-size: 14px;
	line-height: 1.5;
	color: #6b6661;
}

/* ===== Bedingte Felder =====
   Die Sichtbarkeit setzt das Script inline (display:none !important), damit sie
   unabhängig von der Ladereihenfolge greift. Diese Regel ist die Absicherung
   für den Fall, dass das Inline-Style entfernt wird — und sie trägt den
   Startzustand, den render.php serverseitig als Klasse vorwegnimmt, damit ein
   Formular mit vielen bedingten Feldern nicht erst vollständig malt und dann
   sichtbar zusammenklappt (das Script liegt im Footer). */
.webux-form .is-hidden { display: none !important; }

/* Halbe Felder, die allein auf ihrer Zeile landen.
   Der Wizard hat diese Korrektur seit jeher (siehe .webux-form__panel weiter
   oben); im einstufigen Formular fehlte sie, weil dort die halben Felder immer
   paarweise gesetzt waren. Sobald Felder BEDINGT sind, stimmt das nicht mehr:
   je nach Auswahl bleibt eines allein übrig und wuchs mit flex-grow 1 auf die
   volle Breite — es sah dann aus wie ein `--full`-Feld und die Spaltenoptik
   sprang bei jedem Wechsel der Objektart.
   Nur für Formulare MIT bedingten Feldern, damit bestehende Formulare (Kontakt,
   Verkauf, Tippgeber) unverändert bleiben; und erst ab 601px, damit die
   Handy-Regel `flex: 1 1 100%` weiter oben nicht überstimmt wird. */
@media (min-width: 601px) {
	.webux-form:has([data-wx-when-name]) > .webux-form__field--half,
	.webux-form:has([data-wx-when-name]) > .webux-form__main > .webux-form__field--half {
		flex: 0 1 calc(50% - 9px);
	}
}

/* ===== Auswahl-Kacheln im einstufigen Formular =====
   Im Wizard füllen die Kacheln ein eigenes Panel und stehen frei. Im einstufigen
   Formular sind sie ein Flex-Element unter vielen und brauchen eigene Regeln. */

/* Vier statt drei Spalten: acht Objektarten ergeben so zwei volle Reihen. Bei
   der Drittel-Basis wären es 3+3+2, und die letzte Reihe hätte über flex-grow
   die ganze Restfläche auf zwei Kacheln verteilt — sie wären gut die Hälfte
   breiter geworden als die sechs darüber.

   Das `min-width: 901px` ist Pflicht, nicht Kosmetik: die Zweispalten-Regel für
   Tablets weiter oben ist nur `.webux-form__tile` (0,1,0), diese hier mit
   `.webux-form:not(…) .webux-form__tile` aber (0,3,0). Ohne das Fenster gewönne
   sie also AUCH unterhalb von 900px, und acht Kacheln blieben dort vierspaltig
   bei rund 110px Breite. Unterhalb von 901px greift damit wieder die bestehende
   Zweierteilung: acht Kacheln ergeben vier volle Reihen. */
@media (min-width: 901px) {
	.webux-form:not(.webux-form--steps) .webux-form__tile {
		flex-basis: calc((100% - 3 * 16px) / 4);
	}
}

/* Die Kachelreihe leitet einen Abschnitt ein, sie ist keine weitere Eingabe-
   zeile: 18px Feld-Gap sind für einen mehrere hundert Pixel hohen Block zu
   knapp, und die Überschrift darf nicht so leicht wiegen wie ein Zeilen-Label. */
.webux-form:not(.webux-form--steps) .webux-form__field:has(.webux-form__tiles) {
	gap: 12px;
	margin: 6px 0 12px;
}
.webux-form:not(.webux-form--steps) .webux-form__field:has(.webux-form__tiles) .webux-form__pills-label {
	font-size: 16px;
	font-weight: 600;
	line-height: 1.3;
}

@media (max-width: 600px) {
	/* Acht Kacheln zu zweit nebeneinander lassen auf einem schmalen Gerät rund
	   92px Textbreite — „Wohn-/Geschäftshaus" bricht dort in vier Zeilen. Als
	   Liste mit Icon links stehen sie kompakt untereinander und halten die 44px
	   Fingerfläche ein, die diese Datei für die Pills bereits fordert. */
	.webux-form:not(.webux-form--steps) .webux-form__tile { flex-basis: 100%; }
	.webux-form:not(.webux-form--steps) .webux-form__tile > span {
		flex-direction: row;
		justify-content: flex-start;
		gap: 12px;
		padding: 14px 16px;
		text-align: left;
		hyphens: manual;
	}
}

/* Windows-Kontrastmodus verwirft box-shadow und ersetzt background/border durch
   Systemfarben — ausgewählt und nicht ausgewählt sähen identisch aus. Der echte
   Radio kann nicht einspringen, er ist auf 0x0 geschrumpft. */
@media (forced-colors: active) {
	.webux-form__tile input:checked + span,
	.webux-form__pill input:checked + span {
		outline: 3px solid Highlight;
		outline-offset: -3px;
		forced-color-adjust: none;
		background: Canvas;
		color: CanvasText;
	}
}

/* ---- Opt-in „Bedienelemente in Palettenfarbe" -------------------------------
   Die Wizard-Farben oben sind Literale aus dem urspruenglichen Kundendesign.
   Sie zu ersetzen wuerde jede andere Seite mitveraendern, die diesen Block
   nutzt - deshalb liegt der Palettenbezug hinter einem Schalter. Zwei
   Klassenschritte, damit die Regeln die Basiswerte sicher ueberschreiben. */
.webux-form--palette.webux-form--steps .webux-form__step-row.is-active .webux-form__step-num {
	background: var(--wp--preset--color--primary, #8b8178);
	color: #fff;
}

.webux-form--palette .webux-form__next {
	background: var(--wp--preset--color--primary, #8b8178);
}

.webux-form--palette .webux-form__next:hover,
.webux-form--palette .webux-form__next:focus-visible {
	background: var(--wp--preset--color--primary-dark, #6f665e);
}

.webux-form--palette .webux-form__submit {
	background: var(--wp--preset--color--primary, #8b8178);
}

.webux-form--palette .webux-form__submit:hover {
	background: var(--wp--preset--color--primary-dark, #6f665e);
}

/* Ausgewaehlte Kachel: Rahmen, Inset-Ring und Icon folgen der Palette. */
.webux-form--palette .webux-form__tile input:checked + span {
	border-color: var(--wp--preset--color--primary, #8b8178);
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--primary, #8b8178);
}

.webux-form--palette .webux-form__tile input:checked + span .webux-form__tile-icon {
	color: var(--wp--preset--color--primary, #8b8178);
}

/* Der Fortschrittsbalken gehoert zu denselben Bedienelementen. */
.webux-form--palette .webux-form__progress-fill {
	background: var(--wp--preset--color--primary, #8b8178);
}

/* ===== Absende-Button: dunkle Primaerstufe (opt-in) ========================
   Ohne gesetztes Feld ('primary') wird die Klasse gar nicht ausgegeben - der
   Button bleibt exakt wie bisher in primary.

   GRUND: Weiss auf der hellen Primaerstufe verfehlt AA - 3.00:1 (Liventra
   Salbei #8A9A7B), 3.81:1 (Theme-Default #8b8178), 3.23:1 (Stoeckli #00A54F).
   Auf primary-dark: 4.56:1 (Liventra #6D7A61) und 5.62:1 (Theme-Default
   #6f665e) bestehen AA; Stoeckli #009C3F bliebe bei 3.60:1 - dort muesste die
   Palettenstufe auf ca. #008737 nachgedunkelt werden (dieselbe Einschraenkung
   wie beim Bewerbungs-Button in job-list/style.css). Hover mischt 12 % Schwarz
   bei und wird nur dunkler: 5.64:1 (Liventra #5F6B55).

   Doppelter Klassenschritt (0,3,0), damit die Regel sowohl die Basiswerte als
   auch die spaeter notierte .webux-form--palette-Variante (0,2,0) und die
   ungescopten Regeln aus der geteilten site.css sicher schlaegt. */
.webux-form.webux-form--submit-dark .webux-form__submit {
	background: var(--wp--preset--color--primary-dark, #6f665e);
	color: #fff;
}

.webux-form.webux-form--submit-dark .webux-form__submit:hover,
.webux-form.webux-form--submit-dark .webux-form__submit:focus-visible {
	background: color-mix(in srgb, var(--wp--preset--color--primary-dark, #6f665e) 88%, #000);
}

/* Opt-in „Mehr Abstand über dem Button". Ohne den Schalter bleibt es beim
   Feld-Gap des Formulars (18px), der den Button direkt an das letzte Feld
   heranrueckt. Zwei Klassenschritte, damit die Regel den Basiswert schlaegt. */
.webux-form.webux-form--roomy .webux-form__actions {
	margin-top: 22px;
}