{{! wrapWith START: Form }}
{{#wrapWith "form" settings=settings}}
	{{#each content.fieldsets}}
		{{> form__fieldset}}
	{{/each}}
{{/wrapWith}}
{{! wrapWith END: Form}}

form.hbs

<form class="c-form{{#if
		props.settings.formContextClass}}--{{props.settings.formContextClass}}{{else}}--default{{/if}}
	{{#if props.settings.formClasses}} {{props.settings.formClasses}}{{/if}}"
      action="{{#if @root.servermode}}{{props.settings.formAction}}{{else}}{{props.settings.formActionQA}}{{/if}}"
      method="{{props.settings.formMethod}}"
      data-css="c-form"
	{{#if options.settings.formAjax}}
	  data-js-module="form-ajax"
		  {{#if props.settings.formJsOptions}}
      data-js-options='{{stringify props.settings.formJsOptions}}'{{/if}}{{/if}}{{#if props.settings.formJsItem}} data-js-item="{{props.settings.formJsItem}}"{{/if}}>
	{{{yield}}}
</form>

form-fields/form__checkbox.hbs

<div class="form__checkbox">
	<div class="form__label-wrapper{{#if settings.labelClasses}} {{settings.labelClasses}}{{/if}}">
		<strong class="form__checkbox-legend">{{content.label}}</strong>
	</div>
	<div class="form__checkbox-wrapper">
		{{#if content.headline}}
		<h2 class="form__checkbox-headline">{{content.headline}}</h2>
		{{/if}} {{#each content.checkboxes}} {{> form__checkbox-item required=../settings.required}} {{/each}}
	</div>
</div>

form-fields/form__checkbox-item.hbs

<div class="form__checkbox-item{{#if settings.wrapperClass}} {{settings.wrapperClass}}{{/if}}">
	<input {{#if settings.dataId}} data-id="{{settings.id}}" {{else}} id="{{settings.id}}" {{/if}} name="{{settings.id}}" type="checkbox"
	 {{#each settings.attributes}} {{attrKey}}="{{{attrValue}}}" {{/each}}{{#if settings.required}} required="required" {{/if}}
	 class="form__checkbox-input{{#if settings.inputClass}} {{settings.inputClass}}{{/if}}" />
	<label for="{{settings.id}}" class="form__checkbox-label{{#if settings.labelClasses}} {{settings.labelClasses}}{{/if}}" {{#each settings.labelAttributes}} {{attrKey}}="{{{attrValue}}}" {{/each}}>
		{{{ content.label }}}{{#if settings.required}}<abbr title="Required">*</abbr>{{/if}}
	</label>
	{{#if content.description}}
	<p class="form__checkbox-description">
		{{content.description}}
	</p>
	{{/if}}
</div>

form-fields/form__col.hbs

---
publish: false
---
<div class="form__col{{#if settings.colClasses}} {{settings.colClasses}}{{/if}}">
	{{> (concat "form__" settings.typeOf)}}
</div>

form-fields/form__datepicker.hbs

<div class="form__datepicker" data-js-module="form-datepicker" data-js-item="js-form-datepicker-area" {{#if settings.dateLng}} data-js-lng="{{settings.dateLng}}"{{/if}}>
	<div class="form__datepicker-inputarea">{{#each content.datepickers}} {{> form__datepicker-item}} {{/each}}</div>
	{{#each content.datepickers}}<div class="form__datepicker-container" data-js-item="js-form-datepicker-container"></div>{{/each}}
	{{#if content.errorMessage}}
		<div class="form__datepicker-error is-hideFilter" data-js-item="js-form-datepicker-errortext">
			<p>{{content.errorMessage}}</p>
		</div>
	{{/if}}
</div>

form-fields/form__datepicker-item.hbs

<div class="form__datepicker-item{{#if settings.datepickerItemClasses}} {{settings.datepickerItemClasses}}{{/if}}">
	{{#if content.label}}
		<div class="form__label-wrapper">
			<label for="{{settings.id}}"
			       class="form__datepicker-label{{#if settings.labelClasses}} {{settings.labelClasses}}{{/if}}">
				{{content.label}}{{#if settings.required}} <abbr title="Required">*</abbr>{{/if}}
			</label>
		</div>
	{{/if}}
	<div class="form__datepicker-wrapper">
		<input id="{{settings.id}}" name="{{settings.id}}" data-js-item="js-form-datepicker" type="{{settings.type}}"
			{{#if content.placeholder}} placeholder="{{content.placeholder}}{{/if}}
			{{#if settings.required}}*{{/if}}"
		{{#each settings.attributes}} {{attrKey}}="{{{attrValue}}}"{{/each}}
		{{#if settings.required}} required="required"{{/if}}
		{{#if settings.pattern}} pattern="{{{settings.pattern}}}"{{/if}}
		class="form__datepicker-text{{#if settings.inputClasses}} {{settings.inputClasses}}{{/if}}" autocomplete="off"/>
	</div>
</div>

form-fields/form__fieldset.hbs

<fieldset class="form__fieldset{{#if settings.fieldsetClasses}} {{settings.fieldsetClasses}}{{/if}}">
	{{#if content.legend}}
	<legend class="form__legend{{#if settings.legendClasses}} {{settings.legendClasses}}{{/if}}">
		{{content.legend}} {{#if content.requiredNote}}
		<em class="form__required-note">{{content.requiredNote}}</em>
		{{/if}}
	</legend>{{/if}} {{#each content.rows}} {{> form__row this}} {{/each}}
</fieldset>

form-fields/form__input.hbs

<div class="form__input">
	{{#if content.label}}
	<div class="form__label-wrapper">
		<label for="{{settings.id}}" class="form__input-label{{#if settings.labelClasses}} {{settings.labelClasses}}{{/if}}">
			{{content.label}} {{#if settings.required}} <abbr title="Required">*</abbr>{{/if}}
		</label>
	</div>
	{{/if}}
	<div class="form__input-wrapper">
		<input id="{{settings.id}}" name="{{settings.id}}" type="{{settings.type}}" {{#if content.placeholder}} placeholder="{{content.placeholder}}{{#if settings.required}}*{{/if}}"
		 {{/if}} {{#each settings.attributes}} {{attrKey}}="{{{attrValue}}}" {{/each}} {{#if settings.required}} required="required"
		 {{/if}} {{#if settings.pattern}} pattern="{{{settings.pattern}}}" {{/if}} class="form__input-text{{#if settings.inputClasses}} {{settings.inputClasses}}{{/if}}"
		/>

	</div>
	{{#if content.errorMessage}}
	<div class="form__error">
		<p>{{content.errorMessage}}</p>
	</div>
	{{/if}}
</div>

form-fields/form__radio.hbs

<div class="form__radio{{#if settings.radioClasses}} {{settings.radioClasses}}{{/if}}" {{#each settings.attributes}} {{attrKey}}="{{{attrValue}}}" {{/each}}>
	{{#if content.label}}
	<div class="form__label-wrapper{{#if settings.labelWrapperClasses}} {{settings.labelWrapperClasses}}{{/if}}">
		<strong class="form__radio-legend{{#if settings.legendClasses}} {{settings.legendClasses}}{{/if}}">{{content.label}}{{#if
			settings.required}} <abbr title="Required">*</abbr>{{/if}}</strong>
	</div>
	{{/if}}
	<div class="form__radio-wrapper{{#if settings.radioWrapperClasses}} {{settings.radioWrapperClasses}}{{/if}}">
		{{#if content.headline}}
		<h2 class="form__radio-headline">{{content.headline}}</h2>
		{{/if}}

		<ul class="form__radio-list{{#if settings.wrapperClass}} {{settings.wrapperClass}}{{/if}}">
			{{#each content.radios}} {{> form__radio-item required=../settings.required}} {{/each}}
		</ul>
	</div>
</div>

form-fields/form__radio-item.hbs

<li class="form__radio-item">
	<input {{#if settings.dataId}}data-id="{{settings.id}}" {{else}} id="{{settings.id}}" {{/if}}
		name="{{#if settings.name}}{{settings.name}}{{else}}radio{{/if}}{{#if settings.radioGroup}}-{{settings.radioGroup}}{{/if}}"
		type="radio" value="{{#if settings.value}}{{settings.value}}{{else}}{{settings.id}}{{/if}}" {{#each settings.attributes}} {{attrKey}}="{{{attrValue}}}" {{/each}}
		{{#if settings.required}} required="required" {{/if}}
		class="form__radio-input{{#if settings.inputClass}} {{settings.inputClass}}{{/if}}" />
	<label role="button" for="{{settings.id}}"
		class="form__radio-label{{#if settings.labelClass}} {{settings.labelClass}}{{/if}}">
		{{#if settings.labelTextWrap}}<span class="form__radio-label-text">{{/if}} {{{content.label}}}
			{{#if settings.labelTextWrap}}</span>{{/if}}
	</label>
</li>

form-fields/form__row.hbs

---
publish: false
---
<div class="form__row{{#if settings.rowClasses}} {{settings.rowClasses}}{{/if}}">
	{{#each content.cols}}
		{{> form__col this}}
	{{/each}}
</div>

form-fields/form__select.hbs

<div class="form__select">
	<div class="form__label-wrapper">
		<label for="{{id}}" class="form__select-label">
			{{content.label}}{{#if settings.required}} <abbr title="Required">*</abbr>{{/if}}
		</label>
	</div>
	<div class="form__select-wrapper">
		<!--
			data-placeholder="Bitte Wählen" 			 
			data-reset-text=" - "
			data-has-reset-option="true|false"
		-->
		<select id="{{settings.id}}" {{#if settings.jsModule}}			
			data-placeholder="Bitte Wählen" 			 
			data-js-module="form-dropdown" {{/if}} name="{{id}}" {{#each settings.attributes}}
		 {{attrKey}}="{{{attrValue}}}" {{/each}} {{#if settings.required}} required="required" {{/if}}>
			{{#each content.options}}
			<option value="{{content.val}}" {{#if settings.disabled}} disabled{{/if}} {{#if settings.selected}} selected{{/if}}>{{content.name}}</option>
			{{/each}}
		</select>
	</div>
</div>

form-fields/form__select-free.hbs

<div class="form__select-free">
	<div class="form__label-wrapper">
		<label for="{{id}}" class="form__select-free-label">
			{{content.label}}{{#if settings.required}} <abbr title="Required">*</abbr>{{/if}}
		</label>
	</div>
	<div class="form__select-free-wrapper">
		<select class="form__select-free-el" id="{{settings.id}}"
			{{#each settings.attributes}}
		 {{attrKey}}="{{{attrValue}}}" {{/each}} {{#if settings.required}} required="required" {{/if}}>
			{{#each content.options}}
			<option value="{{content.val}}" {{#if settings.disabled}} disabled{{/if}} {{#if settings.selected}} selected{{/if}}>{{content.name}}</option>
			{{/each}}
		</select>
	</div>
</div>

form-fields/form__select-multiple.hbs

<div class="select-multiple">

	<div class="select-multiple__label-wrapper">
		<label for="{{id}}" class="form__select-multiple__label">
			{{content.label}}{{#if settings.required}} <abbr title="Required">*</abbr>{{/if}}
		</label>
	</div>

	<div class="select-multiple__dropdown-wrapper select-multiple__dropdown--close">
		<div class="select-multiple__dropdown-headline">Select Multiple</div>

		<div class="select-multiple__overlay">
			<select id="{{settings.id}}" {{#if settings.jsModule}} class="select-multiple__filter-select" data-js-module="form-select-multiple" {{/if}} name="{{id}}" {{#each settings.attributes}}
			 {{attrKey}}="{{{attrValue}}}" {{/each}} {{#if settings.required}} required="required" {{/if}} multiple>

				{{#each content.options}}
				<option id="{{content.id}}" value="{{content.val}}" name="{{content.id}}" {{#if settings.disabled}} disabled="disabled"{{/if}} {{#if settings.selected}} selected="selected"{{/if}}  {{#if content.data}} data-js-type="{{content.data}}"{{/if}}>{{content.name}}</option>
				{{/each}}

			</select>

			<div class="select-multiple__results"></div>

			<div class="select-multiple__apply">
				<a href="javascript:void(0);">Anwenden</a>
			</div>
		</div>
	</div>

</div>

<div class="select-multiple__checkbox-container select-multiple__checkbox-container--sample">
	<input type="checkbox" id="select-multiple__sample" class="select-multiple__checkbox">
	<label for="select-multiple__sample">
		<span class="select-multiple__label-inner">Lorem ipsum</span>
	</label>
</div>

form-fields/form__submit.hbs

<button type="submit" class="form__submit{{#if settings.submitClass}} {{settings.submitClass}}{{/if}}" {{#if settings.disabled}}
 disabled{{/if}}>
	<span class="from_submit-arrow"></span>
	<span class="form__submit-text">{{content.formSubmit}}</span>
</button>

form-fields/form__text.hbs

<div class="form__text">
	{{{content.formText}}}
</div>

form-fields/form__textarea.hbs

<div class="form__textarea">
	<div class="form__label-wrapper">
		<label for="{{settings.id}}" class="form__textarea-label">
			{{content.label}} {{#is settings.required "required"}}<abbr title="Required">*</abbr>{{/is}}
		</label>
	</div>
	<div class="form__textarea-wrapper">
		<textarea class="form__textarea-input" id="{{id}}" rows="5" {{#if content.placeholder}} placeholder="{{content.placeholder}}"
		 {{/if}} {{#if settings.minlength}} data-minlength="{{settings.minlength}}" {{/if}} {{#if settings.maxlength}} data-maxlength="{{settings.maxlength}}"
		 {{/if}} {{#if content.dataErrormessage}} data-errormessage="{{content.dataErrormessage}}" {{/if}} {{#if settings.required}}
		 required="required" {{/if}}></textarea>
	</div>
</div>

_form.scss

/* ===================================================
Component: Form
=================================================== */

/* ---------------------------------------------------
Global Varaibles
--------------------------------------------------- */

/* ---------------------------------------------------
Global Styles
--------------------------------------------------- */
[data-css="c-form"] {
	/*
	Fieldset & Legend
	----------------------- */
	.form__fieldset {
		background: #fff;
	}

	.form__legend {
		margin-bottom: 30px;
		font-weight: bold;
	}

	/*
	Cols & Rows
	----------------------- */
	.form__row {

		&.is-small-margin {
			margin-bottom: 20px;
		}
	}

	.form__col {

		&.is-text-center {
			text-align: center;
		}
	}

	/*
	Labels & Types
	----------------------- */
	.form__label-wrapper {
	}

	// Datepicker
	.form__datepicker-text {
		background: $color-light;
		border: 1px solid $color-light;
		width: 100%;
		color: $color-dark;
		line-height: (22/15);
		letter-spacing: .3px;
		padding: 15px;
		caret-color: $color-green;
		font-family: $font-regular;
		font-size: 1.5rem;
		outline: none;

		&:focus {
			border: 1px solid $color-gray-light !important;
		}
	}

	.form__datepicker-label {
		font-family: $font-bold;
		color: $color-dark;
		font-size: 1.2rem;
		letter-spacing: .5px;
		line-height: (16/12);
	}

	.form__datepicker-container {
		width: 100%;
		clear: both;

		.pika-single {
			position: static;	
			top: auto;
			left: auto;
		}
	}

	.form__datepicker-inputarea {
		width: 100%;
		clear: both;
	}

	.form__datepicker-item {
		width: 100%;

		&.is-daterange {
			@include bp($bp-tablet-p) {
				width: 50%;
				float: left;
				padding-left: 5px;

				&:first-child {
					padding-right: 5px;
					padding-left: 0;
				}
			}

			@include print() {
				width: 50%;
				float: left;
				padding-left: 5px;

				&:first-child {
					padding-right: 5px;
					padding-left: 0;
				}
			}
		}

		.form__label-wrapper {
			margin: 0;
		}
	}

	// Input
	.form__input {
		margin-left: 10px;
	}

	// Labels
	.form__input-label {
	}

	.form__input-wrapper {
	}

	.form__input-text {
		background: $color-light;
		border: 1px solid $color-light;
		width: 100%;
		color: $color-dark;
		line-height: (22/15);
		letter-spacing: .3px;
		padding: 15px;
		caret-color: $color-green;
		font-family: $font-regular;
		font-size: 1.5rem;
		outline: none;

		&:focus {
			border: 1px solid $color-gray-light;
		}
	}


	// Form input group
	.form__input-group {

		.form__input-group-wrapper {
			position: relative;
			display: flex;
			flex-wrap: wrap;
			align-items: stretch;
			width: 100%;
		}

		.form__input-group-text {
			flex: 1 1 auto;
			width: 1%;
			background: $color-light;
			border: 1px solid $color-light;
			color: $color-dark;
			line-height: (22/15);
			letter-spacing: .3px;
			padding: 15px;
			caret-color: $color-green;
			font-family: $font-regular;
			font-size: 1.5rem;

			&:focus {
				border: 1px solid $color-gray-light;
				outline: none;
			}
		}

		.form__input-group-button-wrapper {
			display: flex;

			.form__input-group-button {
				@include reset-btn;

				display: flex;
				align-items: center;
				justify-content: center;
				background-color: $color-green;
				padding: 1rem 1rem;
				min-width: 54px;
				height: 54px;
				transition: background-color 400ms ease-in-out;

				@include bp($bp-tablet-p) {
					padding: 1rem 2rem;
					min-width: 160px;
				}

				&:hover {
					cursor: pointer;
					background-color: darken($color-green, 10);
				}

				.form__input-group-button-icon {
					@include sprites-icon-search-white();
					min-width: 21px;
					height: 21px;
					display: inline-block;

					@include bp($bp-tablet-p) {
						margin-right: 1rem;
					}
				}

				.form__input-group-button-text {
					display: none;
					font-family: $font-bold;
					font-size: 1.75rem;
					color: #fff;
					line-height: 1.5;
					letter-spacing: .3px;

					@include bp($bp-tablet-p) {
						display: block;
					}
				}
			}
		}
	}

	.form__input-file-wrapper {
		font-family: $font-bold;
		font-size: 1.6rem;
		line-height: (24/16);
		letter-spacing: .3px;

		.form__input-file-label {
			padding-top: 1.8rem;
			padding-bottom: 1.8rem;
			padding-left: 5rem;
			padding-right: 5rem;
			background-color: #f5f5f5;
			color: $color-green;
			cursor: pointer;

			label {
				cursor: pointer;

				&::before {
					content: "";
					display: inline-block;
					@include sprites-icon-upload-green();
					margin-right: 12.4px;
				}
			}
		}

		.form__input-file {
			display: none;
		}

		.form__input-selected-file-wrapper {
			margin-top: 2.8rem;

			.form__input-selected-file-label {
				font-size: 1.2rem;
				line-height: (16/12);
				letter-spacing: .5px;
				color: $color-dark;
				margin-bottom: .7rem;
			}

			ul {

				li {
					margin-bottom: 1rem;

					span {
						color: $color-dark;
					}

					a {
						color: #d71919;
						margin-left: 2.3rem;
						cursor: pointer;

						&::before {
							content: "";
							display: inline-block;
							@include sprites-icon-close-small-red;
							color: #d71919;
							margin-right: 1rem;
						}
					}
				}
			}
		}
	}

	.form__error-summary-wrapper {
		color: #d71919;
		font-family: $font-bold;
		font-size: 1.6rem;
		line-height: (24/16);
		letter-spacing: .3px;

		.form__error-summary-label {
			margin-bottom: 1rem;
		}

		ul {

			li {
				margin-top: 1rem;

				span {

					&::before {
						content: "";
						display: inline-block;
						@include sprites-icon-arrow-down-red();
						margin-right: 1.3rem;
					}
				}
			}
		}
	}

	.has-error {
		border: 1px solid #d71919;
		background-color: rgba($color: #d71919, $alpha: .1);
	}

	// Radio

	.form__radio-label {
		position: relative;
		display: inline-block;

		&:hover {
			cursor: pointer;
		}
	}

	// Select
	.form__select-wrapper {
		font-family: $font-bold;
		color: $color-dark;
		line-height: (24/16);
		letter-spacing: .3px;

		.form_select-skin-border {
			background: transparent;
			max-width: 600px;
		}

		select {
			display: none;
		}

		.form__select-field {
			display: inline-block;
			vertical-align: middle;
			position: relative;
			text-align: left;
			z-index: 100;
			width: 100%;
			max-width: 500px;
			-webkit-touch-callout: none;
			-webkit-user-select: none;
			-khtml-user-select: none;
			-moz-user-select: none;
			-ms-user-select: none;
			user-select: none;
			background-color: #f5f5f5;

			&:focus {
				outline: none; /* For better accessibility add a style for this in your skin */
			}

			/*
	Hide standard form
	----------------------- */

			span {
				display: block;
				position: relative;
				cursor: pointer;
				padding: 1em;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				border-color: inherit;
			}

			/*
	Placeholder
	----------------------- */
			.form__select-placeholder {

				&::after {
					content: "";
					right: 1em;
					@include sprites-icon-arrow-dropdown();
					position: absolute;
					top: 50%;

					transform: translateY(-50%);
					-webkit-transform: translateY(-50%);
					-webkit-font-smoothing: antialiased;
					-moz-osx-font-smoothing: grayscale;
				}
			}

			/*
	States
	----------------------- */
			.is-selected span {
				content: "";
				border: solid 2px $color-green;
			}

			&.is-active {
				z-index: 200;

				> span::after {
					-webkit-transform: translateY(-50%) rotate(180deg);
					transform: translateY(-50%) rotate(180deg);
				}

				.form__select-options {
					visibility: visible;
				}
			}

			/*
	Option List
	----------------------- */
			.form__select-options {
				position: absolute;
				width: 100%;
				background: #f5f5f5;
				visibility: hidden;

				ul {
					list-style: none;
					margin: 0;
					padding: 0;
					width: 100%;

					li {

						&:hover {
							background: $color-green;
							color: #fff;
						}
					}

					span {
						padding: 1em;
					}

					li.is-focus span {
						background-color: #ddd;
					}

					li.form__select-optgroup ul {
						padding-left: 1em;

						> span {
							cursor: default;
						}
					}
				}
			}
		}
	}





	// Select free
	.form__select-free-wrapper {
		position: relative;
		display: inline-block;
		max-width: 500px;
		width: 100%;

		&::before {
			content: "";
			right: 1em;
			@include sprites-icon-arrow-dropdown();
			position: absolute;
			top: calc(50% - 5px);
			right: 15px;
			pointer-events: none;
		  }

		.form__select-free-el {
			background: $color-light;
			border: 1px solid $color-light;
			line-height: (22/15);
			letter-spacing: .3px;
			padding: 15px 50px 15px 15px;
			font-family: $font-regular;
			font-size: 1.5rem;
			outline: none;
			width: 100%;

			color: $color-dark;
			font-family: $font-bold;

			-moz-appearance: none;
			-webkit-appearance: none;
			appearance: none;
			//background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mP8nwYAAmoBZ0eMiB8AAAAASUVORK5CYII=) repeat;
			border: none;
			cursor: pointer;

			&::-ms-expand {
				display: none;
			}

			&:focus::-ms-value {
				background-color: $color-light;
			}
		}

	}




	.form__select-label, .form__select-free-label  {
		font-family: $font-bold;
		color: $color-dark;
		font-size: 1.2rem;
		letter-spacing: .5px;
		line-height: (16/12);
	}



	// Select Multiple
	.select-multiple__label-wrapper {

		.select-multiple__label {
			font-family: $font-bold;
			color: $color-dark;
			font-size: 1.2rem;
			letter-spacing: .5px;
			line-height: (16/12);
		}
	}

	.select-multiple__dropdown-wrapper {
		position: relative;

		.select-multiple__dropdown-headline {
			position: relative;
			font-family: $font-bold;
			color: $color-dark;
			font-size: 1.6rem;
			letter-spacing: .3px;
			line-height: (24/16);
			height: 56px;
			padding: 0 40px 3px 20px;
			display: flex;
			align-items: center;
			cursor: pointer;
			outline: none;
			width: 100%;
			border-bottom: 0;
			border-left: 3px solid $color-green;
			border-top: 3px solid $color-green;
			border-right: 3px solid $color-green;
			background-color: #fff;
			transition: all .3s ease;

			&::after {
				content: "";
				right: 1em;
				@include sprites-icon-arrow-dropdown();
				position: absolute;
				top: 26px;
				-webkit-transform: translateY(-50%) rotate(180deg);
				transform: translateY(-50%) rotate(180deg);
				-webkit-font-smoothing: antialiased;
				-moz-osx-font-smoothing: grayscale;
			}
		}

		.select-multiple__overlay {
			position: absolute;
			width: 100%;
			display: block;
			visibility: visible;
			opacity: 1;
			max-height: 370px;
			border-left: 3px solid $color-green;
			border-bottom: 3px solid $color-green;
			border-right: 3px solid $color-green;
			padding: 0 0 0 20px;
			z-index: 1000;
			background-color: #fff;
			transition: all .3s ease;

			select.select-multiple__filter-select {
				display: none;
			}
		}

		&.select-multiple__dropdown--close {

			.select-multiple__dropdown-headline {
				border-left: 3px solid #f5f5f5;
				border-top: 3px solid #f5f5f5;
				border-right: 3px solid #f5f5f5;
				background-color: #f5f5f5;

				&::after {
					transform: translateY(-50%);
					-webkit-transform: translateY(-50%);
				}
			}

			.select-multiple__overlay {
				max-height: 0;
				visibility: hidden;
				opacity: 0;
				border-left: 3px solid #f5f5f5;
				border-top: 3px solid #f5f5f5;
				border-right: 3px solid #f5f5f5;
				transition: all .3s ease-out;
			}
		}

		.select-multiple__results {
			max-height: 255px;
			overflow-y: auto;

			.select-multiple__checkbox-container {
				padding: 18px 4px 0 0;
				display: inline-block;
				width: 100%;
				clear: both;
			}
		}

		.select-multiple__checkbox {
			border: 0;
			clip: rect(0 0 0 0);
			height: 1px;
			margin: -1px;
			overflow: hidden;
			padding: 0;
			position: absolute;
			width: 1px;

			& + label {
				position: relative;
				display: inline-block;
				padding-left: 28px;
				font-family: $font-bold;
				color: $color-dark;
				cursor: pointer;
				font-size: 1.6rem;
				line-height: (22/15);
				letter-spacing: .25px;
				width: 100%;

				&::before {
					content: '';
					display: block;
					position: absolute;
					left: 0;
					top: 2px;
					width: 16px;
					height: 16px;
					margin-right: 13px;
					background: $color-white;
					border: 1px solid $color-gray-light;
					line-height: 16px;
					text-align: center;
					color: $color-white;
				}
			}

			&:checked + label {
				font-family: $font-bold;
				color: $color-green;

				&::before {
					@include pseudo();
					@include sprites-icon-checked-small-white();
					background-color: $color-green;
					border: 1px solid $color-green;
				}
			}

			&:disabled + label {
				cursor: default;
				color: #c0c1c3;

				&::before {
					border-color: #f5f5f5;
					background-color: #f5f5f5;
				}

			}
		}
	}

	.select-multiple__apply {
		padding: 20px 20px 20px 0;

		a {
			background-color: $color-green;
			color: $color-white;
			font-family: $font-bold;
			font-size: 1.6rem;
			letter-spacing: .3px;
			line-height: 1.5;
			border: none;
			padding: 16px 4px;
			text-align: center;
			text-decoration: none;
			display: inline-block;
			width: 100%;
			transition: background-color .2s ease-in-out;

			&:hover {
				background-color: darken($color-green, 10);
			}
		}
	}

	.select-multiple__checkbox-container--sample {
		display: none;
	}



	// Textarea
	.form__textarea {
		width: 100%;
	}

	.form__textarea-wrapper {
	}

	.form__textarea-label {
	}

	.form__textarea-input {
		width: 100%;
	}

	// Radio
	.form__radio {
	}

	.form__radio-wrapper {
	}

	.form__radio-legend {
		font-family: $font-regular;
	}

	.form__radio-list {
		display: block;
	}

	.form__radio-item {
		margin-right: 30px;
		display: inline-block;
	}

	.form__radio-input {
		@extend %visuallyhidden;

		@include hcm() {
			border: 1px solid $color-white;
			margin: 6px 0 0;
			clip: auto;
			position: relative;
			float: left;

			& ~ .form__radio-label {
				margin-left: 28px;
				padding-left: 0;
				width: auto;
				display: block;

				&::before {
					display: none !important;
				}
			}
		}

		&:checked {

			& ~ .form__radio-label {

				&::before {
					box-shadow: inset 0 0 0 10px $color-green;
					border: 0;
					width: 28px;
					height: 28px;
				}
			}

			&.a11y-focus-key {

				& ~ .form__radio-label {

					&::before {
						@include pseudo();
						border: 2px dashed #800;
					}
				}
			}
		}
	}

	.form__radio-label {
		position: relative;
		display: inline-block;
		padding: 2px 0 5px 42px;
		font-family: $font-bold;
		color: $color-dark;
		font-size: 1.6rem;
		line-height: (24/16);
		letter-spacing: .3px;

		&:hover {
			cursor: pointer;
		}

		&::before {
			content: "";
			width: 24px;
			height: 24px;
			display: inline-block;
			position: absolute;
			top: 0;
			left: 0;
			background: #fff;
			border-radius: 50%;
			border: 2px solid $color-green;
		}
	}

	// Checkbox
	.form__checkbox {
	}

	.form__checkbox-wrapper {
	}

	.form__checkbox-legend {
	}

	.form__checkbox-item {
	}

	.form__checkbox-input {
		@extend %visuallyhidden;

		@include hcm() {
			border: 1px solid $color-white;
			margin: 4px 0 0;
			clip: auto;
			position: relative;
			float: left;

			& ~ .form__checkbox-label {
				margin-left: 28px;
				padding-left: 0;
				width: auto;
				display: block;

				&::before {
					display: none !important;
				}
			}
		}

		&:checked {

			& ~ .form__checkbox-label {

				&::before {
					@include pseudo();
					@include sprites-icon-checked-white();
					background-color: $color-green;
				}
			}

			&.a11y-focus-key {

				& ~ .form__checkbox-label {

					&::before {
						@include pseudo();
						border: 2px dashed #800;
					}
				}
			}
		}

		&.a11y-focus-key {

			& ~ .form__checkbox-label {

				&::before {
					@include pseudo();
					border: 2px dashed #800;
				}
			}
		}
	}

	.form__checkbox-description {
		margin-top: 20px;
	}

	.form__checkbox-label {
		position: relative;
		display: inline-block;
		font-family: $font-bold;
		color: $color-dark;
		font-size: 1.6rem;
		line-height: (24/16);
		letter-spacing: .3px;
		padding-left: 42px;

		&:hover {
			cursor: pointer;
		}

		&::before {
			@include pseudo();
			width: 22px;
			height: 22px;
			margin-right: 13px;
			background-color: $color-white;
			border: 2px solid $color-green;
			line-height: 32px;
			text-align: center;
			color: $color-white;
			left: 0;
			top: 0;
		}
	}

	// Submit
	.form__submit {
		@include reset-btn;

		background-color: $color-green;
		padding: 1rem 2rem;
		width: 151px;
		height: 60px;


		&:hover {
			cursor: pointer;
			background-color: darken($color-green, 10);
		}
	}

	.from_submit-arrow {
		@include sprites-icon-arrow-white();
		width: 14px;
		height: 14px;
		display: inline-block;
		margin-right: 1rem;
	}

	.form__submit-text {
		font-family: $font-bold;
		font-size: 1.5rem;
		color: #fff;
		line-height: (24/15);
		letter-spacing: .28px;
	}
	// Submit-ci
	.form__submit-ci {
		@include reset-btn;

		background-color: $color-green;
		padding: 19px 29px 19px 49px;
		border: 1px solid $color-green;
		position: relative;

		text-align: left;







		&:hover {
			cursor: pointer;
			background-color: $color-white;


			.form__submit-ci-text {
				color: $color-green;
				&::before {
					@include sprites-icon-arrow-green100();
					transform: translateX(5px);
				}
			}
		}




	}
	.form__submit-ci-text {
		display: block;
		color: $color-white;
		text-decoration: none;
		font-size: 1.5rem;
		line-height: (24/15);
		letter-spacing: .028rem;
		font-family: $font-bold;
		transition: color $animation-duration-std $animation-easing-std;

		@include bp($bp-tablet-p) {
			font-size: 1.6rem;
			letter-spacing: .03rem;
		}

		&::before {
			@include pseudo();
			@include sprites-icon-arrow-white();
			display: inline-block;
			left: 20px;
			margin-top: 4px;
			transition: transform $animation-duration-std $animation-easing-std;
		}
	}

	/*
	 *  Alert Box
	 */

	.form__alert-box {

		.form__alert-box-label {
			font-family: $font-bold;
			color: $color-dark;
			font-size: 1.2rem;
			line-height: (16/12);
			letter-spacing: .5px;
			margin-bottom: .5px;
		}

		.form_alert-box-text {
			background: #f5f5f5;
			padding-left: 2rem;
			padding-right: 2rem;
			padding-top: 1.5rem;
			padding-bottom: 1.5rem;

			p {
				color: $color-dark;
				font-family: $font-regular;
				font-size: 1.6rem;
				line-height: (24/16);
				letter-spacing: .3px;
			}
		}
	}

	/*
	 * info Link
	 */

	.form__info-link {
		display: inline-block;
		padding-left: 20px;
		text-decoration: none;
		color: $color-green;
		font-family: $font-bold;
		font-size: 1.5rem;
		letter-spacing: .3px;
		line-height: (22/15);
		transition: color 200ms ease-in-out;
		-webkit-transition: color 200ms ease-in-out;
		position: relative;

		&:hover {
			color: $color-black;

			&::before {
				left: 5px;
				color: $color-black;
				@include sprites-icon-arrow-black();
			}
		}

		&::before {
			content: "";
			display: block;
			@include sprites-icon-arrow-green100();
			position: absolute;
			left: 0;
			top: 3px;
			transition: left 200ms ease-in-out;
			-webkit-transition: left 200ms ease-in-out;
		}
	}

	/*
	Error
	----------------------- */
	.form__datepicker-error {
		font-family: $font-bold;
		font-size: 1.2rem;
		letter-spacing: .5px;
		color: #d71919;
		padding: 5px 20px 5px 0;

		&.is-hideFilter {
			display: none;
		}

		&.is-showFilter {
			display: block;
		}
	}

	.form__error {
		display: block;

		p {
			color: #d71919;
			font-family: $font-bold;
			font-size: 1.2rem;
			letter-spacing: .5px;
			line-height: 16px;
			padding-top: 1rem;
		}
	}

	/*
	Select replace
	----------------------- */
	.form__sr {
		position: relative;

		/*
		MODIFIERS
		----------------------- */
		&.is-multi-select {

			.form__sr-list-button {
				padding: 12px 50px 12px 17px;

				&::before {
					content: "";
					position: absolute;
					right: 15px;
					top: 15px;
					width: 20px;
					height: 20px;
					background-color: $color-gray-light;
					display: block;
					transition: background-color $animation-duration-std
						$animation-easing-std;
				}

				&::after {
					content: "";
					position: absolute;
					right: 23px;
					top: 20px;
					width: 5px;
					height: 9px;
					display: block;
					transition: background-color $animation-duration-std
						$animation-easing-std,
						opacity $animation-duration-std * 20
						$animation-easing-std;
					border-right: 2px solid $color-white;
					border-bottom: 2px solid $color-white;
					transform: rotate(45deg);
					opacity: 0;
				}

				&:hover,
				&.a11y-focus-key {

					&::before {
						background-color: $color-white;
					}
				}

				/*
				MODIFIERS
				----------------------- */
				&.is-disabled,
				&[disabled="disabled"],
				&:disabled {
					opacity: .3;

					&:hover {
						cursor: not-allowed;
					}
				}

				&.is-selected {
					border-left-color: transparent;

					&::before {
						background-color: $color-green;

						.is-dark-theme & {
							background-color: $color-dark;
						}
					}

					&::after {
						opacity: 1;

						.is-dark-theme & {
							border-right-color: $color-dark;
							border-bottom-color: $color-dark;
						}
					}

					&.is-disabled {

						&::before {
							background-color: $color-gray-light;
						}

						&::after {
							border-right: 2px solid rgba($color-green, .3);
							border-bottom: 2px solid rgba($color-green, .3);
						}
					}
				}
			}
		}
	}

	.form__sr-btn-wrapper {
		position: relative;

		&::after {
			@include sprites-icon-arrow-green100();

			content: "";
			position: absolute;
			right: 15px;
			top: 23px;
			transform-origin: center center;
			transition: transform $animation-duration-std $animation-easing-std;
		}

		/*
		MODIFIERS
		----------------------- */
		&.is-open {
			box-shadow: 0 2px 33px 0 rgba($color-black, .1);
			width: inherit;

			&::after {
				transform: rotate(180deg);
			}

			.form__sr-btn {
				border: 1px solid rgba($color-white, 1);
			}
		}

		&.is-active {

			.form__sr-btn {
				color: $color-green;
				font-family: $font-bold;
			}
		}

		&.is-error {

			.form__sr-btn {
				-webkit-appearance: none;
				border: 2px solid #f00;
				margin: 0;
			}
		}
	}

	.form__sr-btn {
		@include reset-btn();

		text-align: left;
		width: 100%;
		margin: 0;
		border: 1px solid rgba($color-light, .3);
		padding: 14px 40px 15px 16px;
		background-color: $color-white;
		font-family: $font-regular;
		line-height: (24/18);
		color: rgba($color-dark, .4);
		transition: border-color $animation-duration-std,
			color $animation-duration-std, border-radius $animation-duration-std,
			box-shadow $animation-duration-std;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;

		&:hover,
		&.a11y-focus-key {
			cursor: pointer;
			border: 1px solid rgba($color-green, 1);
			color: rgba($color-dark, .6);
		}

		/*
		MODIFIERS
		----------------------- */
		&.is-disabled,
		&[disabled="disabled"],
		&:disabled {
			opacity: .3;
			border: 1px solid rgba($color-dark, .3);

			&:hover {
				cursor: not-allowed;
			}
		}
	}

	.form__sr-list-wrapper {
		position: absolute;
		pointer-events: none;
		z-index: 10;
		width: inherit;
		background-color: $color-white;
		transition: max-height $animation-duration-std * 1.5,
			opacity $animation-duration-std * 1.5;
		box-shadow: 0 10px 33px 0 rgba($color-black, .1); // 0px with unit fixes some bugs
		max-height: 0;
		opacity: 0;
		overflow: hidden;

		/*
		MODIFIERS
		----------------------- */
		&.is-open {
			pointer-events: all;
			z-index: 105;
			max-height: 400px;
			opacity: 1;
			overflow-x: hidden;
			overflow-y: auto;
		}
	}

	.form__sr-list-wrapper-inner {
		width: inherit;
	}

	.form__sr-list-button {
		@include reset-btn();

		position: relative;
		display: block;
		width: 100%;
		text-align: left;
		font-family: $font-bold;
		font-size: 1.6rem;
		line-height: (27/16);
		color: $color-dark;
		padding: 12px 17px;
		border-top: 1px solid rgba($color-black, .1);
		background-color: transparent;
		transition: color $animation-duration-std $animation-easing-std,
			background-color $animation-duration-std $animation-easing-std;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		border-left: 4px solid transparent;

		&:hover,
		&.a11y-focus-key {
			cursor: pointer;
			color: $color-green;
			background-color: $color-light;
		}

		&:focus {
			outline: 0;
		}

		/*
		MODIFIERS
		----------------------- */
		&.is-selected {
			padding-left: 13px;
			border-left: 4px solid $color-green;
		}

		&.is-disabled,
		&[disabled="disabled"],
		&:disabled {

			&:hover {
				cursor: not-allowed;
				background-color: transparent;
				color: $color-dark;

				&::before {
					background-color: $color-gray-light;
				}
			}
		}
	}
}

/* ---------------------------------------------------
Context: Default
--------------------------------------------------- */
.c-form--default {
	/*
	Cols & Rows
	----------------------- */
	.form__row {
		margin-bottom: 30px;
	}

	.form__col {
		margin-bottom: 2rem;
	}

	/*
	Labels & Types
	----------------------- */
	.form__label-wrapper {
		margin-bottom: 1rem;
	}
}

/* ---------------------------------------------------
Context: Filterable List
--------------------------------------------------- */
.c-form--filterable-list {
	position: relative;

	.form__input {
		margin-left: 0;
	}

	/*
	MODIFIERS
	----------------------- */
	&.is-loading {

		.filterable-list__load-more-loader {
			opacity: 1;
		}

		.filterable-list__load-init-loader {
			opacity: 1;
		}
	}

	/*
	Cols & Rows
	----------------------- */
	.form__row {
		border-bottom: 1px solid $color-gray;
		padding-bottom: 7px;
		margin-bottom: 25px;
	}

	.form__col {
	}

	.form__label-wrapper {
		float: left;
		display: inline;
	}

	/*
	Labels & Types
	----------------------- */
	.is-filternav {
		// Radio
		.form__radio-wrapper {
			display: inline;
			float: left;
		}

		.form__radio-item {
			margin-right: 0;
		}

		.form__radio-legend {
			color: $color-dark;
			margin-right: 10px;
			font-size: 1.7rem;
			line-height: (20/17);
			letter-spacing: .25px;
			margin-bottom: 10px;
			display: block;

			@include bp($bp-tablet-p) {
				font-size: 1.8rem;
				line-height: (21/18);
				letter-spacing: .27px;
				margin-bottom: 0;
			}

			@include bp($bp-desktop-l) {
				font-size: 2rem;
				line-height: (24/20);
				letter-spacing: .3px;
			}
		}

		.form__radio-input {
			@include hcm() {
				@extend %visuallyhidden;
			}

			&:checked {

				& ~ .form__radio-label {
					color: $color-dark;

					@include print() {
						text-decoration: underline;
					}

					@include hcm() {
						text-decoration: underline;
					}
				}
			}

			&.a11y-focus-key {

				& ~ .form__radio-label {
					@include a11y-focus-key();

					&::before {
						display: none;
					}
				}
			}
		}

		.form__radio-label {
			font-family: $font-bold;
			color: $color-green;
			padding: 0 20px;
			border-right: 1px solid $color-dark;
			font-size: 1.7rem;
			line-height: (20/17);
			letter-spacing: .25px;

			@include bp($bp-tablet-p) {
				font-size: 1.8rem;
				line-height: (21/18);
				letter-spacing: .27px;
			}

			@include bp($bp-desktop-l) {
				font-size: 2rem;
				line-height: (24/20);
				letter-spacing: .3px;
			}

			&::before {
				display: none;
			}

			/*
			MODIFIERS
			----------------------- */
			&.is-last {
				border-right: none;
				padding-right: 0;
			}
		}
	}

	//Includes css-classes for the filter-newsroom-event

	.form__checkbox-input {

		&:checked {

			& ~ .form__checkbox-label {
				color: $color-green;
				font-family: $font-bold;

				&::before {
					@include pseudo();
					@include sprites-icon-checked-small-white();
					background-color: $color-green;
					border: 1px solid $color-green;
				}
			}
		}
	}

	.form__checkbox-label {
		padding-left: 28px;
		font-family: $font-regular;
		color: $color-dark;
		font-size: 1.5rem;
		line-height: (22/15);
		letter-spacing: .25px;
		width: 100%;

		&:hover {
			cursor: pointer;
		}

		&::before {
			width: 16px;
			height: 16px;
			margin-right: 13px;
			background: $color-white;
			border: 1px solid $color-gray-light;
			line-height: 16px;
			text-align: center;
			color: $color-white;
		}
	}

	.form__checkbox-item {
		padding: 18px 4px 0 0;
		display: inline-block;
		width: 100%;
		clear: both;

		&.is-empty {

			.form__checkbox-label {
				color: $color-gray-light;

				&::before {
					border: 1px solid $color-light;
					background-color: $color-light;
				}
			}

			.form__checkbox-input {

				&:checked {

					& ~ .form__checkbox-label {
						color: $color-gray-light;
						font-family: $font-bold;

						&::before {
							background-color: $color-gray-light;
							border: 1px solid $color-gray-light;
						}
					}

					&.a11y-focus-key {

						& ~ .form__checkbox-label {

							&::before {
								@include pseudo();
								border: 2px dashed #800;
							}
						}
					}
				}

				&.a11y-focus-key {

					& ~ .form__checkbox-label {

						&::before {
							@include pseudo();
							border: 2px dashed #800;
						}
					}
				}
			}
		}

		&.is-hidden {
			display: none;
		}
	}
}

/* ---------------------------------------------------
Context: Monday Webforms externes CSS
--------------------------------------------------- */
.c-form--mwf {

	margin-bottom: 60px;
	@include rte-dimensions();



	p {
		margin-left: 0;
		width: 100%;
	}

	h3 {
		margin-left: 0;
		margin-bottom: 0;
		width: 100%;
	}

	.mwf-form {
		width: 100%;
		margin-left: auto;
		margin-right: auto;
		display: block;
	}

	.mwf-label {
		font-family: $font-bold;
		font-weight: bold;
		font-weight: 700;
	}

	em {
		text-transform: none;
	}

	.mwf-hint {
		em {
			font-size: 1.2rem;
			letter-spacing: .5px;
			line-height: 16px;
			font-family: $font-regular;
			color: $color-gray;
		}
	}

	.mwf-form > ul {
		margin-left: 0;
		margin-bottom: 0;
		padding-left: 0;
		width: 100%;
		flex: 0 0 calc(100%);
		display: block;
		clear: both;
	}

	.mwf-form > ul > li {
		margin-left: 0;
		padding-left: 0;

		&::before {
			display: block;
			content: '';
			top: 0;
			width: 0;
			height: 0;
			background-color: transparent;
		}
	}

	/* klasse .form__error */
	.mwf-error {
		display: block;
		color: $color-red-light;
		font-family: $font-bold;
		font-size: 1.2rem;
		letter-spacing: .5px;
		line-height: 16px;
		padding-top: 0.5rem;
	}

	.mwf-required {
		color: $color-green;
		font-family: $font-bold;
		font-weight: bold;
		font-weight: 700;
	}

	/* list */
	.mwf-field {
		display: inline-block;
		margin-bottom: 2.0em;
		margin-right: 1%;
		vertical-align: top;
		width: 99%;

		p > em {
			@include content-i-styles();
			text-transform: none;
			color: $color-dark;
		}
	}

	.mwf-input {
		margin-top: 1rem;
	}

	/* Klasse .form-input-text */
	.mwf-input input[type="text"], .mwf-input input[type="password"], .mwf-input input[type="email"],
	.mwf-input input[type="url"], .mwf-input input[type="search"], .mwf-input textarea {
		background: $color-light;
		border: 1px solid $color-light;
		width: 100%;
		color: $color-dark;
		line-height: (22/15);
		letter-spacing: .3px;
		padding: 15px;
		caret-color: $color-green;
		font-family: $font-regular;
		font-size: 1.5rem;
		outline: none;

		&:focus {
			border: 1px solid $color-gray-light;
		}

		&.a11y-focus-key {
			margin: 2px 0.5%;
			width: 99%;
		}
	}

	.mwf-form ul > li select {
		outline: none;
		background: $color-light;
		border: 1px solid $color-light;
		width: 100%;
		color: $color-dark;
		line-height: (22/15);
		letter-spacing: .3px;
		padding: 15px;
		caret-color: $color-green;
		font-family: $font-regular;
		font-size: 1.5rem;

		&:focus {
			border: 1px solid $color-gray-light;
		}

		&.a11y-focus-key {
			margin: 2px 0.5%;
			width: 99%;
		}
	}

	.mwf-form ul > li select[multiple] {

	}

	.mwf-form ul > li input[type="checkbox"], .mwf-form ul > li input[type="radio"] {
		box-sizing: border-box;
		margin: 0 .5em 0 .5em;
		vertical-align: middle;
	}

	.lmumwf-radioarea input[type="radio"] {
		@extend %visuallyhidden;

		@include hcm() {
			border: 1px solid $color-white;
			margin: 6px 0 0;
			clip: auto;
			position: relative;
			float: left;

			& ~ label {
				margin-left: 28px;
				padding-left: 0;
				width: auto;
				display: block;

				&::before {
					display: none !important;
				}
			}
		}

		&:checked {

			& ~ label {

				&::before {
					box-shadow: inset 0 0 0 10px $color-green;
					border: 0;
					width: 28px;
					height: 28px;
				}
			}

			&.a11y-focus-key {

				& ~ label {

					&::before {
						@include pseudo();
						border: 2px dashed #800;
					}
				}
			}
		}
	}

	.lmumwf-radioarea .mwf-option label {
		position: relative;
		display: inline-block;
		padding: 2px 0 5px 42px;
		font-family: $font-regular;
		color: $color-dark;
		font-size: 1.6rem;
		line-height: (24/16);
		letter-spacing: .3px;

		&:hover {
			cursor: pointer;
		}

		&::before {
			content: "";
			width: 24px;
			height: 24px;
			display: inline-block;
			position: absolute;
			top: 0;
			left: 0;
			background: #fff;
			border-radius: 50%;
			border: 2px solid $color-green;
		}
	}

	.lmumwf-radioarea .mwf-option, .lmumwf-checkboxarea .mwf-option {
		display: block;
		padding-bottom: 2rem;
	}

	.lmumwf-checkboxarea .mwf-checkbox
	{
		@extend %visuallyhidden;

		@include hcm() {
			border: 1px solid $color-white;
			margin: 4px 0 0;
			clip: auto;
			position: relative;
			float: left;

			& ~ label {
				margin-left: 28px;
				padding-left: 0;
				width: auto;
				display: block;

				&::before {
					display: none !important;
				}
			}
		}

		&:checked {

			& ~ label {

				&::before {
					@include pseudo();
					@include sprites-icon-checked-white();
					background-color: $color-green;
				}
			}

			&.a11y-focus-key {

				& ~ label {

					&::before {
						@include pseudo();
						border: 2px dashed #800;
					}
				}
			}
		}

		&.a11y-focus-key {

			& ~ label {

				&::before {
					@include pseudo();
					border: 2px dashed #800;
				}
			}
		}
	}

	.lmumwf-checkboxarea .mwf-option label {
		position: relative;
		display: inline-block;
		font-family: $font-regular;
		color: $color-dark;
		font-size: 1.6rem;
		line-height: (24/16);
		letter-spacing: .3px;
		padding-left: 42px;

		&:hover {
			cursor: pointer;
		}

		&::before {
			@include pseudo();
			width: 22px;
			height: 22px;
			margin-right: 13px;
			background-color: $color-white;
			border: 2px solid $color-green;
			line-height: 32px;
			text-align: center;
			color: $color-white;
			left: 0;
			top: 0;
		}
	}

	.mwf-input input:focus {
		border: 1px solid #d17f1f;
		box-shadow: none;
		outline: medium none;
	}

	li.mwf-s {
		width: 24% !important;
	}

	li.mwf-m {
		width: 49% !important;
	}

	li.mwf-l {
		width: 74%!important;
	}

	.mwf-input fieldset {
		border: 0px;
		margin: 0.5em 0 0;
		padding: 0px;
	}

	/* Paragraph */

	.mwf-italic {
		@include content-i-styles();
	}

	.mwf-bold {
		font-family: $font-bold;
		font-weight: bold;
		font-weight: 700;
	}

	/* Buttons */

	.mwf-button {
		margin-bottom: 1em;
		margin-right: 1em;
	}

	.mwf-cancel, .mwf-next {
		float: right;
	}



	.mwf-form ul > li input[type="button"], .mwf-form ul > li input[type="submit"], .lmumwf-button {
		background-color: $color-green;
		padding: 1rem 2rem;
		height: 60px;
		outline: none;
		font-family: $font-bold;
		font-size: 1.5rem;
		color: $color-white;
		line-height: (24/15);
		letter-spacing: .28px;
		border: 1px solid $color-white;
		transition: color $animation-duration-std $animation-easing-std;
		white-space: nowrap;

		&:hover {
			cursor: pointer;
			background-color: $color-white;
			border: 1px solid $color-green;
			color: $color-green;
		}

		&.a11y-focus-key {
			margin: 2px;
		}
	}

	.lmumwf-button {

		&.lmumwf-button-next, &.lmumwf-button-finish {
			padding: 10px 30px 10px 50px;

			&::before {
				@include pseudo();
				@include sprites-icon-arrow-white();
				left: 20px;
				top: calc(50% - 7px);
				transition: transform $animation-duration-std $animation-easing-std;
			}

			&:hover {
				&::before {
					transform: translateX(5px);
					@include sprites-icon-arrow-green100();

				}
			}
		}

		&.lmumwf-button-back {
			padding: 10px 30px 10px 50px;

			&::before {
				@include pseudo();
				@include sprites-icon-arrow-left-white();
				left: 20px;
				top: calc(50% - 7px);
				transition: transform $animation-duration-std $animation-easing-std;
			}

			&:hover {
				&::before {
					transform: translateX(-5px);
					@include sprites-icon-arrow-left-green();

				}
			}
		}
	}

	.mwf-form ul>li.mwf-cancel input[type="button"], .lmumwf-button-cancel {
		background-color: $color-light;
		color: $color-green-hc-dark;

		&:hover {
			background-color: $color-white;
		}
	}



	.mwf-hidden {
		display: none !important;
	}

	.mwf-captcha {
		img {
			margin-left: 0;
			width: 80%;

			@include bp($bp-tablet-p) {
				width: 60%;
			}

			@include bp($bp-tablet-l) {
				width: 50%;
			}

			@include bp($bp-desktop-m) {
				width: 40%;
			}
		}
	}

	/* Summary */

	.mwf-table {
		-moz-box-sizing: border-box;
		box-sizing: border-box;
	}

	.mwf-table thead th {

	}

	.mwf-table tr:nth-child(2n) td {
		background: #F9F9F9;
	}

	.mwf-table th, .mwf-table td {
		border: none;
		border-top: 1px solid #DDD;
		padding: 6px;
		background-color: transparent;
	}

	/* Pager */
	/* Ausblenden Bullets */
	.mwf-form .mwf-pager {
		margin-bottom: 0;

	}

	.mwf-form ul > li.mwf-pager p {
		margin-bottom: 0;
		margin-right: 1em;
		margin-left: 0;
		vertical-align: top;
		text-align: left;
	}

	.mwf-form ul>li .mwf-option {
		cursor: pointer;
		display: block;
		margin: 0.5em 1em 0 0;
		vertical-align: top;
		white-space: nowrap;
	}

	.mwf-form .lmumwf-radioarea .mwf-option, .mwf-form .lmumwf-checkboxarea .mwf-option {
		white-space: normal;
	}

	.mwf-form ul>li .mwf-option label p {
		margin: 0 0.5em 0 0;
	}

	.mwf-option.with-image {
		display: inline-block;
		float: left;
		max-width: 150px;
	}

	img.mwf-radio-option-image {
		max-width: inherit;
	}

	.mwf-form ul > li fieldset label {
		cursor: pointer;
		vertical-align: middle;
		display: inline-block;
		margin: 0;
	}

	/* File Upload */

	.mwf-upload {

		button {
			@include reset-btn();
			font-family: $font-bold;
			font-size: 1.5rem;
			line-height: (24/15);
			letter-spacing: .28px;
			cursor: pointer;
			text-align: center;
			height: 60px;
			padding: 1rem 2rem;
			white-space: nowrap;

			&.mwf-upload-delete {
				background-color: $color-light;
				color: $color-green;
				border: 1px solid $color-light;

				&:hover {
					background-color: $color-white;
					border: 1px solid $color-green;
				}

				&::before {
					content: "";
					display: inline-block;
					@include sprites-icon-close-small-green;
					color: $color-green;
					margin-right: 1rem;
				}
			}

			&.mwf-upload-upload {
				background-color: $color-green;
				color: $color-white;
				border: 1px solid $color-green;

				&:hover {
					background-color: $color-white;
					color: $color-green;
				}
				margin-left: 15px;
			}


		}

	}

	.mwf-upload-dropzone {
		text-align: center;
		border: 8px solid $color-light;
		background-color: $color-white;
		display: block;
	}

	.mwf-upload-dragover {
		border: 2px solid #666;
	}

	.mwf-upload-dropzone h3 {
		text-transform: uppercase;
		padding: 0.5em;
		margin-bottom: 1em;
		margin-top: 1em;
	}

	.mwf-upload-button {
		position: relative;
		margin: 0 10px 20px 10px;
		background-color: $color-light;

		cursor: pointer;
		display: inline-block;
		white-space: nowrap;
		height: 60px;
		padding: 18px 2rem 0 2rem;
		font-family: $font-bold;
		font-size: 1.5rem;
		color: $color-green;
		line-height: (24/15);
		letter-spacing: .28px;
		border: 1px solid $color-light;

		&:hover {
			background-color: $color-white;
			border: 1px solid $color-green;
		}

		&::before {
			content: "";
			display: inline-block;
			@include sprites-icon-upload-green();
			margin-right: 12.4px;
		}
	}

	.mwf-upload-button > span {
		cursor: pointer;
	}

	.mwf-upload-button input[type="file"] {
		position: absolute;
		top: 0;
		left: 0;
		margin: 0;
		padding: 0;
		cursor: pointer;
		opacity: 0;
		height: 60px;
		width: 100%;
	}

	.mwf-upload-filecontainer {
		width: 100%;
		min-height: 10px;
	}

	.mwf-upload-row {
		width: 100%;
		border-bottom: 8px solid $color-light;
		padding: 15px 0 15px;
		box-sizing: border-box;
		position: relative;
	}

	.mwf-upload-disabled {
		cursor: not-allowed !important;
		opacity: 0.4;
	}

	.mwf-upload-disabled button, .mwf-upload-disabled input {
		cursor: not-allowed !important;
	}

	.mwf-upload-preview {
		float:left;
		width: 135px;
		height: 130px;
		display: block;
		position:relative;

		background-size: contain;
		background-repeat: no-repeat;
		background-position: inherit;
		background-size: 120px 120px;
		background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgd2lkdGg9IjE2ODNweCIgaGVpZ2h0PSIxNjgzcHgiIHZlcnNpb249IjEuMSIgc3R5bGU9InNoYXBlLXJlbmRlcmluZzpnZW9tZXRyaWNQcmVjaXNpb247IHRleHQtcmVuZGVyaW5nOmdlb21ldHJpY1ByZWNpc2lvbjsgaW1hZ2UtcmVuZGVyaW5nOm9wdGltaXplUXVhbGl0eTsgZmlsbC1ydWxlOmV2ZW5vZGQ7IGNsaXAtcnVsZTpldmVub2RkIg0Kdmlld0JveD0iMCAwIDE2ODggMTY4OCINCiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+DQogPGRlZnM+DQogIDxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+DQogICA8IVtDREFUQVsNCiAgICAuZmlsMCB7ZmlsbDojRjNGM0YzfQ0KICAgIC5maWwxIHtmaWxsOndoaXRlfQ0KICAgXV0+DQogIDwvc3R5bGU+DQogPC9kZWZzPg0KIDxnIGlkPSJFYmVuZV94MDAyMF8xIj4NCiAgPG1ldGFkYXRhIGlkPSJDb3JlbENvcnBJRF8wQ29yZWwtTGF5ZXIiLz4NCiAgPHJlY3QgY2xhc3M9ImZpbDAiIHdpZHRoPSIxNjg4IiBoZWlnaHQ9IjE2ODgiLz4NCiAgPHBhdGggY2xhc3M9ImZpbDEiIGQ9Ik0xMDgyIDEyOTZsLTQ3MiAwYy01NSwwIC05MiwtMzcgLTkyLC05MmwwIC03MjNjMCwtNzIgNTksLTg4IDEyMSwtODhsMjU1IDBjMTksMCAyOSwyMyAyOSw0NmwwIDE1MWMwLDE0IC0xLDI0IDQsMzMgMyw2IDE2LDE2IDIzLDE5IDYsMiAxMzQsMiAxNDgsMSA2OSwwIDc1LDIgNzUsNzlsMCA0NzZjMCw1OCAtMzQsOTYgLTkyLDk2em0tNjQ4IC04MjhsMCA3NjFjMCwxOCAxMiw0NyAxOSw2MSAxMCwxOSAyMCwzMSAzNCw0NSAyNSwyNSA2Niw0NSAxMTQsNDVsNDgxIDBjNTEsMCA4NywtMTUgMTE2LC0zOSAyMiwtMTggNTYsLTYyIDU2LC05OWwwIC02MTRjMCwtMzMgLTI0LC01MiAtNDIsLTc1IC04LC0xMCAtOSwtMTMgLTE5LC0yMyAtNTEsLTUxIC0yMDYsLTIyMCAtMjU2LC0yMjBsLTMyMiAwYy0xMDUsMCAtMTgwLDczIC0xODAsMTU5eiIvPg0KIDwvZz4NCjwvc3ZnPg0K);
	}

	.mwf-upload-metadata {

	}



	.mwf-upload-metadata ul li {
		list-style: none;
	}

	.mwf-upload-error {
		color: $color-red-light;
		margin: 5px 0;
	}

	.mwf-upload-actions {
		width: 100%;
		display: inline-block;
	}

	.mwf-upload-progressbar {
		background: $color-light;
		margin-top: 10px;
		bottom:30px;
		right:20px;
		display: none;
	}

	.mwf-upload-progressbar > span {
		display: block;
		height: 100%;
		background-color: $color-green;
		position: relative;
		overflow: hidden;
		text-align: center;
		color: $color-white;
	}

	.mwf-upload-footer {
		position:relative;
		padding: 10px 20px;
		box-sizing: border-box;
		overflow: auto;
		background: $color-light;
	}

	.mwf-upload-footer-actions {
		float: right;
	}

	/* Ajax Autocomplete for jQuery */

	.autocomplete-suggestions {
		border: 1px solid #999;
		background: #FFF;
		overflow: auto;
	}

	.autocomplete-suggestion {
		padding: 2px 5px;
		white-space: nowrap;
		overflow: hidden;
		font-size: 12px;
	}

	.autocomplete-selected {
		background: #C3C3C3;
	}

	.autocomplete-suggestions strong {
		font-weight: bolder;
	}

}

/* ---------------------------------------------------
Context: RTE (Detailseite)
--------------------------------------------------- */
.c-form--rte {

	@include rte-dimensions();
	margin-bottom: 60px;

	.form__input {
		margin-left: 0;
	}
}

/* ---------------------------------------------------
Context: Login Benutzerkonto externes CSS
--------------------------------------------------- */
.c-form--idp {
	@include rte-dimensions();
	margin-bottom: 60px;

	.is-idp-login-area {
		border: 7px solid $color-light;
		padding: 3em;
	}

	.is-idp-input-area {
		margin-bottom: 2em;
		margin-left: 0 !important;

		&:last-child {
			margin-bottom: 1em;
		}
	}

	.is-idp-pwd-link {
		margin-bottom: 1em;
		text-align: right;
	}

	.is-idp-list {
		margin-left: 0px;
		width: 100%;
		list-style: none;

		li{
			padding-left: 0;

			&::before {
				background-color: $color-white;
				width: 0;
				height: 0;
			}
		}
	}
}

/* ---------------------------------------------------
Context: Suche
--------------------------------------------------- */
.c-form--gsearch {

	.form__radio-item {
		&:first-of-type {
			margin-bottom: 10px;
		}
	}

	@include bp($bp-mobile-p) {
		.form__radio-item {
			&:first-of-type {
				margin-bottom: 0;
			}
		}
	}

}

_form__datepicker.scss

/*!
 * Pikaday
 * Copyright © 2014 David Bushell | BSD & MIT license | https://dbushell.com/
 */

// Colours
$pd-text-color: #333 !default;
$pd-title-color: #333 !default;
$pd-title-bg: #fff !default;
$pd-picker-bg: #fff !default;
$pd-picker-border: #ccc !default;
$pd-picker-border-bottom: #bbb !default;
$pd-picker-shadow: rgba(0, 0, 0, .5) !default;
$pd-th-color: $color-gray;
$pd-day-color: $color-dark;
$pd-day-bg: $color-white;
$pd-day-hover-color: #fff !default;
$pd-day-hover-bg: $color-green60 !default;
$pd-day-today-color: $color-green !default;
$pd-day-selected-color: $color-white !default;
$pd-day-selected-bg: $color-green !default;
$pd-day-selected-shadow: #178fe5 !default;
$pd-day-disabled-color: $color-gray-light !default;
$pd-week-color: #999 !default;

// Font
$pd-font-family: $font-regular;

.pika-single {
	z-index: 9999;
	display: block;
	position: relative;
	color: $pd-text-color;
	background: $pd-picker-bg;
	font-family: $pd-font-family;
	font-size: 1.5rem;
	letter-spacing: .25px;
	line-height: 1.46667;
	padding: 15px 0;

	&.is-hidden {
		display: none;
	}

	&.is-bound {
		position: absolute;
	}
}

// clear child float (pika-lendar), using the famous micro clearfix hack
// http://nicolasgallagher.com/micro-clearfix-hack/
.pika-single {
	*zoom: 1;
	box-sizing: border-box;

	&::before,
	&::after {
		content: " ";
		display: table;
	}

	&::after {
		clear: both;
	}
}

.pika-lendar {
	float: left;
	box-sizing: border-box;
	width: 100%;
	max-width: 550px;
	padding: 4px;
}

.pika-title {
	position: relative;
	text-align: center;
	margin: 0 0 7px;

	select {
		font-family: $font-bold;
		font-size: 1.5rem;
		letter-spacing: .25px;
		line-height: (22/15);
		cursor: pointer;
		position: absolute;
		z-index: 9998;
		margin: 0;
		left: 0;
		top: 5px;
		filter: alpha(opacity=0);
		opacity: 0;
	}
}

.pika-label {
	font-family: $font-bold;
	font-size: 1.5rem;
	letter-spacing: .25px;
	line-height: (22/15);
	display: inline-block;
	*display: inline;
	position: relative;
	z-index: 9999;
	overflow: hidden;
	margin: 0;
	padding: 5px 3px;
	color: $pd-title-color;
	background-color: $pd-title-bg;
}

.pika-prev,
.pika-next {
	display: block;
	cursor: pointer;
	position: relative;
	outline: none;
	border: 0;
	padding: 0;
	width: 30px;
	height: 30px;
	text-indent: 30px; // hide text using text-indent trick, using width value (it's enough)
	white-space: nowrap;
	overflow: hidden;
	background-color: transparent;
	*position: absolute;
	*top: 0;

	@include hcm() {
		text-indent: 0;
		width: auto;
	}

	&:hover {
		opacity: 1;
	}

	&.is-disabled {
		cursor: default;
		opacity: .2;
	}
}

.is-rtl .pika-next,
.pika-prev {
	float: left;
	*left: 0;

	&::before {
		@include pseudo();
		@include sprites-icon-arrow-backward();

		left: 0;
		top: 9px;
	}
}

.pika-next,
.is-rtl .pika-prev {
	float: right;
	*right: 0;

	&::before {
		@include pseudo();
		@include sprites-icon-arrow-forward();

		left: 21px;
		top: 8px;
	}
}

.pika-select {
	display: inline-block;
	*display: inline;
}

.pika-table {
	width: 100%;
	border-collapse: collapse;
	border-spacing: 0;
	border: 0;

	th,
	td {
		width: 14.285714285714286%;
		padding: 2px 0;
		box-sizing: border-box;
	}

	th {
		color: $pd-th-color;
		font-family: $font-regular;
		font-size: 1.5rem;
		letter-spacing: 1px;
		line-height: (20/15);
		text-align: center;
		box-sizing: border-box;
	}

	abbr {
		border-bottom: none;
		cursor: help;
		text-decoration: none;
	}
}

.pika-button {
	cursor: pointer;
	display: block;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	outline: none;
	border: 0;
	margin: 0;
	width: 100%;
	padding: 7px 5px;
	color: $pd-day-color;
	font-family: $font-regular;
	font-size: 1.5rem;
	letter-spacing: .25px;
	line-height: (22/15);
	text-align: center;
	background: $pd-day-bg;

	.is-today & {
		color: $pd-day-today-color;
		font-family: $font-bold;
	}

	.is-inrange & {
		background: $color-light;
	}

	.is-selected & {
		color: $pd-day-selected-color;
		font-family: $font-bold;
		background: $pd-day-selected-bg;
		border-radius: 3px;

		@include hcm() {
			font-size: 2rem;
			line-height: (30/20);
			letter-spacing: .02rem;
		}
	}

	.is-disabled &,
	.is-outside-current-month & {
		color: $pd-day-disabled-color;
		opacity: .3;
	}

	.is-disabled & {
		pointer-events: none;
		cursor: default;
	}

	&:hover {
		color: $pd-day-hover-color;
		background: $pd-day-hover-bg;
		box-shadow: none;
		border-radius: 3px;
	}

	.is-selection-disabled {
		pointer-events: none;
		cursor: default;
	}
}

.pika-week {
	font-size: 11px;
	color: $pd-week-color;
}

.form__startdate {

	.pika-button {

		&:hover {
			border-radius: 22px 0 0 22px;
		}
	}

	.is-inrange .pika-button {

		&:hover {
			color: $pd-day-hover-color;
			background: $pd-day-hover-bg;
			box-shadow: none;
			border-radius: 22px 0 0 22px;
		}
	}

	.is-endrange .pika-button {
		color: $pd-day-selected-color;
		font-family: $font-bold;
		background: $pd-day-selected-bg;
		border-radius: 0 22px 22px 0;

		&:hover {
			color: $pd-day-selected-color;
			font-family: $font-bold;
			background: $pd-day-selected-bg;
			border-radius: 0 22px 22px 0;
		}
	}

	.is-startrange .pika-button {
		color: $pd-day-hover-color;
		background: $pd-day-hover-bg;
		box-shadow: none;
		border-radius: 22px 0 0 22px;
	}

	.is-selected .pika-button {
		color: $pd-day-selected-color;
		font-family: $font-bold;
		background: $pd-day-selected-bg;
		border-radius: 22px 0 0 22px;

		&:hover {
			color: $pd-day-hover-color;
			background: $pd-day-hover-bg;
			box-shadow: none;
			border-radius: 22px 0 0 22px;
		}
	}
}

.form__enddate {

	.pika-button {

		&:hover {
			border-radius: 0 22px 22px 0;
		}
	}

	.is-inrange .pika-button {

		&:hover {
			color: $pd-day-hover-color;
			background: $pd-day-hover-bg;
			box-shadow: none;
			border-radius: 0 22px 22px 0;
		}
	}

	.is-startrange .pika-button {
		color: $pd-day-selected-color;
		font-family: $font-bold;
		background: $pd-day-selected-bg;
		border-radius: 22px 0 0 22px;

		&:hover {
			color: $pd-day-selected-color;
			font-family: $font-bold;
			background: $pd-day-selected-bg;
			border-radius: 22px 0 0 22px;
		}
	}

	.is-endrange .pika-button {
		color: $pd-day-hover-color;
		background: $pd-day-hover-bg;
		box-shadow: none;
		border-radius: 0 22px 22px 0;
	}

	.is-selected .pika-button {
		color: $pd-day-selected-color;
		font-family: $font-bold;
		background: $pd-day-selected-bg;
		border-radius: 0 22px 22px 0;

		&:hover {
			color: $pd-day-hover-color;
			background: $pd-day-hover-bg;
			box-shadow: none;
			border-radius: 0 22px 22px 0;
		}
	}
}

Fields

<form class="c-form--default
	 is-form" action="" method="GET" data-css="c-form" data-js-module="form-ajax" data-js-options='[{&quot;submitOnChange&quot;:false}]'>
	<fieldset class="form__fieldset">
		<legend class="form__legend is-col-mobile-p-12">
			Info Link </legend>
		<div class="form__row is-grid-row">
			<div class="form__col is-grid-col is-col-tablet-p-12">
				<p>
					Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate voluptates quae numquam, molestias tempora reiciendis
					magnam rem, reprehenderit possimus cum, iusto repudiandae distinctio. Animi voluptas non voluptatem atque harum doloribus.
					Lorem ipsum, dolor sit amet consectetur adipisicing elit. Cupiditate, magnam!
					<a class="form__info-link" href="#">
						FAQ
					</a>
				</p>
			</div>
		</div>
	</fieldset>
	<fieldset class="form__fieldset">
		<legend class="form__legend is-col-mobile-p-12">
			Error Summary </legend>
		<div class="form__row is-grid-row">
			<div class="form__col is-grid-col is-col-tablet-p-6">
				<div class="form__error-summary-wrapper">
					<span class="form__error-summary-label">Bitte überprüfen Sie Ihre Angaben:</span>
					<ul>
						<li>
							<span>Bitte tragen Sie Ihre Email-Adresse ein.</span>
						</li>
					</ul>
				</div>
			</div>
		</div>
	</fieldset>
	<fieldset class="form__fieldset is-small">
		<legend class="form__legend is-col-mobile-p-12">
			Datepicker with 2 Input-Fields (Startdate and Enddate) - Shows Daterange if to Dates are selected and react on user input per keyboard. NEED Libraries (moment, pikaday) in FS (ft_html_head__master) for the sectiontemplate where the datepicker is integrated </legend>
		<div class="form__row is-grid-row">
			<div class="form__col is-grid-col is-col-tablet-p-8">
				<div class="form__datepicker" data-js-module="form-datepicker" data-js-item="js-form-datepicker-area">
					<div class="form__datepicker-inputarea">
						<div class="form__datepicker-item is-daterange">
							<div class="form__label-wrapper">
								<label for="fl_1_1" class="form__datepicker-label">
									Start
								</label>
							</div>
							<div class="form__datepicker-wrapper">
								<input id="fl_1_1" name="fl_1_1" data-js-item="js-form-datepicker" type="text" placeholder="Datum
								" class="form__datepicker-text is-inputchange" autocomplete="off" />
							</div>
						</div>
						<div class="form__datepicker-item is-daterange">
							<div class="form__label-wrapper">
								<label for="fl_1_2" class="form__datepicker-label">
									Ende
								</label>
							</div>
							<div class="form__datepicker-wrapper">
								<input id="fl_1_2" name="fl_1_2" data-js-item="js-form-datepicker" type="text" placeholder="Datum
								" class="form__datepicker-text is-inputchange" autocomplete="off" />
							</div>
						</div>
					</div>
					<div class="form__datepicker-container" data-js-item="js-form-datepicker-container"></div>
					<div class="form__datepicker-container" data-js-item="js-form-datepicker-container"></div>
				</div>
			</div>
		</div>
	</fieldset>
	<fieldset class="form__fieldset is-small">
		<legend class="form__legend is-col-mobile-p-12">
			Datepicker. NEED Libraries (moment, pikaday) in FS (ft_html_head__master) for the sectiontemplate where the datepicker is integrated </legend>
		<div class="form__row is-grid-row">
			<div class="form__col is-grid-col is-col-tablet-p-4">
				<div class="form__datepicker" data-js-module="form-datepicker" data-js-item="js-form-datepicker-area">
					<div class="form__datepicker-inputarea">
						<div class="form__datepicker-item">
							<div class="form__label-wrapper">
								<label for="fl_1_1" class="form__datepicker-label">
									Datum
								</label>
							</div>
							<div class="form__datepicker-wrapper">
								<input id="fl_1_1" name="fl_1_1" data-js-item="js-form-datepicker" type="text" placeholder="Datum
								" class="form__datepicker-text" autocomplete="off" />
							</div>
						</div>
					</div>
					<div class="form__datepicker-container" data-js-item="js-form-datepicker-container"></div>
				</div>
			</div>
		</div>
	</fieldset>
	<fieldset class="form__fieldset">
		<legend class="form__legend is-col-mobile-p-12">
			Dropdown Selectfield </legend>
		<div class="form__row is-grid-row">
			<div class="form__col is-grid-col is-col-tablet-p-12">
				<div class="form__select">
					<div class="form__label-wrapper">
						<label for="" class="form__select-label">
							Dropdown 100%
						</label>
					</div>
					<div class="form__select-wrapper">
						<!--
								data-placeholder="Bitte Wählen" 			 
								data-reset-text=" - "
								data-has-reset-option="true|false"
							-->
						<select id="select" data-placeholder="Bitte Wählen" data-js-module="form-dropdown" name="">
							<option value="1">Option name 1</option>
							<option value="2">Option name 2</option>
							<option value="3" disabled>Option name 3</option>
							<option value="4">Option name 4</option>
						</select>
					</div>
				</div>
			</div>
		</div>
	</fieldset>
	<fieldset class="form__fieldset">
		<legend class="form__legend is-col-mobile-p-12">
			Dropdown Selectfield Free (Barrierefrei) </legend>
		<div class="form__row is-grid-row">
			<div class="form__col is-grid-col is-col-tablet-p-12">
				<div class="form__select-free">
					<div class="form__label-wrapper">
						<label for="" class="form__select-free-label">
							Dropdown 100% barrierefrei
						</label>
					</div>
					<div class="form__select-free-wrapper">
						<select class="form__select-free-el" id="select-free">
							<option value="1" selected>Bitte wählen Sie...</option>
							<option value="1">Option name 1 with a little bi longer little more</option>
							<option value="2">Option name 2</option>
							<option value="3">Option name 3</option>
							<option value="4">Option name 4</option>
						</select>
					</div>
				</div>
			</div>
		</div>
	</fieldset>
	<fieldset class="form__fieldset">
		<legend class="form__legend is-col-mobile-p-12">
			Dropdown Multiselectfield </legend>
		<div class="form__row is-grid-row">
			<div class="form__col is-grid-col is-col-tablet-p-6">
				<div class="select-multiple">
					<div class="select-multiple__label-wrapper">
						<label for="" class="form__select-multiple__label">
							Dropdown 100%
						</label>
					</div>
					<div class="select-multiple__dropdown-wrapper select-multiple__dropdown--close">
						<div class="select-multiple__dropdown-headline">Select Multiple</div>
						<div class="select-multiple__overlay">
							<select id="select-multiple" class="select-multiple__filter-select" data-js-module="form-select-multiple" name="" multiple>
								<option id="fl_01_all" value="all" name="fl_01_all" data-js-type="select-multiple__all">Select All</option>
								<option id="fl_01_00" value="0" name="fl_01_00">Option name 0</option>
								<option id="fl_01_01" value="1" name="fl_01_01" selected="selected">Option name 1</option>
								<option id="fl_01_02" value="2" name="fl_01_02">Option name 2</option>
								<option id="fl_01_03" value="3" name="fl_01_03" disabled="disabled">Option name 3</option>
								<option id="fl_01_04" value="4" name="fl_01_04">Option name 4</option>
								<option id="fl_01_05" value="5" name="fl_01_05">Option name 5</option>
							</select>
							<div class="select-multiple__results"></div>
							<div class="select-multiple__apply">
								<a href="javascript:void(0);">Anwenden</a>
							</div>
						</div>
					</div>
				</div>
				<div class="select-multiple__checkbox-container select-multiple__checkbox-container--sample">
					<input type="checkbox" id="select-multiple__sample" class="select-multiple__checkbox">
					<label for="select-multiple__sample">
						<span class="select-multiple__label-inner">Lorem ipsum</span>
					</label>
				</div>
			</div>
			<div class="form__col is-grid-col is-col-tablet-p-6">
				<div class="select-multiple">
					<div class="select-multiple__label-wrapper">
						<label for="" class="form__select-multiple__label">
							Dropdown 100%
						</label>
					</div>
					<div class="select-multiple__dropdown-wrapper select-multiple__dropdown--close">
						<div class="select-multiple__dropdown-headline">Select Multiple</div>
						<div class="select-multiple__overlay">
							<select id="select-multiple-sec" class="select-multiple__filter-select" data-js-module="form-select-multiple" name="" multiple>
								<option id="fl_02_all" value="all" name="fl_02_all" data-js-type="select-multiple__all">Select All</option>
								<option id="fl_02_01" value="1" name="fl_02_01" selected="selected">Option name 1</option>
								<option id="fl_02_02" value="2" name="fl_02_02">Option name 2</option>
							</select>
							<div class="select-multiple__results"></div>
							<div class="select-multiple__apply">
								<a href="javascript:void(0);">Anwenden</a>
							</div>
						</div>
					</div>
				</div>
				<div class="select-multiple__checkbox-container select-multiple__checkbox-container--sample">
					<input type="checkbox" id="select-multiple__sample" class="select-multiple__checkbox">
					<label for="select-multiple__sample">
						<span class="select-multiple__label-inner">Lorem ipsum</span>
					</label>
				</div>
			</div>
		</div>
	</fieldset>
	<fieldset class="form__fieldset">
		<legend class="form__legend is-col-mobile-p-12">
			Nachrichten-Box </legend>
		<div class="form__row is-grid-row">
			<div class="form__col is-grid-col is-col-tablet-p-12">
				<div class="form__alert-box">
					<div class="form__alert-box-label">Nachrichten-Box</div>
					<div class="form_alert-box-text">
						<p>
							Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi nihil quam debitis magnam repellendus quidem qui fugit distinctio?
							Repellat expedita odit neque dolores! Assumenda impedit ad hic voluptate suscipit voluptatibus.
						</p>
					</div>
				</div>
			</div>
		</div>
	</fieldset>
	<fieldset class="form__fieldset is-small">
		<legend class="form__legend is-col-mobile-p-12">
			Radiobuttons </legend>
		<div class="form__row is-grid-row">
			<div class="form__col is-grid-col is-col-tablet-p-12">
				<div class="form__radio">
					<div class="form__radio-wrapper">
						<ul class="form__radio-list">
							<li class="form__radio-item">
								<input id="radio-01" name="radio" type="radio" value="radio-01" checked="checked" class="form__radio-input" />
								<label role="button" for="radio-01" class="form__radio-label">
									Radiobutton aktiv
								</label>
							</li>
							<li class="form__radio-item">
								<input id="radio-02" name="radio" type="radio" value="radio-02" class="form__radio-input" />
								<label role="button" for="radio-02" class="form__radio-label">
									Radiobutton passiv
								</label>
							</li>
							<li class="form__radio-item">
								<input id="radio-03" name="radio" type="radio" value="radio-03" class="form__radio-input" />
								<label role="button" for="radio-03" class="form__radio-label">
									Radiobutton passiv
								</label>
							</li>
						</ul>
					</div>
				</div>
			</div>
		</div>
	</fieldset>
	<fieldset class="form__fieldset is-small">
		<legend class="form__legend is-col-mobile-p-12">
			Checkboxen nebeneinander </legend>
		<div class="form__row is-grid-row">
			<div class="form__col is-grid-col is-col-tablet-p-4">
				<div class="form__checkbox">
					<div class="form__label-wrapper">
						<strong class="form__checkbox-legend"></strong>
					</div>
					<div class="form__checkbox-wrapper">
						<div class="form__checkbox-item is-wrapper">
							<input id="check-01" name="check-01" type="checkbox" checked="checked" class="form__checkbox-input" />
							<label for="check-01" class="form__checkbox-label is-label">
								Checkbox ausgewählt
							</label>
						</div>
					</div>
				</div>
			</div>
			<div class="form__col is-grid-col is-col-tablet-p-4">
				<div class="form__checkbox">
					<div class="form__label-wrapper">
						<strong class="form__checkbox-legend"></strong>
					</div>
					<div class="form__checkbox-wrapper">
						<div class="form__checkbox-item is-wrapper">
							<input id="check-02" name="check-02" type="checkbox" class="form__checkbox-input" />
							<label for="check-02" class="form__checkbox-label is-label">
								Checkbox leer
							</label>
						</div>
					</div>
				</div>
			</div>
		</div>
	</fieldset>
	<fieldset class="form__fieldset is-small">
		<legend class="form__legend is-col-mobile-p-12">
			Checkboxen untereinander </legend>
		<div class="form__row is-grid-row">
			<div class="form__col is-grid-col is-col-tablet-p-8">
				<div class="form__checkbox">
					<div class="form__label-wrapper">
						<strong class="form__checkbox-legend"></strong>
					</div>
					<div class="form__checkbox-wrapper">
						<div class="form__checkbox-item is-wrapper">
							<input id="check-03" name="check-03" type="checkbox" checked="checked" class="form__checkbox-input" />
							<label for="check-03" class="form__checkbox-label is-label">
								Ja, ich möchte den LMU-Newsletter erhalten, der mich monatlich über aktuelle Entwicklungen an der Universität informiert.
							</label>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="form__row is-grid-row">
			<div class="form__col is-grid-col is-col-tablet-p-12">
				<div class="form__checkbox">
					<div class="form__label-wrapper">
						<strong class="form__checkbox-legend"></strong>
					</div>
					<div class="form__checkbox-wrapper">
						<div class="form__checkbox-item is-wrapper">
							<input id="check-04" name="check-04" type="checkbox" class="form__checkbox-input" />
							<label for="check-04" class="form__checkbox-label is-label">
								Ja, ich stimme den Datenschutzregelungen zu.
							</label>
						</div>
					</div>
				</div>
			</div>
		</div>
	</fieldset>
	<fieldset class="form__fieldset is-small">
		<legend class="form__legend is-col-mobile-p-12">
			Different Input Types </legend>
		<div class="form__row is-grid-row">
			<div class="form__col is-grid-col is-col-tablet-p-12">
				<div class="form__input">
					<div class="form__label-wrapper">
						<label for="url" class="form__input-label">
							Label for email input error <abbr title="Required">*</abbr>
						</label>
					</div>
					<div class="form__input-wrapper">
						<input id="url" name="url" type="url" placeholder="http://www.veams.org/*" required="required" class="form__input-text has-error" />
					</div>
					<div class="form__error">
						<p>Bitte tragen Sie Ihre Email-Adresse ein.</p>
					</div>
				</div>
			</div>
			<div class="form__col is-grid-col is-col-tablet-p-6">
				<div class="form__input">
					<div class="form__label-wrapper">
						<label for="text1" class="form__input-label">
							Feld 50% <abbr title="Required">*</abbr>
						</label>
					</div>
					<div class="form__input-wrapper">
						<input id="text1" name="text1" type="text" required="required" class="form__input-text" />
					</div>
				</div>
			</div>
			<div class="form__col is-grid-col is-col-tablet-p-6">
				<div class="form__input">
					<div class="form__label-wrapper">
						<label for="password" class="form__input-label">
							Feld 50%, mit Aktiv-Umrandung <abbr title="Required">*</abbr>
						</label>
					</div>
					<div class="form__input-wrapper">
						<input id="password" name="password" type="text" required="required" class="form__input-text" />
					</div>
				</div>
			</div>
		</div>
	</fieldset>
	<fieldset class="form__fieldset is-small">
		<legend class="form__legend is-col-mobile-p-12">
			Input group - Button addons </legend>
		<div class="form__row is-grid-row">
			<div class="form__col is-grid-col is-col-tablet-p-12">
				<div class="form__input-group">
					<div class="form__label-wrapper">
						<label for="input-group" class="form__input-label">
							Label for Button addons
						</label>
					</div>
					<div class="form__input-group-wrapper">
						<input id="input-group" name="input-group" type="text" class="form__input-group-text" />
						<div class="form__input-group-button-wrapper">
							<button id="input-group-button" type="submit" class="form__input-group-button">
								<span class="form__input-group-button-icon"></span>
								<span class="form__input-group-button-text">Search</span>
							</button>
						</div>
					</div>
				</div>
			</div>
		</div>
	</fieldset>
	<fieldset class="form__fieldset">
		<legend class="form__legend is-col-mobile-p-12">
			File Input </legend>
		<div class="form__row is-grid-row">
			<div class="form__col is-grid-col is-col-tablet-p-6">
				<div class="form__input-file-wrapper">
					<div class="form__input-file-label">
						<label for="File"> Datei auswählen...
							<input class="form__input-file" type="file" id="File" size="60">
						</label>
					</div>
					<div class="form__input-selected-file-wrapper">
						<span class="form__input-selected-file-label">Angehängte Datein:</span>
						<ul>
							<li>
								<span>Dokumentname_loremipsum_20180326.pdf</span>
								<a>Anlage löschen</a>
							</li>
							<li>
								<span>Dokumentname_loremipsum_20180326.pdf</span>
								<a>Anlage löschen</a>
							</li>
						</ul>
					</div>
				</div>
			</div>
		</div>
	</fieldset>
	<fieldset class="form__fieldset">
		<legend class="form__legend is-col-mobile-p-12">
			Submit </legend>
		<div class="form__row is-grid-row">
			<div class="form__col is-grid-col is-col-tablet-p-4">
				<button type="submit" class="form__submit" disabled>
					<span class="from_submit-arrow"></span>
					<span class="form__submit-text">Absenden</span>
				</button></div>
		</div>
	</fieldset>
	<fieldset class="form__fieldset">
		<legend class="form__legend is-col-mobile-p-12">
			Submit Version 2 (CI konform/Textlängenunabhängig) </legend>
		<div class="form__row is-grid-row">
			<div class="form__col is-grid-col is-col-tablet-p-4">
				<button type="submit" class="form__submit-ci" disabled>
					<span class="form__submit-ci-text">Absenden mal länger zum Test</span>
				</button>
			</div>
		</div>
	</fieldset>
</form>