/* ==========================================================================
   Bewerbungsformular DG - CSS
   Basiert auf dem bestehenden Formhandler-Design (bewerbungsformular-kuki)
   Angepasst fuer TYPO3 Forms (version2 template variant)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Form Container
   -------------------------------------------------------------------------- */

.application-form {
    margin: 0 0 1em 0;
}

.application-form .form-container {
    width: 100%;
}

.application-form .row-fluid {
    display: flex;
    flex-wrap: wrap;
    margin-left: -0.5em;
    margin-right: -0.5em;
}

/* --------------------------------------------------------------------------
   2. Grid / Spalten-Layout (Bootstrap-2-aehnlich)
   -------------------------------------------------------------------------- */

.application-form .row-fluid > [class*="span"],
.application-form .row-fluid > [class*="columns"],
.application-form .row-fluid > [class*="small-"],
.application-form .row-fluid > [class*="medium-"],
.application-form .row-fluid > [class*="large-"] {
    box-sizing: border-box;
    margin-left: 0;
}

/* TYPO3 Forms GridRow generates 'row contentWrapper' */
.application-form .row {
    display: flex;
    flex-wrap: wrap;
    margin-left: -0.5em;
    margin-right: -0.5em;
}

.application-form .contentWrapper {
    padding: 0 0.5em;
}

.application-form .row > [class*="columns"],
.application-form .row > [class*="small-"],
.application-form .row > [class*="medium-"] {
    padding-left: 0.5em;
    padding-right: 0.5em;
    box-sizing: border-box;
}

/* Fallback column sizes */
.application-form .columns {
    width: 100%;
}

.application-form .small-6 {
    width: 50%;
}

.application-form .small-12 {
    width: 100%;
}

.application-form .medium-6 {
    width: 50%;
}

.application-form .medium-12 {
    width: 100%;
}

.application-form .large-6 {
    width: 50%;
}

.application-form .large-12 {
    width: 100%;
}

.application-form .span6 {
    width: 50%;
    padding-left: 0.5em;
    padding-right: 0.5em;
    box-sizing: border-box;
}

.application-form .span12 {
    width: 100%;
    padding-left: 0.5em;
    padding-right: 0.5em;
    box-sizing: border-box;
}

.application-form .span2 {
    width: 16.666%;
    padding-left: 0.5em;
    padding-right: 0.5em;
    box-sizing: border-box;
}

.application-form .span3 {
    width: 25%;
    padding-left: 0.5em;
    padding-right: 0.5em;
    box-sizing: border-box;
}

.application-form .span4 {
    width: 33.333%;
    padding-left: 0.5em;
    padding-right: 0.5em;
    box-sizing: border-box;
}

.application-form .span9 {
    width: 75%;
    padding-left: 0.5em;
    padding-right: 0.5em;
    box-sizing: border-box;
}

/* --------------------------------------------------------------------------
   3. Fieldset & Legend (Sektions-Ueberschriften)
   -------------------------------------------------------------------------- */

.application-form fieldset {
    margin: 0;
    padding: 0;
    border: 0;
}

.application-form legend {
    font-size: 18px;
    font-weight: 700;
    width: 100%;
    line-height: 2em;
    margin: 0 0 5px 0;
    display: block;
    border-bottom: none;
    color: #e2001a;
}

.application-form legend.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.application-form h2 {
    margin: 0;
    padding: 0 0 1em 0;
}

.application-form h3 {
    margin: 0;
    padding: 0 0 1em 0;
    line-height: 2em;
}

.application-form hr.content {
    border: 0;
    margin: 1em 0;
}

/* --------------------------------------------------------------------------
   4. Labels
   -------------------------------------------------------------------------- */


.application-form label .required,
.application-form label .req {
    color: #E2001A;
}
.application-form fieldset.work-time-model {
    > div {
        display:flex;
        gap: 20px;
    }
    legend {
        line-height: 2em;
        margin-bottom: 0.25em;
        color: #3E3D40;
        font-weight: normal;
        font-size: 14px;
    }
}

.application-form .prefilled-from-job-wrapper {
    label {
        margin-bottom: 0;
        font-size: 1rem;
    }
    input[type="text"] {
        border: none;
        box-shadow: none;
        padding-left: 0;
        font-size: 17px;
        font-weight: 700;
    }

}


    /* --------------------------------------------------------------------------
       5. Text Inputs
       -------------------------------------------------------------------------- */

.application-form input[type="text"],
.application-form input[type="email"],
.application-form input[type="tel"],
.application-form input[type="url"],
.application-form input[type="date"],
.application-form input[type="number"],
.application-form .form-control {
    display: block;
    width: 100%;
    height: 2.25em;
    border: 1px solid #D6D6D9;
    margin: 0 0 0.75em 0;
    padding: 0.25em 0.5em 0.1em;
    font-family: Arial, Helvetica, sans-serif;
    color: #3E3D40;
    background-color: #ffffff;
    box-sizing: border-box;
    transition: border-color 0.15s ease-in-out;
}


/* --------------------------------------------------------------------------
   6. Select Elements
   -------------------------------------------------------------------------- */

.application-form select,
.application-form .form-select {
    width: 100%;
    height: 2.25em;
    margin: 0 0 0.75em 0;
    padding: 0.25em 0.5em;
    line-height: 1em;
    color: #3E3D40;
    background-color: #ffffff;
    border: 1px solid #999999;
    box-sizing: border-box;
}

/* Attention Select (Aufmerksamkeit) */
.application-form .attentionSelect {
    margin-bottom: 0.5em;
}

/* --------------------------------------------------------------------------
   7. Textarea
   -------------------------------------------------------------------------- */

.application-form textarea,
.application-form textarea.form-control {
    font-family: Arial, Helvetica, sans-serif;
    width: 100%;
    min-height: 10.25em;
    border: 1px solid #D6D6D9;
    margin: 0 0 0.25em 0;
    padding: 0.5em;
    line-height: 1.3em;
    color: #3E3D40;
    box-sizing: border-box;
    resize: vertical;
}


/* Textarea xxlarge (TYPO3 Forms variant class) */
.application-form textarea.xxlarge {
    width: 100%;
    min-height: 10.25em;
}

/* Character counter */
.application-form .charLimitInfo {
    font-size: 0.917em;
    color: #828284;
    margin-bottom: 1em;
}

/* Conditional textarea (attentionText) */
.application-form .attentionTextWrapper.d-none {
    display: none;
}

.application-form .textareaOther {
    display: none;
    margin-top: 0.5em;
    min-height: 60px;
}

/* --------------------------------------------------------------------------
   8. Checkbox Styling
   -------------------------------------------------------------------------- */

.application-form .form-check {
    position: relative;
    margin-bottom: 0.75em;
}

.application-form .form-check-input {
    accent-color: #e2001a;
}

/* Privacy checkbox specific */
.application-form .privacy-check {
    padding-top: 0;
    margin-top: 1em;
}

.application-form .privacy-check .form-check-label {
    line-height: 1.5;
    font-size: 0.917em;
}

.application-form .privacy-check .form-check-label a {
    color: #E2001A;
    text-decoration: underline;
}

.application-form .input.checkbox {
    width: fit-content;
    padding: 0;

    label {
        margin-bottom: 0;
        display: flex;
        gap: 10px;
        align-items: center;
        padding: 6px 0;
    }
    input[type="checkbox"] {
        height: 16px;
        width: 16px;
        margin: 0;
        &:checked {
            background-color: #e2001a;
            border-color: #e2001a;
            accent-color: #e2001a;
        }
    }

}

.application-form .type-checkbox label {
    line-height: 2em;
    padding: 0;
    width: auto;
}

/* Radio buttons */
.application-form .form-check-input[type="radio"] {
    width: 1em;
    height: 1em;
    margin-right: 0.5em;
}

.application-form .outer-label-wrap {
    margin-bottom: 1em;
}

.application-form .privacyProtection-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

    /* --------------------------------------------------------------------------
       9. File Upload
       -------------------------------------------------------------------------- */

.application-form .type-file,
.application-form .form-element-fileupload {
    margin-bottom: 1em;
}

.application-form .type-file label,
.application-form .form-element-fileupload label {
    display: block;
    margin-bottom: 0.25em;
    line-height: 1.5;
}

.application-form input[type="file"] {
    display: block;
    width: 100%;
    padding: 0.375em 0;
    color: #3E3D40;
    cursor: pointer;
    height: fit-content;
}

.application-form input[type="file"]::file-selector-button {
    padding: 0.375em 0.75em;
    margin-right: 0.75em;
    color: #3E3D40;
    background-color: #f0f0f0;
    border: 1px solid #D6D6D9;
    cursor: pointer;
    transition: background-color 0.15s ease-in-out;
}

.application-form input[type="file"]::file-selector-button:hover {
    background-color: #e0e0e0;
}

.application-form .fileupload-info {
    font-size: 0.875em;
    color: #828284;
    margin-top: 0.25em;
}

.application-form .fileupload-info .info {
    text-transform: uppercase;
}

.application-form .uploadedfiles {
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}

.application-form .fileupload-list {
    list-style: none;
    padding: 0;
    margin: 0.25em 0;
}

.application-form .fileupload-list li {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    padding: 0.25em 0;
}

/* --------------------------------------------------------------------------
   10. Buttons (Weiter, Zurueck, Absenden)
   -------------------------------------------------------------------------- */

.application-form .button.submit,
.application-form input.sbm,
.application-form button.submit {
    background-color: transparent;
    font-family: Arial, Helvetica, sans-serif;
    color: #ffffff;
    display: inline-block;
    width: auto;
    height: auto;
    border: 0;
    margin: 0;
    font-weight: bold;
    cursor: pointer;
    text-decoration: none;
    transition: text-decoration 0.15s ease-in-out;
    line-height: 1.2;
}

.application-form .button.submit:hover,
.application-form input.sbm:hover,
.application-form button.submit:hover {
    color: #ffffff;
    text-decoration: underline;
}


/* Previous button */
.application-form .btn.btn-outline-primary {
    background-color: transparent;
    font-family: Arial, Helvetica, sans-serif;
    color: #E2001A;
    display: inline-block;
    border: 2px solid #E2001A;
    padding: 0.625em 1em;
    font-weight: bold;
    cursor: pointer;
    text-decoration: none;
    margin-right: 1em;
    line-height: 1.2;
}

.application-form .btn.btn-outline-primary:hover {
    background-color: #E2001A;
    color: #ffffff;
}

/* Gradient red button (DK style) */
.application-form .gradientRedToBottom {
    background: linear-gradient(to bottom, #E2001A, #c40017);
}

/* Disabled button */
.application-form .button.submit.disabled,
.application-form .button.submit:disabled {
    pointer-events: none;
    opacity: 0.6;
    cursor: not-allowed;
}

/* --------------------------------------------------------------------------
   11. Form Navigation / Actions
   -------------------------------------------------------------------------- */

.application-form .actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 1em;
    margin-top: 1em;
    border-top: 1px solid #D6D6D9;
}

.application-form .form-navigation {
    display: flex;
    align-items: center;
    gap: 1em;
}

.application-form .pagination {
    margin-top: 10px;
    overflow: hidden;
}

.application-form .pagination .next {
    float: right;
}

.application-form .pagination .prev {
    float: left;
}

/* Required fields info */
.application-form .req {
    font-size: 0.875em;
    color: #828284;
}

/* --------------------------------------------------------------------------
   12. Error / Validation Styling
   -------------------------------------------------------------------------- */

/* Global error list */
.application-form .errors {
    margin: 0 0 1em 0;
    padding: 0.5em 1em;
    border: 1px solid #E2001A;
    background-color: #fde1e1;
}

.application-form .errors p {
    margin: 0;
    padding: 0;
    color: #E2001A;
}

/* TYPO3 Forms allErrors block */
.application-form #allErrors.allErrors {
    padding: 5px 10px;
    border: 1px solid #E2001A;
    background-color: #fde1e1;
    margin-bottom: 5px;
}

.application-form #allErrors.allErrors:empty {
    display: none;
}

.application-form #allErrors.allErrors > a {
    display: block;
    color: #E2001A;
    margin-bottom: 5px;
}

/* Single field error (TYPO3 Forms) */
.application-form .invalid-feedback {
    color: #E2001A;
    width: 100%;
    display: inline-block;
    padding: 2px 0;
    font-size: 0.875em;
}

/* Error state on inputs */
.application-form .alert input[type="text"],
.application-form .alert input[type="email"],
.application-form .alert input[type="tel"],
.application-form .alert .form-control,
.application-form .alert .form-select,
.application-form .alert select,
.application-form .alert textarea,
.application-form select:has(+ .invalid-feedback),
.application-form textarea:has(+ .invalid-feedback),
.application-form input:has(+ .invalid-feedback) {
    background-color: #fde1e1;
    border: 1px solid #E2001A;
    box-shadow: inset 0 0 5px 0 rgba(226, 0, 26, 0.5);
}

/* Legacy error styling */
.application-form p.error {
    margin: 0;
    padding: 0;
    color: #E2001A;
    font-size: 0.875em;
}

.application-form .privacy-check p.error,
.application-form .privacy-check .invalid-feedback {
    margin-left: 0;
}

/* --------------------------------------------------------------------------
   13. Type-specific container classes (TYPO3 Forms)
   -------------------------------------------------------------------------- */

.application-form .type-text {
    margin-bottom: 0.75em;
}

.application-form .form-element {
    margin-bottom: 0.75em;
}

.application-form .form-element-select {
    margin-bottom: 0.75em;
}

.application-form .form-element-radio {
    margin-bottom: 0.75em;
}

.application-form .form-element-textarea {
    margin-bottom: 0.75em;
}

.application-form .form-element-fileupload {
    margin-bottom: 0.75em;
}

/* --------------------------------------------------------------------------
   14. Prefilled job fields (readonly Text fields from Hook)
   -------------------------------------------------------------------------- */

.application-form .prefilled-from-job {
    background-color: #f5f5f5;
    border-color: #e0e0e0;
    color: #3E3D40;
    cursor: default;
}

/* Utility: hidden */
.application-form .d-none {
    display: none;
}

.application-form .visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* --------------------------------------------------------------------------
   15. Locations Multi-Select
   -------------------------------------------------------------------------- */

.application-form .locations.multi {
    margin-bottom: 15px;
}

.application-form .locations.multi label {
    display: block;
    margin-bottom: 0.5em;
}

.application-form .locations.multi select[multiple] {
    width: 100%;
    height: 100px;
    border: 1px solid #999999;
}

/* --------------------------------------------------------------------------
   16. Privacy Text section
   -------------------------------------------------------------------------- */

.application-form .privacy-text {
    padding-top: 2em;
    margin-bottom: 1em;
    font-size: 0.917em;
    line-height: 1.5;
    color: #3E3D40;
}

.application-form .privacy-text a {
    color: #E2001A;
    text-decoration: underline;
}

/* --------------------------------------------------------------------------
   17. Info / Description text
   -------------------------------------------------------------------------- */

.application-form .info {
    margin-top: 0.5em;
    padding: 0 2.5em 0 0;
    color: #3E3D40;
    margin-bottom: 20px;
}

.application-form .form-text {
    font-size: 0.875em;
    color: #828284;
    display: block;
    margin-top: 0.25em;
}

.application-form p.bodytext {
    max-width: 60em;
    margin: 0;
    padding: 0 0 0.25em 0;
}

/* --------------------------------------------------------------------------
   18. Responsive Design
   -------------------------------------------------------------------------- */

@media (max-width: 768px) {
    .application-form {
        max-width: 100%;
        padding: 0.75em;
    }

    .application-form .row-fluid,
    .application-form .row {
        flex-direction: column;
    }

    .application-form .span6,
    .application-form .span2,
    .application-form .span3,
    .application-form .span4,
    .application-form .span9,
    .application-form .small-6,
    .application-form .medium-6,
    .application-form .large-6 {
        width: 100%;
    }

    .application-form .columns {
        width: 100%;
    }

    .application-form .checkbox-float {
        flex-direction: column;
        align-items: flex-start;
    }

    .application-form .checkbox-float .form-check {
        margin-bottom: 0.5em;
    }

    .application-form .actions {
        flex-direction: column-reverse;
        align-items: flex-start;
        gap: 0.75em;
    }

    .application-form .form-navigation {
        flex-direction: column;
        width: 100%;
    }

    .application-form .button.submit,
    .application-form .btn.btn-outline-primary,
    .application-form button.submit {
        width: 100%;
        text-align: center;
    }
}

@media (max-width: 480px) {
    .application-form label {
        font-size: 0.917em;
    }

    .application-form legend {
        font-size: 0.917em;
    }
}