form,
button,
input,
optgroup,
select,
textarea,
label {
	--form-verticalgap: 			var(--site-verticalgap);


	--input-lineheight:				var(--site-lineheight);

	--input-padding-horizontal: 	0;
	--input-padding-vertical: 		0.12em;

	--input-color-text: 			#fff;
	--input-color-label: 			var(--color-text);
	--input-color-placeholder: 		var(--color-background-light);
	--input-color-border: 			var(--color-background-light);
	--input-color-focus: 			var(--color-highlight);


	--button-padding-horizontal:	calc( 0.5 * var(--site-gutter) );
	--button-padding-vertical:		calc( 0.5 * var(--input-lineheight) );
	--button-height:				2.1em; /*calc( var(--site-lineheight) + 2 * var(--button-padding-vertical) );*/


	--switch-height: 				0.8em;
	--switch-width: 				calc(2 * var(--switch-height));
	--switch-offset: 				0.3em;
	--switch-rightgap: 				0.3em;

	--switch-color-background:		var(--input-color-border);
	--switch-color-inactive: 		var(--input-color-label);
	--switch-color-active: 			var(--input-color-focus);

    line-height: var(--input-lineheight);
}

form:not(.searchform) > * {
	margin-block-start: var(--form-verticalgap);
}

#matomo_optout_checkbox {
	margin-block-start: 8px;
}

input::placeholder,
textarea::placeholder {
	color: var(--input-color-placeholder);
}

label {
	color: var(--input-color-border);
}



/*------------------------------------*\
	 $TEXTFIELDS
\*------------------------------------*/

[type='text'],
[type='tel'],
[type='email'],
[type='search'],
textarea {
    width: 100%;
	color: var(--input-color-text);
	padding: var(--input-padding-vertical) var(--input-padding-horizontal);
	border-bottom: 3px solid var(--input-color-border);
}

[type='text']:focus-visible,
[type='tel']:focus-visible,
[type='email']:focus-visible,
[type='search']:focus-visible,
textarea:focus-visible {
	outline: none;
	border-bottom: 3px solid var(--input-color-focus);
}

textarea {
    white-space: revert;
    min-height: 10em;
    overflow: auto;
    min-width: 100%;
    max-width: 100%;
}




/*------------------------------------*\
	 $BUTTONS
\*------------------------------------*/

[type='button'],
[type='reset'],
[type='submit']:not(search *),
input[type=file]::file-selector-button {
	/* Nur gültig für Quattron. Normalerweise sollte sich die Höhe aus der Lineheight plus padding ergeben, weil ja die Beschriftung auch mehrzeilig sein könnte */
	line-height: var(--button-height);

	padding-left: var(--button-padding-horizontal);
	padding-right: var(--button-padding-horizontal);

	background-color: var(--input-color-focus);
	transition: all var(--transition-small);
}

[type='button']:hover,
[type='button']:focus-visible,
[type='reset']:hover,
[type='reset']:focus-visible,
[type='submit']:not(search *):hover,
[type='submit']:not(search *):focus-visible,
[type=file]::file-selector-button:hover,
[type=file]:focus-visible::file-selector-button {
	background-color: var(--wp--preset--color--gruen-01);
}

[type=file] {
	display: block;
	background-color: var(--input-color-border);
	color: var(--input-color-text);

	/* quattron specific */
	margin-top: 0.4em;
	width: 100%;
}

[type=file]::file-selector-button {
	color: var(--input-color-text);
	margin-right: var(--button-padding-horizontal);

	min-width: 17ch;
}



/*

	 _:-ms-lang(x) [type=file] {
	}

	 _:-ms-lang(x) [type=file]::file-selector-button {
	}
*/


/*------------------------------------*\
	 $SWITCH
\*------------------------------------*/

[type=checkbox] {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;

	height: var(--switch-height);
	width: var(--switch-width);
	border-radius: calc( var(--switch-height) * 0.5);
	margin: var(--switch-offset) var(--switch-rightgap) 0 0;

	background-color: var(--switch-color-background);

	display: inline-block;
	vertical-align: top;
	position: relative;
}

[type="checkbox"]::after {
	content:  ' ';
	display: block;
	position: absolute;
	left: 0; top: 0;
	
 	cursor: pointer;
 	-webkit-backface-visibility: hidden;
    backface-visibility: hidden;
	transition: all 0.5s cubic-bezier(0.85, 0.1, 0.05, 0.75);

	width: var(--switch-height);
	height: var(--switch-height);
	z-index: 1;
	background: var(--switch-color-inactive);
	border-radius: 50%;
}

[type=checkbox]:checked::after {
	background: var(--switch-color-active);
	transform: translateX(100%);
}



/*------------------------------------*\
	 $SEARCHFORM
\*------------------------------------*/

search {
	position: relative;
	text-align: right;
}

[type='search'] {
	max-width: 20px;
	opacity: 0;
	transition: max-width var(--transition-small);
	padding-right: 25px;
	color: var(--input-color-focus);
}

[type='search']:hover,
[type='search']:focus-visible,
[type='search']:not(:placeholder-shown) {
	max-width: 100%;
	box-shadow: none;
	opacity: 1;
	border-bottom: 2px solid var(--input-color-border);
}

[type='search'] + [type='submit'] {
	position: absolute;
	top: 0.15em; right: 0;
	pointer-events: none;
}

[type='search']:focus-visible + [type='submit'],
[type='search']:not(:placeholder-shown) + [type='submit'] {
	pointer-events: auto;
}

.search-icon {
	fill: none;
	stroke: #7BB325;
	stroke-width: 3.233;
}




/*------------------------------------*\
	 $SELECT
\*------------------------------------*/
 /* The container must be positioned relative: */
.personio-application-form div:has(> select) {
  position: relative;
}

.personio-application-form div:has(> select) select {
  display: none; /*hide original SELECT element: */
}

.select-selected {
	position: relative;
  background-color: var(--input-color-focus);
  margin-top: .4em;
}

/* Style the arrow inside the select element: */
.select-selected:after {
  position: absolute;
  content: "";
  top: 50%;
  transform: translateY(-25%);
  right: var(--button-padding-horizontal);
  width: 0;
  height: 0;
  border: 6px solid transparent;
  border-color: #fff transparent transparent transparent;
}

/* Point the arrow upwards when the select box is open (active): */
.select-selected.select-arrow-active:after {
  border-color: transparent transparent #fff transparent;
  top: calc(25% + 6px);
}

/* style the items (options), including the selected item: */
.select-items div,.select-selected {
  color: #ffffff;
  padding-inline: var(--button-padding-horizontal);
  line-height: var(--button-height);
  border: 1px solid transparent;
  border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent;
  cursor: pointer;
}

/* Style items (options): */
.select-items {
  position: absolute;
  background-color: var(--input-color-border);
  top: 100%;
  left: 0;
  right: 0;
  z-index: 99;
}

/* Hide the items when the select box is closed: */
.select-hide {
  display: none;
}

.select-items div:hover, .same-as-selected {
  background-color: rgba(0, 0, 0, 0.1);
}