form section:not(:last-child){
    margin-bottom: var(--padding_large);
}
@media only screen and (max-width: 768px){ 
    form section:not(:last-child){
        margin-bottom: var(--padding);
    }
}

/* easepick */
.form-group .easepick-wrapper{
    z-index: 30;
}

/* Form Elements */
div[class$="form__group"],
.form-group{
    position:relative;
    margin-top: var(--padding);
}
.form-group:has(.form-check){
    height: 100%;
}
.form-group.right{
    text-align: right;
    align-self: flex-end;
}
/* Live-Zeichenzähler (Name/Beschreibung) */
.form-group .positionWrapper {
  position: relative;
}
.char-counter {
  position: absolute;
  right: 0.5rem;
  bottom: -0.4em;
  font-size: var(--text_size_small);
  line-height: 1;
  color: var(--text_subtitle);
  background: var(--bg_primary);
  padding: 0 0.25rem;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}

.form-info{
    font-size: var(--text_size_small);
    line-height: 1.5em;
    color: var(--text_subtitle);
    margin: var(--padding_xsmall) 0 var(--padding);
}
.form-body{
    margin-bottom: var(--padding);
}
.messageBox{
    height: 100%;
}
.ql-toolbar.ql-snow{
    width: 100%;
    background-color: var(--bg_primary);
    border-color: var(--border_color_light);
}
.ql-container.ql-snow{
    border-radius: 0 0 var(--border_radius_small) var(--border_radius_small);
    border-color: var(--border_color_light);
}
.invalid .ql-container.ql-snow{
    border-color: var(--text_red);
}
.ql-snow .ql-stroke{
    stroke: var(--text_body);
}
.ql-snow.ql-toolbar button:hover .ql-stroke{
    stroke: var(--text_link_hover);
}
.ql-editor{
    min-height: 10rem;
    font-family: 'M Plus 2', sans-serif;
    font-weight: 400;;
    font-size: var(--text_size_body);
    font-weight: 400;
    background-color: var(--bg_primary);
}
.invalid .ql-editor{
    background-color: var(--bg_red_20);
    color: var(--text_red);
}
.ql-editor.ql-blank::before{
    color: var(--text_inactive);
    font-style: normal;
}
.invalid .ql-editor.ql-blank::before{
    color: var(--text_red);
}

/* Label Animation */
label[class$="form__label"],
.form-label {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: var(--padding);
    transition: all 0.3s ease-in-out;
    pointer-events: none;
    color: transparent;
    font-weight: 400;
    line-height: 1em;
}
input:not([type="file"]),
.form-control{
    width: 100%;
    box-sizing: border-box;
}
input:focus-visible,
.form-control:focus-visible{
    border: solid 2px var(--bg_icon_primary_hover);
    outline: none;
}
input::-moz-placeholder,
.form-control::-moz-placeholder,
input::-webkit-input-placeholder,
.form-control::-webkit-input-placeholder,
input::-moz-placeholder,
.form-control::-moz-placeholder,
input::-ms-input-placeholder,
.form-control::-ms-input-placeholder{
    transition: all 0.5s ease;
    opacity: 1;
}
input:focus::-moz-placeholder,
.form-control:focus::-moz-placeholder,
input:focus::-webkit-input-placeholder,
.form-control:focus::-webkit-input-placeholder,
input:focus-visible::-moz-placeholder,
.form-control:focus-visible::-moz-placeholder,
input:focus-visible::-webkit-input-placeholder,
.form-control:focus-visible::-webkit-input-placeholder{
  color:transparent;
  opacity: 0;
}
input:has(.item:not([data-value=""]))~label,
.form-control:has(.item:not([data-value=""]))~label,
input:focus~label,
input:disabled~label,
.form-control:focus~label,
input.form-control:not(:placeholder-shown)~label{
    top:0px;
    left: 0.75rem;
    font-size: var(--text_size_small);
    line-height: 1.3em;
    color: var(--text_body);
    background: linear-gradient(0deg,var(--bg_primary) 49%, light-dark(#FCFCFD, #3F4247) 50%);
    padding: 0 var(--padding_xsmall);
    z-index:1;
}
.item[data-value=""]::before{
    content: attr(data-label);
}

/* clear button */
input.form-control:has(~ button.icon.fa-xmark:not([hidden=""])){
    padding-right: var(--padding_large);
}
input.form-control ~ button.icon.fa-xmark:not([hidden=""]){
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    padding-left: var(--padding_small);
    padding-right: var(--padding_small);
    line-height: 1em;
    height: 2.5rem;
    font-size: 0.75rem;
    color: var(--text_subtitle);
    display: none;
    cursor: pointer;
}
input.form-control:not(:placeholder-shown) ~ button.icon.fa-xmark,
input.form-control:active ~ button.icon.fa-xmark,
input.form-control:focus-within ~ button.icon.fa-xmark,
input.form-control:focus-visible ~ button.icon.fa-xmark,
input.form-control:focus ~ button.icon.fa-xmark{
    display: block;
}

/* Label */
label{
    display: block;
    font-size: var(--text_size_small);
    line-height: 1.3em;
    margin-bottom: var(--padding_xsmall);
}
.switch + .switchLabel,
input[type="radio"] + label,
input[type="checkbox"] + label{
    display: inline-block;
    margin-bottom: 0;
    font-size: var(--text_size_body);
    line-height: 1.3em;
    padding-left: 0.625rem;
}



/* Input allgemein */
fieldset,
select,
textarea,
input:not([id^="tomselect"]),
button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;

    background-color: transparent;
    border: none;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: 'M PLUS 2';
}
input:not([id^="tomselect"]):not([type="file"]), 
textarea,
.btn-attachment {
    border: solid 1px var(--border_color_light);
    border-radius: var(--border_radius_small);
    background-color: var(--bg_primary);
}
input::placeholder,
textarea::placeholder {
    /* Firefox */
    opacity: 1; 
    color: var(--text_inactive);
    font-weight: 400;
}
input::-ms-input-placeholder {
    /* Edge 12 -18 */
    color: var(--text_inactive);
}


/* Input type: text, search, number, email, tel, time, password, url */
input:not([id^="tomselect"])[type="url"],
input:not([id^="tomselect"])[type="search"],
input:not([id^="tomselect"])[type="number"],
input:not([id^="tomselect"])[type="tel"],
input:not([id^="tomselect"])[type="date"],
input:not([id^="tomselect"])[type="time"],
input:not([id^="tomselect"])[type="text"],
input:not([id^="tomselect"])[type="password"],
input:not([id^="tomselect"])[type="email"] {
    display: block;
    box-sizing: border-box;
    height: 2.5rem;
    padding: 0.75rem 0.75rem 0.75rem var(--padding);

    font-size: var(--text_size_body);
    font-weight: 400;
    line-height: 1em;
    
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}
input:not([id^="tomselect"])[disabled]{
    color: var(--text_inactive);
    background-color: var(--bg_secondary_25);
    border-color: var(--border_color_shadow);
}
input:not([id^="tomselect"])[disabled] + label{
    color: var(--text_inactive);
    background: linear-gradient(0deg,light-dark(#F7F8FA, #585E63) 48%, light-dark(#FCFCFD, #3F4247) 48%);
}
div[class$="helper-text"],
.helper_text{
    font-size: var(--text_size_small);
    color: var(--text_subtitle);
}

/* Input type: color */
input:not([id^="tomselect"])[type="color"]{
    height: 2.5rem;
    padding: 0.5rem;
    cursor: pointer;
}
/* Input type: color - square */
input.square:not([id^="tomselect"])[type="color"]{
  width: 2.5rem;
  height: 2.5rem;
  padding: var(--padding_xsmall);
}

/* Input type: search */
input:not([id^="tomselect"])[type="search"]{
    --search_icon: url('data:image/svg+xml, \ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="lightgray" d="M368 208a160 160 0 1 0 -320 0 160 160 0 1 0 320 0zM337.1 371.1C301.7 399.2 256.8 416 208 416 93.1 416 0 322.9 0 208S93.1 0 208 0 416 93.1 416 208c0 48.8-16.8 93.7-44.9 129.1L505 471c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0L337.1 371.1z"/></svg>');
    background-image: var(--search_icon);
    background-position: 9px 12px; 
    background-repeat: no-repeat;
    background-size: var(--text_size_body);
    padding: var(--padding_small) 0.75rem var(--padding_small) var(--padding_large);
}

input:not([id^="tomselect"])[type="search"] ~ button:not([hidden=""]) svg{
    width: 8px;
    height: 8px;
}
@media only screen and (max-width: 768px){
    input:not([id^="tomselect"])[type="search"]{
        background-position: 9px 13px; 
        height: 2.5rem;
    }
}

/* invalid state */
input:invalid,
.invalid input:not([id^="tomselect"]), 
.invalid textarea,
.invalid .btn-attachment{
    background-color: var(--bg_red_20);
    color: var(--text_red);
    border-color: var(--text_red);
}
.invalid input[type="file"]{
    background: transparent;
}
.invalid input:not([id^="tomselect"])::placeholder,
.invalid textarea::placeholder{
    color: var(--text_red);
}
.invalid input:not([id^="tomselect"]):focus~label{
    color: var(--text_red);
    background: linear-gradient(0deg,#F8D7DA 49%, #FCFCFD 50%);
}
.invalid input::-ms-input-placeholder {
    color: var(--text_red);
}
.invalid ~ .helper_text,
.invalid .helper_text{
    color: var(--text_red);
    font-size: var(--text_size_small);
}

/* Tom Select Allgemein */
.ts-control input{
    font-size: var(--text_size_body);
    color: var(--text_body);
    font-weight: 400;
    width: auto;
}

select,
.ts-wrapper .ts-control,
.ts-wrapper.single .ts-control{
    color: var(--text_body);
    font-size: var(--text_size_body);
    font-weight: 500;
    line-height: 1.75em;

    border: solid 1px var(--border_color_light);
    border-radius: var(--border_radius_small);

    background-color: var(--bg_primary);
    background-image: none;
    box-shadow: none;
    
    height: 2.5rem;
    padding-right: var(--padding_large);
    padding-left: var(--padding);

    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}
/* Bewusst native Selects (js-no-tomselect): appearance:none entfernt den
   nativen Pfeil, TomSelect zeichnet seinen via ::after — Replaced-Elemente
   können kein Pseudo, daher hier ein Chevron als background-image (Form wie
   der TomSelect-\f107). Farbe = --text_subtitle je Theme. */
select.js-no-tomselect{
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%236C757D' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--padding) center;
    background-size: 1rem;
    padding-right: calc(var(--padding_large) + 0.75rem);
}
@media (prefers-color-scheme: dark){
    select.js-no-tomselect{
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23CCCCCC' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
    }
}
.ts-wrapper.single .ts-control::after{
    position: absolute;
    top: 50%;
    right: 0;
    width: 2rem;
    height: 2.5rem;
    /* Glyph per Flexbox exakt mittig statt über line-height (Icon-Fonts sitzen
       in der Linebox leicht hoch → Pfeil wirkte zu hoch, Ticket t2t_08d5). */
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translateY(-50%);
    margin-top: 0;
    color: var(--text_subtitle);
    font-family: "Font Awesome 7 Pro";
    font-weight: 500;
    content: "\f107";
    border: none;
}
.ts-wrapper.single .ts-control:not(.rtl)::after{
    right: 0;
}
.ts-dropdown,
.ts-control, .ts-wrapper.single.input-active .ts-control,
.ts-dropdown .active{
    background-color: var(--bg_secondary);
    color: var(--text_body);
}

.ts-wrapper.single.dropdown-active .ts-control::after{
    margin-top: 0;
}

/* Tom Select: Single */
.ts-wrapper.single .ts-control .item{
    text-overflow: ellipsis;
    overflow: hidden;
}
.ts-wrapper.single .ts-control .item[data-value=""]{
    color: var(--text_inactive);
    font-weight: 300;
}

/* Tom Select: Multi */
.ts-wrapper.multi .ts-control > div .email {
	opacity: 0.7;
}
.ts-wrapper.multi .ts-control > div .name + .email {
	margin-left: 5px;
}
.ts-wrapper.multi .ts-control > div .email:before {
	content: '<';
}
.ts-wrapper.multi .ts-control > div .email:after {
	content: '>';
}
.ts-wrapper.multi .ts-dropdown .caption {
	font-size: var(--text_size_small);
	display: block;
	color: var(--bg_icon_passive);
}
.ts-wrapper.multi .ts-control [data-value]::before{
    content: "\f007";
    font-family: "Font Awesome 7 Pro";
    font-weight: 900;
    padding-right: var(--padding_small); 
}
.ts-wrapper.multi .ts-control [data-value]{
    background-color: var(--bg_secondary);
    background-image: none;
    border-radius: var(--border_radius);
    border-color: transparent;
    box-shadow: none;
    text-shadow: none;
    color: var(--text_body);
    line-height: 1.25rem;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}
.ts-dropdown .optgroup:first-child .optgroup-header {
  border-bottom: dashed 1px var(--border_color_light);
  font-size: var(--text_size_small);
  color: var(--text_inactive);
  font-weight: 400;
}
.ts-dropdown, .ts-dropdown .optgroup-header{
    background-color: var(--bg_primary);
    color: var(--text_body);
}
.invalid + .ts-wrapper.single .ts-control::after,
.invalid + .ts-wrapper input::placeholder,
.invalid + .ts-wrapper .ts-control{
    color: var(--text_red);
    border-color: var(--text_red);
    background-color: var(--bg_red_20);
}
.invalid + .ts-wrapper.single .ts-control::after,
.invalid + .ts-wrapper input::placeholder{
    background-color: transparent;
}


/* Input type: checkbox, radio */
.checkList{
    list-style: none;
    margin-top: 0;
    padding: 0;
}
.form-check {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}
input[type="radio"],
input[type="checkbox"] {
    height: 1.5em;
    width: 1.5em;
    vertical-align: middle;
    display: inline-block;
    position: relative;
}
input[type="radio"]{
    border-radius: 100% !important;
}

input[type="checkbox"]:checked,
input[type="radio"]:checked {
    color: var(--bg_icon_primary);
    border-width: 0;
}
input[type="radio"]:checked::before,
input[type="checkbox"]:checked::before {
    font-family: "Font Awesome 7 Pro";
    font-weight: 900;
    line-height: 1em;
    position: absolute;
    top: -2px;
}
input[type="radio"]:checked::before{
    content: "\f058";
    font-size: 1.25rem;
}
input[type="checkbox"]:checked::before {
    content: "\f14a";
    font-size: 1.4rem;
}
input[type="checkbox"]:checked[disabled]{
    color: var(--bg_icon_secondary);
}


/* Textarea */
textarea {
    font-size: var(--text_size_body);
    font-weight: 400;
    line-height: 1.5em;
    display: block;
    box-sizing: border-box;
    width: 100%;
    padding: 0.75rem 0.75rem 0.75rem var(--padding);
    min-height: 10rem;
}


/* Buttons */
a.button{
    display: inline-block;
    box-sizing: border-box;
    text-align: center;
    text-decoration: none;
}
a.button,
label.button,
button{
    transition: all 0.3s;
    padding: 0.75rem var(--padding);
    border: solid 0px var(--border_color_light);
    border-radius:var(--border_radius_small);
}
a.button,
button{
    font-size: var(--text_size_button);
    font-weight: 500;
    line-height: 1.3em;
    cursor: pointer;
}
a.button i{
    margin-right: var(--padding_small);
    display: inline-block;
    font-size: var(--text_size_button);
    line-height: 1em;
    margin-top: -2px;
}
a.button.small,
button.small{
    font-size: var(--text_size_body);
    line-height: 1.3em;
    padding: var(--padding_small) 0.75rem;
}

a.button.tiny,
button.tiny{
    font-size: var(--text_size_small);
    font-weight: 400;
    line-height: 1.3em;
    padding: 0.375rem var(--padding_small);
}

button.attachment{
    padding: 0;
    text-decoration: underline;
    font-size: var(--text_size_body);
    font-weight: 400;
    cursor: pointer;
}
button.attachment:hover{
    color: var(--bg_icon_primary_hover);
}
button:not(.icon) i{
    margin-right: var(--padding_xsmall);
}
button:has(i:first-child:last-child) i{
    margin-right: 0;
}

button.icon.primary,
label.primary,
button[class$="primary"],
button.primary,
.button.primary{
    color:var(--color_white);
    background-color: var(--bg_icon_primary);
}
label.primary:hover,
button[class$="primary"]:hover,
button.primary:hover,
.button.primary:hover{
    background-color: var(--bg_icon_primary_hover);
    cursor: pointer;
}
.button.primary.invert, 
button.primary.invert{
    background-color: var(--bg_icon_primary_invert);
}
.button.primary.invert:hover, button.primary.invert:hover{
    background-color: var(--bg_icon_primary_invert_hover);
}

label.secondary,
button.icon.secondary,
button.secondary{
    background-color: var(--bg_icon_secondary);
    color: var(--text_body);
}
label.secondary:hover,
button.secondary:hover{
    background-color: var(--bg_icon_secondary_hover);
    color: var(--bg_primary);
    cursor: pointer;
}

label.red,
button.icon.red,
button.red{
    background-color: var(--bg_red);
    color: var(--color_white);
}
label.red:hover,
button.red:hover{
    background-color: var(--bg_red_40);
    cursor: pointer;
}
label.red[disabled],
button.red[disabled]{
    background-color: var(--bg_red_20);
    color: var(--color_white);
}

label.green,
button.icon.green,
button.green{
    background-color: var(--bg_green);
    color: var(--color_white);
}
label.green:hover,
button.green:hover{
    background-color: var(--bg_green_40);
    cursor: pointer;
}
label.green[disabled],
button.green[disabled]{
    background-color: var(--bg_green_20);
    color: var(--text_body_invert);
}

a.button.icon,
button.icon{
    background-color: transparent;
    color: var(--bg_icon_primary);
    border-width: 0;
    cursor: pointer;
    width: var(--padding_large);
    height: var(--padding_large);
    padding: var(--padding_xsmall);
    transition: all 0.3s;
    text-align: center;
    vertical-align: middle;
    line-height: 1.5em;
}
a.button.icon:hover,
button.icon:not(.primary):not(.secondary):hover:not(.red):not(.green){
    color: var(--bg_icon_primary_hover);
}

button.primary[disabled],
button.secondary[disabled],
button.icon[disabled],
button[disabled]{
    color: light-dark((--bg_icon_secondary), var(--color_gray_light_25));
    background-color: var(--bg_icon_passive);
}

a.button.icon i{
    margin-right: 0;
}

.form-group:not(.messageBox):last-child button{
    min-width: 10rem;
}


 /* *** Slider *** */
.switch {
  position: relative;
  display: inline-block;
  width: 2.25rem;
  height: 1.25rem;
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.switch + label{
    padding-left: 0.5rem;
    display: inline-block;
    font-size: var(--text_size_body);
}
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}
.slider:before {
  position: absolute;
  content: "";
  height: 1rem;
  width: 1rem;
  left: 2px;
  bottom: 2px;
  background-color: var(--color_white);
  -webkit-transition: .4s;
  transition: .4s;
}
input:checked + .slider {
  background-color: var(--bg_icon_primary);
}
input:focus + .slider {
  box-shadow: 0 0 1px var(--bg_icon_primary);
}
input:checked + .slider:before {
  -webkit-transform: translateX(1rem);
  -ms-transform: translateX(1rem);
  transform: translateX(1rem);
}

/* Rounded sliders */
.slider.round {
  border-radius: 1rem;
}
.slider.round:before {
  border-radius: 50%;
} 


/* attachments/files */
.attachments a,
.attachments span{
    font-weight: 500;
    margin-right: var(--padding_small);
    text-decoration: none;
}
.attachments i{
    font-size: 1rem;
}
.attachments span{
    color: var(--text_subtitle);
}
.attachments .form-group{
    margin-top: 0;
}
input[type="file"]{
    font-size: var(--text_size_body);
}
input[type="file"]::file-selector-button {
    display: none;
}
.custom-file small{
    display: block;
    margin-bottom: var(--padding_small);
}
.btn-attachment {
    padding: var(--padding_small) 0.75rem ;
    font-size: var(--text_size_body);
    color: var(--text_subtitle);
    font-weight: 400;
    line-height: 1.3em;
    display: inline-block;
    cursor: pointer;
    margin: 0 0 var(--padding_xsmall);
    width: 100%;
}
.btn-attachment i{
    padding-right: var(--padding_xsmall);
}

/* questions */
.question input[type="radio"] + label.button{
    padding: 0.75rem var(--padding);
    min-width: 7rem;
    text-align: center;
}