﻿
#cont-816 {
	align-items: var(--col-align-items, inherit);
	padding-top: var(--section-padding-top);
	padding-bottom: var(--section-padding-bottom);
}
#cont-816 .contact-form form {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-areas: "Anrede Anrede" "Vorname Nachname" "E_Mail Telefon" "Nachricht Nachricht" "datenschutz datenschutz" "agb agb" "Senden Senden";
	gap: 1.5rem 2rem;
}
#cont-816 .contact-form .form-field {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	margin-bottom: 0;
}
#cont-816 .contact-form .form-field label:not(.input-radio):not(.input-checkbox) {
	display: block;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: var(--hicolor);
}
#cont-816 .contact-form .form-field input , #cont-816 .contact-form .form-field .textarea , #cont-816 .contact-form .form-field select {
	background: var(--grau, #f0f0f0);
	border: 1px solid transparent;
	border-bottom: 2px solid var(--grau, #ddd);
	border-radius: 3px;
	padding: 0.75rem 1rem;
	font-size: 16px;
	font-family: inherit;
	color: var(--color);
	width: 100%;
	box-sizing: border-box;
	transition: border-color 0.2s;
}
#cont-816 .contact-form .form-field select option {
	padding: revert;
}
#cont-816 .contact-form .form-field input:focus , #cont-816 .contact-form .form-field .textarea:focus , #cont-816 .contact-form .form-field select:focus {
	border-bottom-color: var(--hicolor);
	outline: none;
}
#cont-816 .contact-form .form-field .textarea {
	min-height: 140px;
	resize: vertical;
}
#cont-816 .contact-form .form-field textarea {
	height: 100%;
	outline: none;
}
#cont-816 .contact-form .form-field button {
	background: var(--hicolor);
	color: var(--bgcolor, #fff);
	border: none;
	border-radius: 3px;
	padding: 0.85rem 2.5rem;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	cursor: pointer;
	min-width: 160px;
	box-sizing: border-box;
	transition: opacity 0.2s;
}
#cont-816 .contact-form .form-field button:hover {
	opacity: 0.8;
}
#cont-816 .contact-form .form-field.input-submit {
	align-items: flex-start;
}
#cont-816 .contact-form .form-field.input-submit .label {
	display: none;
}
#cont-816 .contact-form .form-field input[type='checkbox'] , #cont-816 .contact-form .form-field input[type='radio'] {
	position: fixed;
	width: 1px;
	left: -10px;
}
#cont-816 .contact-form .form-field [type='checkbox'] + label , #cont-816 .contact-form .form-field [type='radio'] + label {
	width: auto;
}
#cont-816 .contact-form .form-field input[type='checkbox'] + label::before , #cont-816 .contact-form .form-field input[type='radio'] + label::before {
	content: "\f096";
	display: inline-block;
	font-size: 20px;
	font-family: FontAwesome;
	line-height: 1;
}
#cont-816 .contact-form .form-field input[type='checkbox']:checked + label::before {
	content: "\f046";
	color: var(--hicolor);
}
#cont-816 .contact-form .form-field input[type='radio']:checked + label::before {
	content: "\f192";
	color: var(--hicolor);
}
#cont-816 .contact-form .input-checkbox label {
	display: flex !important;
	flex-direction: row;
	align-items: center;
	gap: 0.5rem;
	cursor: pointer;
}
#cont-816 .contact-form .form-field input[type='file']::file-selector-button {
	display: none;
}
#cont-816 .contact-form .form-field input[type='file']::before {
	content: var(--file-symbol, "");
	font-family: FontAwesome;
	font-size: 200%;
	padding-right: 10px;
}
@media (max-width:800px) /* responsive */ {
	#cont-816 .contact-form form {
		grid-template-columns: 1fr;
		grid-template-areas: "Anrede" "Vorname" "Nachname" "E_Mail" "Telefon" "Nachricht" "datenschutz" "agb" "Senden";
	}
}
