/* Webux Formular (field block) - frontend. Ported from the .lv-form design. */
.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;
}

.webux-form__req { color: 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;
}

.webux-form__consent input {
	width: 20px;
	height: 20px;
	flex: 0 0 auto;
	margin: 1px 0 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%; }
}

.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: 1100px;
	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; }
.webux-form__panel { display: none; flex-direction: column; gap: 24px; padding: 44px; }
.webux-form__panel.is-active { display: flex; }
.webux-form__schritt {
	margin: 0; font-size: 13px; font-weight: 500; letter-spacing: 0.6px;
	text-transform: uppercase; color: #8b8178; 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; width: 100%; }
.webux-form__tile { flex: 1 1 0; min-width: 0; }
.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;
	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;
}
/* 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); }
}