/* =========================================================
   LFV Fireteam / TUGA registration widget
   Clean integration styles
   ========================================================= */

.fireteam-inquiry {
    --ft-red: #e30613;
    --ft-red-dark: #bd0510;
    --ft-text: #2b2b2b;
    --ft-muted: #777;
    --ft-border: #d7d7d7;
    --ft-border-light: #e9e9e9;
    --ft-bg: #fff;
    --ft-bg-soft: #f7f7f7;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 0 40px;
    color: var(--ft-text);
    font-family: inherit;
}

.fireteam-inquiry *,
.fireteam-inquiry *::before,
.fireteam-inquiry *::after {
    box-sizing: border-box;
}

.fireteam-inquiry lehrgangsanmeldung-element {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
}


/* =========================================================
   Sections
   ========================================================= */

.fireteam-inquiry .lehrgangsanmeldung-container {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    margin: 0 0 24px !important;
    padding: 28px 30px !important;

    background: var(--ft-bg);
    border: 1px solid var(--ft-border-light);
    border-radius: 7px;
}

.fireteam-inquiry .form-content {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.fireteam-inquiry h2.ueberschrift {
    position: relative;

    margin: 0 0 26px !important;
    padding: 0 0 14px !important;

    color: var(--ft-text);
    font-family: inherit !important;
    font-size: 24px !important;
    line-height: 1.25;
    font-weight: 600 !important;

    border-bottom: 1px solid var(--ft-border-light) !important;
}

.fireteam-inquiry h2.ueberschrift::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;

    width: 48px;
    height: 2px;

    background: var(--ft-red);
}

.fireteam-inquiry p.ueberschrift {
    margin: 0 !important;

    color: var(--ft-text);
    font-family: inherit !important;
    font-size: 16px;
    line-height: 1.7;
}

.fireteam-inquiry p.ueberschrift span[style*="color: red"] {
    display: inline-block;

    margin-bottom: 5px;

    color: var(--ft-red) !important;
    font-size: 18px;
    font-weight: 600;
}

.fireteam-inquiry p.ueberschrift span[style*="color: gray"] {
    color: var(--ft-muted) !important;
}


/* =========================================================
   Form sections
   ========================================================= */

.fireteam-inquiry .form-section {
    margin-top: 32px !important;
    padding-top: 26px !important;

    border-top: 1px solid var(--ft-border-light) !important;
}

.fireteam-inquiry .section-title {
    margin: 0 0 22px !important;

    color: var(--ft-text) !important;
    font-family: inherit !important;
    font-size: 18px !important;
    line-height: 1.3;
    font-weight: 600 !important;
}


/* =========================================================
   Form rows
   ========================================================= */

.fireteam-inquiry .dx-field {
    display: grid !important;
    grid-template-columns: 210px minmax(0, 1fr);
    align-items: center !important;
    column-gap: 18px;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    margin: 0 0 16px !important;
}

.fireteam-inquiry .dx-field-label {
    width: auto !important;
    min-width: 0 !important;

    padding: 0 !important;

    color: var(--ft-text);
    font-family: inherit;
    font-size: 15px;
    line-height: 1.35;
    font-weight: 500 !important;
}

.fireteam-inquiry .dx-field-value {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    float: none !important;
}


/* =========================================================
   Multi-column fields
   ========================================================= */

.fireteam-inquiry .side-by-side-inputs {
    display: grid !important;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1fr);

    gap: 12px !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
}

.fireteam-inquiry .side-by-side-inputs.with-fixed-element {
    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1fr)
        105px;
}

.fireteam-inquiry .side-by-side-inputs > * {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    margin: 0 !important;
}

.fireteam-inquiry .with-fixed-element .fixed-element {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    margin: 0 !important;
}


/* =========================================================
   Angular / DevExtreme custom elements
   ========================================================= */

.fireteam-inquiry dx-text-box,
.fireteam-inquiry dx-select-box,
.fireteam-inquiry dx-number-box,
.fireteam-inquiry dx-date-box,
.fireteam-inquiry dx-text-area,
.fireteam-inquiry dx-tag-box {
    display: block !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
}


/* =========================================================
   Inputs / selects
   IMPORTANT:
   Do NOT modify DevExtreme overlay positioning here.
   ========================================================= */

.fireteam-inquiry .dx-texteditor {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    height: 44px !important;
    min-height: 44px !important;

    background: #fff !important;
    border: 1px solid var(--ft-border) !important;
    border-radius: 4px !important;

    box-shadow: none !important;
}

.fireteam-inquiry .dx-texteditor-container {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    height: 100% !important;
}

.fireteam-inquiry .dx-dropdowneditor-input-wrapper,
.fireteam-inquiry .dx-selectbox-container {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    height: 100% !important;
}

.fireteam-inquiry .dx-texteditor-input-container {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    height: 100% !important;
}

.fireteam-inquiry input.dx-texteditor-input,
.fireteam-inquiry textarea.dx-texteditor-input {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    height: 100% !important;
    min-height: 0 !important;

    padding: 8px 12px !important;

    color: var(--ft-text) !important;
    font-family: inherit !important;
    font-size: 15px !important;
    line-height: 26px !important;

    background: transparent !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
}


/* Dropdown inputs need room for arrow */
.fireteam-inquiry .dx-dropdowneditor input.dx-texteditor-input {
    padding-right: 46px !important;
}

.fireteam-inquiry .dx-placeholder {
    color: #888 !important;
}

.fireteam-inquiry .dx-texteditor:hover {
    border-color: #aaa !important;
}

.fireteam-inquiry .dx-texteditor.dx-state-focused,
.fireteam-inquiry .dx-dropdowneditor.dx-state-focused {
    border-color: var(--ft-red) !important;
    box-shadow: 0 0 0 2px rgba(227, 6, 19, .09) !important;
}


/* =========================================================
   Dropdown arrow
   Let DevExtreme control positioning itself
   ========================================================= */

.fireteam-inquiry .dx-texteditor-buttons-container {
    height: 100% !important;
}

.fireteam-inquiry .dx-dropdowneditor-button {
    width: 42px !important;
    min-width: 42px !important;

    height: 100% !important;

    background: #fafafa !important;
    border-left: 1px solid #e7e7e7 !important;
}

.fireteam-inquiry .dx-dropdowneditor-button:hover {
    background: #f2f2f2 !important;
}


/* =========================================================
   Validation
   ========================================================= */

.fireteam-inquiry .dx-invalid.dx-texteditor {
    border-color: var(--ft-red) !important;
}

.fireteam-inquiry .dx-invalid-message-content {
    padding: 6px 9px !important;

    font-family: inherit !important;
    font-size: 12px !important;

    border-radius: 3px;
}


/* =========================================================
   Buttons
   ========================================================= */

.fireteam-inquiry .dx-button {
    text-align: center !important;
}

.fireteam-inquiry .dx-button-content {
    text-align: center !important;
}

.fireteam-inquiry .dx-button-text {
    text-align: center !important;
}

.fireteam-inquiry .submit-button,
.fireteam-inquiry .mobile-action-button {
    min-width: 170px !important;
    min-height: 44px !important;

    margin-top: 35px !important;

    color: #fff !important;
    background: var(--ft-red) !important;

    border: 1px solid var(--ft-red) !important;
    border-radius: 4px !important;

    box-shadow: none !important;
}

.fireteam-inquiry .submit-button:hover,
.fireteam-inquiry .mobile-action-button:hover {
    color: #fff !important;
    background: var(--ft-red-dark) !important;
    border-color: var(--ft-red-dark) !important;
}

.fireteam-inquiry .submit-button .dx-button-content,
.fireteam-inquiry .mobile-action-button .dx-button-content {
    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;

    padding: 10px 24px !important;

    text-align: center !important;
}

.fireteam-inquiry .submit-button .dx-button-text,
.fireteam-inquiry .mobile-action-button .dx-button-text {
    width: 100% !important;

    color: #fff !important;

    font-family: inherit !important;
    font-size: 15px !important;
    font-weight: 600 !important;

    text-align: center !important;
}


/* =========================================================
   Checkboxes
   ========================================================= */

.fireteam-inquiry .checkbox-group {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: flex-start !important;

    gap: 12px 24px;
}

.fireteam-inquiry .checkbox-group .dx-checkbox {
    width: auto !important;

    margin: 0 !important;
}

.fireteam-inquiry .dx-checkbox-text {
    color: var(--ft-text);

    font-family: inherit;
    font-size: 15px;
}


/* =========================================================
   Language selector
   ========================================================= */

.fireteam-inquiry .language-selector-container {
    float: none !important;

    width: 180px !important;
    max-width: 100% !important;

    margin: 0 0 20px auto !important;
}

.fireteam-inquiry .language-selector-container:empty {
    display: none !important;
}


/* =========================================================
   Participant / later steps
   ========================================================= */

.fireteam-inquiry .teilnehmer-block {
    width: 100% !important;

    margin: 0 0 20px !important;
    padding: 22px !important;

    background: var(--ft-bg-soft) !important;

    border: 1px solid var(--ft-border) !important;
    border-radius: 6px !important;
}

.fireteam-inquiry .teilnehmer-header {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 15px;

    margin-bottom: 20px !important;
}

.fireteam-inquiry .teilnehmer-header h3 {
    margin: 0 !important;

    color: var(--ft-text);

    font-size: 18px !important;
    font-weight: 600 !important;
}

.fireteam-inquiry .event-detail-box {
    margin: 8px 0 18px !important;
    padding: 18px !important;

    background: var(--ft-bg-soft) !important;

    border: 1px solid var(--ft-border-light) !important;
    border-radius: 5px !important;
}


/* =========================================================
   DevExtreme dropdown popup
   Popup may be attached directly to BODY.
   Styling only - NO position overrides!
   ========================================================= */

body:has(.fireteam-inquiry) .dx-dropdownlist-popup-wrapper .dx-overlay-content,
body:has(.fireteam-inquiry) .dx-dropdowneditor-overlay .dx-overlay-content {
    background: #fff !important;

    border: 1px solid var(--ft-border, #d7d7d7) !important;
    border-radius: 5px !important;

    box-shadow: 0 10px 30px rgba(0, 0, 0, .16) !important;
}

body:has(.fireteam-inquiry) .dx-dropdownlist-popup-wrapper .dx-list-item,
body:has(.fireteam-inquiry) .dx-dropdowneditor-overlay .dx-list-item {
    min-height: 42px !important;

    color: #2b2b2b !important;
    background: #fff !important;

    font-family: inherit !important;
    font-size: 15px !important;

    border-bottom: 1px solid #eee !important;
}

body:has(.fireteam-inquiry) .dx-dropdownlist-popup-wrapper .dx-list-item-content,
body:has(.fireteam-inquiry) .dx-dropdowneditor-overlay .dx-list-item-content {
    padding: 10px 14px !important;

    line-height: 22px !important;
}

body:has(.fireteam-inquiry) .dx-dropdownlist-popup-wrapper .dx-list-item:hover,
body:has(.fireteam-inquiry) .dx-dropdowneditor-overlay .dx-list-item:hover {
    background: #f5f5f5 !important;
}

body:has(.fireteam-inquiry) .dx-dropdownlist-popup-wrapper .dx-list-item-selected,
body:has(.fireteam-inquiry) .dx-dropdowneditor-overlay .dx-list-item-selected {
    color: #b80410 !important;
    background: #fcedee !important;
}


/* =========================================================
   Tablet
   ========================================================= */

@media (max-width: 900px) {
    .fireteam-inquiry .lehrgangsanmeldung-container {
        padding: 24px !important;
    }

    .fireteam-inquiry .dx-field {
        grid-template-columns: 170px minmax(0, 1fr);
    }
}


/* =========================================================
   Mobile
   ========================================================= */

@media (max-width: 767px) {
    .fireteam-inquiry {
        margin-bottom: 25px;
    }

    .fireteam-inquiry .lehrgangsanmeldung-container {
        margin-bottom: 16px !important;
        padding: 20px 16px !important;

        border-radius: 5px;
    }

    .fireteam-inquiry h2.ueberschrift {
        font-size: 21px !important;
    }

    .fireteam-inquiry .dx-field {
        display: block !important;

        margin-bottom: 18px !important;
    }

    .fireteam-inquiry .dx-field-label {
        display: block;

        margin: 0 0 7px !important;

        font-size: 14px;
        font-weight: 600 !important;
    }

    .fireteam-inquiry .side-by-side-inputs,
    .fireteam-inquiry .side-by-side-inputs.with-fixed-element {
        grid-template-columns: minmax(0, 1fr) !important;

        gap: 10px !important;
    }

    .fireteam-inquiry .language-selector-container {
        width: 100% !important;

        margin: 0 0 18px !important;
    }

    .fireteam-inquiry .checkbox-group {
        flex-direction: column;

        gap: 12px;
    }

    .fireteam-inquiry .submit-button,
    .fireteam-inquiry .mobile-action-button {
        display: block !important;

        width: 100% !important;

        margin: 28px 0 0 !important;
    }

    .fireteam-inquiry .teilnehmer-block {
        padding: 16px !important;
    }
}


/* =========================================================
   Small phones
   ========================================================= */

@media (max-width: 420px) {
    .fireteam-inquiry .lehrgangsanmeldung-container {
        padding: 18px 12px !important;
    }

    .fireteam-inquiry h2.ueberschrift {
        font-size: 19px !important;
    }
}

/* =========================================================
   Validation messages + button height
   ========================================================= */

/*
 * DevExtreme validation messages are overlays below the input.
 * Reserve enough space so the following row is never overlapped.
 */
.fireteam-inquiry .dx-field:has(.dx-invalid-message) {
    margin-bottom: 32px !important;
}

/* Multiple inputs in one row may also contain validation messages */
.fireteam-inquiry .side-by-side-inputs:has(.dx-invalid-message) {
    margin-bottom: 16px !important;
}

/* Validation text clean and unobtrusive */
.fireteam-inquiry .dx-invalid-message-content {
    padding: 4px 6px !important;

    color: #c62828 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;

    font-family: inherit !important;
    font-size: 12px !important;
    line-height: 16px !important;
    white-space: nowrap;
}

/* Weiter / action buttons: compact fixed height */
.fireteam-inquiry .submit-button,
.fireteam-inquiry .mobile-action-button {
    display: block !important;

    width: 100% !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;

    padding: 0 !important;
    margin-top: 30px !important;

    text-align: center !important;
}

.fireteam-inquiry .submit-button .dx-button-content,
.fireteam-inquiry .mobile-action-button .dx-button-content {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;
    height: 42px !important;
    min-height: 42px !important;

    padding: 0 24px !important;
}

.fireteam-inquiry .submit-button .dx-button-text,
.fireteam-inquiry .mobile-action-button .dx-button-text {
    width: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    line-height: 20px !important;
    text-align: center !important;
}

/* On mobile validation messages can wrap */
@media (max-width: 767px) {
    .fireteam-inquiry .dx-field:has(.dx-invalid-message) {
        margin-bottom: 36px !important;
    }

    .fireteam-inquiry .dx-invalid-message-content {
        white-space: normal;
    }
}

/* =========================================================
   Clean DevExtreme selects / dropdowns
   ========================================================= */

/* Select selbst */
.fireteam-inquiry .dx-selectbox,
.fireteam-inquiry .dx-dropdowneditor {
    cursor: pointer !important;
}

/* Graues Klick-Kästchen entfernen */
.fireteam-inquiry .dx-dropdowneditor-button {
    width: 42px !important;
    min-width: 42px !important;

    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

.fireteam-inquiry .dx-dropdowneditor-button:hover,
.fireteam-inquiry .dx-dropdowneditor-button.dx-state-hover {
    background: transparent !important;
}

/* Pfeil sauber mittig */
.fireteam-inquiry .dx-dropdowneditor-icon {
    opacity: .65;
}

.fireteam-inquiry .dx-dropdowneditor:hover .dx-dropdowneditor-icon {
    opacity: 1;
}

/* Rechts genug Platz für Pfeil */
.fireteam-inquiry .dx-dropdowneditor input.dx-texteditor-input {
    padding-right: 46px !important;
}


/* =========================================================
   Dropdown popup
   ========================================================= */

/* Pull-to-refresh komplett entfernen */
body:has(.fireteam-inquiry) .dx-selectbox-popup-wrapper .dx-scrollview-top-pocket,
body:has(.fireteam-inquiry) .dx-selectbox-popup-wrapper .dx-scrollview-pull-down,
body:has(.fireteam-inquiry) .dx-selectbox-popup-wrapper .dx-scrollview-pull-down-text,
body:has(.fireteam-inquiry) .dx-selectbox-popup-wrapper .dx-scrollview-pull-down-image,
body:has(.fireteam-inquiry) .dx-selectbox-popup-wrapper .dx-scrollview-pull-down-indicator {
    display: none !important;
}

/* Auch unteren Ladebereich ausblenden */
body:has(.fireteam-inquiry) .dx-selectbox-popup-wrapper .dx-scrollview-bottom-pocket {
    display: none !important;
}

/* Dropdown nicht unnötig riesig machen */
body:has(.fireteam-inquiry) .dx-selectbox-popup-wrapper .dx-popup-content {
    height: auto !important;
    max-height: 320px !important;
    padding: 0 !important;

    background: #fff !important;
}

/* Scrollbereich */
body:has(.fireteam-inquiry) .dx-selectbox-popup-wrapper .dx-scrollable,
body:has(.fireteam-inquiry) .dx-selectbox-popup-wrapper .dx-scrollable-wrapper,
body:has(.fireteam-inquiry) .dx-selectbox-popup-wrapper .dx-scrollable-container {
    max-height: 320px !important;
}

/* Liste */
body:has(.fireteam-inquiry) .dx-selectbox-popup-wrapper .dx-list {
    padding: 4px 0 !important;
    background: #fff !important;
}

/* Option */
body:has(.fireteam-inquiry) .dx-selectbox-popup-wrapper .dx-list-item {
    min-height: 40px !important;

    margin: 0 !important;

    color: #2b2b2b !important;
    background: #fff !important;

    border: 0 !important;
    border-bottom: 1px solid #eeeeee !important;

    font-family: inherit !important;
    font-size: 14px !important;

    cursor: pointer !important;
}

/* Optionsinhalt */
body:has(.fireteam-inquiry) .dx-selectbox-popup-wrapper .dx-list-item-content {
    padding: 9px 14px !important;
    line-height: 22px !important;
}

/* Hover */
body:has(.fireteam-inquiry) .dx-selectbox-popup-wrapper .dx-list-item:hover,
body:has(.fireteam-inquiry) .dx-selectbox-popup-wrapper .dx-list-item.dx-state-hover {
    color: #222 !important;
    background: #f5f5f5 !important;
}

/* Ausgewählte Option */
body:has(.fireteam-inquiry) .dx-selectbox-popup-wrapper .dx-list-item-selected,
body:has(.fireteam-inquiry) .dx-selectbox-popup-wrapper .dx-list-item.dx-state-selected {
    color: #c70410 !important;
    background: #fdebed !important;
    font-weight: 600 !important;
}

/* Popup-Rahmen */
body:has(.fireteam-inquiry) .dx-selectbox-popup-wrapper .dx-overlay-content {
    overflow: hidden !important;

    background: #fff !important;

    border: 1px solid #d5d5d5 !important;
    border-radius: 5px !important;

    box-shadow: 0 8px 25px rgba(0,0,0,.16) !important;
}

/* Leere Option nicht unnötig hoch */
body:has(.fireteam-inquiry) .dx-selectbox-popup-wrapper .dx-list-item-content:empty {
    min-height: 20px !important;
}

/* =========================================================
   Restore scrolling in DevExtreme select dropdowns
   ========================================================= */

body:has(.fireteam-inquiry) .dx-selectbox-popup-wrapper .dx-popup-content {
    height: 320px !important;
    max-height: 320px !important;
    overflow: hidden !important;
}

body:has(.fireteam-inquiry) .dx-selectbox-popup-wrapper .dx-scrollable,
body:has(.fireteam-inquiry) .dx-selectbox-popup-wrapper .dx-scrollable-wrapper {
    height: 100% !important;
    max-height: 320px !important;
}

body:has(.fireteam-inquiry) .dx-selectbox-popup-wrapper .dx-scrollable-container {
    height: 100% !important;
    max-height: 320px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
}

/* Pull-to-refresh bleibt unsichtbar */
body:has(.fireteam-inquiry) .dx-selectbox-popup-wrapper .dx-scrollview-top-pocket,
body:has(.fireteam-inquiry) .dx-selectbox-popup-wrapper .dx-scrollview-pull-down,
body:has(.fireteam-inquiry) .dx-selectbox-popup-wrapper .dx-scrollview-pull-down-text,
body:has(.fireteam-inquiry) .dx-selectbox-popup-wrapper .dx-scrollview-pull-down-image,
body:has(.fireteam-inquiry) .dx-selectbox-popup-wrapper .dx-scrollview-pull-down-indicator {
    display: none !important;
}

/* =========================================================
   Empty state for select search
   ========================================================= */

body:has(.fireteam-inquiry) .dx-selectbox-popup-wrapper .dx-empty-message {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    min-height: 90px !important;
    padding: 22px 18px !important;

    color: #777 !important;
    background: #fafafa !important;

    font-family: inherit !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    text-align: center !important;

    border: 0 !important;
}

/* falls DevExtreme den Text als List-Item rendert */
body:has(.fireteam-inquiry) .dx-selectbox-popup-wrapper .dx-list-empty {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    min-height: 90px !important;
    padding: 22px 18px !important;

    color: #777 !important;
    background: #fafafa !important;

    font-family: inherit !important;
    font-size: 14px !important;
    text-align: center !important;
}

/* =========================================================
   DevExtreme: closed dropdowns really disappear
   ========================================================= */

.fireteam-inquiry .dx-dropdowneditor-overlay.dx-state-invisible,
.fireteam-inquiry .dx-selectbox-popup.dx-state-invisible,
.fireteam-inquiry .dx-dropdowneditor-overlay.dx-state-invisible .dx-overlay-content,
.fireteam-inquiry .dx-selectbox-popup.dx-state-invisible .dx-overlay-content,
body:has(.fireteam-inquiry) .dx-dropdowneditor-overlay.dx-state-invisible,
body:has(.fireteam-inquiry) .dx-selectbox-popup-wrapper.dx-state-invisible,
body:has(.fireteam-inquiry) .dx-dropdowneditor-overlay.dx-state-invisible .dx-overlay-content,
body:has(.fireteam-inquiry) .dx-selectbox-popup-wrapper.dx-state-invisible .dx-overlay-content {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}


/* Validation messages must not block inputs */
.fireteam-inquiry .dx-invalid-message,
.fireteam-inquiry .dx-invalid-message *,
body:has(.fireteam-inquiry) .dx-invalid-message,
body:has(.fireteam-inquiry) .dx-invalid-message * {
    pointer-events: none !important;
}

/* =========================================================
   Stable validation layout - no jumping
   ========================================================= */

/*
 * Immer derselbe Platz unter jeder Zeile.
 * Dadurch springt das Formular nicht mehr, wenn eine
 * Validierung erscheint oder verschwindet.
 */
.fireteam-inquiry .dx-field,
.fireteam-inquiry .dx-field:has(.dx-invalid-message) {
    margin-bottom: 28px !important;
}

/* Bei DE/IT/PLZ nicht zusätzlich Abstand innerhalb der Zeile erzeugen */
.fireteam-inquiry .side-by-side-inputs,
.fireteam-inquiry .side-by-side-inputs:has(.dx-invalid-message) {
    margin-bottom: 0 !important;
}

/*
 * DevExtreme bestimmt Position/Transform selbst.
 * Wir verändern daran NICHTS.
 * Die Message darf aber niemals Klicks blockieren.
 */
.fireteam-inquiry .dx-invalid-message,
.fireteam-inquiry .dx-invalid-message *,
body:has(.fireteam-inquiry) .dx-invalid-message,
body:has(.fireteam-inquiry) .dx-invalid-message * {
    pointer-events: none !important;
}

/* Nur Optik der Fehlermeldung */
body:has(.fireteam-inquiry) .dx-invalid-message-content {
    padding: 4px 5px !important;
    color: #d71920 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    font-family: inherit !important;
    font-size: 12px !important;
    line-height: 16px !important;
}

/* =========================================================
   DevExtreme toast must never block the whole page
   ========================================================= */

body:has(.fireteam-inquiry) .dx-toast-wrapper,
body:has(.fireteam-inquiry) .dx-toast-wrapper *,
body:has(.fireteam-inquiry) .dx-toast {
    pointer-events: none !important;
}

/* =========================================================
   Empty select: compact popup instead of 320px
   ========================================================= */

body:has(.fireteam-inquiry)
.dx-selectbox-popup-wrapper:has(.dx-empty-collection)
.dx-popup-content {
    height: 64px !important;
    min-height: 64px !important;
    max-height: 64px !important;
}

body:has(.fireteam-inquiry)
.dx-selectbox-popup-wrapper:has(.dx-empty-collection)
.dx-scrollable,

body:has(.fireteam-inquiry)
.dx-selectbox-popup-wrapper:has(.dx-empty-collection)
.dx-scrollable-wrapper,

body:has(.fireteam-inquiry)
.dx-selectbox-popup-wrapper:has(.dx-empty-collection)
.dx-scrollable-container,

body:has(.fireteam-inquiry)
.dx-selectbox-popup-wrapper:has(.dx-empty-collection)
.dx-scrollable-content,

body:has(.fireteam-inquiry)
.dx-selectbox-popup-wrapper:has(.dx-empty-collection)
.dx-scrollview-content {
    height: 64px !important;
    min-height: 64px !important;
    max-height: 64px !important;
    overflow: hidden !important;
}

/* "Keine Daten verfügbar" kompakt und mittig */
body:has(.fireteam-inquiry)
.dx-selectbox-popup-wrapper
.dx-empty-collection
.dx-empty-message {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;
    height: 64px !important;
    min-height: 64px !important;

    padding: 0 16px !important;

    color: #777 !important;
    background: #fafafa !important;

    font-size: 14px !important;
    text-align: center !important;
}

/* bei leerer Liste keine Refresh-Pockets */
body:has(.fireteam-inquiry)
.dx-selectbox-popup-wrapper:has(.dx-empty-collection)
.dx-scrollview-top-pocket,

body:has(.fireteam-inquiry)
.dx-selectbox-popup-wrapper:has(.dx-empty-collection)
.dx-scrollview-bottom-pocket {
    display: none !important;
}

/* =========================================================
   Hide validation message while user edits the field
   ========================================================= */

.fireteam-inquiry dx-text-box:focus-within .dx-invalid-message,
.fireteam-inquiry dx-select-box:focus-within .dx-invalid-message,
.fireteam-inquiry dx-number-box:focus-within .dx-invalid-message,
.fireteam-inquiry dx-date-box:focus-within .dx-invalid-message,
.fireteam-inquiry dx-text-area:focus-within .dx-invalid-message {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* no animation / jumping while focusing */
.fireteam-inquiry .dx-invalid-message,
.fireteam-inquiry .dx-invalid-message-content {
    transition: none !important;
    pointer-events: none !important;
}

/* =========================================================
   Final global validation toast
   ========================================================= */

/* Toast darf niemals die Seite blockieren */
body:has(.fireteam-inquiry) .dx-toast,
body:has(.fireteam-inquiry) .dx-toast-wrapper,
body:has(.fireteam-inquiry) .dx-toast-wrapper * {
    pointer-events: none !important;
}

/* Wrapper über Viewport, aber nicht klickbar */
body:has(.fireteam-inquiry) .dx-toast-wrapper {
    position: fixed !important;
    inset: 0 !important;

    width: 100vw !important;
    height: 100vh !important;

    z-index: 9999 !important;
}

/* eigentliche Meldung fix unten mittig */
body:has(.fireteam-inquiry) .dx-toast-content {
    position: fixed !important;

    left: 50% !important;
    right: auto !important;
    top: auto !important;
    bottom: 24px !important;

    transform: translateX(-50%) !important;

    width: auto !important;
    max-width: min(90vw, 720px) !important;
    height: auto !important;

    padding: 12px 18px !important;

    background: #e30613 !important;
    color: #fff !important;

    border: 0 !important;
    border-radius: 5px !important;

    box-shadow: 0 8px 24px rgba(0, 0, 0, .18) !important;

    pointer-events: none !important;
}

body:has(.fireteam-inquiry) .dx-toast-message {
    color: #fff !important;

    font-family: inherit !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
    text-align: center !important;
}

@media (max-width: 767px) {
    body:has(.fireteam-inquiry) .dx-toast-content {
        bottom: 12px !important;

        width: calc(100vw - 24px) !important;
        max-width: calc(100vw - 24px) !important;
    }
}


/* =========================================================
   Validation: hide messages while user edits any field
   ========================================================= */

/* Validation overlays dürfen niemals Klicks blockieren */
.fireteam-inquiry .dx-invalid-message,
.fireteam-inquiry .dx-invalid-message *,
body:has(.fireteam-inquiry) .dx-invalid-message,
body:has(.fireteam-inquiry) .dx-invalid-message * {
    pointer-events: none !important;
}

/*
 * Sobald irgendein Eingabefeld im Fireteam-Formular Fokus hat,
 * alle Validation-Meldungen unsichtbar machen.
 *
 * Kein display:none -> DevExtreme behält seine Geometrie.
 */
.fireteam-inquiry:has(.dx-texteditor-input:focus) .dx-invalid-message,
.fireteam-inquiry:has(.dx-checkbox:focus) .dx-invalid-message {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Kein Herumfliegen durch CSS-Animationen */
.fireteam-inquiry .dx-invalid-message,
.fireteam-inquiry .dx-invalid-message-content {
    transition: none !important;
}

/* =========================================================
   Mobile validation spacing
   Keep DevExtreme messages absolute, only reserve space.
   ========================================================= */

@media (max-width: 767px) {

    /* gestapelte DE / IT / PLZ / Nr.-Felder */
    .fireteam-inquiry .side-by-side-inputs {
        gap: 10px !important;
    }

    /* nur wenn ein Feld ungültig ist, Platz für seine Meldung schaffen */
    .fireteam-inquiry .side-by-side-inputs > dx-text-box.dx-invalid,
    .fireteam-inquiry .side-by-side-inputs > dx-select-box.dx-invalid,
    .fireteam-inquiry .side-by-side-inputs > dx-number-box.dx-invalid,
    .fireteam-inquiry .side-by-side-inputs > dx-date-box.dx-invalid {
        margin-bottom: 20px !important;
    }

    /* letzte Meldung braucht keinen zusätzlichen Abstand
       zur nächsten Eingabe innerhalb derselben Gruppe */
    .fireteam-inquiry .side-by-side-inputs > .dx-invalid:last-child {
        margin-bottom: 0 !important;
    }

    /* Validation Text etwas kompakter */
    body:has(.fireteam-inquiry) .dx-invalid-message-content {
        font-size: 11px !important;
        line-height: 15px !important;
        white-space: nowrap !important;
    }
}

/* =========================================================
   Fireteam loading indicator
   ========================================================= */

.fireteam-inquiry .dx-loadpanel-content {
    min-width: 150px !important;
    width: auto !important;
    height: auto !important;

    padding: 18px 22px !important;

    background: #fff !important;

    border: 1px solid #e5e5e5 !important;
    border-radius: 6px !important;

    box-shadow: 0 8px 24px rgba(0, 0, 0, .12) !important;
}

.fireteam-inquiry .dx-loadpanel-content-wrapper {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    gap: 10px !important;
}

.fireteam-inquiry .dx-loadpanel-message {
    margin: 0 !important;

    color: #333 !important;

    font-family: inherit !important;
    font-size: 14px !important;
    line-height: 20px !important;
}

/* Spinner etwas kompakter */
.fireteam-inquiry .dx-loadpanel-indicator {
    width: 24px !important;
    height: 24px !important;
}

/* Loader darf keine Seite blockieren sobald er unsichtbar ist */
.fireteam-inquiry .dx-loadpanel.dx-state-invisible,
.fireteam-inquiry .dx-loadpanel-content.dx-state-invisible {
    pointer-events: none !important;
}

/* =========================================================
   FINAL loader visibility fix
   ========================================================= */

/* Nach dem Laden komplett aus dem Layout entfernen */
.fireteam-inquiry dx-load-panel.dx-state-invisible {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;

    position: static !important;

    width: 0 !important;
    height: 0 !important;
    min-width: 0 !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden !important;
    pointer-events: none !important;
}

/* inneren Loader ebenfalls sicher ausblenden */
.fireteam-inquiry dx-load-panel.dx-state-invisible .dx-loadpanel-content,
.fireteam-inquiry .dx-loadpanel-content.dx-state-invisible {
    display: none !important;
}

/* Nur während aktivem Laden anzeigen */
.fireteam-inquiry dx-load-panel:not(.dx-state-invisible) {
    display: block !important;
    position: relative !important;

    width: 100% !important;
    height: auto !important;

    margin: 18px 0 !important;

    pointer-events: none !important;
}

.fireteam-inquiry
dx-load-panel:not(.dx-state-invisible)
.dx-loadpanel-content {
    position: relative !important;

    left: auto !important;
    top: auto !important;
    transform: none !important;

    width: fit-content !important;
    height: auto !important;

    margin: 0 auto !important;
}

/* =========================================================
   Validation overlays below fixed site header
   ========================================================= */

body:has(.fireteam-inquiry) .dx-overlay-wrapper.dx-invalid-message,
body:has(.fireteam-inquiry) .dx-overlay.dx-invalid-message {
    z-index: 10 !important;
}

/* =========================================================
   Header/menu always above validation overlays
   ========================================================= */

body:has(.fireteam-inquiry) .fixed-header,
body:has(.fireteam-inquiry) #mainMenu {
    z-index: 10000 !important;
}

/* Validation overlays stay below site navigation */
body:has(.fireteam-inquiry) .dx-invalid-message,
body:has(.fireteam-inquiry) .dx-overlay-wrapper.dx-invalid-message {
    z-index: 20 !important;
}

/* =========================================================
   Teilnehmer step: buttons + checkboxes
   ========================================================= */

/* ---------------------------------------------------------
   Zurück zum Arbeitgeber
   --------------------------------------------------------- */

.fireteam-inquiry .back-button {
    width: auto !important;
    min-width: 0 !important;
    height: 40px !important;

    margin: 0 !important;
    padding: 0 !important;

    color: #2b2b2b !important;
    background: #fff !important;

    border: 1px solid #cfcfcf !important;
    border-radius: 4px !important;

    box-shadow: none !important;
}

.fireteam-inquiry .back-button .dx-button-content {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    height: 38px !important;
    padding: 0 14px !important;

    gap: 7px;
}

.fireteam-inquiry .back-button .dx-button-text {
    color: #2b2b2b !important;

    font-family: inherit !important;
    font-size: 14px !important;
    font-weight: 500 !important;
}

.fireteam-inquiry .back-button .dx-icon {
    color: #2b2b2b !important;
    font-size: 16px !important;
}

.fireteam-inquiry .back-button:hover {
    color: #fff !important;
    background: #2b2b2b !important;
    border-color: #2b2b2b !important;
}

.fireteam-inquiry .back-button:hover .dx-button-text,
.fireteam-inquiry .back-button:hover .dx-icon {
    color: #fff !important;
}


/* ---------------------------------------------------------
   Zusatzangaben checkboxes
   --------------------------------------------------------- */

.fireteam-inquiry .checkbox-group {
    display: flex !important;
    flex-wrap: wrap !important;

    gap: 10px !important;
}

.fireteam-inquiry .checkbox-group .dx-checkbox {
    display: inline-flex !important;
    align-items: center !important;

    width: auto !important;

    margin: 0 !important;
    padding: 9px 12px !important;

    background: #fff !important;

    border: 1px solid #e1e1e1 !important;
    border-radius: 4px !important;

    transition:
        border-color .15s ease,
        background-color .15s ease;
}

.fireteam-inquiry .checkbox-group .dx-checkbox:hover {
    background: #fafafa !important;
    border-color: #bdbdbd !important;
}


/* ---------------------------------------------------------
   Checkbox selbst
   --------------------------------------------------------- */

.fireteam-inquiry .dx-checkbox-icon {
    width: 20px !important;
    height: 20px !important;

    background: #fff !important;

    border: 1px solid #b9b9b9 !important;
    border-radius: 3px !important;

    box-shadow: none !important;
}

.fireteam-inquiry .dx-checkbox-checked .dx-checkbox-icon {
    color: #fff !important;
    background: var(--ft-red, #e30613) !important;
    border-color: var(--ft-red, #e30613) !important;
}

.fireteam-inquiry .dx-checkbox-text {
    padding-left: 8px !important;

    color: #333 !important;

    font-family: inherit !important;
    font-size: 14px !important;
    line-height: 1.45 !important;
}


/* ---------------------------------------------------------
   Datenschutz / Haftung
   --------------------------------------------------------- */

/* Erste Datenschutz-Zeile */
.fireteam-inquiry
dx-validation-group
> div:has(> .dx-checkbox.dx-validator) {
    display: flex !important;
    align-items: flex-start !important;
    flex-wrap: wrap !important;

    width: 100% !important;

    gap: 6px 12px !important;

    float: none !important;

    margin: 12px 0 18px !important;
}

.fireteam-inquiry
dx-validation-group
> div:has(> .dx-checkbox.dx-validator)
> .dx-checkbox {
    flex: 1 1 auto;

    width: auto !important;
    max-width: 100% !important;

    margin: 0 !important;
    float: none !important;
}

.fireteam-inquiry
dx-validation-group
> div:has(> .dx-checkbox.dx-validator)
> span {
    float: none !important;

    margin: 2px 0 0 !important;
}

.fireteam-inquiry
dx-validation-group
> div:has(> .dx-checkbox.dx-validator)
> span a {
    color: var(--ft-red, #e30613) !important;
    text-decoration: underline;
}


/* Haftungsausschluss */
.fireteam-inquiry .legal-container {
    display: flex !important;
    align-items: flex-start !important;

    width: 100% !important;

    gap: 12px !important;

    float: none !important;

    margin: 16px 0 28px !important;
}

.fireteam-inquiry .legal-container .legal-checkbox {
    flex: 0 0 20px !important;

    width: 20px !important;

    margin: 2px 0 0 !important;
}

.fireteam-inquiry .legal-container .legal-text {
    flex: 1 1 auto !important;
    min-width: 0 !important;

    margin: 0 !important;

    color: #444 !important;

    font-family: inherit !important;
    font-size: 14px !important;
    line-height: 1.55 !important;
}

.fireteam-inquiry .legal-container .legal-text p {
    margin: 0 0 7px !important;
}

.fireteam-inquiry .legal-container .legal-text ul {
    margin: 0 0 8px !important;
    padding-left: 20px !important;
}


/* ---------------------------------------------------------
   Buttons unten
   --------------------------------------------------------- */

/* Weiteren Teilnehmer hinzufügen = Secondary */
.fireteam-inquiry .submit-button.dx-button-normal:not(.dx-button-default) {
    color: #2b2b2b !important;
    background: #fff !important;

    border-color: #bdbdbd !important;
}

.fireteam-inquiry
.submit-button.dx-button-normal:not(.dx-button-default)
.dx-button-text {
    color: #2b2b2b !important;
}

.fireteam-inquiry .submit-button.dx-button-normal:not(.dx-button-default):hover {
    background: #2b2b2b !important;
    border-color: #2b2b2b !important;
}

.fireteam-inquiry
.submit-button.dx-button-normal:not(.dx-button-default):hover
.dx-button-text {
    color: #fff !important;
}

/* Anmelden bleibt klarer Hauptbutton */
.fireteam-inquiry .submit-button.dx-button-default {
    margin-top: 12px !important;

    color: #fff !important;
    background: var(--ft-red, #e30613) !important;

    border-color: var(--ft-red, #e30613) !important;
}

.fireteam-inquiry .submit-button.dx-button-default:hover {
    background: var(--ft-red-dark, #bd0510) !important;
    border-color: var(--ft-red-dark, #bd0510) !important;
}


/* ---------------------------------------------------------
   Mobile
   --------------------------------------------------------- */

@media (max-width: 767px) {
    .fireteam-inquiry .back-button {
        width: 100% !important;
    }

    .fireteam-inquiry .checkbox-group {
        display: grid !important;
        grid-template-columns: 1fr !important;
    }

    .fireteam-inquiry .checkbox-group .dx-checkbox {
        width: 100% !important;
    }

    .fireteam-inquiry
    dx-validation-group
    > div:has(> .dx-checkbox.dx-validator) {
        display: block !important;
    }

    .fireteam-inquiry
    dx-validation-group
    > div:has(> .dx-checkbox.dx-validator)
    > span {
        display: block !important;
        margin: 7px 0 0 28px !important;
    }
}

/* =========================================================
   Fireteam checkboxes - final
   ========================================================= */

/* Alle Checkboxen im Fireteam einheitlich */
.fireteam-inquiry .dx-checkbox,
.fireteam-inquiry .dx-checkbox *,
.fireteam-inquiry .dx-checkbox-container {
    cursor: pointer !important;
}

.fireteam-inquiry .dx-checkbox-container {
    display: inline-flex !important;
    align-items: flex-start !important;
    gap: 8px !important;
}

/* Quadrat */
.fireteam-inquiry .dx-checkbox-icon {
    flex: 0 0 18px !important;

    width: 18px !important;
    min-width: 18px !important;
    height: 18px !important;
    min-height: 18px !important;

    margin: 1px 0 0 !important;

    background: #fff !important;

    border: 1px solid #aaa !important;
    border-radius: 2px !important;

    box-shadow: none !important;

    transition:
        border-color .15s ease,
        box-shadow .15s ease !important;
}

/* Hover: Hintergrund bleibt IMMER weiß */
.fireteam-inquiry .dx-checkbox:not(.dx-checkbox-checked):hover .dx-checkbox-icon,
.fireteam-inquiry .dx-checkbox:not(.dx-checkbox-checked).dx-state-hover .dx-checkbox-icon {
    background: #fff !important;
    border-color: #555 !important;
    box-shadow: 0 0 0 2px rgba(0, 0, 0, .05) !important;
}

/* Aktiv: LFV-Rot */
.fireteam-inquiry .dx-checkbox.dx-checkbox-checked .dx-checkbox-icon {
    background: var(--ft-red, #e30613) !important;
    border-color: var(--ft-red, #e30613) !important;
    color: #fff !important;
}

/* Aktiv + Hover bleibt ROT */
.fireteam-inquiry .dx-checkbox.dx-checkbox-checked:hover .dx-checkbox-icon,
.fireteam-inquiry .dx-checkbox.dx-checkbox-checked.dx-state-hover .dx-checkbox-icon {
    background: var(--ft-red, #e30613) !important;
    border-color: var(--ft-red-dark, #bd0510) !important;
    box-shadow: 0 0 0 2px rgba(227, 6, 19, .10) !important;
}

/* Checkbox-Text */
.fireteam-inquiry .dx-checkbox-text {
    padding-left: 0 !important;

    color: #333 !important;

    font-family: inherit !important;
    font-size: 14px !important;
    line-height: 20px !important;
}


/* =========================================================
   Zusatzangaben
   ========================================================= */

.fireteam-inquiry .checkbox-group {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
}

.fireteam-inquiry .checkbox-group .dx-checkbox {
    width: auto !important;

    margin: 0 !important;
    padding: 9px 12px !important;

    background: #fff !important;

    border: 1px solid #ddd !important;
    border-radius: 4px !important;

    transition:
        border-color .15s ease,
        box-shadow .15s ease !important;
}

/* Auch hier beim Hover KEINE Hintergrundänderung */
.fireteam-inquiry .checkbox-group .dx-checkbox:hover {
    background: #fff !important;
    border-color: #aaa !important;
    box-shadow: 0 2px 7px rgba(0, 0, 0, .06) !important;
}


/* =========================================================
   Haftungsausschluss
   Checkbox sauber links neben dem Text
   ========================================================= */

.fireteam-inquiry .legal-container {
    display: grid !important;
    grid-template-columns: 20px minmax(0, 1fr) !important;
    align-items: start !important;

    column-gap: 12px !important;

    width: 100% !important;

    margin: 16px 0 28px !important;

    float: none !important;
}

.fireteam-inquiry .legal-container .legal-checkbox {
    width: 20px !important;
    min-width: 20px !important;

    margin: 1px 0 0 !important;
}

.fireteam-inquiry .legal-container .legal-text {
    min-width: 0 !important;
    margin: 0 !important;

    color: #444 !important;

    font-family: inherit !important;
    font-size: 14px !important;
    line-height: 1.55 !important;
}

.fireteam-inquiry .legal-container .legal-text p {
    margin: 0 0 7px !important;
}

.fireteam-inquiry .legal-container .legal-text ul {
    margin: 0 0 8px !important;
    padding-left: 20px !important;
}


/* Mobile */
@media (max-width: 767px) {
    .fireteam-inquiry .checkbox-group {
        display: grid !important;
        grid-template-columns: 1fr !important;
    }

    .fireteam-inquiry .checkbox-group .dx-checkbox {
        width: 100% !important;
    }

    .fireteam-inquiry .legal-container {
        grid-template-columns: 20px minmax(0, 1fr) !important;
        column-gap: 10px !important;
    }
}

/* =========================================================
   FINAL button hierarchy
   ========================================================= */

/*
 * Alte Regel für dx-button-normal überstimmen:
 * Weiter ist ebenfalls dx-button-normal und muss ROT bleiben.
 */
.fireteam-inquiry .submit-button.dx-button-normal,
.fireteam-inquiry .submit-button.dx-button-default {
    color: #fff !important;
    background: var(--ft-red, #e30613) !important;
    border-color: var(--ft-red, #e30613) !important;
}

.fireteam-inquiry .submit-button.dx-button-normal .dx-button-text,
.fireteam-inquiry .submit-button.dx-button-default .dx-button-text {
    color: #fff !important;
}

.fireteam-inquiry .submit-button.dx-button-normal:hover,
.fireteam-inquiry .submit-button.dx-button-default:hover {
    color: #fff !important;
    background: var(--ft-red-dark, #bd0510) !important;
    border-color: var(--ft-red-dark, #bd0510) !important;
}

/* NUR diese Nebenaktion weiß/schwarz */
.fireteam-inquiry
.submit-button.dx-button-normal[aria-label="Weiteren Teilnehmer hinzufügen"] {
    color: #2b2b2b !important;
    background: #fff !important;
    border-color: #bdbdbd !important;
}

.fireteam-inquiry
.submit-button.dx-button-normal[aria-label="Weiteren Teilnehmer hinzufügen"]
.dx-button-text {
    color: #2b2b2b !important;
}

.fireteam-inquiry
.submit-button.dx-button-normal[aria-label="Weiteren Teilnehmer hinzufügen"]:hover {
    color: #fff !important;
    background: #2b2b2b !important;
    border-color: #2b2b2b !important;
}

.fireteam-inquiry
.submit-button.dx-button-normal[aria-label="Weiteren Teilnehmer hinzufügen"]:hover
.dx-button-text {
    color: #fff !important;
}


/* =========================================================
   FINAL checkbox checkmark
   ========================================================= */

.fireteam-inquiry .dx-checkbox-icon {
    position: relative !important;
}

/* DevExtreme eigenes Symbol ausblenden */
.fireteam-inquiry .dx-checkbox-icon::before {
    content: none !important;
}

/* Eigenes sauberes weißes Häkchen */
.fireteam-inquiry
.dx-checkbox.dx-checkbox-checked
.dx-checkbox-icon::after {
    content: "" !important;

    position: absolute !important;

    left: 5px !important;
    top: 2px !important;

    width: 5px !important;
    height: 9px !important;

    border-right: 2px solid #fff !important;
    border-bottom: 2px solid #fff !important;

    transform: rotate(45deg) !important;
}

/* checked bleibt rot */
.fireteam-inquiry
.dx-checkbox.dx-checkbox-checked
.dx-checkbox-icon {
    background: var(--ft-red, #e30613) !important;
    border-color: var(--ft-red, #e30613) !important;
}

/* checked + hover bleibt ebenfalls rot */
.fireteam-inquiry
.dx-checkbox.dx-checkbox-checked:hover
.dx-checkbox-icon,
.fireteam-inquiry
.dx-checkbox.dx-checkbox-checked.dx-state-hover
.dx-checkbox-icon {
    background: var(--ft-red, #e30613) !important;
    border-color: var(--ft-red-dark, #bd0510) !important;
}

/* =========================================================
   Haftungsausschluss: Text direkt neben Checkbox
   ========================================================= */

.fireteam-inquiry .legal-container {
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;

    width: 100% !important;
    margin: 16px 0 28px !important;
}

.fireteam-inquiry .legal-container .legal-checkbox {
    flex: 0 0 20px !important;
    width: 20px !important;
    min-width: 20px !important;
    margin: 2px 0 0 !important;
}

.fireteam-inquiry .legal-container .legal-checkbox .dx-checkbox,
.fireteam-inquiry .legal-container .legal-checkbox .dx-checkbox-container {
    display: inline-flex !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    width: 20px !important;
    min-width: 20px !important;
    margin: 0 !important;
}

.fireteam-inquiry .legal-container .legal-text {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    margin: 0 !important;
}

.fireteam-inquiry .legal-container .legal-text p:first-child {
    margin-top: 0 !important;
}

.fireteam-inquiry .legal-container .legal-text p {
    margin-bottom: 8px !important;
}

/* Mobile bleibt auch nebeneinander */
@media (max-width: 767px) {
    .fireteam-inquiry .legal-container {
        gap: 10px !important;
    }
}

/* =========================================================
   FINAL legal/privacy positioning
   ========================================================= */

/* Datenschutz-Zeile: Checkbox/Text + Link sauber nebeneinander */
.fireteam-inquiry
dx-validation-group
> div:not(.legal-container):has(> dx-check-box.dx-validator) {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    flex-wrap: wrap !important;

    gap: 6px 14px !important;

    width: 100% !important;
    margin: 14px 0 18px !important;

    float: none !important;
}

.fireteam-inquiry
dx-validation-group
> div:not(.legal-container):has(> dx-check-box.dx-validator)
> dx-check-box {
    flex: 0 1 auto !important;

    width: auto !important;
    max-width: calc(100% - 130px) !important;

    margin: 0 !important;
    float: none !important;
}

.fireteam-inquiry
dx-validation-group
> div:not(.legal-container):has(> dx-check-box.dx-validator)
> span {
    flex: 0 0 auto !important;

    margin: 1px 0 0 !important;
    float: none !important;
}


/* Haftungsausschluss */
.fireteam-inquiry .legal-container {
    display: grid !important;

    grid-template-columns: 20px minmax(0, 1fr) !important;
    grid-template-rows: auto !important;

    align-items: start !important;
    column-gap: 12px !important;

    width: 100% !important;

    margin: 16px 0 28px !important;

    float: none !important;
}

.fireteam-inquiry .legal-container .legal-checkbox {
    grid-column: 1 !important;
    grid-row: 1 !important;

    width: 20px !important;
    min-width: 20px !important;

    margin: 1px 0 0 !important;
}

.fireteam-inquiry .legal-container .legal-text {
    grid-column: 2 !important;
    grid-row: 1 !important;

    min-width: 0 !important;

    margin: 0 !important;
    padding-top: 0 !important;
}

/*
 * Wenn Haftungs-Checkbox ungültig ist:
 * Platz für "Die Zustimmung ... ist erforderlich" schaffen,
 * ohne die Validation selbst zu verschieben.
 */
.fireteam-inquiry
.legal-container:has(.legal-checkbox[aria-invalid="true"])
.legal-text,
.fireteam-inquiry
.legal-container:has(.legal-checkbox.dx-invalid)
.legal-text {
    padding-top: 28px !important;
}

.fireteam-inquiry .legal-container .legal-text p:first-child {
    margin-top: 0 !important;
}

.fireteam-inquiry .legal-container .legal-text p {
    margin-bottom: 8px !important;
}

.fireteam-inquiry .legal-container .legal-text ul {
    margin-top: 0 !important;
    margin-bottom: 8px !important;
    padding-left: 20px !important;
}


/* Mobile */
@media (max-width: 767px) {

    .fireteam-inquiry
    dx-validation-group
    > div:not(.legal-container):has(> dx-check-box.dx-validator)
    > dx-check-box {
        max-width: 100% !important;
    }

    .fireteam-inquiry
    dx-validation-group
    > div:not(.legal-container):has(> dx-check-box.dx-validator)
    > span {
        margin-left: 28px !important;
    }

    .fireteam-inquiry .legal-container {
        column-gap: 10px !important;
    }
}

/* =========================================================
   FINAL button colors
   Weiter + Anmelden = ROT
   Weiteren Teilnehmer hinzufügen = Nebenbutton
   ========================================================= */

/* WEITER */
.fireteam-inquiry .submit-button[aria-label="Weiter"] {
    background: var(--ft-red, #e30613) !important;
    border-color: var(--ft-red, #e30613) !important;
    color: #fff !important;
}

.fireteam-inquiry .submit-button[aria-label="Weiter"] .dx-button-text {
    color: #fff !important;
}

.fireteam-inquiry .submit-button[aria-label="Weiter"]:hover {
    background: var(--ft-red-dark, #bd0510) !important;
    border-color: var(--ft-red-dark, #bd0510) !important;
}


/* ANMELDEN */
.fireteam-inquiry .submit-button[aria-label="Anmelden"] {
    background: var(--ft-red, #e30613) !important;
    border-color: var(--ft-red, #e30613) !important;
    color: #fff !important;
}

.fireteam-inquiry .submit-button[aria-label="Anmelden"] .dx-button-text {
    color: #fff !important;
}

.fireteam-inquiry .submit-button[aria-label="Anmelden"]:hover {
    background: var(--ft-red-dark, #bd0510) !important;
    border-color: var(--ft-red-dark, #bd0510) !important;
}


/* NUR Nebenaktion */
.fireteam-inquiry .submit-button[aria-label="Weiteren Teilnehmer hinzufügen"] {
    background: #fff !important;
    border-color: #bdbdbd !important;
    color: #2b2b2b !important;
}

.fireteam-inquiry
.submit-button[aria-label="Weiteren Teilnehmer hinzufügen"]
.dx-button-text {
    color: #2b2b2b !important;
}

.fireteam-inquiry
.submit-button[aria-label="Weiteren Teilnehmer hinzufügen"]:hover {
    background: #2b2b2b !important;
    border-color: #2b2b2b !important;
    color: #fff !important;
}

.fireteam-inquiry
.submit-button[aria-label="Weiteren Teilnehmer hinzufügen"]:hover
.dx-button-text {
    color: #fff !important;
}

/* =========================================================
   FINAL: Weiter wirklich rot
   ========================================================= */

.fireteam-inquiry
.submit-button.dx-button-normal:not(.dx-button-default)[aria-label="Weiter"] {
    background: #e30613 !important;
    background-color: #e30613 !important;
    border-color: #e30613 !important;
    color: #fff !important;
}

.fireteam-inquiry
.submit-button.dx-button-normal:not(.dx-button-default)[aria-label="Weiter"]
.dx-button-content {
    background: transparent !important;
    color: #fff !important;
}

.fireteam-inquiry
.submit-button.dx-button-normal:not(.dx-button-default)[aria-label="Weiter"]
.dx-button-text {
    color: #fff !important;
}

.fireteam-inquiry
.submit-button.dx-button-normal:not(.dx-button-default)[aria-label="Weiter"]:hover {
    background: #bd0510 !important;
    background-color: #bd0510 !important;
    border-color: #bd0510 !important;
}

/* Nebenbutton bleibt weiß */
.fireteam-inquiry
.submit-button.dx-button-normal:not(.dx-button-default)[aria-label="Weiteren Teilnehmer hinzufügen"] {
    background: #fff !important;
    background-color: #fff !important;
    border-color: #bdbdbd !important;
    color: #2b2b2b !important;
}

.fireteam-inquiry
.submit-button.dx-button-normal:not(.dx-button-default)[aria-label="Weiteren Teilnehmer hinzufügen"]
.dx-button-text {
    color: #2b2b2b !important;
}

/* =========================================================
   FINAL Haftungsausschluss alignment
   Checkbox + erster Text auf einer Linie,
   Validierungsfehler darunter
   ========================================================= */

.fireteam-inquiry .legal-container {
    display: grid !important;
    grid-template-columns: 20px minmax(0, 1fr) !important;
    align-items: start !important;

    column-gap: 12px !important;

    width: 100% !important;
    margin: 16px 0 28px !important;

    float: none !important;
}

.fireteam-inquiry .legal-container .legal-checkbox {
    grid-column: 1 !important;
    grid-row: 1 !important;

    width: 20px !important;
    min-width: 20px !important;

    margin: 1px 0 0 !important;
}

.fireteam-inquiry .legal-container .legal-text {
    grid-column: 2 !important;
    grid-row: 1 !important;

    min-width: 0 !important;

    margin: 0 !important;

    /* alten Invalid-Abstand oben entfernen */
    padding-top: 0 !important;
}

.fireteam-inquiry .legal-container .legal-text p:first-child {
    margin: 0 0 8px !important;
}

/*
 * Bei Fehler Platz UNTER "Wir bestätigen hiermit" reservieren.
 * Dadurch bleibt die Checkbox trotzdem neben dem Text.
 */
.fireteam-inquiry
.legal-container:has(.legal-checkbox[aria-invalid="true"])
.legal-text p:first-child,
.fireteam-inquiry
.legal-container:has(.legal-checkbox.dx-invalid)
.legal-text p:first-child {
    margin-bottom: 32px !important;
}

.fireteam-inquiry .legal-container .legal-text ul {
    margin: 0 0 8px !important;
    padding-left: 20px !important;
}

.fireteam-inquiry .legal-container .legal-text p:last-child {
    margin: 0 !important;
}

@media (max-width: 767px) {
    .fireteam-inquiry .legal-container {
        column-gap: 10px !important;
    }
}

/* =========================================================
   FINAL: Haftung Checkbox + Text wirklich nebeneinander
   ========================================================= */

.fireteam-inquiry lehrgangsanmeldung-element .legal-container {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;

    gap: 10px !important;

    width: 100% !important;
    margin: 15px 0 35px !important;

    float: none !important;
}

/* Checkbox links */
.fireteam-inquiry lehrgangsanmeldung-element
.legal-container > dx-check-box.legal-checkbox {
    display: block !important;

    flex: 0 0 20px !important;

    width: 20px !important;
    min-width: 20px !important;
    max-width: 20px !important;

    margin: 1px 0 0 !important;
    padding: 0 !important;

    float: none !important;
    clear: none !important;
}

/* Text DIREKT rechts daneben */
.fireteam-inquiry lehrgangsanmeldung-element
.legal-container > .legal-text {
    display: block !important;

    flex: 1 1 0 !important;

    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 0 !important;

    float: none !important;
    clear: none !important;
}

.fireteam-inquiry lehrgangsanmeldung-element
.legal-container > .legal-text > p:first-child {
    margin: 0 0 8px !important;
    padding: 0 !important;
}

.fireteam-inquiry lehrgangsanmeldung-element
.legal-container > .legal-text > ul {
    margin: 0 0 8px !important;
    padding-left: 20px !important;
}

.fireteam-inquiry lehrgangsanmeldung-element
.legal-container > .legal-text > p:last-child {
    margin: 0 !important;
}

/* Mobile genauso nebeneinander */
@media (max-width: 767px) {
    .fireteam-inquiry lehrgangsanmeldung-element .legal-container {
        gap: 9px !important;
    }
}

/* =========================================================
   Zurück-Icon - eigenes CSS Icon auf vorhandenem dx-icon-back
   ========================================================= */

.fireteam-inquiry .back-button .dx-icon-back {
    position: relative !important;

    display: inline-block !important;

    width: 18px !important;
    min-width: 18px !important;
    height: 18px !important;


    font-size: 0 !important;
    line-height: 18px !important;

    background: none !important;
}

/* Pfeilspitze */
.fireteam-inquiry .back-button .dx-icon-back::before {
    content: "" !important;

    position: absolute !important;
    left: 3px !important;
    top: 5px !important;

    width: 7px !important;
    height: 7px !important;

    border-left: 2px solid currentColor !important;
    border-bottom: 2px solid currentColor !important;

    transform: rotate(45deg) !important;

    font-family: inherit !important;
}

/* Pfeillinie */
.fireteam-inquiry .back-button .dx-icon-back::after {
    content: "" !important;

    position: absolute !important;
    left: 4px !important;
    top: 8px !important;

    width: 11px !important;
    height: 2px !important;

    background: currentColor !important;
}

/* Icon und Text schön mittig */
.fireteam-inquiry .back-button .dx-button-content {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Standard */
.fireteam-inquiry .back-button {
    color: #2b2b2b !important;
}

/* Beim schwarzen Hover wird der Pfeil automatisch weiß */
.fireteam-inquiry .back-button:hover {
    color: #fff !important;
}

/* =========================================================
   FINAL legal layout
   ========================================================= */

.fireteam-inquiry lehrgangsanmeldung-element .legal-container {
    display: flex !important;
    flex-flow: row nowrap !important;
    align-items: flex-start !important;

    gap: 10px !important;

    width: 100% !important;
    margin: 15px 0 32px !important;

    float: none !important;
}

.fireteam-inquiry lehrgangsanmeldung-element
.legal-container > .legal-checkbox {
    flex: 0 0 20px !important;

    width: 20px !important;
    min-width: 20px !important;

    margin: 1px 0 0 !important;
    padding: 0 !important;

    float: none !important;
}

.fireteam-inquiry lehrgangsanmeldung-element
.legal-container > .legal-text {
    flex: 1 1 auto !important;

    width: auto !important;
    min-width: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    float: none !important;
}

.fireteam-inquiry lehrgangsanmeldung-element
.legal-container > .legal-text > p:first-child {
    margin: 0 0 8px !important;
}

/*
 * Nur wenn die Haftungscheckbox ungültig ist:
 * Platz für DevExtreme-Fehlermeldung reservieren.
 * Die Validation selbst wird NICHT verschoben.
 */
.fireteam-inquiry lehrgangsanmeldung-element
.legal-container:has(> .legal-checkbox[aria-invalid="true"])
> .legal-text,
.fireteam-inquiry lehrgangsanmeldung-element
.legal-container:has(> .legal-checkbox.dx-invalid)
> .legal-text {
    padding-top: 30px !important;
}


/* =========================================================
   FINAL buttons
   ========================================================= */

/* Weiter + Anmelden bleiben Hauptaktionen ROT */
.fireteam-inquiry lehrgangsanmeldung-element
.submit-button[aria-label="Weiter"],
.fireteam-inquiry lehrgangsanmeldung-element
.submit-button[aria-label="Anmelden"] {
    height: 44px !important;

    padding: 0 16px !important;

    background: #e30613 !important;
    background-color: #e30613 !important;

    border: 1px solid #e30613 !important;
    border-radius: 3px !important;

    color: #fff !important;

    box-shadow: none !important;
    cursor: pointer !important;
}

.fireteam-inquiry lehrgangsanmeldung-element
.submit-button[aria-label="Weiter"] .dx-button-text,
.fireteam-inquiry lehrgangsanmeldung-element
.submit-button[aria-label="Anmelden"] .dx-button-text {
    color: #fff !important;
}

.fireteam-inquiry lehrgangsanmeldung-element
.submit-button[aria-label="Weiter"]:hover,
.fireteam-inquiry lehrgangsanmeldung-element
.submit-button[aria-label="Anmelden"]:hover {
    background: #bd0510 !important;
    background-color: #bd0510 !important;
    border-color: #bd0510 !important;
}


/* Nur "Weiteren Teilnehmer hinzufügen" = ruhiger Nebenbutton */
.fireteam-inquiry lehrgangsanmeldung-element
.submit-button.dx-button-normal[aria-label="Weiteren Teilnehmer hinzufügen"] {
    display: block !important;

    width: 100% !important;
    height: 44px !important;

    margin: 22px 0 0 !important;
    padding: 0 16px !important;

    background: #fff !important;
    background-color: #fff !important;

    border: 1px solid #c7c7c7 !important;
    border-radius: 3px !important;

    color: #2b2b2b !important;

    box-shadow: none !important;
    cursor: pointer !important;
}

.fireteam-inquiry lehrgangsanmeldung-element
.submit-button[aria-label="Weiteren Teilnehmer hinzufügen"]
.dx-button-content {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    height: 42px !important;
    padding: 0 !important;
}

.fireteam-inquiry lehrgangsanmeldung-element
.submit-button[aria-label="Weiteren Teilnehmer hinzufügen"]
.dx-button-text {
    color: #2b2b2b !important;
    font-size: 14px !important;
    font-weight: 600 !important;
}

.fireteam-inquiry lehrgangsanmeldung-element
.submit-button[aria-label="Weiteren Teilnehmer hinzufügen"]:hover {
    background: #f5f5f5 !important;
    background-color: #f5f5f5 !important;
    border-color: #888 !important;
}

/* =========================================================
   Zurück zum Arbeitgeber - nicht umbrechen
   ========================================================= */

.fireteam-inquiry .back-button {
    display: inline-flex !important;

    width: auto !important;
    min-width: max-content !important;
    max-width: none !important;

    height: 40px !important;
}

.fireteam-inquiry .back-button .dx-button-content {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;

    width: auto !important;
    padding: 0 14px !important;
}

.fireteam-inquiry .back-button .dx-button-text {
    display: inline-block !important;

    width: auto !important;

    white-space: nowrap !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
}

/* Container darf den Button ebenfalls nicht zusammendrücken */
.fireteam-inquiry
.language-selector-container:has(.back-button) {
    width: auto !important;
    max-width: none !important;
}

/* =========================================================
   Safari/iOS: Checkboxen grafisch stabil halten
   ========================================================= */

.fireteam-inquiry .dx-checkbox {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
}

.fireteam-inquiry .dx-checkbox-container {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: translateZ(0) !important;

    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

/* Minimaler Abstand nach Datenschutz-Validation */
.fireteam-inquiry
dx-validation-group
> div:not(.legal-container):has(> dx-check-box.dx-validator[aria-invalid="true"]) {
    padding-bottom: 10px !important;
}

/* Minimaler Abstand nach Datenschutz-Validation */
.fireteam-inquiry
dx-validation-group
> div:not(.legal-container):has(> dx-check-box.dx-validator[aria-invalid="true"]) {
    padding-bottom: 10px !important;
}