:root {
	/* Layout */
	--text-input-margin-top: 0px;
	--text-input-margin-bottom: 10px;
	--text-input-margin-left: 0px;
	--text-input-margin-right: 0px;

	/* Text Input */
	--text-input-border-color: rgba(50, 50, 50, .2);
	--text-input-border-color-focus: #428bca;
	--text-input-background-color: transparent;
	--text-input-background-color-focus: rgba(0, 0, 0, 0.1);
	--text-input-color: rgb(50, 50, 50);
	--text-input-font-size: 1rem;
	--text-input-color-focus: var(--text-input-color);
	--text-input-font-size-focus: var(--text-input-font-size);

	/* Acceptance Input (Checkbox) */
	--acceptance-input-border: 2px solid rgba(50, 50, 50, .6);
	--acceptance-input-checked-background-color: rgb(66, 139, 202);
	--acceptance-input-checked-border-color: rgb(66, 139, 202);
	--acceptance-input-hover-background-color: rgb(66, 139, 202, 0.1);
	--acceptance-input-disabled-background-color: rgba(50, 50, 50, .3);

	/* Checkmark des Acceptance Inputs (Checkbox) */
	--acceptance-input-checkmark-content: "\f00c";
	--acceptance-input-checkmark-font-family: awb-icons;
	--acceptance-input-checkmark-font-color: white;
	--acceptance-input-checkmark-font-size: 10px;
	--acceptance-input-checkmark-font-weight: 400;

	/* Material Design Labels (Text-Input / Text Area) */
	--label-md-transition: transform 155ms cubic-bezier(0.4, 0, 0.2, 1), color 155ms cubic-bezier(0.4, 0, 0.2, 1), top 500ms;
	--label-md-color: rgba(15, 62, 96, 0.9);
	--label-md-font-weight: 300;
	--label-md-font-size: 20px;
	--label-md-color-focus: rgb(8, 47, 74);
	--label-md-font-weight-focus: 400;
	--label-md-font-size-focus: 21px;
	--label-md-offset-left: -13px;
	--label-md-offset-left-textarea: 0px;
	--label-md-offset-left-focus: -13px;
	--label-md-transform: translateY(150%) scale(0.75);
	--label-md-transform-focus: translateY(15%) scale(0.75);

	/* /* Material Design Labels - Pflichtfeld Markierung */
	--label-md-required-content: " *";
	--label-md-required-font-family: inherit;
	--label-md-required-font-style: normal;
	--label-md-required-font-weight: bold;
	--label-md-required-font-size: 18px;

	/* Label Required Focus Color */
	--label-md-required-color-focus: rgb(176, 0, 32);

	/* Radio Input */
	--radio-input-border: 2px solid white;
	--radio-input-background-color: white;
	--radio-input-box-shadow-color: rgb(66, 139, 202);
	--radio-input-checked-color: rgb(66, 139, 202);
	--radio-input-hover-background-color: rgba(150, 150, 150, 0.2);

	/* Submit Button */
	--submit-button-background-color: rgb(66, 139, 202);
	--submit-button-color: white;
	--submit-button-background-color-hover: rgb(66, 139, 202, 0.9);
	--submit-button-color-hover: white;

	/* Not-Valid Info */
	--validation-md-not-valid-tip-font-size: 18px;
	--validation-md-not-valid-tip-font-weight: 400;
	--validation-md-not-valid-tip-color: #dc3232;
	--validation-md-not-valid-border-color: rgb(176, 0, 32);
}


.wpcf7-text,
.wpcf7-textarea,
.wpcf7-submit {
	transition-delay: 0s;
	transition-duration: 0.18s;
	transition-property: all;
	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.wpcf7-text {
	background: var(--text-input-background-color) !important;
	border-left: none !important;
	border-right: none !important;
	border-top: none !important;
	outline: none !important;
	border-radius: 0 !important;
	border-color: var(--text-input-border-color) !important;
	color: var(--text-input-color) !important;
	font-size: var(--text-input-font-size) !important;
}

.wpcf7-textarea {
	background: var(--text-input-background-color) !important;
	outline: none !important;
	border-radius: 8px !important;
	border-color: var(--text-input-border-color) !important;

	color: var(--text-input-color) !important;
	font-size: var(--text-input-font-size) !important;
}

.wpcf7-text:focus {
	border-color: var(--text-input-border-color-focus) !important;
	border-bottom: 2px solid var(--text-input-border-color-focus) !important;
	background: var(--text-input-background-color-focus) !important;

	color: var(--text-input-color-focus) !important;
	font-size: var(--text-input-font-size-focus) !important;
}

.wpcf7-textarea:focus {
	border-color: var(--text-input-border-color-focus) !important;
	border-left: 2px solid var(--text-input-border-color-focus) !important;
	border-right: 2px solid var(--text-input-border-color-focus) !important;
	border-top: 2px solid var(--text-input-border-color-focus) !important;
	border-bottom: 2px solid var(--text-input-border-color-focus) !important;

	color: var(--text-input-color-focus) !important;
	font-size: var(--text-input-font-size-focus) !important;
}

.wpcf7-radio input {
	height: 15px;
	width: 15px;
	margin-bottom: 0.45rem;

	appearance: none;
	-webkit-appearance: none;

	border: var(--radio-input-border);
	background-color: var(--radio-input-background-color);
	border-radius: 50%;
	box-shadow: 0 0 0 1px var(--radio-input-box-shadow-color);
}

.wpcf7-radio input:hover {
	border-width: 0;
	background: var(--radio-input-hover-background-color);
}

.wpcf7-radio input:checked {
	box-shadow: 0 0 0 2px var(--radio-input-checked-color);
	background-color: var(--radio-input-checked-color);
	border-width: 0.2rem;
}

.wpcf7-acceptance input {
	-moz-appearance: none;
	-webkit-appearance: none;
	-o-appearance: none;

	width: 1.2rem !important;
	height: 1.2rem !important;
	border: var(--acceptance-input-border) !important;
	margin-bottom: 0.35rem;
}

.wpcf7-acceptance input:checked {
	background: var(--acceptance-input-checked-background-color);
	border-color: var(--acceptance-input-checked-border-color) !important;
	place-content: center;
	text-align: center;
}

.wpcf7-acceptance input:hover:not(:checked) {
	background: var(--acceptance-input-hover-background-color);
}

.wpcf7-acceptance input:disabled {
	border-color: var(--acceptance-input-disabled-background-color) !important;
}

.wpcf7-acceptance input:checked::after {
	font-family: var(--acceptance-input-checkmark-font-family);
	content: var(--acceptance-input-checkmark-content);
	color: var(--acceptance-input-checkmark-font-color);
	font-size: var(--acceptance-input-checkmark-font-size);
	font-weight: var(--acceptance-input-checkmark-font-weight);
}

.wpcf7-list-item.first,
.wpcf7-list-item:only-child {
	margin-left: 0px;
}

.wpcf7-submit {
	background-color: var(--submit-button-background-color) !important;
	color: var(--submit-button-color);
}

.wpcf7-submit:hover {
	background-color: var(--submit-button-background-color-hover) !important;
	color: var(--submit-button-color-hover) !important;
}

.wpcf7-not-valid-tip {
	font-size: var(--validation-md-not-valid-tip-font-size);
	font-weight: var(--validation-md-not-valid-tip-font-weight);
	color: var(--validation-md-not-valid-tip-color);
}

/* Material Design Label - Kein Focus */
div p:has(input[type="text"]) label,
div p:has(input[type="email"]) label,
div p:has(input[type="tel"]) label,
div p:has(textarea) label {
	display: block;
	position: absolute;
	transform: var(--label-md-transform);
	transition: var(--label-md-transition);
	color: var(--label-md-color);
	font-weight: var(--label-md-font-weight);
	font-size: var(--label-md-font-size);
	/* Text-Length Fix */
	width: 20rem;
	left: var(--label-md-offset-left);
}

/* Material Design Label - Kein Focus - TEXTAREA */
div p:has(textarea) label {
	transform: translateY(120%) scale(0.75);
	/* Text-Length Fix */
	width: 20rem;
	left: var(--label-md-offset-left-textarea);
}

/* Material Design Label - Focus */
div p:has(input[type="text"]:focus) label,
div p:has(input[type="email"]:focus) label,
div p:has(input[type="tel"]:focus) label,
div p:has(textarea:focus) label {
	transform: var(--label-md-transform-focus);
	color: var(--label-md-color-focus);
	font-weight: var(--label-md-font-weight-focus);
	font-size: var(--label-md-font-size-focus);
	left: var(--label-md-offset-left-focus);
}

/* Material Design Label - Positionieren wenn nicht Leer*/
/* Aktuell wird die JS Methode verwendet! */
/*
div p:has(input[type="text"]:not(:placeholder-shown) ) label, div p:has(input[type="email"]:not(:placeholder-shown) ) label, div p:has(input[type="tel"]:not(:placeholder-shown) ) label,  div p:has(textarea:not(:placeholder-shown) ) label {
	transform: var(--label-md-transform-focus);
	color: var(--label-md-color-focus);
	font-weight: var(--label-md-font-weight-focus);
	font-size: var(--label-md-font-size-focus);
	left: var(--label-md-offset-left-focus);
}
*/

/* Material Design Label - JS Valid  */
div p:has(input[type="text"].not-empty) label,
div p:has(input[type="email"].not-empty) label,
div p:has(input[type="tel"].not-empty) label,
div p:has(textarea.not-empty) label {
	transform: var(--label-md-transform-focus);
	color: var(--label-md-color-focus);
	font-weight: var(--label-md-font-weight-focus);
	font-size: var(--label-md-font-size-focus);
	left: var(--label-md-offset-left-focus);
}

/* Material Design Label - Required Label  */
div p:has(input[aria-required="true"]) label:after,
div p:has(textarea[aria-required="true"]) label:after {
	content: var(--label-md-required-content);
	font-family: var(--label-md-required-font-family);
	font-style: var(--label-md-required-font-style);
	font-weight: var(--label-md-required-font-weight);
	font-size: var(--label-md-required-font-size);
}

/* Material Design Label - Required Label Focus  */
div p:has(input[aria-required="true"]:focus) label:after,
div p:has(textarea[aria-required="true"]:focus) label:after {
	transform: var(--label-md-transform-focus);
	color: var(--label-md-required-color-focus);
	font-weight: var(--label-md-font-weight-focus);
	font-size: var(--label-md-font-size-focus);
	left: var(--label-md-offset-left-focus);
}

/* CF7 Feld Margin */
div p:has(.wpcf7-text),
div p:has(.wpcf7-textarea) {
	margin-top: var(--text-input-margin-top);
	margin-bottom: var(--text-input-margin-bottom);
	margin-left: var(--text-input-margin-left);
	margin-right: var(--text-input-margin-right);
}

/* CF7 Validation - Border-Color */
.wpcf7-not-valid.wpcf7-text,
.wpcf7-not-valid.wpcf7-textarea {
	border-color: var(--validation-md-not-valid-border-color) !important;
}