form { --field_height: 38px; }
.widget-text input, 
.widget-captcha input, 
.widget-password input, 
textarea, 
select {
  font-size: var(--font_size, 16px);
  font-weight: var(--font_weight, 300);
  font-family: var(--font_family);
  color: var(--font_color, #444);
  width: 100%;
  height: var(--field_height);
  padding: var(--form_input_padding, 6px);
  background: rgb(255 255 255 / 60%);
  border-radius: var(--input_border_radius, var(--border_radius, .25em));
  border: 1px solid var(--border_color, #ddd);
  box-shadow: none;
  vertical-align: top;
  box-sizing: border-box;
  svg { height: 1em; fill: var(--color_1); }
}
textarea {
  field-sizing: content;
  height: auto;
  min-height: 100px;
  &.einzeilig { min-height: 0; }
}
label svg,
input svg,
textarea svg,
select svg,
button svg,
#wrapper .widget button svg { 
  height: 1em; 
  fill: var(--color_1); 
  margin-right: 5px;
  top: 2px;
  position: relative;
  transition: fill .25s ease-in-out;
}
button:not(.nav-burger):not(.btn-toggle-submenu),
#wrapper .widget button { 
  border: var(--button_border_width) solid var(--button_border_color);
  color: var(--button_font_color);
  background: var(--button_background_color);
  cursor: pointer;
  display: inline-block;
  font-style: normal;
  font-size: var(--button_font_size);
  border-radius: var(--button_border_radius);
  text-decoration: none;
  padding: var(--button_padding);
  line-height: 1.4;
  transition: all .25s ease-in-out;
  &:hover {
    color: var(--button_hover_font_color);
    background: var(--button_hover_background_color);
  }
  &:hover svg { fill: #fff; }
}
.widget-submit { text-align: right;
	button { cursor: pointer; font-size: 1em; }
}
fieldset { padding: 0; border: 0; }
.widget-select { 
	display: flex; 
	flex-wrap: wrap; 
	align-items: end;
	select { padding-top: 0; padding-bottom: 0; }
} 
.widget-checkbox fieldset { padding: 6px 0; border: 0; }
.widget-captcha,
.widget-upload { margin: 10px 0; }
span.mandatory { color: red; }

input[disabled],
textarea[disabled] {
  background: transparent;
  border: 0;
  pointer-events: none;
  overflow: hidden;
  resize: none;
}

.widget-radio, .widget-checkbox {
	& > .radio_container, & > .checkbox_container {
		& > span {
			display: flex;
			align-items: baseline;
			input {
				position: relative;
				margin-right: 9px;
				top: 1px;
			}
		}
	}
	&.nebeneinander {
		& > .radio_container, & > .checkbox_container {
			& > span { 
				display: inline-block; 
				margin-right: 3px;;
			}
		}
	}
}

.widget-text:has(input[type="date"]) {
	&:not(.active) { 
		label {
			background-color: #fff;
			width: calc( 100% - 40px );
			top: calc( var(--form_gap, 10px) + 1px );
			left: 2px;
			bottom: 2px;
		}
	}
}
.widget-text:has(input[readonly]),
.widget-text.readonly {
	label { display: none; }
	input { background: none; border: 0; outline: none; }
}

form {
  a { text-decoration: underline; }
	button.submit {
    transition: all .25s ease-in-out;
		&:after {
			font-size: 0;
			transition: all .25s ease-in-out;
		}
	}
	&[data-ajax-form="loading"] {
		button.submit { 
			border-color: #ddd;
			pointer-events: none;
			font-size: 0;
			min-width: 170px;
			text-align: center;
			&:after {
				content: '+';
				display: inline-block;
				animation: rotate 2s linear infinite;
        font-size: 28px;
        font-family: Arial, -apple-system,system-ui,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
        line-height: 1;
        font-weight: 100;
			}
			@keyframes rotate {
				0% { transform: rotate(0deg); }
				100% { transform: rotate(360deg); }
			}
		}
	}
}

/******* Range Slider - begin *******/
.widget-range {
  input[type=range] {
      height: 25px;
      -webkit-appearance: none;
      margin: 10px 0;
      width: 100%;
    }
    input[type=range]:focus {
      outline: none;
    }
    input[type=range]::-webkit-slider-runnable-track {
      width: 100%;
      height: 5px;
      cursor: pointer;
      animate: 0.2s;
      box-shadow: 0px 0px 0px #000000;
      background: var(--color_1);
      border-radius: 1px;
      border: 0px solid #000000;
    }
    input[type=range]::-webkit-slider-thumb {
      box-shadow: 0px 0px 0px #000000;
      border: 1px solid var(--color_1);
      height: 18px;
      width: 18px;
      border-radius: 25px;
      background: var(--color_1_bright);
      cursor: pointer;
      -webkit-appearance: none;
      margin-top: -7px;
    }
    input[type=range]:focus::-webkit-slider-runnable-track {
      background: var(--color_1);
    }
    input[type=range]::-moz-range-track {
      width: 100%;
      height: 5px;
      cursor: pointer;
      animate: 0.2s;
      box-shadow: 0px 0px 0px #000000;
      background: var(--color_1);
      border-radius: 1px;
      border: 0px solid #000000;
    }
    input[type=range]::-moz-range-thumb {
      box-shadow: 0px 0px 0px #000000;
      border: 1px solid var(--color_1);
      height: 18px;
      width: 18px;
      border-radius: 25px;
      background: var(--color_1_bright);
      cursor: pointer;
    }
    input[type=range]::-ms-track {
      width: 100%;
      height: 5px;
      cursor: pointer;
      animate: 0.2s;
      background: transparent;
      border-color: transparent;
      color: transparent;
    }
    input[type=range]::-ms-fill-lower {
      background: var(--color_1);
      border: 0px solid #000000;
      border-radius: 2px;
      box-shadow: 0px 0px 0px #000000;
    }
    input[type=range]::-ms-fill-upper {
      background: var(--color_1);
      border: 0px solid #000000;
      border-radius: 2px;
      box-shadow: 0px 0px 0px #000000;
    }
    input[type=range]::-ms-thumb {
      margin-top: 1px;
      box-shadow: 0px 0px 0px #000000;
      border: 1px solid var(--color_1);
      height: 18px;
      width: 18px;
      border-radius: 25px;
      background: var(--color_1_bright);
      cursor: pointer;
    }
    input[type=range]:focus::-ms-fill-lower {
      background: var(--color_1);
    }
    input[type=range]:focus::-ms-fill-upper {
      background: var(--color_1);
    }
}
/******* Range Slider - end *******/
.ElementeOben { align-items: start; }