Charterflug anfragen
:root {
--avcon-form-field-height: 42px;
--avcon-form-compact-field-height: 40px;
--avcon-form-input-padding: 40px;
--avcon-form-icon-offset: 8px;
--avcon-form-icon-size: 25px;
--avcon-form-gap: 16px;
--avcon-form-gap-mobile: 12px;
--avcon-form-hover-bg: #efefef;
--avcon-form-dark-hover: #575656;
--avcon-form-muted: #c0bfbf;
--avcon-form-transition: 250ms ease-in;
}
#lwit-form-wrapper {
font-size: 16px;
padding: 0 !important;
border: none !important;
}
#lwit-form-wrapper .lwit-tab-legs,
#lwit-form-wrapper .lwit-tab-contact {
padding: 0;
}
#lwit-form-wrapper #error-box {
margin: 0;
padding: 0;
}
#lwit-form-wrapper #footer-container .row {
display: flex;
justify-content: space-between;
}
#lwit-form-wrapper .lwit-tab-legs .leg.row {
display: grid;
gap: var(--avcon-form-gap);
grid-template-columns: 30% 30% 12% 10% 11%;
}
#lwit-form-wrapper .lwit-tab-legs.has-multiple-legs .leg.row {
grid-template-columns: 27.5% 27.5% 12% 10.5% 11.5% 42px;
}
#lwit-form-wrapper .lwit-tab-legs .airport-search,
#lwit-form-wrapper .lwit-tab-legs .col-3,
#lwit-form-wrapper .lwit-tab-legs .col-4,
#lwit-form-wrapper .lwit-tab-legs .col-5 {
width: 100%;
}
#lwit-form-wrapper .lwit-tab-legs .airport-search {
transition: border-color var(--avcon-form-transition);
}
#lwit-form-wrapper .lwit-tab-legs .airport-search .select2-container--open {
border-color: var(--e-global-color-text);
}
#lwit-form-wrapper .airport-search .select2-container--default {
height: var(--avcon-form-field-height);
}
#lwit-form-wrapper .airport-search .select2-container--default .select2-selection--single .select2-selection__rendered {
padding-left: 42px !important;
}
#lwit-form-wrapper .airport-search.from .select2-container--default,
#lwit-form-wrapper .airport-search.to .select2-container--default {
background-position: var(--avcon-form-icon-offset) var(--avcon-form-icon-offset) !important;
}
#lwit-form-wrapper .lwit-tab-legs .airport-search.from .select2-container--open {
background-image: url(/wp-content/plugins/lwit-flight-request/templates/images/departure-black.svg);
background-position: var(--avcon-form-icon-offset) var(--avcon-form-icon-offset) !important;
transition: background-image 0.2s ease-in !important;
}
#lwit-form-wrapper .lwit-tab-legs .airport-search.to .select2-container--open {
background-image: url(/wp-content/plugins/lwit-flight-request/templates/images/arrival-black.svg);
background-position: var(--avcon-form-icon-offset) var(--avcon-form-icon-offset) !important;
transition: background-image 0.2s ease-in !important;
}
.select2-container--open .select2-dropdown--below {
border-radius: 0 !important;
border-color: var(--e-global-color-text) !important;
}
.select2-container--default .select2-search--dropdown .select2-search__field {
border-color: #000 !important;
}
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
background-color: var(--avcon-form-hover-bg);
color: var(--e-global-primary-text);
}
.select2-results__option {
font-size: 16px;
}
li.select2-results__option {
transition: background-color var(--avcon-form-transition), color var(--avcon-form-transition);
}
li.select2-results__option:hover {
cursor: pointer;
background-color: var(--avcon-form-hover-bg);
}
#lwit-form-wrapper input,
#lwit-form-wrapper button {
height: var(--avcon-form-field-height);
font-size: 16px !important;
line-height: 16px !important;
}
#lwit-form-wrapper input {
padding: 0 0 0 var(--avcon-form-input-padding) !important;
background-position: var(--avcon-form-icon-offset) var(--avcon-form-icon-offset) !important;
}
#lwit-form-wrapper .lwit-tab-legs .col-5 input {
height: var(--avcon-form-compact-field-height);
}
#lwit-form-wrapper .lwit-tab-legs .col-5 button {
width: 42px;
height: var(--avcon-form-compact-field-height);
margin: 0;
padding: 0;
transition: background-image var(--avcon-form-transition);
}
#lwit-form-wrapper .lwit-tab-legs .passenger-button.plus:hover {
background-image: url(/wp-content/plugins/lwit-flight-request/templates/images/plus-black.svg);
}
#lwit-form-wrapper .lwit-tab-legs .passenger-button.minus:hover {
background-image: url(/wp-content/plugins/lwit-flight-request/templates/images/minus-black.svg);
}
#lwit-form-wrapper .lwit-tab-legs .col-3 input,
#lwit-form-wrapper .lwit-tab-legs .col-4 input {
background-position: var(--avcon-form-icon-offset) var(--avcon-form-icon-offset) !important;
}
#lwit-form-wrapper .lwit-tab-legs .hasDatepicker.active,
#lwit-form-wrapper .lwit-tab-legs .ui-timepicker-input.active {
border-color: var(--e-global-primary-text) !important;
background-position: var(--avcon-form-icon-offset) var(--avcon-form-icon-offset) !important;
background-repeat: no-repeat !important;
background-size: var(--avcon-form-icon-size) var(--avcon-form-icon-size) !important;
}
#lwit-form-wrapper .lwit-tab-legs .hasDatepicker.active {
background-image: url("/wp-content/plugins/lwit-flight-request/templates/images/calendar-black.svg") !important;
}
#lwit-form-wrapper .lwit-tab-legs .ui-timepicker-input.active {
background-image: url("/wp-content/plugins/lwit-flight-request/templates/images/clock-black.svg") !important;
}
#lwit-form-wrapper .lwit-tab-legs .passenger-input {
height: var(--avcon-form-field-height) !important;
}
#lwit-form-wrapper .lwit-tab-legs .col-6 {
width: fit-content !important;
display: flex;
flex-direction: column;
}
#lwit-form-wrapper .lwit-tab-legs .col-6 label {
visibility: hidden;
width: 0;
display: inline-block;
height: 20px;
}
#continue-button {
background-position: calc(100% - 6px) 8px;
transition: background var(--avcon-form-transition);
}
#continue-button.is-ready {
background-color: var(--e-global-color-primary) !important;
background-image: url(/wp-content/plugins/lwit-flight-request/templates/images/arrow-white.svg) !important;
background-position: calc(100% - 6px) 8px !important;
background-repeat: no-repeat !important;
background-size: var(--avcon-form-icon-size) var(--avcon-form-icon-size) !important;
}
#continue-button.is-ready:hover {
background-color: var(--e-global-color-1625607) !important;
background-image: url(/wp-content/plugins/lwit-flight-request/templates/images/arrow-white.svg) !important;
background-position: calc(100% - 6px) 8px !important;
background-repeat: no-repeat !important;
background-size: var(--avcon-form-icon-size) var(--avcon-form-icon-size) !important;
}
#flight-request-button.is-ready {
background: var(--e-global-color-primary) !important;
transition: background var(--avcon-form-transition);
}
#flight-request-button.is-ready:hover {
background: var(--e-global-color-1625607) !important;
}
#back-button {
background: var(--e-global-color-text);
transition: background var(--avcon-form-transition);
}
#back-button:hover {
background: var(--avcon-form-dark-hover);
}
#add-flight-button {
background-position: 6px 8px;
}
#lwit-form-wrapper .remove-flight-button {
width: 42px;
padding: 0;
border-color: var(--e-global-color-text);
background-color: var(--e-global-color-text);
background-image: url(/wp-content/uploads/2026/02/aoj_close_24x24.svg);
background-position: center;
background-repeat: no-repeat;
transition: background-color var(--avcon-form-transition);
}
#lwit-form-wrapper .remove-flight-button:hover {
background-color: var(--avcon-form-dark-hover);
}
#lwit-form-wrapper input:active {
border-color: var(--e-global-color-text) !important;
}
#ui-datepicker-div {
z-index: 100 !important;
width: fit-content;
}
.ui-widget.ui-widget-content {
border-color: var(--e-global-color-text);
}
.ui-corner-all,
.ui-corner-bottom,
.ui-corner-right,
.ui-corner-br,
.ui-corner-left,
.ui-corner-bl,
.ui-corner-top,
.ui-corner-tr,
.ui-corner-tl {
border-radius: 0;
}
table.ui-datepicker-calendar,
.ui-datepicker table {
border: none;
}
.ui-datepicker table {
font-size: 16px;
}
.ui-datepicker td span,
.ui-datepicker td a {
text-align: center;
}
.ui-datepicker th,
.ui-widget-header {
font-weight: 400;
}
.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default,
.ui-button,
html .ui-button.ui-state-disabled:hover,
html .ui-button.ui-state-disabled {
border: none;
background: none;
color: #000;
font-weight: 400;
}
.ui-state-highlight,
.ui-widget-content .ui-state-highlight,
.ui-widget-header .ui-state-highlight {
border: 1px solid var(--e-global-color-primary);
background: var(--e-global-color-primary);
color: #fff;
}
.ui-state-highlight,
.ui-widget-content .ui-state-highlight:hover,
.ui-widget-header .ui-state-highlight:hover {
color: #fff !important;
}
.ui-widget-header {
border: none;
background: none;
color: #000;
}
.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next,
.ui-datepicker-prev-hover,
.ui-datepicker-next-hover {
width: 29px;
height: 29px;
}
.ui-datepicker-prev-hover,
.ui-datepicker-next-hover {
background: var(--avcon-form-hover-bg) !important;
color: inherit;
border: none !important;
top: 2px !important;
}
.ui-datepicker-prev-hover {
left: 2px !important;
}
.ui-datepicker-next-hover {
right: 2px !important;
}
.ui-datepicker-prev .ui-icon,
.ui-datepicker-prev-hover .ui-icon {
background-image: url("/wp-content/uploads/2023/11/avconjet-icon-black-chevron-left.svg") !important;
background-position: 0 0 !important;
}
.ui-datepicker-next .ui-icon,
.ui-datepicker-next-hover .ui-icon {
background-image: url("/wp-content/uploads/2023/11/avconjet-icon-black-chevron-right.svg") !important;
background-position: 0 0 !important;
}
.ui-datepicker thead {
color: var(--avcon-form-dark-hover);
}
.ui-datepicker td {
width: 40px;
height: 40px;
}
.ui-datepicker td a {
display: flex !important;
width: 100%;
height: 100%;
align-items: center;
justify-content: center;
padding: 0 !important;
}
.ui-datepicker .ui-state-hover {
background-color: #e7e7e7;
color: var(--e-global-color-text) !important;
}
.ui-datepicker .ui-datepicker-today .ui-state-highlight {
border: 1px solid var(--e-global-color-primary);
background-color: transparent;
color: var(--e-global-color-primary) !important;
}
.ui-datepicker-today .ui-state-highlight.ui-state-hover {
background-color: #e7e7e7;
}
.ui-datepicker td a.ui-state-default.ui-state-active {
background-color: var(--e-global-color-primary);
color: #fff;
}
.ui-datepicker td a.ui-state-default.ui-state-active.ui-state-hover {
background-color: var(--e-global-color-1625607);
color: #fff;
}
.ui-datepicker td.ui-state-disabled span,
.ui-datepicker td.ui-datepicker-other-month a {
color: var(--avcon-form-muted);
}
.ui-timepicker-wrapper {
font-size: 16px;
}
li.ui-timepicker-selected,
.ui-timepicker-list li:hover,
.ui-timepicker-list .ui-timepicker-selected:hover {
background-color: var(--avcon-form-hover-bg);
color: var(--e-global-primary-text);
}
#lwit-form-wrapper .lwit-tab-contact input {
padding: 0 16px !important;
}
#lwit-form-wrapper .lwit-tab-contact #additional-info {
font-size: 16px;
}
#lwit-form-wrapper .lwit-tab-contact .checkbox-label input[type="checkbox"] {
margin-right: 10px;
height: fit-content;
}
#lwit-form-wrapper .lwit-tab-contact .checkbox-label:first-child {
padding-bottom: 8px;
}
@media only screen and (max-width: 1366px) {
#lwit-form-wrapper .lwit-tab-legs .leg.row {
grid-template-columns: 27% 27% 14% 12% 14%;
}
#lwit-form-wrapper .lwit-tab-legs.has-multiple-legs .leg.row {
grid-template-columns: 24.5% 24.5% 14% 12.5% 13.5% 42px;
}
}
@media only screen and (max-width: 1100px) {
#lwit-form-wrapper .lwit-tab-legs .row {
display: flex !important;
flex-wrap: wrap;
gap: var(--avcon-form-gap);
}
#lwit-form-wrapper .lwit-tab-legs .airport-search {
width: calc(50% - 8px) !important;
}
#lwit-form-wrapper .lwit-tab-legs .col-3,
#lwit-form-wrapper .lwit-tab-legs .col-4 {
width: calc(33% - 8px) !important;
}
#lwit-form-wrapper .lwit-tab-legs .col-5 {
flex: 1 !important;
}
}
@media only screen and (max-width: 767px) {
#lwit-form-wrapper,
#lwit-form-wrapper .lwit-tab-legs {
padding: 0 !important;
}
#lwit-form-wrapper .lwit-tab-legs .row {
display: flex !important;
flex-direction: row;
gap: var(--avcon-form-gap-mobile) var(--avcon-form-gap);
}
#lwit-form-wrapper .lwit-tab-legs .airport-search {
width: 100% !important;
}
#lwit-form-wrapper .lwit-tab-legs .col-3 {
width: calc(60% - 8px) !important;
}
#lwit-form-wrapper .lwit-tab-legs .col-4 {
width: calc(40% - 8px) !important;
}
#lwit-form-wrapper .lwit-tab-legs .col-5 {
flex: 1 !important;
}
.error-box .error-row:last-child {
padding-top: 8px;
padding-bottom: 8px;
}
#lwit-form-wrapper .row:last-child {
display: flex;
flex-direction: row;
padding-top: 8px;
}
#lwit-form-wrapper .row:last-child .add-flight-button,
#lwit-form-wrapper .row:last-child .submit-button,
#lwit-form-wrapper .lwit-tab-contact #flight-request-button {
width: 100%;
}
#lwit-form-wrapper #add-flight-button {
margin-bottom: 8px !important;
padding-left: 32px;
padding-right: 0;
background-position: 60px 8px;
}
#continue-button,
#continue-button.is-ready {
background-position: calc(100% - 96px) 8px !important;
}
#continue-button {
padding-left: 8px;
}
#lwit-form-wrapper .lwit-tab-contact .row {
gap: 12px;
}
#lwit-form-wrapper .lwit-tab-contact .checkbox-label {
display: flex;
align-items: flex-start;
}
#lwit-form-wrapper .lwit-tab-contact .checkbox-label input[type="checkbox"] {
margin-top: 2px;
margin-right: 8px;
}
#lwit-form-wrapper .lwit-tab-contact .row:last-child {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
gap: 16px;
padding-top: 8px;
}
#lwit-form-wrapper .lwit-tab-contact .row:last-child .add-flight-button {
width: fit-content;
}
}
(() => {
const SELECTORS = {
form: "#flight-request-form",
legsTab: ".lwit-tab-legs",
contactTab: ".lwit-tab-contact",
leg: ".leg",
removeColumn: ".col-6",
removeButton: ".remove-flight-button",
addButton: "#add-flight-button",
continueButton: "#continue-button",
requestButton: "#flight-request-button",
legDateTimeInputs: ".lwit-tab-legs .col-3 input, .lwit-tab-legs .col-4 input",
};
const matches = (element, selector) => Boolean(element && element.matches && element.matches(selector));
function initFormEnhancements() {
const form = document.querySelector(SELECTORS.form);
const legsTab = document.querySelector(SELECTORS.legsTab);
const contactTab = document.querySelector(SELECTORS.contactTab);
const continueButton = document.querySelector(SELECTORS.continueButton);
const requestButton = document.querySelector(SELECTORS.requestButton);
if (!legsTab && !contactTab && !form) {
return;
}
let syncFrame = 0;
const isFieldFilled = (field) => {
if (field.disabled) {
return true;
}
if (field.type === "checkbox") {
return field.checked;
}
if (field.type === "radio") {
return Array.from(document.querySelectorAll(`input[type="radio"][name="${field.name}"]`)).some((input) => input.checked);
}
if (field.tagName === "SELECT") {
return field.value !== "";
}
return field.value.trim() !== "";
};
const updateButtonState = (container, button) => {
if (!container || !button) {
return;
}
const requiredFields = container.querySelectorAll("[required]");
let allValid = true;
for (const field of requiredFields) {
if (!isFieldFilled(field)) {
allValid = false;
break;
}
}
button.classList.toggle("is-ready", allValid);
};
const setActiveLegInput = (activeInput) => {
if (!legsTab) {
return;
}
legsTab.querySelectorAll(SELECTORS.legDateTimeInputs).forEach((input) => {
input.classList.toggle("active", input === activeInput);
});
};
const updateRemoveButtons = () => {
if (!legsTab) {
return;
}
const shouldShow = legsTab.querySelectorAll(SELECTORS.leg).length > 1;
legsTab.classList.toggle("has-multiple-legs", shouldShow);
legsTab.querySelectorAll(SELECTORS.removeColumn).forEach((column) => {
column.classList.toggle("visible", shouldShow);
column.style.display = shouldShow ? "" : "none";
});
};
const syncState = () => {
syncFrame = 0;
updateRemoveButtons();
updateButtonState(legsTab, continueButton);
updateButtonState(contactTab, requestButton);
};
const scheduleSync = () => {
if (!syncFrame) {
syncFrame = window.requestAnimationFrame(syncState);
}
};
if (form) {
form.addEventListener("input", scheduleSync);
form.addEventListener("change", scheduleSync);
form.addEventListener(
"blur",
() => {
scheduleSync();
},
true
);
form.addEventListener(
"click",
(event) => {
if (matches(event.target, SELECTORS.legDateTimeInputs)) {
setActiveLegInput(event.target);
}
const actionButton = event.target.closest(`${SELECTORS.addButton}, ${SELECTORS.removeButton}`);
if (actionButton) {
scheduleSync();
}
},
true
);
form.addEventListener(
"focusin",
(event) => {
if (matches(event.target, SELECTORS.legDateTimeInputs)) {
setActiveLegInput(event.target);
}
},
true
);
form.addEventListener(
"focusout",
(event) => {
if (!matches(event.target, SELECTORS.legDateTimeInputs)) {
return;
}
window.requestAnimationFrame(() => {
if (!matches(document.activeElement, SELECTORS.legDateTimeInputs)) {
setActiveLegInput(null);
}
});
},
true
);
}
if (legsTab && "MutationObserver" in window) {
const observer = new MutationObserver(() => {
scheduleSync();
});
observer.observe(legsTab, {
childList: true,
subtree: true,
});
}
syncState();
}
const init = () => {
initFormEnhancements();
};
if (document.readyState === "loading") {
document.addEventListener("DOMContentLoaded", init, { once: true });
} else {
init();
}
})();