/* ===========================
   FORM.CSS
   ===========================
   Zweck:
   Basis-CSS für Formulare
   =========================== */

/*****************************************************************
**** Form Info / Error
******************************************************************/

.form-info {
    margin-bottom: var(--spacing-20px);
}

.form-error p {
    padding: 0.75rem;
    border: var(--border-width-1px) solid var(--color-error);
    display: block;
    margin-bottom: var(--spacing-20px);
}

.form-row input.error {
    border: var(--border-width-1px) solid var(--color-error);
}

.form-row select.error {
    border: var(--border-width-1px) solid var(--color-error);
}

.form-row textarea.error {
    border: var(--border-width-1px) solid var(--color-error);
}

.form-row:has(.error) > label,
.form-row:has(.error) > legend {
    color: var(--color-error);
}

/*****************************************************************
**** Form Rows
******************************************************************/

.form-row {
    display: flex;
    flex-flow: column;
    margin-bottom: var(--spacing-20px);
    width: 100%;
    font-size: var(--font-size-22px);
    padding: 0;
}

.form-row > span > p > a:focus-visible {
    outline: var(--form-outline);
    outline-offset: var(--form-outline-offset);
}

.form-row label {
    padding: var(--spacing-5px) 0;
}

.form-row label a {
    font-size: inherit;
    text-decoration: underline;
    color: inherit;
}

.form-row label a:hover {
    text-decoration-thickness: 0.125rem;
}

.form-row label a:focus-visible {
    outline: var(--form-outline);
    outline-offset: var(--form-outline-offset);
}

.form-row.email {
    display: none;
}

/*****************************************************************
**** Text / Textarea
******************************************************************/

.defaultform textarea {
    display: block;
    border: var(--border-width-1px) solid var(--color-input-border);
    padding: var(--spacing-5px);
    color: var(--color-text);
    font-size: var(--font-size-22px);
    width: 100%;
    resize: vertical;
}

.defaultform .textbox {
    display: block;
    width: 100%;
    border: var(--border-width-1px) solid var(--color-input-border);
    padding: var(--spacing-5px) var(--spacing-10px);
    font-size: var(--font-size-22px);
    color: var(--color-text);
}

.defaultform textarea:focus,
.defaultform .textbox:focus {
    border: var(--form-border-hover);
}

.defaultform textarea:focus-visible,
.defaultform .textbox:focus-visible {
    outline: var(--form-outline);
    outline-offset: var(--form-outline-offset);
}

.form-row.message textarea {
    width: 100%;
    clear: both;
}

/*****************************************************************
**** Selectbox
******************************************************************/

.form-row select {
    display: inline-block;
    background: var(--color-white);
    width: 100%;
    border: var(--border-width-1px) solid var(--color-input-border);
    padding: var(--spacing-5px) var(--spacing-10px);
    font-size: var(--font-size-22px);
    color: var(--color-text);
}

.form-row select:focus {
    border: var(--form-border-hover);
}

.form-row select:focus-visible {
    outline: var(--form-outline);
    outline-offset: var(--form-outline-offset);
}

/*****************************************************************
**** Date Selector
******************************************************************/

.form-row .dateselector-form,
.form-row .dateselector_container {
    display: flex;
    gap: var(--spacing-5px);
}

.form-row select.dateselector_day {
    width: 5rem;
    display: block;
    border: var(--border-width-1px) solid var(--color-input-border);
    padding: var(--spacing-5px) var(--spacing-10px);
    font-size: var(--font-size-22px);
    background: var(--color-white);
}

.form-row select.dateselector_month {
    width: 5rem;
    display: block;
    border: var(--border-width-1px) solid var(--color-input-border);
    padding: var(--spacing-5px) var(--spacing-10px);
    font-size: var(--font-size-22px);
    background: var(--color-white);
}

.pageelement-events-registration .defaultform .form-row select.dateselector_year {
    width: 7.5rem;
    display: block;
    border: var(--border-width-1px) solid var(--color-input-border);
    padding: var(--spacing-5px) var(--spacing-10px);
    font-size: var(--font-size-22px);
    background: var(--color-white);
}

.dateselector_day {
    width: 3.4375rem;
}

.dateselector_month {
    width: 3.4375rem;
}

.dateselector_year {
    width: 6.875rem;
}

.dateselector_monthyear {
    width: 12.5rem;
}

.dateselector_textbox_day {
    width: 3.4375rem;
}

.dateselector_textbox_month {
    width: 3.4375rem;
}

.dateselector_textbox_year {
    width: 6.875rem;
}

.datetimeselector_day {
    width: 3.4375rem;
}

.datetimeselector_month {
    width: 3.4375rem;
}

.datetimeselector_year {
    width: 6.875rem;
}

.datetimeselector_hour {
    width: var(--spacing-50px);
}

.datetimeselector_minute {
    width: var(--spacing-50px);
}

/*****************************************************************
**** Checkbox
******************************************************************/

.form-row .checkbox-text {
    padding-left: var(--spacing-10px);
}

.form-row input[type='checkbox'] {
    outline: none;
}

.checkbox-wrapper:has(input[type='checkbox']:focus) {
    outline: var(--outline);
    outline-offset: var(--outline-offset);
}

.checkbox-wrapper {
    width: fit-content;
    display: flex;
    gap: var(--spacing-5px);
    align-items: start;
}

.checkbox-wrapper input {
    top: 0.75rem;
    position: relative;
}

.
    /*****************************************************************
    **** Radiobuttons
    ******************************************************************/
.form-row input[type='radio'] {
    margin: 0 var(--spacing-5px) 0 0;
    height: var(--spacing-20px);
}

.radiobutton-wrapper label {
    width: fit-content;
}

.radiobuttons-wrapper input {
    /* Float entfernt - nutzt Flexbox */
}

.radiobuttons-wrapper {
    display: flex;
    gap: var(--spacing-25px);
    flex-wrap: wrap;
    row-gap: 0.4rem;
}

.radiobuttons-wrapper .radiobutton-wrapper {
    display: flex;
    width: fit-content;
    align-items: center;
    padding: 0;
}

.form-row input[type='radio']:focus-visible {
    outline: none;
}

.radiobuttons-wrapper .radiobutton-wrapper:has(input[type='radio']:focus) {
    outline: var(--form-outline);
    outline-offset: var(--form-outline-offset);
}

.radiobuttons-wrapper.rows .radiobutton-wrapper label {
    max-width: 34.375rem;
}

/*****************************************************************
**** Postcode and Place
******************************************************************/

.form-row.postcode-place label {
    width: auto;
}

.form-row .form-postcode-place-label {
    width: 12.5rem;
}

.form-row .form-postcode-place-label span {
    margin-top: var(--spacing-5px);
}

.form-row .form-postcode-place-input-wrapper {
    width: calc(100% - 12.5rem);
    overflow: hidden;
    display: flex;
    justify-content: space-between;
}

.form-row .form-postcode-input,
.form-row .form-place-input {
    display: block;
    overflow: hidden;
}

.form-row .form-postcode-input {
    width: calc(40% - var(--spacing-5px));
}

.form-row .form-place-input {
    width: 100%;
    padding-left: var(--spacing-5px);
}

.form-row .form-postcode-input .textbox {
    width: 100%;
}

.form-row .form-place-input .textbox {
    width: 100%;
}

/*****************************************************************
**** Captcha
******************************************************************/

.form-row.captcha div {
    display: flex;
    flex-direction: column;
}

.form-row.captcha div img {
    max-width: 18.75rem;
    margin-bottom: var(--spacing-5px);
}

.form-row.captcha div input {
    width: 100%;
    max-width: 18.75rem;
}

/*****************************************************************
**** Files
******************************************************************/

.form-row .imageupload {
    display: block;
    padding: var(--spacing-5px) 0;
}

.form-row .imageupload tbody,
.form-row .imageupload tbody tr,
.form-row .imageupload tbody tr td {
    display: block;
}

.form-row .imageupload .filepond--item * {
    color: var(--color-white);
}

.form-row input[type='file']:focus-visible {
    outline: var(--form-outline);
    outline-offset: var(--form-outline-offset);
}

.form-row > a:focus-visible {
    outline: var(--outline);
    outline-offset: var(--outline-offset);
}

.form-row .imageupload:has(.filepond--browser:focus-visible),
.form-row .filepond--label-action:focus-visible {
    outline: var(--form-outline);
    outline-offset: var(--form-outline-offset);
}

/*****************************************************************
**** Submit
******************************************************************/

.defaultform .form-submit-container {
    width: 100%;
    display: block;
    margin-top: var(--spacing-10px);
}

.defaultform .button-submit {
    width: 27.5rem;
    margin: 0.6875rem auto 0;
    text-wrap: wrap;
}

.pageElement-contactform .button-submit {
    background-color: var(--color-secondary);
}

.pageElement-contactform .button-submit:hover {
    background-color: #0072bb;
}

.pageelement-contactform .form-submit-container .spinner-wrapper {
    transform: translate(14.375rem, -2.1875rem);
}

.pageelement-contactform .form-submit-container .spinner {
    width: var(--spacing-20px);
    height: var(--spacing-20px);
    border: 0.25rem solid rgba(255, 255, 255, .1);
    border-top: 0.25rem solid rgb(230, 230, 230);
    border-radius: var(--border-radius-full);
    animation: process-upload 1s linear infinite;
}

.pageelement-contactform .global-button:focus-visible {
    outline: var(--outline);
    outline-offset: var(--outline-offset);
}

@keyframes process-upload {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/*****************************************************************
**** Responsive - Desktop
******************************************************************/

@media only screen and (max-width: 90.625rem) {
    .pageelement-contactform .form-submit-container .spinner-wrapper {
        transform: translate(12.5rem, -2.1875rem);
    }

    .defaultform .form-row.message {
        display: block;
    }

    .form-place-input {
        width: calc(70% - var(--spacing-30px));
    }
}

/*****************************************************************
**** Responsive - Tablet
******************************************************************/

@media only screen and (max-width: 64rem) {
    .pageelement-contactform .form-submit-container .spinner-wrapper {
        transform: translate(25%, -2.1875rem);
    }

    .defaultform {
        width: 100%;
    }
}

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

@media only screen and (max-width: 47.5rem) {
    .pageelement-contactform .form-submit-container .spinner-wrapper {
        transform: translate(var(--spacing-20px), -2.1875rem);
    }

    .pageelement-contactform .defaultform .button-submit {
        padding-left: var(--spacing-45px);
        padding-right: var(--spacing-45px);
    }

    .form-info {
        margin-bottom: var(--spacing-20px);
    }
}

@media only screen and (max-width: 40.625rem) {
    .form-row input[type='text'],
    .form-row input[type='password'],
    .form-row input[type='email'],
    .form-row textarea {
        width: 100%;
    }

    .defaultform select {
        max-width: 100%;
    }

    .form-postcode-place-label {
        width: 100%;
    }

    .button-submit {
        margin-left: 0;
    }

    .form-postcode-place-input-wrapper {
        width: 100%;
    }

    .form-postcode-input {
        width: 30%;
    }

    .form-place-input {
        width: calc(70% - var(--spacing-10px));
    }

    .form-postcode-input .textbox {
        width: 100%;
    }

    .form-place-input .textbox {
        width: 100%;
    }

    .form-row label[for='gender-1'],
    .form-row label[for='gender-2'] {
        width: auto;
    }

    .form-row label[for='gender-1'] {
        margin-right: var(--spacing-15px);
    }

    .form-row label[for='gender'] {
        width: auto;
        margin-right: var(--spacing-15px);
    }
}

@media only screen and (max-width: 32.5rem) {
    .radiobuttons-wrapper {
        flex-flow: column;
    }

    .form-row,
    .form-row select,
    .defaultform .textbox,
    .form-row label a,
    .defaultform textarea {
        font-size: var(--font-size-18px);
    }
}