#wm-contact-form {
	position: relative;
}
#wm-contact-form form button[type="submit"]:disabled,
#wm-contact-form form button[type="submit"][disabled] {
	opacity: 0.65;
	cursor: not-allowed;
}
#wm-contact-form form .form-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	justify-content: center;
	align-items: center;
}
#wm-contact-form .form-overlay-error,
#wm-contact-form .form-overlay-success,
#wm-contact-form .form-overlay-filesize {
	padding: 30px;
	background-color: #fff;
	border-radius: 0px;
	border: 1px solid #333;
}
#wm-contact-form .form-overlay,
#wm-contact-form .form-overlay-error,
#wm-contact-form .form-overlay-success,
#wm-contact-form .form-overlay-filesize,
#wm-contact-form .form-overlay-loading {
	display: none;
}
#wm-contact-form form.loading .form-container,
#wm-contact-form form.error .form-container,
#wm-contact-form form.success .form-container,
#wm-contact-form form.filesize .form-container {
	opacity: 0.3;
	pointer-events: none;
}
#wm-contact-form form.error .form-overlay-error,
#wm-contact-form form.error .form-overlay,
#wm-contact-form form.success .form-overlay-success,
#wm-contact-form form.success .form-overlay,
#wm-contact-form form.filesize .form-overlay-filesize,
#wm-contact-form form.filesize .form-overlay,
#wm-contact-form form.loading .form-overlay-loading,
#wm-contact-form form.loading .form-overlay {
	display: flex;
}
#wm-contact-form #cryptchaUi .cryptcha{
	padding-top:10px;
	padding-bottom:10px;
	font-size:0.8em
}
#wm-contact-form #cryptchaUi .progress-bar{
	height:3px;
	border-radius:3px;
	transition:width 1.5s linear;
}
@keyframes svelte-14vnvai-waiter{
	0%{
		background:rgb(119, 119, 119)
	}
	50%{
		background:rgb(255, 255, 255);
		margin-left:20%;
		margin-right:20%
	}
	100%{
		background:rgb(119, 119, 119)
	}
}
#wm-contact-form #cryptchaUi waiter-bar{
	height: 3px;
	margin-top: 3px;
	border-radius:3px;
	animation:svelte-14vnvai-waiter 2s infinite
}
#wm-contact-form #cryptchaUi .error{
	color:red
}
#wm-contact-form #cryptchaUi .ok{
	color:green
}

/* Neues Formular-Design basierend auf Figma */
#wm-contact-form .form-container {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-m, 24px);
	width: 100%;
}

#wm-contact-form .form-row {
	display: flex;
	gap: var(--spacing-m, 24px);
	width: 100%;
}

#wm-contact-form .form-row-three {
	flex-direction: row;
}

#wm-contact-form .form-row-single {
	flex-direction: column;
}

#wm-contact-form .form-field {
	flex: 1 0 0;
	display: flex;
	flex-direction: column;
	gap: var(--spacing-s, 12px);
	min-width: 0;
}

/* Labels werden nicht mehr verwendet, nur Placeholder */

#wm-contact-form .form-field input[type="text"],
#wm-contact-form .form-field input[type="email"],
#wm-contact-form .form-field input[type="tel"],
#wm-contact-form .form-field input[type="date"],
#wm-contact-form .form-field input[type="time"],
#wm-contact-form .form-field select {
	background-color: var(--color-figma-gray-100, #f3f3f3);
	border: 1px solid var(--color-figma-gradient-middle, #83837a);
	border-radius: var(--spacing-xs, 6px);
	padding: var(--spacing-8, 8px) var(--spacing-sl, 18px);
	font-family: 'Opel Next', sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: normal;
	color: var(--color-figma-gray-700, #1d1d1b);
	width: 100%;
	box-sizing: border-box;
	min-height: 38px;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
}

#wm-contact-form .form-field input[type="text"]:focus,
#wm-contact-form .form-field input[type="email"]:focus,
#wm-contact-form .form-field input[type="tel"]:focus,
#wm-contact-form .form-field input[type="date"]:focus,
#wm-contact-form .form-field input[type="time"]:focus,
#wm-contact-form .form-field select:focus {
	outline: none;
	border-color: var(--color-figma-gray-700, #1d1d1b);
}

/* Fehlerzustände: native Constraint-Validation (input:invalid) und JS-Klasse .has-error – dezent */
#wm-contact-form .form-field input:invalid,
#wm-contact-form .form-field select:invalid,
#wm-contact-form .form-field input.has-error {
	border-color: #c95a5a;
	box-shadow: 0 0 0 1px rgba(201, 90, 90, 0.25);
	outline: none;
}

#wm-contact-form .form-field input[type="text"]::placeholder,
#wm-contact-form .form-field input[type="email"]::placeholder,
#wm-contact-form .form-field input[type="tel"]::placeholder,
#wm-contact-form .form-field input[type="date"]::placeholder,
#wm-contact-form .form-field input[type="time"]::placeholder {
	color: var(--color-figma-gray-700, #1d1d1b);
	opacity: 1;
}

/* Select Placeholder Styling */
#wm-contact-form .form-field select option:first-child {
	color: var(--color-figma-gray-700, #1d1d1b);
	opacity: 0.7;
}

/* Select Dropdown Styling */
#wm-contact-form .form-field select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6 9L12 15L18 9' stroke='%231d1d1b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right var(--spacing-sl, 18px) center;
	background-size: 24px 24px;
	padding-right: calc(var(--spacing-sl, 18px) + 24px + var(--spacing-s, 12px));
	cursor: pointer;
}

/* Checkbox Styling */
#wm-contact-form .form-field-checkbox {
	flex-direction: row;
	align-items: flex-start;
	gap: var(--spacing-s, 12px);
}

#wm-contact-form .checkbox-label {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	gap: var(--spacing-s, 12px);
	cursor: pointer;
	flex: 1 0 0;
}

#wm-contact-form .checkbox-label input[type="checkbox"] {
	width: 40px;
	height: 40px;
	min-width: 40px;
	min-height: 40px;
	margin: 0;
	padding: var(--spacing-8, 8px);
	border: 1px solid var(--color-figma-gray-700, #1d1d1b);
	border-radius: var(--spacing-xl, 48px);
	background-color: transparent;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	cursor: pointer;
	position: relative;
	flex-shrink: 0;
	box-sizing: border-box;
}

#wm-contact-form .checkbox-label input[type="checkbox"]:checked {
	background-color: var(--color-figma-gray-700, #1d1d1b);
}

#wm-contact-form .checkbox-label input[type="checkbox"]:checked::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 24px;
	height: 24px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M20 6L9 17L4 12' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

#wm-contact-form .checkbox-text {
	font-family: 'Opel Next', sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: normal;
	color: var(--color-figma-gray-700, #1d1d1b);
	flex: 1 0 0;
}

#wm-contact-form .checkbox-text a {
	color: var(--color-figma-gray-700, #1d1d1b);
	text-decoration: underline;
	text-underline-position: from-font;
}

#wm-contact-form .checkbox-text a:hover {
	text-decoration: underline;
}

/* Button Styling */
#wm-contact-form .btn {
	background-color: var(--color-figma-gray-700, #1d1d1b);
	color: var(--white, #ffffff);
	border: none;
	border-radius: var(--spacing-xs, 6px);
	padding: var(--spacing-8, 8px) var(--spacing-m, 24px);
	font-family: 'Opel Next', sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: normal;
	cursor: pointer;
	text-transform: lowercase;
	transition: opacity 0.3s ease;
}

#wm-contact-form .btn:hover {
	opacity: 0.9;
}

#wm-contact-form .btn:disabled {
	opacity: 0.65;
	cursor: not-allowed;
}

/* Responsive Design */
@media (max-width: 768px) {
	#wm-contact-form .form-row-three {
		flex-direction: column;
	}
	
	#wm-contact-form .form-field {
		width: 100%;
	}
}