/**
 * Design "Leiste" - alle Felder in einer Zeile, auf Mobilgeraeten gestapelt.
 *
 * Alle Farben laufen ueber CSS-Variablen. Die Variante liefert die
 * Standardwerte, die Einstellungen bzw. der Shortcode ueberschreiben sie
 * direkt am Element (Inline-Style schlaegt Klassenregel).
 *
 * Interaktive Zustaende sind bewusst hoeher gewichtet (.dwx-bar-wrap davor)
 * und setzen Hintergrund, Rahmen und Textfarbe ausdruecklich - sonst
 * faerben Theme-Regeln wie "button:active" den Absende-Button um.
 */

.dwx-bar-wrap {
	/* Grundwerte, per Inline-Style ueberschreibbar. */
	--dwx-bar-accent: #F2703C;
	--dwx-bar-accent-hover: var(--dwx-bar-accent);
	--dwx-bar-accent-active: var(--dwx-bar-accent-hover);
	--dwx-cta-text: #FFFFFF;
	--dwx-cta-hover-filter: brightness(1.06);
	--dwx-focus: var(--dwx-bar-accent);
	--dwx-focus-ring: rgba(242, 112, 60, .28);
	--dwx-error: #E5484D;

	--dwx-bar-radius: 14px;
	--dwx-bar-max: 1180px;
	--dwx-bar-gap: 12px;
	--dwx-bar-height: 56px;

	width: 100%;
	max-width: var(--dwx-bar-max);
	margin: 0 auto;
	box-sizing: border-box;
	font-family: inherit;
	-webkit-font-smoothing: antialiased;
}

.dwx-bar-wrap *,
.dwx-bar-wrap *::before,
.dwx-bar-wrap *::after {
	box-sizing: border-box;
}

/* ---------- Varianten ---------- */

.dwx-bar--glass {
	--dwx-surface: rgba(255, 255, 255, .16);
	--dwx-surface-hover: rgba(255, 255, 255, .26);
	--dwx-border: rgba(255, 255, 255, .38);
	--dwx-border-hover: rgba(255, 255, 255, .65);
	--dwx-text: #FFFFFF;
	--dwx-muted: rgba(255, 255, 255, .88);
	--dwx-panel: rgba(20, 20, 22, .55);
	--dwx-blur: blur(16px) saturate(140%);
	--dwx-shadow: 0 10px 30px rgba(0, 0, 0, .18);
}

.dwx-bar--solid {
	--dwx-surface: #FFFFFF;
	--dwx-surface-hover: #FFFFFF;
	--dwx-border: #E2E5EA;
	--dwx-border-hover: #C7CCD4;
	--dwx-text: #14171C;
	--dwx-muted: #6B7280;
	--dwx-panel: #FFFFFF;
	--dwx-blur: none;
	--dwx-shadow: 0 10px 30px rgba(16, 24, 40, .10);
}

.dwx-bar--dark {
	--dwx-surface: rgba(255, 255, 255, .07);
	--dwx-surface-hover: rgba(255, 255, 255, .13);
	--dwx-border: rgba(255, 255, 255, .18);
	--dwx-border-hover: rgba(255, 255, 255, .34);
	--dwx-text: #FFFFFF;
	--dwx-muted: rgba(255, 255, 255, .70);
	--dwx-panel: #14171C;
	--dwx-blur: blur(10px);
	--dwx-shadow: 0 10px 30px rgba(0, 0, 0, .35);
}

/* ---------- Leiste ---------- */

.dwx-bar {
	display: flex;
	align-items: stretch;
	gap: var(--dwx-bar-gap);
	width: 100%;
}

.dwx-bar-wrap .dwx-bar-item {
	position: relative;
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	align-items: center;
	gap: 10px;
	height: var(--dwx-bar-height);
	padding: 0 16px;
	margin: 0;
	border: 1px solid var(--dwx-border);
	border-radius: var(--dwx-bar-radius);
	background: var(--dwx-surface);
	-webkit-backdrop-filter: var(--dwx-blur);
	backdrop-filter: var(--dwx-blur);
	color: var(--dwx-text);
	box-shadow: var(--dwx-shadow);
	transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
	text-align: left;
	font: inherit;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.dwx-bar-wrap .dwx-bar-item:has(input[type="text"]),
.dwx-bar-wrap .dwx-bar-item:has(input[type="number"]) {
	cursor: text;
}

.dwx-bar-wrap .dwx-bar-item:hover {
	background: var(--dwx-surface-hover);
	border-color: var(--dwx-border-hover);
}

/*
 * Der Fokus wird an der Kachel angezeigt, nicht am inneren Feld - sonst
 * entstuende ein zweiter Rahmen direkt neben dem Icon.
 */
.dwx-bar-wrap .dwx-bar-item:focus-within {
	border-color: var(--dwx-focus);
	box-shadow: var(--dwx-shadow), 0 0 0 3px var(--dwx-focus-ring);
}

.dwx-bar-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	color: var(--dwx-muted);
	opacity: .95;
	pointer-events: none;
}

.dwx-bar-icon svg {
	display: block;
}

/*
 * Vollstaendiger Reset der inneren Felder. Themes setzen haeufig
 * Rahmen, Schatten oder Fokusringe auf input/select - die wuerden hier
 * als Kasten neben dem Icon sichtbar. Bewusst mit !important, weil das
 * Formular in beliebige fremde Themes eingebettet wird.
 */
.dwx-bar-wrap .dwx-bar-control,
.dwx-bar-wrap .dwx-bar-control:hover,
.dwx-bar-wrap .dwx-bar-control:focus,
.dwx-bar-wrap .dwx-bar-control:focus-visible,
.dwx-bar-wrap .dwx-bar-control:active {
	border: 0 !important;
	outline: 0 !important;
	box-shadow: none !important;
	background: transparent !important;
	background-image: none !important;
	border-radius: 0 !important;
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	appearance: none !important;
	-webkit-tap-highlight-color: transparent;
}

.dwx-bar-wrap .dwx-bar-control {
	flex: 1 1 auto;
	min-width: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	color: var(--dwx-text);
	font: inherit;
	font-size: 15px;
	line-height: 1.2;
	text-overflow: ellipsis;
	text-transform: none;
	letter-spacing: normal;
	cursor: pointer;
}

.dwx-bar-wrap .dwx-bar-control::placeholder {
	color: var(--dwx-muted);
	opacity: 1;
}

/* Auswahlfeld ohne Auswahl wie einen Placeholder einfaerben (Klasse per JS). */
.dwx-bar-wrap .dwx-bar-control.dwx-is-empty {
	color: var(--dwx-muted);
}

.dwx-bar-control option {
	color: #14171C;
	background: #FFFFFF;
}

/* Zahlenfeld ohne Spinner. */
.dwx-bar-wrap .dwx-bar-control[type="number"] {
	-moz-appearance: textfield !important;
}

.dwx-bar-wrap .dwx-bar-control[type="number"]::-webkit-outer-spin-button,
.dwx-bar-wrap .dwx-bar-control[type="number"]::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.dwx-bar-wrap select.dwx-bar-control {
	padding-right: 14px;
}

/* Dezenter Hinweis, dass es sich um ein Auswahlfeld handelt. */
.dwx-bar-wrap .dwx-bar-item:has(select)::after {
	content: "";
	position: absolute;
	right: 14px;
	top: 50%;
	width: 7px;
	height: 7px;
	margin-top: -5px;
	border-right: 1.6px solid var(--dwx-muted);
	border-bottom: 1.6px solid var(--dwx-muted);
	transform: rotate(45deg);
	opacity: 0;
	transition: opacity .2s ease;
	pointer-events: none;
}

.dwx-bar-wrap .dwx-bar-item:has(select):hover::after,
.dwx-bar-wrap .dwx-bar-item:has(select):focus-within::after {
	opacity: .8;
}

.dwx-bar-unit {
	flex: 0 0 auto;
	font-size: 13px;
	color: var(--dwx-muted);
	transition: opacity .15s ease;
	pointer-events: none;
}

.dwx-bar-area:placeholder-shown ~ .dwx-bar-unit {
	opacity: 0;
}

/* Kontakt-Auslöser. */
.dwx-bar-wrap .dwx-bar-trigger {
	cursor: pointer;
	justify-content: flex-start;
	white-space: nowrap;
	overflow: hidden;
	-webkit-appearance: none;
	appearance: none;
}

.dwx-bar-trigger-label {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	font-size: 15px;
	color: var(--dwx-muted);
}

.dwx-bar-wrap .dwx-bar-trigger[aria-expanded="true"] {
	border-color: var(--dwx-focus);
}

.dwx-bar-wrap .dwx-bar-trigger:focus-visible {
	border-color: var(--dwx-focus);
	box-shadow: var(--dwx-shadow), 0 0 0 3px var(--dwx-focus-ring);
	outline: 0;
}

.dwx-bar-trigger-check {
	display: none;
	flex: 0 0 auto;
	color: var(--dwx-focus);
}

.dwx-bar-trigger.dwx-is-complete .dwx-bar-trigger-check {
	display: inline-flex;
}

.dwx-bar-trigger.dwx-is-complete .dwx-bar-trigger-label {
	color: var(--dwx-text);
}

/*
 * Absende-Button. Jeder Zustand setzt Hintergrund, Rahmen und Textfarbe
 * ausdruecklich, damit Theme-Regeln (button:hover/:active/:focus) den
 * Button nicht umfaerben.
 */
.dwx-bar-wrap .dwx-bar-cta,
.dwx-bar-wrap .dwx-bar-cta:link,
.dwx-bar-wrap .dwx-bar-cta:visited {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	height: var(--dwx-bar-height);
	padding: 0 26px;
	border: 1px solid var(--dwx-bar-accent);
	border-radius: var(--dwx-bar-radius);
	background: var(--dwx-bar-accent);
	background-image: none;
	color: var(--dwx-cta-text);
	font: inherit;
	font-size: 15px;
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
	text-transform: none;
	cursor: pointer;
	box-shadow: var(--dwx-shadow);
	transition: background-color .2s ease, filter .2s ease, transform .1s ease, box-shadow .2s ease;
	white-space: nowrap;
	-webkit-appearance: none;
	appearance: none;
	-webkit-tap-highlight-color: transparent;
}

/*
 * Zustaende des Buttons mit !important. Viele Themes setzen
 * "button:active { background: ... !important }" - ohne Gegenwehr
 * blitzt der Button beim Klick in der Theme-Farbe auf.
 * Die Farben selbst kommen aus den Einstellungen, deshalb schraenkt
 * das niemanden ein.
 */
.dwx-bar-wrap .dwx-bar-cta:hover,
.dwx-bar-wrap .dwx-bar-cta:focus:hover {
	background: var(--dwx-bar-accent-hover) !important;
	border-color: var(--dwx-bar-accent-hover) !important;
	color: var(--dwx-cta-text) !important;
	filter: var(--dwx-cta-hover-filter);
}

.dwx-bar-wrap .dwx-bar-cta:active {
	background: var(--dwx-bar-accent-active) !important;
	border-color: var(--dwx-bar-accent-active) !important;
	color: var(--dwx-cta-text) !important;
	filter: var(--dwx-cta-hover-filter);
	transform: translateY(1px);
}

.dwx-bar-wrap .dwx-bar-cta:focus {
	background: var(--dwx-bar-accent) !important;
	border-color: var(--dwx-bar-accent) !important;
	color: var(--dwx-cta-text) !important;
	outline: 0 !important;
}

.dwx-bar-wrap .dwx-bar-cta:focus-visible {
	box-shadow: var(--dwx-shadow), 0 0 0 3px var(--dwx-focus-ring);
	outline: 0 !important;
}

.dwx-bar-cta svg {
	display: block;
	flex: 0 0 auto;
}

/* Feld mit Fehler. */
.dwx-bar-wrap .dwx-bar-item.dwx-invalid,
.dwx-bar-wrap .dwx-bar-field.dwx-invalid input {
	border-color: var(--dwx-error) !important;
	box-shadow: 0 0 0 3px rgba(229, 72, 77, .22) !important;
}

/* ---------- Kontakt-Panel ---------- */

.dwx-bar-panel {
	position: relative;
	margin-top: var(--dwx-bar-gap);
	padding: 22px;
	border: 1px solid var(--dwx-border);
	border-radius: calc(var(--dwx-bar-radius) + 2px);
	background: var(--dwx-panel);
	-webkit-backdrop-filter: var(--dwx-blur);
	backdrop-filter: var(--dwx-blur);
	color: var(--dwx-text);
	box-shadow: var(--dwx-shadow);
	animation: dwxBarIn .2s ease;
}

.dwx-bar-panel[hidden] {
	display: none;
}

@keyframes dwxBarIn {
	from {
		opacity: 0;
		transform: translateY(-6px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.dwx-bar-panel-title {
	margin: 0 0 16px;
	padding-right: 32px;
	font-size: 15px;
	font-weight: 700;
	color: var(--dwx-text);
}

.dwx-bar-panel-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 14px;
}

.dwx-bar-field label {
	display: block;
	margin-bottom: 6px;
	font-size: 13px;
	font-weight: 600;
	color: var(--dwx-muted);
}

.dwx-bar-wrap .dwx-bar-field input {
	width: 100%;
	height: 48px;
	padding: 0 14px;
	border: 1px solid var(--dwx-border);
	border-radius: calc(var(--dwx-bar-radius) - 4px);
	background: var(--dwx-surface);
	background-image: none;
	color: var(--dwx-text);
	font: inherit;
	font-size: 15px;
	outline: 0;
	box-shadow: none;
	transition: border-color .2s ease, box-shadow .2s ease;
	-webkit-appearance: none;
	appearance: none;
	-webkit-tap-highlight-color: transparent;
}

.dwx-bar--solid .dwx-bar-field input {
	background: #F8F9FB;
}

.dwx-bar-wrap .dwx-bar-field input::placeholder {
	color: var(--dwx-muted);
	opacity: .8;
}

.dwx-bar-wrap .dwx-bar-field input:hover {
	border-color: var(--dwx-border-hover);
}

.dwx-bar-wrap .dwx-bar-field input:focus,
.dwx-bar-wrap .dwx-bar-field input:focus-visible {
	border-color: var(--dwx-focus) !important;
	box-shadow: 0 0 0 3px var(--dwx-focus-ring) !important;
	outline: 0 !important;
}

.dwx-bar-consent {
	margin-top: 16px;
}

.dwx-bar-consent .dwx-consent {
	color: var(--dwx-text);
	font-size: 13px;
}

.dwx-bar-consent .dwx-consent input[type="checkbox"] {
	accent-color: var(--dwx-focus);
}

.dwx-bar-consent .dwx-consent a {
	color: var(--dwx-bar-accent);
	text-decoration: underline;
}

.dwx-bar-consent.dwx-invalid .dwx-consent-text {
	color: #FF9AA0;
}

.dwx-bar--solid .dwx-bar-consent.dwx-invalid .dwx-consent-text {
	color: #C0392B;
}

.dwx-bar-wrap .dwx-bar-panel-close {
	position: absolute;
	top: 14px;
	right: 14px;
	width: 30px;
	height: 30px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 1px solid var(--dwx-border);
	border-radius: 50%;
	background: transparent;
	color: var(--dwx-muted);
	cursor: pointer;
	box-shadow: none;
	transition: color .2s ease, border-color .2s ease;
	-webkit-appearance: none;
	appearance: none;
	-webkit-tap-highlight-color: transparent;
}

.dwx-bar-wrap .dwx-bar-panel-close:hover {
	color: var(--dwx-text);
	background: transparent;
	border-color: var(--dwx-border-hover);
}

.dwx-bar-wrap .dwx-bar-panel-close:focus-visible {
	border-color: var(--dwx-focus);
	box-shadow: 0 0 0 3px var(--dwx-focus-ring);
	outline: 0;
}

/* ---------- Rückmeldung ---------- */

.dwx-bar-feedback {
	margin-top: var(--dwx-bar-gap);
	padding: 12px 16px;
	border: 1px solid var(--dwx-error);
	border-left-width: 4px;
	border-radius: calc(var(--dwx-bar-radius) - 4px);
	background: rgba(229, 72, 77, .12);
	color: var(--dwx-text);
	font-size: 14px;
	font-weight: 600;
	-webkit-backdrop-filter: var(--dwx-blur);
	backdrop-filter: var(--dwx-blur);
}

.dwx-bar--solid .dwx-bar-feedback {
	background: #FDF2F2;
	color: #7A1B1B;
}

/* ---------- Erfolgsmeldung ---------- */

.dwx-bar-success {
	padding: 30px;
	border: 1px solid var(--dwx-border);
	border-radius: calc(var(--dwx-bar-radius) + 2px);
	background: var(--dwx-panel);
	-webkit-backdrop-filter: var(--dwx-blur);
	backdrop-filter: var(--dwx-blur);
	color: var(--dwx-text);
	box-shadow: var(--dwx-shadow);
	text-align: center;
	animation: dwxBarIn .25s ease;
}

.dwx-bar-success[hidden] {
	display: none;
}

.dwx-bar-success .dwx-success-icon {
	width: 58px;
	height: 58px;
	margin: 0 auto 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--dwx-bar-accent);
	color: var(--dwx-cta-text);
}

.dwx-bar-success .dwx-success-title {
	margin: 0 0 10px;
	font-size: 24px;
	font-weight: 800;
	color: var(--dwx-text);
}

.dwx-bar-success .dwx-success-title:focus {
	outline: 0;
}

.dwx-bar-success .dwx-success-text {
	margin: 0 auto 22px;
	max-width: 560px;
	font-size: 15px;
	line-height: 1.7;
	color: var(--dwx-muted);
}

.dwx-bar-wrap .dwx-bar-success .dwx-success-cta,
.dwx-bar-wrap .dwx-bar-success .dwx-success-cta:link,
.dwx-bar-wrap .dwx-bar-success .dwx-success-cta:visited {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	height: var(--dwx-bar-height);
	padding: 0 26px;
	border: 1px solid var(--dwx-bar-accent);
	border-radius: var(--dwx-bar-radius);
	background: var(--dwx-bar-accent);
	color: var(--dwx-cta-text);
	font-size: 15px;
	font-weight: 700;
	text-decoration: none;
	transition: background-color .2s ease, filter .2s ease;
}

.dwx-bar-wrap .dwx-bar-success .dwx-success-cta:hover,
.dwx-bar-wrap .dwx-bar-success .dwx-success-cta:active {
	background: var(--dwx-bar-accent-hover);
	border-color: var(--dwx-bar-accent-hover);
	filter: var(--dwx-cta-hover-filter);
	color: var(--dwx-cta-text);
}

.dwx-bar-wrap .dwx-bar-success .dwx-success-cta:focus-visible {
	box-shadow: 0 0 0 3px var(--dwx-focus-ring);
	outline: 0;
}

/* ---------- Ladezustand ---------- */

.dwx-bar-form.dwx-loading .dwx-bar-cta {
	opacity: .75;
	pointer-events: none;
}

/* ---------- Responsive ---------- */

/* Zwei Reihen, bevor die Felder zu schmal werden. */
@media (max-width: 1180px) {
	.dwx-bar {
		flex-wrap: wrap;
	}

	.dwx-bar-wrap .dwx-bar-item {
		flex: 1 1 calc(33.333% - var(--dwx-bar-gap));
	}

	.dwx-bar-wrap .dwx-bar-cta {
		flex: 1 1 100%;
	}
}

@media (max-width: 860px) {
	.dwx-bar-wrap .dwx-bar-item {
		flex: 1 1 calc(50% - var(--dwx-bar-gap));
	}

	.dwx-bar-panel-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Gestapelt auf dem Smartphone. */
@media (max-width: 640px) {
	.dwx-bar-wrap {
		--dwx-bar-gap: 10px;
		--dwx-bar-height: 54px;
	}

	.dwx-bar-wrap .dwx-bar-item,
	.dwx-bar-wrap .dwx-bar-cta {
		flex: 1 1 100%;
		width: 100%;
	}

	.dwx-bar-wrap .dwx-bar-cta {
		margin-top: 2px;
	}

	.dwx-bar-panel {
		padding: 18px 16px;
	}

	.dwx-bar-panel-grid {
		grid-template-columns: 1fr;
	}

	.dwx-bar-success {
		padding: 24px 18px;
	}

	.dwx-bar-success .dwx-success-title {
		font-size: 21px;
	}

	.dwx-bar-wrap .dwx-bar-success .dwx-success-cta {
		width: 100%;
		justify-content: center;
	}
}

/* Fallback fuer Browser ohne :has() - Chevron dauerhaft ausblenden. */
@supports not selector(:has(*)) {
	.dwx-bar-wrap .dwx-bar-item::after {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {

	.dwx-bar-panel,
	.dwx-bar-success,
	.dwx-bar-wrap .dwx-bar-item,
	.dwx-bar-wrap .dwx-bar-cta {
		animation: none !important;
		transition: none !important;
	}
}