var w_d686e026599d48749d9d22d20cc32e08_in_widgetHtml=String.raw`<meta content="width=device-width, initial-scale=1" name="viewport" />

<div id="success-container" style="display: none">
	<h2 class="success-header">Wir bedanken uns für Ihre Bewerbung und für das damit verbundene Interesse an unserem Unternehmen.</h2>
	<span class="success-text">Hiermit bestätigen wir den Eingang Ihrer Bewerbung. Bitte haben Sie Verständnis, dass wir für die Bearbeitung etwas Zeit benötigen. Nach Prüfung Ihrer Unterlagen werden wir uns wieder mit Ihnen in Verbindung setzen.</span>
</div>

<div id="failure-container" style="display: none">
	<h2 class="failure-header">Es ist etwas schiefgelaufen</h2>
	<span class="failure-text">Bitte versuchen Sie es erneut.</span>
</div>

<div id="form-container">
	<form method="POST" action="#" id="form" enctype="multipart/form-data">

		<div class="grid">
<div class="form-control colspan-2"><label for="Salutation"><span class="form-label">Anrede</span></label>
<select name="Salutation" class="form-input" id="salutation-input">
    <option value="Other">-</option>
    <option value="Mr">Herr</option>
    <option value="Mrs">Frau</option>
</select></div>
<div class="colspan-2"></div>
<div class="form-control colspan-2"><label for="FirstName"><span class="form-label">Vorname *</span></label>
<input class="form-input" name="FirstName" type="text"></div>
<div class="form-control colspan-2"><label for="LastName"><span class="form-label">Nachname *</span></label>
<input class="form-input" name="LastName" type="text"></div>
<div class="form-control colspan-4"><label for="Email"><span class="form-label">E-Mail *</span></label>
<input class="form-input" name="Email" id="email-input" type="email"></div>
<div class="form-control colspan-2"><label for="Zipcode"><span class="form-label">Postleitzahl *</span></label>
<input class="form-input" name="Zipcode" id="zipcode-input" type="number"></div>
<div class="form-control colspan-2"><label for="Country"><span class="form-label">Land *</span></label>
<select class="form-input" name="Country" id="country-input">
    <option disabled selected value="-1"></option>
    <option value="AT">Österreich</option>
    <option value="DE">Deutschland</option>
    <option value="IT">Italien</option>
    <option value="CH">Schweiz</option>
</select></div>
<div class="form-control colspan-2"><label for="CountryCode"><span class="form-label">Vorwahl *</span></label>
<input list="country-code-list" class="form-input" id="country-code-input" name="CountryCode" type="tel" placeholder="z.B. +43">
<datalist id="country-code-list">
    <option value="+43">+43 (AT)</option>
    <option value="+49">+49 (DE)</option>
    <option value="+39">+39 (IT)</option>
    <option value="+41">+41 (CH)</option>
</datalist></div>
<div class="form-control colspan-2"><label for="Phone"><span class="form-label">Telefon *</span></label>
<input class="form-input" name="Phone" id="phone-input" type="tel" placeholder="z.B. 664 1234 5678"></div>
<div class="form-control colspan-2"><label for="message-field"><span class="form-label">Ihre Nachricht</span></label>
<textarea class="form-input" form="form" id="message-field" name="Message"></textarea></div>
<div class="form-control colspan-2"><input id="file-input" type="file" multiple style="display: none;" accept="application/pdf, image/png, image/jpeg, application/msword, application/vnd.openxmlformats-officedocument.wordprocessingml.document" />
<div class="" id="file-drop">
    <div id="file-preview-div">

    </div>
    <span id="file-drop-info">
        <strong>Legen Sie bis zu 5 Dateien hier ab, um sie hochzuladen</strong>
        <br />
        (Word-, PDF-, PNG- und JPG-Dateien bis max 25 MB)
    </span>
    <span class="msg"></span>
</div></div>
<div class="form-control colspan-4"><label for="privacy-policy">
    <input name="AcceptedPrivacyPolicy" class="form-input" type="checkbox" id="privacy-policy">
    Ich habe die 
    <a tabindex="-1" class="link" href="https://matrexx.at/datenschutz">Datenschutzerklärung</a>
     gelesen, verstanden und zur Kenntnis genommen
</label></div>
</div>


		<input id="captcha-id" name="CaptchaId" type="text" style="display: none;">
		<input id="captcha-value" name="CaptchaValue" type="number" style="display: none;">
	</form>

	<button id="submit-button" class="btn primary" style="margin-top: 20px">Absenden</button>
	<!--<button onclick="foo()">Foo</button>-->

	<div id="captcha-popup-overlay">
		<span class="spinner" id="loading-indicator"></span>
		<div id="captcha-popup">
			<h3 id="captcha-header" style="display:none">Schieben Sie das Kissen nach rechts auf die richtige Position</h3>
			<div id="captcha-img-container">
				<img src="https://jobportal.wenatex.com/public/captcha/icon" id="captcha-icon" width="88" height="77" />
				<img id="captcha-img" draggable="false" /><br>
			</div>
			<div class="slider-wrapper">
				<input type="range"
					   min="0"
					   max="374"
					   value="0"
					   id="captchaSlider"
					   class="slider">
				<div class="slider-track" id="captcha-slider-track">
					<span id="captcha-slider-info">Schieben Sie das Kissen nach rechts auf die richtige Position</span>
				</div>
				<span class="msg" style="color: red; padding: 10px; display: block"></span>
			</div>
			<button id="reload-captcha-button" class="btn" style="margin-left: 10px; margin-bottom: 10px">Neues Bild laden</button>
			<button id="confirm-captcha-button" class="btn primary" style="float: right; margin-right: 10px; margin-bottom: 10px">Absenden</button>
		</div>
	</div>
</div>`;
var w_d686e026599d48749d9d22d20cc32e08_in_widgetCss=String.raw`/* GLOBAL */

* {
	font-family: 'Poppins' !important;
}

/* CAPTCHA */

#captchaSlider {
	max-width: 462px;
	touch-action: none;
}

#captcha-img-container {
	position: relative;
	margin: 10px 10px 0 10px;
}

#captcha-icon {
	position: absolute;
	top: 65px;
}

input, select {
	background: inherit;
}

	select:focus, input:focus {
		background: inherit;
	}

.form-input {
	padding: 0;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.form-inline-input {
	display: inline-block;
	border: none;
	width: 40px;
	-moz-appearance: textfield;
	margin: 0;
	padding: 0;
}

	.form-inline-input:focus {
		border: none;
		outline: none;
		margin: 0;
		padding: 0;
	}

input[type=number] {
	-moz-appearance: textfield;
}

#captcha-popup-overlay {
	position: fixed;
	top: 0;
	left: 0;
	visibility: collapse;
	background: rgba(255, 255, 255, 0.75);
	width: 100%;
	height: 100%;
	z-index: 1337;
	align-items: center;
	display: flex;
	justify-content: center
}

	#captcha-popup-overlay.show {
		visibility: visible;
		animation: fadeIn 0.5s;
	}

	#captcha-popup-overlay.show #captcha-popup {
		animation: fadeIn 0.5s;
	}

#captcha-popup {
	background: white;
	box-shadow: rgba(0, 0, 0, 0.5) 0 3px 8px;
	width: calc(462px + 20px);
	transform: scale(0.7);
	scroll-margin-top: 150px;
	scroll-snap-margin-top: 150px;
}

h3 {
	padding: 10px;
	margin: 0;
	background-color: #95C11F;
	color: #eee;
}

/* FORM */

.checkbox {
	display: flex;
	flex-direction: row;
	user-select: none;
}

#form-container, #success-container, #failure-container {
	background: white;
	padding: 10px;
	margin: auto;
}

#success-container, #failure-container {
	text-align: center;
}

#form {
	background: white;
}


#file-drop {
	background-color: #f7f7f7;
	border: 2px dashed #ced4da;
	border-radius: 6px;
	box-sizing: border-box;
	color: #212529;
	cursor: pointer;
	font-family: Poppins, sans-serif;
	font-size: 14px;
	line-height: 27px !important;
	text-align: center;
	padding: 50px;
	min-height: 175px;
	height: calc(100% - 0.7em);
	margin-top: 0.7em;
}

	#file-drop:hover {
		border-color: black;
	}

	#file-drop.dragHover {
		border-color: #95C11F;
	}

	#file-drop.invalid {
		border-color: red;
	}

	#file-drop span {
		user-select: none
	}


.file-preview {
	line-height: normal;
	width: 96px;
	display: inline-block;
	position: relative;
}

	.file-preview > span {
		display: inline-block;
		width: 96px;
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
	}

	.file-preview.targeted div {
		background: black !important;
	}

		.file-preview.targeted div:before {
			content: "X";
		}

		.file-preview.targeted div > span {
			display: none;
		}

@media (hover: hover) {
	.file-preview:hover div {
		background: black !important;
	}

		.file-preview:hover div:before {
			content: "X";
		}

		.file-preview:hover div > span {
			display: none;
		}
}

@keyframes fadeIn {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

.form-header {
	font-weight: bold;
	color: #4B5563;
	margin-top: 20px;
}

@media only screen and (min-width: 768px) {
	.grid {
		grid-template-columns: repeat( 4, 1fr);
	}

	.form-header {
		grid-column: span 4;
	}

	.colspan-6 {
		grid-column: span 6;
	}

	.colspan-5 {
		grid-column: span 5;
	}

	.colspan-4 {
		grid-column: span 4;
	}

	.colspan-3 {
		grid-column: span 3;
	}

	.colspan-2 {
		grid-column: span 2;
	}

	.colspan-1 {
		grid-column: span 1;
	}

	#captcha-popup {
		transform: none;
	}
}

.grid {
	display: grid;
	gap: 10px 20px;
	background: white;
}

#message-field {
	resize: none;
	min-height: 175px !important;
}


.form-control {
	display: flex;
	flex-direction: column;
	background: white;
}

/* Chrome autofill color nonsense */
input:-webkit-autofill {
	color: inherit !important;
	-webkit-box-shadow: 0 0 0 50px white inset !important;
}

.form-control > .form-input.dirty.invalid:not(:focus-within),
.form-control > .form-input.dirty.fixed.invalid:focus,
input[type=checkbox].invalid {
	border-color: red;
	animation: borderChange 0.5s;
}

@keyframes borderChange {
	0% {
		border-color: red;
	}

	50% {
		border-color: #ff000040;
	}

	100% {
		border-color: red;
	}
}

input[type=checkbox] {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	border: 1px solid #bbb;
	width: 1em !important;
	height: 1em !important;
	margin: 0;
	padding: 0;
	font-size: 1em;
	color: #95C11F;
	font-weight: bold;
	outline: none;
}

	input[type=checkbox]:hover {
		background-color: #eee;
	}

	input[type=checkbox]:focus {
		border-color: #95C11F;
	}

	input[type=checkbox]:checked:after {
		content: "\2713";
		line-height: 1em;
		font-size: 1em;
		position: absolute;
	}

input[type="date"] {
	-webkit-appearance: none;
}

.form-control > label {
	margin-left: 10px;
	font-size: 0.9em;
	background: white !important;
}

	.form-control > label > .form-label {
		font-weight: normal;
		padding: 0 10px;
		position: relative;
		background: white !important;
		color: #666666;
		user-select: none;
	}

.form-control > .form-input, .form-control > select, .form-control > textarea {
	margin-top: -0.7em;
	padding: 10px;
	font-size: 1em;
	line-height: 1em;
	border: 1px solid #666666;
	border-radius: 5px;
}

.form-control:focus-within > .form-input, .form-control:focus-within > select, .form-control:focus-within > textarea {
	border-color: #95C11F;
	color: #495057;
	outline: 0;
}

.form-control:focus-within .form-label, .link {
	color: #95C11F;
}

.slider {
	-webkit-appearance: none;
	background: transparent !important;
	outline: none;
	margin: 0;
	padding: 0;
	overflow: hidden;
	position: relative;
	z-index: 42;
}

.slider, .slider-track {
	height: 50px;
	width: 100%;
}

	.slider::-webkit-slider-thumb {
		-webkit-appearance: none;
		appearance: none;
		width: 50px;
		height: 50px;
		background-color: #95C11F;
		background-image: url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%3Csvg%20width%3D%2250%22%20height%3D%2250%22%20version%3D%221.1%22%20viewBox%3D%220%200%2024%2024%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%20%3Cpath%20d%3D%22m12.293%207.293a0.999%200.999%200%200%200%200%201.414l2.293%202.293h-7.586a1%201%200%200%200%200%202h7.586l-2.293%202.293a0.99985%200.99985%200%201%200%201.414%201.414l4.707-4.707-4.707-4.707a0.999%200.999%200%200%200-1.414%200z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
		cursor: pointer;
	}

	.slider::-moz-range-thumb {
		width: 50px;
		height: 50px;
		background-color: #95C11F;
		background-image: url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%3Csvg%20width%3D%2250%22%20height%3D%2250%22%20version%3D%221.1%22%20viewBox%3D%220%200%2024%2024%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%20%3Cpath%20d%3D%22m12.293%207.293a0.999%200.999%200%200%200%200%201.414l2.293%202.293h-7.586a1%201%200%200%200%200%202h7.586l-2.293%202.293a0.99985%200.99985%200%201%200%201.414%201.414l4.707-4.707-4.707-4.707a0.999%200.999%200%200%200-1.414%200z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
		cursor: pointer;
	}

.slider-track {
	position: absolute;
	left: 0;
	top: 0;
	background-color: #d3d3d3;
}

.slider-wrapper {
	position: relative;
	margin: 0 10px;
}

#captcha-slider-info {
	display: inline-block;
	width: calc(100% - 50px);
	line-height: 50px;
	text-align: center;
	padding-left: 50px;
	font-size: 11px;
	overflow: hidden;
}

.btn.primary {
	background-color: #95C11F;
	color: white;
	border: 1px solid transparent;
	margin: auto;
	display: block;
}

.btn:disabled {
	border-color: #ddd;
	color: #ddd;
}

.btn {
	background-color: transparent;
	border: 1px solid #95C11F;
	color: #95C11F;
	box-sizing: border-box;
	cursor: pointer;
	display: inline-block;
	font-family: metaplus-normal-webfont;
	font-size: 18px;
	font-weight: 400;
	line-height: 27px;
	margin: 0;
	overflow: visible;
	padding: 0.375em 0.75em;
	padding-left: 20px;
	padding-right: 20px;
	scroll-behavior: auto;
	text-align: center;
	text-transform: none;
	transition: color 0.15s ease-in-out 0s, background-color 0.15s ease-in-out 0s, border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
	user-select: none;
	vertical-align: middle;
	position: relative;
	border-radius: 5px !important;
}

	.btn:focus {
		box-shadow: #95C11F 40 0 0 0 0.2em;
		outline: 0;
	}

btn:hover {
	background-color: white;
	border-color: #95C11F;
	color: #95C11F;
	text-decoration: none;
}

.btn:disabled {
	cursor: pointer;
	opacity: 0.65;
}

@media (prefers-reduced-motion: reduce) {
	#submit-button, .form-control {
		transition: none 0s ease 0s;
	}
}

#confirm-captcha-button:not(:hover):not(:disabled) {
	animation: pulse 2s infinite;
}

input::placeholder {
	color: #ddd;
}

.form-control .msg {
	color: red;
	height: 1em;
}

	.form-control .msg:empty {
	}

.success-header {
	color: #95C11F;
}

.parent-disabled {
	pointer-events: none;
	opacity: 0.4;
}

h2 {
	font-weight: normal;
}

.failure-header {
	color: crimson;
}

.success-text, .failure-text {
	margin-bottom: 10px;
}

.spinner {
}

	.spinner::after {
		content: '';
		box-sizing: border-box;
		width: 40px;
		height: 40px;
		position: absolute;
		top: calc(50% - 20px);
		left: calc(50% - 20px);
		border-radius: 50%;
		border-top: 4px solid #95C11F;
		border-left: 4px solid #95C11F;
		border-bottom: 4px solid #95C11F;
		border-right: 4px solid rgba(255, 255, 255, 0.0);
		animation: spinner .6s linear infinite;
	}

@keyframes spinner {
	to {
		transform: rotate(360deg);
	}
}

.disp-none {
	display: none;
}

.disp-block {
	display: block;
}

.disp-inline {
	display: inline;
}

.disp-inline-block {
	display: inline-block;
}

textarea {
	background: inherit;
}

option {
	padding: 5px 0;
}

@keyframes pulse {
	0% {
		transform: scale(0.95);
		box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7);
	}

	70% {
		transform: scale(1);
		box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);
	}

	100% {
		transform: scale(0.95);
		box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
	}
}

 /* OVERRIDES */

 `;
var w_d686e026599d48749d9d22d20cc32e08_in_widgetJs=String.raw`var w_d686e026599d48749d9d22d20cc32e08_scope = {};

w_d686e026599d48749d9d22d20cc32e08_scope._construct = function () {

	var id;
	var shadowRoot = w_d686e026599d48749d9d22d20cc32e08_shadowRoot;
	var countryInput = shadowRoot.getElementById("country-input");
	var locationInput = shadowRoot.getElementById("location-input");
	var countryCodeInput = shadowRoot.getElementById("country-code-input");
	var zipcodeInput = shadowRoot.getElementById("zipcode-input");
	var phoneInput = shadowRoot.getElementById("phone-input");
	var emailInput = shadowRoot.getElementById("email-input");
	var fileInput = shadowRoot.getElementById("file-input");
	var fileDrop = shadowRoot.getElementById("file-drop");
	var messageInput = shadowRoot.getElementById("message-field");
	var streetInput = shadowRoot.getElementById("street-input");
	var captchaSlider = shadowRoot.getElementById("captchaSlider");
	var captchaSliderTrack = shadowRoot.getElementById("captcha-slider-track");
	var captchaSliderInfo = shadowRoot.getElementById("captcha-slider-info");
	var captchaPopup = shadowRoot.getElementById("captcha-popup");
	var captchaIcon = shadowRoot.getElementById("captcha-icon");
	var captchaImg = shadowRoot.getElementById("captcha-img");
	var reloadButton = shadowRoot.getElementById("reload-captcha-button");
	var confirmButton = shadowRoot.getElementById("confirm-captcha-button");
	var overlay = shadowRoot.getElementById("captcha-popup-overlay");
	var submitButton = shadowRoot.getElementById("submit-button");
	var bdContainer = shadowRoot.getElementById("birthdate-container");
	var bdDay = shadowRoot.getElementById("birthdate-day");
	var bdMonth = shadowRoot.getElementById("birthdate-month");
	var bdYear = shadowRoot.getElementById("birthdate-year");
	var dragStartX = 0;
	var enableCaptcha = true;

	var query = window.location.search;
	if (query) {
		var params = new URLSearchParams(query);
		if (params.get("id") === "b") {
			enableCaptcha = false; // Temporary test mode
		}
	}

	var primaryColor = "#95C11F";

	var allFiles = [];

	var form = shadowRoot.getElementById("form");
	form.addEventListener("submit", (event) => {
		event.preventDefault();
		return false;
	});

	overlay.addEventListener("click", hideCaptcha);
	captchaPopup.addEventListener("click", e => e.stopPropagation());
	captchaSlider.addEventListener("input", e => updateIcon(captchaSlider.value));
	captchaSlider.addEventListener("change", e => confirmButton.disabled = false);
	reloadButton.addEventListener("click", refreshCaptcha);
	confirmButton.addEventListener("click", submit);
	submitButton.addEventListener("click", () => {
		if (enableCaptcha) {
			trySubmit();
		}
		else {
			submit();
		}
	});
	captchaIcon.addEventListener("dragstart", e => {
		dragStartX = e.offsetX;
	});
	captchaImg.addEventListener("dragover", e => e.preventDefault());
	captchaImg.addEventListener("drop", e => {
		e.preventDefault();
		var val = e.offsetX - dragStartX;

		captchaSlider.value = val;
		updateIcon(val);
		confirmButton.disabled = false;
	});

	bdContainer?.addEventListener("click", e => birthdateClicked(e));
	bdDay?.addEventListener("input", e => birthdatePartChanged(bdDay));
	bdMonth?.addEventListener("input", e => birthdatePartChanged(bdMonth));
	bdYear?.addEventListener("input", e => birthdatePartChanged(bdYear));
	zipcodeInput?.addEventListener("change", guessCountry);
	locationInput?.addEventListener("change", guessCountry);
	countryInput?.addEventListener("change", e => updateCountry(countryInput.value));
	countryCodeInput?.addEventListener("change", validatePhone);
	countryCodeInput?.addEventListener("change", e => phoneInput.placeholder = phonePlaceholder());
	phoneInput?.addEventListener("change", validatePhone);
	fileInput?.addEventListener("input", fileInputChanged);
	fileDrop?.addEventListener("click", openFileDialog);
	fileDrop?.addEventListener("drop", e => drop(e));
	fileDrop?.addEventListener("dragover", e => allowDrop(e));
	fileDrop?.addEventListener("dragleave", e => dragEnd(e));

	//var cssOverride = ;
	//if (cssOverride)
	//{
	//	var style = document.createElement("style");
	//	style.appendChild(document.createTextNode(cssOverride));
	//	shadowRoot.appendChild(style);
	//}

	var valMap = {};function valMap_add(name, val){if(!valMap[name]){valMap[name] = [];} valMap[name].push(val); };valMap_add('firstname', val => val && val !== -1 && val.length > 0);valMap_add('firstname', val => typeof(val) === 'string' ? val.length <= 128 : val <= 128);valMap_add('lastname', val => val && val !== -1 && val.length > 0);valMap_add('lastname', val => typeof(val) === 'string' ? val.length <= 128 : val <= 128);valMap_add('salutation', val => val && val !== -1 && val.length > 0);valMap_add('title', val => typeof(val) === 'string' ? val.length <= 128 : val <= 128);valMap_add('street', val => typeof(val) === 'string' ? val.length <= 256 : val <= 256);valMap_add('zipcode', val => val && val !== -1 && val.length > 0);valMap_add('zipcode', val => typeof(val) === 'string' ? val.length <= 16 : val <= 16);valMap_add('location', val => typeof(val) === 'string' ? val.length <= 128 : val <= 128);valMap_add('country', val => val && val !== -1 && val.length > 0);valMap_add('countrycode', val => typeof(val) === 'string' ? val.length <= 8 : val <= 8);valMap_add('countrycode', val => val && val !== -1 && val.length > 0);valMap_add('phone', val => val && val !== -1 && val.length > 0);valMap_add('phone', val => typeof(val) === 'string' ? val.length <= 64 : val <= 64);valMap_add('email', val => val && val !== -1 && val.length > 0);valMap_add('email', val => /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(val));valMap_add('availability', val => typeof(val) === 'string' ? val.length <= 1024 : val <= 1024);valMap_add('acceptedprivacypolicy', (val, obj) => obj.checked);

	function attachValidation() {
		var inputs = shadowRoot.querySelectorAll(".form-input");
		for (var i = 0; i < inputs.length; i++) {
			const j = i;

			var name = inputs[j].name?.toLowerCase();
			if (!name) continue;


			inputs[j].addEventListener("input", ev => addClass(inputs[j], "dirty"));
			inputs[j].addEventListener("change", ev => addClass(inputs[j], "fixed"));

			if (inputs[j].type === 'date') {
				// inputs[i].addEventListener("blur", ev => addClass(inputs[j], "fixed"));
			}

			const validators = valMap[name];
			if (validators) {
				inputs[j].addEventListener("input", () => {
					var valid = true;

					validators.forEach((v, i, a) => {
						var res = v(inputs[j].value, inputs[j]);
						valid = valid && res;
					});

					setValidity(inputs[j], valid);
				});
			} else {
				inputs[j].addEventListener("input", () => { setValidity(inputs[j], true); });
			}

		}
	}

	async function loadCaptcha() {
		let idRes = await fetch("https://jobportal.wenatex.com/public/captcha/new");
		if (idRes.status == 429) {
			setMessage(captchaSlider, "Zu viele falsche Versuche, bitte probieren Sie es in einer Minute erneut");
			return;
		}

		id = await idRes.text();

		let response = await fetch("https://jobportal.wenatex.com/public/captcha/request/" + id,
			{
				method: "get"
			}
		);
		if (response.status == 429) {
			setMessage(captchaSlider, "Zu viele falsche Versuche, bitte probieren Sie es in einer Minute erneut");
			return;
		}


		var icon = shadowRoot.getElementById("captcha-icon");

		icon.style.left = 0;
		captchaSlider.value = 0;
		reloadButton.disabled = true;

		let blob = await response.blob();

		shadowRoot.getElementById("captcha-img").src = URL.createObjectURL(blob);
		setTimeout(() => reloadButton.disabled = false, 1337);

		confirmButton.disabled = true;
	}

	function hideCaptcha() {
		removeClass(shadowRoot.getElementById("captcha-popup-overlay"), "show");
	}

	async function showCaptcha() {
		await loadCaptcha();
		shadowRoot.getElementById("captcha-popup-overlay").classList.toggle("show");
		shadowRoot.getElementById("captcha-popup").scrollIntoView();
	}

	function trySubmit() {
		addClass(shadowRoot.getElementById("birthdate-container"), "fixed");
		addClass(shadowRoot.getElementById("birthdate-container"), "dirty");

		var inputs = shadowRoot.querySelectorAll(".form-input");
		var allValid = true;
		inputs.forEach((v, i, a) => {
			v.dispatchEvent(new Event("input", { bubbles: true }));
			v.dispatchEvent(new Event("change", { bubbles: true }));

			if (v.classList.contains("invalid")) {
				allValid = false;
			}
		});


		if (allValid) {
			showCaptcha();
		} else {
			var jumpId = "bewerben";
			if (jumpId) {
				document.getElementById(jumpId).scrollIntoView();
			}
		}

	}

	async function refreshCaptcha() {
		await loadCaptcha();
		updateIcon(0);
	}

	async function submit() {
		if (enableCaptcha) {
			shadowRoot.getElementById("captcha-value").value = +captchaSlider.value + captchaIcon.width / 2;
		} else {
			await loadCaptcha();
			shadowRoot.getElementById("captcha-value").value = "1827187282861259";
		}
		shadowRoot.getElementById("captcha-id").value = id;

		display(captchaPopup, "none");

		var data = new FormData(form);
		allFiles.forEach(file => data.append("Files", file, file.name))
		data.set("JobId", 1061);

		var response = await fetch("https://jobportal.wenatex.com/public/widget/form/submit",
			{
				method: "POST",
				body: data
			});
		if (response.status == 429) {
			setMessage(captchaSlider, "Zu viele falsche Versuche, bitte probieren Sie es in einer Minute erneut");
			return;
		}

		var invalids = await response.json();

		if (invalids.includes("Captcha")) {
			setMessage(captchaSlider, "Bitte versuchen Sie es erneut");
			await refreshCaptcha();
		} else {
			hideCaptcha();
		}

		display(captchaPopup, "block");

		if (invalids.length === 0) {
			shadowRoot.getElementById("success-container").style.display = "block";
			shadowRoot.getElementById("form-container").style.display = "none";

			try {
				dataLayer?.push({
					'attachement': allFiles.length > 0 ? '#yes#' : '#no#',      // OPTIONAL ... yes; no, pdf, zip ...
					'event': 'contact-thx'       // REQUIRED
				});
			} catch (e) {
				if (e.name == "ReferenceError") {
					console.log("no dataLayer is declared");
				}
			}


			return;
		} else if (invalids.includes("POST")) {
			shadowRoot.getElementById("failure-container").style.display = "block";
			shadowRoot.getElementById("form-container").style.display = "none";
			return;
		}

		invalids.forEach(prop => {
			var match = shadowRoot.querySelectorAll("[name='" + prop + "']");
			if (match && match.length > 0) {
				setValidity(match[0], false);
			}
		});
	}

	function updateIcon(val) {
		var pxVal = px(val);
		captchaIcon.style.left = pxVal;
		captchaSliderInfo.style.display = val == 0 ? "inline-block" : "none";
	}

	function linearGradient(deg, colors, breaks) {
		var lg = "linear-gradient(" + deg;
		for (var i = 0; i < colors.length; i++) {
			lg += (", " + colors[i] + " " + breaks[i]);
		}
		lg += ")";
		return lg;
	}

	function openFileDialog() {
		shadowRoot.getElementById("file-input").click();
	}

	function px(num) {
		return num + "px";
	}

	function fileInputChanged() {
		for (var i = 0; i < fileInput.files.length; i++) allFiles.push(fileInput.files[i]);

		fileInput.value = null;

		updateFiles();
	}

	function updateFiles() {
		var drop = shadowRoot.getElementById("file-drop");
		var files = allFiles;
		var prevDiv = shadowRoot.getElementById("file-preview-div");
		prevDiv.innerHTML = "";

		var types = fileInput.accept.split(",").map(item => item.trim());

		var size = 0;
		var invalidTypes = [];
		for (let i = 0; i < files.length; i++) {
			let fullname = files[i].name;
			let name = files[i].name;
			let type = files[i].type;
			size += files[i].size;

			let ext = "";
			let dotIndex = name.lastIndexOf('.');
			if (dotIndex != -1) {
				ext = name.substring(dotIndex + 1);
				name = name.substring(0, dotIndex);
			}

			let typeErr = !types.includes(type);
			if (typeErr && !invalidTypes.includes(ext)) {
				invalidTypes.push(ext);
			}

			let div = document.createElement("div");
			div.style.userSelect = "none";
			div.classList.add("file-preview");
			div.title = name;

			div.addEventListener("click", function (ev) {
				ev.preventDefault();
				ev.stopPropagation();
				removeFile(fullname, div);
			});

			div.innerHTML = "<svg fill='gray' width='96px' height='96px'><path d='M 22.7319,86.888489 C 21.68526,86.650619 20.06962,85.716976 19.46384,84.99996 19.14338,84.620664 18.68292,83.907605 18.4406,83.415386 L 18,82.520442 V 47.033998 11.547555 l 0.51786,-1.035218 c 0.65826,-1.31587 1.71832,-2.309611 3.12198,-2.926698 L 22.74414,7.100167 40.87442,7.050087 59.0047,7 68.50234,17.381471 78,27.762947 77.9474,55.234355 77.8948,82.705767 77.36214,83.652215 c -0.78906,1.402054 -1.3847,1.979251 -2.7682,2.682488 l -1.24562,0.633142 -25.00558,0.02912 c -13.75308,0.016 -25.27796,-0.0328 -25.61086,-0.108446 z m 50.63918,-3.26765 c 0.30022,-0.210136 0.72926,-0.612335 0.9534,-0.893773 0.40648,-0.510333 0.4077,-0.580955 0.45904,-26.245349 l 0.0514,-25.733641 -7.16768,-0.05691 -7.16768,-0.05691 -1.0096,-0.499332 C 57.99434,29.395223 57.37864,28.83684 56.62848,27.539873 l -0.6754,-1.167697 -0.059,-8.203003 -0.059,-8.203004 -16.38286,0.04945 c -16.19682,0.04889 -16.38904,0.0538 -16.92866,0.431522 -0.30018,0.210138 -0.7292,0.612341 -0.95336,0.893786 l -0.40756,0.511721 -0.0564,34.685312 c -0.031,19.076921 -0.006,34.953869 0.0572,35.282105 0.1416,0.742488 0.97204,1.689267 1.76844,2.015969 0.49378,0.20256 5.06078,0.240015 25.24802,0.207071 24.54986,-0.04006 24.6473,-0.04169 25.19104,-0.422282 z m 0.1382,-56.275793 c -0.22122,-0.22932 -3.5502,-3.875359 -7.39778,-8.102309 l -6.99558,-7.685364 -0.057,6.666171 c -0.0314,3.666395 -0.006,6.934729 0.0572,7.262968 0.1422,0.743304 0.97348,1.690014 1.76894,2.014822 0.4577,0.186887 2.09826,0.247894 6.81454,0.253401 l 6.21174,0.0073 -0.40218,-0.416942 z'></svg>";

			let span = document.createElement("span");
			span.innerHTML = name;
			div.appendChild(span);

			let tag = document.createElement("div");
			tag.classList.add("file-ext");
			tag.style.position = "absolute";
			tag.style.top = "40px";
			tag.style.left = "30px";
			tag.style.backgroundColor = (typeErr ? "orange" : "gray");
			tag.style.color = "white";
			tag.style.width = "48px";
			tag.style.padding = "2px 0";
			tag.style.borderRadius = "5px";
			tag.innerHTML = "<span>" + ext + "</span>";
			div.appendChild(tag);

			prevDiv.appendChild(div);
		}

		shadowRoot.getElementById("file-drop-info").style.display = files.length == 0 ? "inline" : "none";
		drop.style.padding = files.length == 0 ? "50px" : "0";

		if (invalidTypes.length > 0) {
			setMessage(drop, "Diese Dateitypen werden nicht akzeptiert: " + invalidTypes.join(", "));
		} else if (files.length > 5) {
			setMessage(drop, "Ihr Anhang darf maximal 5 Dateien enthalten.");
		} else if (size > 1024 * 1024 * 25) {
			setMessage(drop, "Ihr Anhang darf maximal 25MB groß sein.");
		} else {
			setMessage(drop, null);
		}
	}

	function removeFile(name, elem) {
		if (isTouchDevice() && !elem.classList.contains("targeted")) {
			addClass(elem, "targeted");
			setTimeout(() => removeClass(elem, "targeted"), 1000);
			return;
		}

		allFiles.splice(allFiles.indexOf(allFiles.find(f => f.name === name)), 1);
		updateFiles();
	}

	function isTouchDevice() {
		return ('ontouchstart' in document.documentElement);
	}

	function allowDrop(ev) {
		ev.preventDefault();
		addClass(fileDrop, "dragHover");
	}

	function dragEnd(ev) {
		removeClass(fileDrop, "dragHover");
	}

	function drop(ev) {
		ev.preventDefault();
		ev.stopPropagation();

		removeClass(fileDrop, "dragHover");

		if (ev.dataTransfer.items) {
			[...ev.dataTransfer.items].forEach((item, i) => {
				if (item.kind === "file") {
					allFiles.push(item.getAsFile());
					console.log(item);
				}
			});
		} else {
			[...ev.dataTransfer.files].forEach((file, i) => {
				allFiles.push(file);
				console.log(file);
			});
		}

		updateFiles();
	}

	async function guessCountry() {
		if (locationInput?.classList.contains("fixed") || countryInput?.classList.contains("fixed")) {
			return;
		}

		var code = shadowRoot.getElementById("zipcode-input")?.value ?? "";
		var loc = locationInput?.value ?? "";

		if (code.length == 0) return;

		let response = await fetch("https://jobportal.wenatex.com/public/widget/form/location/?zipCode=" + code + "&location=" + loc,
			{
				method: "get"
			}
		);

		// no content
		if (response.status == 204) return;

		var res = await response.json();

		if (res.Country && countryInput) {
			setValue(countryInput, res.Country);
		}


		if (res.Location) {
			addClass(locationInput, "fixed");
			setValue(locationInput, res.Location);
			phoneInput?.focus();
		} else {
			locationInput?.focus();
		}

	}

	function phonePlaceholder() {
		switch (countryCodeInput?.value) {
			case "+41": return "21 3456789";
			case "+39": return "06 1234567";
			case "+49": return "30 123456789";
			case "+43":
			default:
				return "664 1234567";
		}
	}

	async function validatePhone() {
		if (!phoneInput) return;

		if (countryCodeInput) {
			if (countryCodeInput.value.length > 0 && !countryCodeInput.value.startsWith("+")) {
				countryCodeInput.value = "+" + countryCodeInput.value;
			}

			if (!phoneInput.value || !countryCodeInput.value) {
				// removeClass(phoneInput, "invalid");
				return;
			}
		}

		var number = countryCodeInput?.value + phoneInput.value;

		let response = await fetch("https://jobportal.wenatex.com/public/widget/form/phone/" + number.split("+").join(""), { method: "get" });
		var result = await response.text();

		if (!result || result.length === 0) {
			addClass(phoneInput, "invalid");
		} else {
			removeClass(phoneInput, "invalid");
			phoneInput.value = result;
		}
	}


	function updateCountry(val) {
		if (!countryCodeInput) return;

		if (countryCodeInput.classList.contains("fixed")) {
			return;
		}

		switch (val) {
			case "AT":
				setValue(countryCodeInput, "+43");
				break;
			case "DE":
				setValue(countryCodeInput, "+49");
				break;
			case "IT":
				setValue(countryCodeInput, "+39");
				break;
			case "CH":
				setValue(countryCodeInput, "+41");
				break;
		}
	}

	function addClass(el, className) {
		if (!el) return;

		if (!el.classList.contains(className)) {
			el.classList.add(className);
		}
	}

	function removeClass(el, className) {
		if (!el) return;

		if (el.classList.contains(className)) {
			el.classList.remove(className);
		}
	}

	function setValidity(el, valid) {
		if (valid) {
			removeClass(el, "invalid");
		} else {
			addClass(el, "invalid");
		}
	}

	function setValue(el, val) {
		if (!el) return;

		el.value = val;
		el.dispatchEvent(new Event('change'));
	}

	function birthdatePartChanged(src) {
		var d = shadowRoot.getElementById("birthdate-day");
		var m = shadowRoot.getElementById("birthdate-month");
		var y = shadowRoot.getElementById("birthdate-year");

		if (!d || !m || !y) return;

		var arr = [d, m, y];
		arr.forEach(input => {
			if (input.value >= parseInt(input.max)) input.value = parseInt(input.max);
		});

		var index = arr.indexOf(src);
		if (src.value.length === src.max.length) {
			if (index < arr.length - 1) arr[index + 1].focus();
			else streetInput.focus();
		}

		var b = shadowRoot.getElementById("birthdate-container");
		//addClass(b, "dirty");
		//if (arr.find(i => !i.value)) {
		//	addClass(b, "invalid");
		//	return;
		//} else {
		//	removeClass(b, "invalid");
		//}

		//addClass(b, "fixed");
	}

	function setMessage(input, msg) {
		var el = input.parentElement.getElementsByClassName("msg")[0];

		if (el) {
			el.innerHTML = msg;
			setValidity(input, !msg);
		}
	}

	function birthdateClicked(e) {
		if (e.target !== bdContainer) {
			return;
		}

		shadowRoot.getElementById("birthdate-day").focus();
	}

	function display(elem, val) {
		elem.style.display = val;
	}

	function applyDefaults() {
		if (countryInput) {
			countryInput.value = "-1";
			if (countryInput.value !== "-1") addClass(countryInput, "fixed");
		}
		if (countryCodeInput) {
			countryCodeInput.value = "";
			if (countryCodeInput.value?.length > 0) {
				addClass(countryCodeInput, "fixed");
				phoneInput.placeholder = phonePlaceholder();
			}
		}
	}

	/*addClass(shadowRoot.getElementById("birthdate-container"), "invalid");*/
	applyDefaults();
	attachValidation();
	updateIcon(0);

}

w_d686e026599d48749d9d22d20cc32e08_scope._construct();`;

var w_d686e026599d48749d9d22d20cc32e08_dataLayer;

/* (function (w, d, s, l, i) {
		w[l] = w[l] || []; w[l].push({
			'gtm.start':
				new Date().getTime(), event: 'gtm.js'
		}); var f = d.getElementsByTagName(s)[0],
			j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : ''; j.async = true; j.src =
				'https://www.googletagmanager.com/gtm.js?id=' + i + dl; f.parentNode.insertBefore(j, f);
        w_d686e026599d48749d9d22d20cc32e08_dataLayer = w[l];
	})(window, document, 'script', 'dataLayer', 'GTM-KZ2SM4'); */

function w_d686e026599d48749d9d22d20cc32e08_getDefaultBackground() {
  var div = document.createElement("div");
  document.head.appendChild(div);
  var bg = window.getComputedStyle(div).backgroundColor;
  document.head.removeChild(div);
  return bg;
}

function w_d686e026599d48749d9d22d20cc32e08_getInheritedBackgroundColor(el) {
  var defaultStyle = w_d686e026599d48749d9d22d20cc32e08_getDefaultBackground();
  var backgroundColor = window.getComputedStyle(el).backgroundColor;

  if (backgroundColor != defaultStyle) return backgroundColor;
  if (!el.parentElement) return defaultStyle;
  
  return w_d686e026599d48749d9d22d20cc32e08_getInheritedBackgroundColor(el.parentElement);
}

var w_d686e026599d48749d9d22d20cc32e08_thisScript = document.currentScript ?? shadowRoot.getElementById("jopoform-explicit");
var w_d686e026599d48749d9d22d20cc32e08_shadowRoot;
var w_d686e026599d48749d9d22d20cc32e08_style;
var w_d686e026599d48749d9d22d20cc32e08_script;

function w_d686e026599d48749d9d22d20cc32e08_insert() {
    w_d686e026599d48749d9d22d20cc32e08_style = document.createElement("style");
    w_d686e026599d48749d9d22d20cc32e08_style.innerHTML = w_d686e026599d48749d9d22d20cc32e08_in_widgetCss;

    w_d686e026599d48749d9d22d20cc32e08_script = document.createElement("script");
    w_d686e026599d48749d9d22d20cc32e08_script.textContent = w_d686e026599d48749d9d22d20cc32e08_in_widgetJs;

    w_d686e026599d48749d9d22d20cc32e08_div = document.createElement("div");
    w_d686e026599d48749d9d22d20cc32e08_div.style.background = "white";
    w_d686e026599d48749d9d22d20cc32e08_div.id = "w_d686e026599d48749d9d22d20cc32e08_container";

    w_d686e026599d48749d9d22d20cc32e08_shadowRoot = w_d686e026599d48749d9d22d20cc32e08_div.attachShadow({ mode: 'open' });
    w_d686e026599d48749d9d22d20cc32e08_shadowRoot.innerHTML = w_d686e026599d48749d9d22d20cc32e08_in_widgetHtml;
    w_d686e026599d48749d9d22d20cc32e08_shadowRoot.appendChild(w_d686e026599d48749d9d22d20cc32e08_style);
    w_d686e026599d48749d9d22d20cc32e08_shadowRoot.appendChild(w_d686e026599d48749d9d22d20cc32e08_script);

    if (typeof(shadowRoot) !== 'undefined') {
        console.log(shadowRoot);
    }

    w_d686e026599d48749d9d22d20cc32e08_thisScript.parentNode.insertBefore(w_d686e026599d48749d9d22d20cc32e08_div, w_d686e026599d48749d9d22d20cc32e08_thisScript);

}

if (document.readyState === "complete" || document.readyState === "interactive") {
    w_d686e026599d48749d9d22d20cc32e08_insert();
} else {
    document.addEventListener("DOMContentLoaded", function() {
        w_d686e026599d48749d9d22d20cc32e08_insert();
    });
}