:root {
--mainFormColor:var(--mainFontColor);
--privacyFontSize:calc(var(--mainFontSize) * 0.9);
--privacyLineHeight:calc(var(--mainLineHeight) * 0.9);
--alertFontSize:calc(var(--mainFontSize) * 0.9);
--alertLineHeight:calc(var(--mainLineHeight) * 0.9);
}
form, form label, form label a, form input, form select, form button, form textarea {
font-family:var(--mainFontFamily);
font-weight:var(--mainFontWeight);
font-style:var(--mainFontStyle);
font-size:var(--mainFontSize);
line-height:var(--mainLineHeight);
color:var(--mainFormColor);
}
form .formRow_privacy label, form .formRow_privacy label a {
font-family:var(--mainFontFamily);
font-weight:var(--mainFontWeight);
font-style:var(--mainFontStyle);
font-size:var(--privacyFontSize);
line-height:var(--privacyLineHeight);
color:var(--mainFontColor);
}
form.formCheck {
position:relative;
opacity:0.3;
cursor: wait;
}
form.formCheck:after {
content:'';
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
z-index:9;
background-image:url(/typo3conf/ext/formprocessing/Resources/Public/Images/wartesymbol-schwarz.svg);
background-position:center;
background-repeat:no-repeat;
pointer-events:none;
}
.requestForm {
position:relative;
width:100%;
display:flex;
flex-wrap:wrap;
}
.formRow {
position:relative;
width:100%;
display:flex;
flex-wrap:wrap;
justify-content:space-between;
z-index:1;
}
.formField {
position:relative;
margin-bottom:var(--distanceS);
}
.formRow:last-Child .formField {
position:relative;
margin-bottom:0;
}
.formField_full {
width:100%;
}
.formField_half {
width:calc((100% - var(--gridDistanceWidth)) / 2);
}
.formField_wrapper {
position:relative;
width:100%;
}
.formField_styled .formField_wrapper {
border-top:1px solid var(--mainFormColor);
border-bottom:1px solid var(--mainFormColor);
min-height:clamp(60px, calc(60px * var(--viewportWidthReferenceFactor)), calc(60px * var(--maxScalingFactor)));
}
.isMissing .formField_wrapper {
border:1px solid red;
width:calc(100% - 2px);
}
.formField_styled label {
position:absolute;
top:50%;
-webkit-transform:translateY(-50%);
transform:translateY(-50%);
left:var(--gridDistanceWidth);
transform-origin:left top;
}
.formField_styled label, .formField_styled label * {
-webkit-transition:all 200ms ease;
transition:all 200ms ease;
white-space:nowrap;
display:flex;
align-items:center;
}
.formRow_border .formField_styled label {
left:0;
}
.inFocus label, .hasValue label {
top:calc(var(--mainFontSize) * 0.4);
-webkit-transform:none;
-moz-transform:none;
-ms-transform:none;
-o-transform:none;
transform:none;
}
.inFocus label, .inFocus label *, .hasValue label, .hasValue label *, .isFile label, .isFile label * {
font-size:calc(var(--mainFontSize) * 0.6)!important;
line-height:calc(var(--mainLineHeight) * 0.6)!important;
}
.formField_styled input[type="text"], .formField_styled input[type="email"] {
position:absolute;
bottom:0;
left:0;
-webkit-appearance:none;
appearance:none;
border:0;
background:none;
height:60px;
height:clamp(40px, calc(40px * var(--viewportWidthReferenceFactor)), calc(40px * var(--maxScalingFactor)));
width:calc(100% - var(--gridDistanceWidth) - var(--gridDistanceWidth));
padding-left:var(--gridDistanceWidth);
padding-right:var(--gridDistanceWidth);
}
.formField_styled input[type="file"] {
position:absolute;
bottom:0;
left:0;
-webkit-appearance:none;
appearance:none;
border:0;
background:none;
height:45px;
height:clamp(33px, calc(33px * var(--viewportWidthReferenceFactor)), calc(33px * var(--maxScalingFactor)));
width:calc(100% - var(--gridDistanceWidth) - var(--gridDistanceWidth));
padding-left:var(--gridDistanceWidth);
padding-right:var(--gridDistanceWidth);
}
.inFocus label, .hasValue label, .isFile label {
top:calc(var(--mainFontSize) * 0.4);
-webkit-transform:none;
-moz-transform:none;
-ms-transform:none;
-o-transform:none;
transform:none;
}
.formField_styled select {
position:absolute;
bottom:0;
left:0;
-webkit-appearance:none;
appearance:none;
border:0;
border-radius:0;
background:none;
height:60px;
height:clamp(40px, calc(40px * var(--viewportWidthReferenceFactor)), calc(40px * var(--maxScalingFactor)));
width:calc(100% - var(--gridDistanceWidth) - var(--gridDistanceWidth));
padding-left:var(--gridDistanceWidth);
padding-right:var(--gridDistanceWidth);
}
.formField_styled textarea {
border:0;
height:calc(clamp(40px, calc(40px * var(--viewportWidthReferenceFactor)), calc(40px * var(--maxScalingFactor))) - var(--mainLineHeight));
padding-top:var(--mainLineHeight);
width:calc(100% - var(--gridDistanceWidth) - var(--gridDistanceWidth));
margin-left:var(--gridDistanceWidth);
background:none;
resize:none;
}
.checkboxHolder input {
position:absolute;
top:calc((var(--privacyLineHeight) - var(--privacyFontSize)) / 2);
left:0;
height:var(--privacyFontSize);
width:var(--privacyFontSize);
opacity:0;
cursor:pointer;
}
.checkboxHolder .checkmark {
position:absolute;
top:0;
left:0;
height:calc(var(--privacyLineHeight) - 2px);
width:calc(var(--privacyLineHeight) - 2px);
border:1px solid var(--mainFormColor);
}
.checkboxHolder .checkmark:after {
content:"";
position:absolute;
display:none;
}
.checkboxHolder input:checked ~ .checkmark:after {
display:block;
}
.isDesktop .checkboxHolder:hover input ~ .checkmark {
background-color:var(--mainFormColor);
}
.checkboxHolder input:checked ~ .checkmark {
background-color:var(--mainFormColor);
}
.checkboxHolder .checkmark:after {
left:50%;
top:50%;
-webkit-transform:translateX(-50%) translateY(-50%) rotate(45deg);
transform:translateX(-50%) translateY(-50%) rotate(45deg);
width:clamp(4px, calc(6px * var(--viewportWidthReferenceFactor)), calc(6px * var(--maxScalingFactor)));
height:clamp(8px, calc(12px * var(--viewportWidthReferenceFactor)), calc(12px * var(--maxScalingFactor)));
border:solid #ffffff;
border-width:0 3px 3px 0;
margin-top:-2px;
}
.checkboxHolder {
display:block;
position:relative;
padding-left:calc(var(--privacyLineHeight) * 2);
cursor:pointer;
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
}
.formRow_security {
position:absolute;
top:0;
left:0;
width:0;
height:0;
opacity:0;
visibility:hidden;
pointer-events:none;
}
.formRow_security * {
opacity:0!important;
visibility:hidden!important;
pointer-events:none!important;
}
.formField_submit button {
-webkit-appearance:none;
appearance:none;
border:0;
cursor:pointer;
background:none;
}
.formField_select .formField_wrapper:after {
content:'';
position:absolute;
top:0;
right:var(--gridDistanceWidth);
bottom:0;
width:clamp(10px, calc(10px * var(--viewportWidthReferenceFactor)), calc(10px * var(--maxScalingFactor)));
background-image:url(/typo3conf/ext/formprocessing/Resources/Public/Images/formSelect.svg);
background-size:contain;
background-position:center;
background-repeat:no-repeat;
z-index:2;
}
label p + p {
margin-top:0;
}
.checkmarkKlicker + * {
margin-top:0!important;
}
.formField_alert {
padding-top:var(--distanceXXS);
display:none;
font-size:var(--alertFontSize);
line-height:var(--alertLineHeight);
color:red;
padding-left:var(--gridDistanceWidth);
padding-right:var(--gridDistanceWidth);
padding-bottom:var(--distanceXXS);
}
.formRow_submit {
margin-top:var(--distanceM)!important;
}
.formField_center {
display:flex;
justify-content:center;
}
.formField_resultItem {
cursor:pointer;
}
.formField_result {
position:absolute;
top:100%;
left:0;
width:100%;
display:none;
background-color:#ffffff;
}
.formField_resultWrapper {
font-size:var(--alertFontSize);
line-height:var(--alertLineHeight);
color:red;
padding-left:var(--gridDistanceWidth);
padding-right:var(--gridDistanceWidth);
padding-bottom:var(--distanceXXS);
text-align:center;
border:1px solid #000000;
}
.formField_resultItem {
padding-top:var(--distanceXXS);
}
.formRow_search {
z-index:2;
}
.formField_dropdown {
min-height:auto;
padding-top:var(--distanceXS);
padding-bottom:var(--distanceXS);
padding-left:var(--gridDistanceWidth);
padding-right:var(--gridDistanceWidth);
background-color:#ffffff;
width:calc(100% - var(--gridDistanceWidth) - var(--gridDistanceWidth));
	border-top: 0px solid var(--mainFormColor)!important;
	display:none;
	min-height:auto!important;
}
.formField_dropdown:after {
display:none;
}
.formField_dropdown label {
position:relative;
	top: 0;
	-webkit-transform:none;
	transform:none;
	left:0;
	font-size: var(--mainFontSize)!important;
	line-height: var(--mainLineHeight)!important;
}
.formField_dropdown label * {
	font-size: var(--mainFontSize)!important;
	line-height: var(--mainLineHeight)!important;
}
.formField_dropdown label + label {
margin-top:var(--distanceXS);
}
.formField_trigger {
position:absolute!important;
top:0!important;
left:0!important;
width:100%!important;
height:100%!important;
z-index:9!important;
cursor:pointer!important;
}
@media screen and (max-width:767px) {
.formField_half {
width:100%;
}
}