@charset "utf-8";
/* FORM-CSS für www.speisendialog.de */

/* FARBEN
#667769 / rgba(102,119,105,1) - green dark
#a3afa6 / rgba(163,175,166,1) - green
#c2c9c3 / rgba(194,201,195,1) - green middle
#f0f2f0 / rgba(240,240,240,1) - green bright
#3f474b / rgba(63,71,75,1) - grey dark
#717a7f / rgba(113,122,127,1) - grey
#abb2b6 / rgba(171,178,182,1) - grey middle
#dbdbdb / rgba(219,219,219,1) - grey bright
#e30613 / rgba(227,6,19,1) - red
*/

/* ################################################ FORMULARE ################################################ */
textarea, input, select, select option	{ font-family: "Brandon Grotesque Regular"; -webkit-appearance: none; }
input[type=text], input[type=password], input[type=email], input[type=date], textarea, select 
							{ border: 2px solid #fff; background-color: #fff; color: #3f474b; font-size: 1.1em; padding: 0.5em 0.7em; line-height: 1; -webkit-appearance: none; transition: all 0.3s ease-in-out; }	
select 						{ padding: 0.6em 0.7em; color: #3f474b; }
.select_wrap				{ position: relative; display: inline-block; width: 100%; }
.select_wrap::after			{ position: absolute; top: 0; right: 0.3em; content: "\f078"; font-family: 'Font Awesome 6 Free'; font-size: 2em; font-weight: 900; pointer-events: none; color: #667769; }	
.select_wrap select 		{ padding-right: 2em; }

input[type=text]:focus, input[type=password]:focus, input[type=email]:focus, input[type=date]:focus, textarea:focus, select:focus { border: 2px solid #667769; outline: none !important; }

input[type=submit], .submit	{ position: relative; display: inline-block; max-width: 700px; margin: 0.6em 0 0 0; line-height: 1;	cursor: pointer; white-space: normal; -webkit-appearance: none; transition: all 0.3s ease-in-out; }
input[type=submit]:hover, .submit:hover	{ color: #fff; cursor: pointer; text-decoration: none; }

/* checkboxes, radios */
input[type="radio"], input[type="checkbox"] { display: none !important; }
label.checkbox 				{ position: relative; float: left; padding: 0.3em 0.2em 0.3em 2.5em; margin: 0; cursor: pointer; }
label.checkbox::before 		{ position: absolute; top: 0.2em; left: 0; content: "\f0c8"; font-family: 'Font Awesome 6 Free'; font-weight: 400; color: #667769; font-size: 2em; line-height: 1; transition: all 0.3s ease-in-out; }
input[type="radio"]:checked + label:before, input[type="checkbox"]:checked + label:before 	{ content: "\f14a"; color: #667769; }

div.form_distance			{ clear: both; width: 100%; height: 0.5em; }
div.form_distance_thin		{ clear: both; width: 100%; height: 0.2em; }

.input_1, .input_2, .input_3 { display: inline-block; margin-bottom: 1em; }
.input_1					{ width: 100%; }
.input_2					{ width: 30%; }
.input_3					{ width: 69%; margin-left: 1%; }
.select_1, .select_2		{ display: inline-block; margin-bottom: 1em; }
.select_1					{ width: 100%; }
.textarea_1					{ display: inline-block; width: 100%; height: 17em; }
.textarea_2					{ display: inline-block; width: 100%; height: 17em; }

.form_box					{ }
.form_box > h3				{ margin-top: 0.8em; color: #667769; }
.form_box > h3:first-child	{ margin-top: 0; }

.form_box_fields			{ }
	.form_box_fields a			{ color: #3f474b; }
	.form_box_fields a:hover	{ color: #667769; }

.form_notice				{ font-size: 0.9em; background-color: #fff; }
.submit_notice				{ font-size: 0.9em; }

.fcheck						{ position: absolute; margin-left: -999999px; }

/* input type file */
.input_file_wrap			{ display: inline-block; width: 100%; margin: 10px 0 10px 0; background: #fff; box-shadow: 2px 2px 4px #e6e6e6; }
body:not(.apple) .input_file_wrap			{ width: 100%; }
	body:not(.apple) .input_file_wrap > input	{ width: auto; font-size: 0.8em; font-family: "Verdana"; box-shadow: none; }
	input[type=file]::-webkit-file-selector-button, input[type=file]::file-selector-button { color: #fff; margin-right: 2em; padding: 0.4em 0.4em; background: #828282; border: 1px solid #828282; cursor: pointer; -webkit-appearance: none; }
	input[type=file]::-webkit-file-selector-button:hover, input[type=file]::file-selector-button:hover { background: #828282; border: 1px solid #828282; }
@media (min-width: 400px) {
	body:not(.apple) .input_file_wrap > input	{ font-size: 0.9em; }
}
@media (min-width: 500px) {
	body:not(.apple) .input_file_wrap > input	{ font-size: 1em; }
	input[type=file]::-webkit-file-selector-button, input[type=file]::file-selector-button { padding: 0.4em 1em; }
}
body.apple .input_file_wrap		{ font-size: 0.7em; padding: 0 !important; }
	body.apple .input_file_wrap > input		{ width: 100%; }

/* Fehlermeldung */
textarea.error, input.error, select.error { border-color: #e30613; }
.form_box_fields.error label, .form_box_fields.error label a, .form_box_fields.error label::before { color: #e30613; }

#error_notice 	{ position: relative; margin-bottom: 2em; padding-left: 3em; }
#error_notice::before 	{ position: absolute; top: -6px; left: 0; content: "\f12a"; font-family: 'Font Awesome 6 Free'; font-weight: 400; color: #e30613; font-size: 6em; line-height: 1; }
	#error_notice .error_title { display: block; margin-bottom: 0.2em; font-size: 1.2em; font-weight: 600; color: #e30613; }
	#error_notice .error_text ul { margin-top: 0.4em; }
		#error_notice .error_text ul > li { position: relative; margin: 0.2em 0; padding: 0.1em 0 0 30px; color: inherit; }
            #error_notice .error_text ul > li::before  { position: absolute; top: 0.1em; left: -1px; font-size: 1.2em; content:"\f061"; color: #e30613; font-family: 'Font Awesome 6 Free'; font-weight: 900; line-height: 1; }
@media (min-width: 690px) {	
#error_notice 	{ padding-left: 6em; }
#error_notice::before 	{ font-size: 8em; }
}