/* ############################################################
	FORMULAR
############################################################ */

/* Resets */
.mdl140-form input:focus, .mdl140-form input:active,
.mdl140-form button.send-button:focus, .mdl140-form button.send-button:active {
	outline: none;
}
/*.mdl140-form .form-field > p:last-of-type {*/
.mdl140-form .form-field > p:last-child {
	margin-bottom: 0;
}


/* Formular-Raster */
.mdl140-form .form-group {
	position: relative;
	display: grid;
	/* grid-template-columns: 1fr; */
	grid-template-columns: minmax(0, 1fr);
	gap: 20px;
	width: 100%;
}
	.mdl140-form .form-field {
		position: relative;
		scroll-margin-top: 100px;
		min-width: 0;
	}
	.mdl140-form .form-field.full {
		grid-column: 1 / -1;
	}
@media screen and (min-width: 768px) {
	.mdl140-form .form-group {
		/* grid-template-columns: 1fr 1fr; */
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 30px var(--gap);
	}
}
@media screen and (min-width: 1200px) {
	.mdl140-form .form-group {
		width: calc((8 * var(--col-width-1)) + (7 * var(--gap)));
	}
}


/* Label (Wenn sichtbar) */
.mdl140-form label:not(.visuallyhidden) {
	display: block;
	margin-top: 12px;
	margin-bottom: 8px;
	font-weight: 700;
}
@media screen and (min-width: 1200px) {
	.mdl140-form label:not(.visuallyhidden) {
		margin-top: 15px;
		margin-bottom: 10px;
	}
}


/* Feld: Text/Textarea */
.mdl140-form input {
	position: relative;
	width: 100%;
	height: 60px;
	padding: 17px 20px 15px;
	border: none;
	border-radius: 10px;
	background-color: var(--main-color-white);
	font-family: "Gilroy";
	font-style: italic;
	font-weight: 700;
	font-size: 1rem; /* 16px */
	line-height: 1.5;
	letter-spacing: 0.32px;
	color: var(--main-color-1);
	-webkit-appearance: none;
	appearance: none;
}
.mdl140-form input::placeholder /* Standard (Chrome, Edge, Safari, Firefox modern) */ {
	color: var(--ph-color);
	opacity: 1; /* wichtig für Firefox */
}
.mdl140-form input::-webkit-input-placeholder /* ältere WebKit/Blink-Varianten (Safari/Chrome) */ {
	color: var(--ph-color);
	opacity: 1; /* wichtig für Firefox */
}
.mdl140-form input::-moz-placeholder /* Firefox (ältere Varianten) */ {
	color: var(--ph-color);
	opacity: 1; /* wichtig für Firefox */
}


/* Autofill: Browser-Hintergrundfarbe überschreiben (Chrome, Edge, Safari) */
.mdl140-form input:-webkit-autofill,
.mdl140-form input:-webkit-autofill:hover,
.mdl140-form input:-webkit-autofill:focus,
.mdl140-form input:-webkit-autofill:active {
	-webkit-box-shadow: 0 0 0 1000px var(--main-color-white) inset !important;
	-webkit-text-fill-color: var(--main-color-1) !important;
	caret-color: var(--main-color-1);
}


/* Autofill: Fehlerzustand beibehalten */
.mdl140-form .form-field.is-invalid input:-webkit-autofill,
.mdl140-form .form-field.is-invalid input:-webkit-autofill:hover,
.mdl140-form .form-field.is-invalid input:-webkit-autofill:focus {
	-webkit-text-fill-color: var(--main-color-error) !important;
	caret-color: var(--main-color-error);
}


@media screen and (min-width: 1200px) {
	.mdl140-form input {
		height: 75px;
		padding: 26px 25px 21px;
		font-size: 1.25rem; /* 20px */
		letter-spacing: 0.4px;
	}
}


/* Button: Senden */
.mdl140-form button.login-button {
	cursor: pointer;
}


/* Fehler */
/* Fehlerzustand über Wrapper */
.mdl140-form .form-field.is-invalid .form-control,
.mdl140-form .form-field.is-invalid label,
.mdl140-form .form-field.is-invalid label a {
	color: var(--main-color-error);
	--ph-color: var(--main-color-error);
}
/* Gültig über Wrapper */
.mdl140-form .form-field.is-valid .form-control,
.mdl140-form .form-field.is-valid label,
.mdl140-form .form-field.is-valid label a {
	color: var(--main-color-1);
	--ph-color: var(--main-color-1); /* zurück auf Standard */
}


/* Abstände */
.mdl140-form .abstand-top-small {
	margin-top: 5px;
}
.mdl140-form .abstand-top-medium {
	margin-top: 20px;
}
.mdl140-form .abstand-top-large {
	margin-top: 30px;
}
@media screen and (min-width: 768px) {
	.mdl140-form .abstand-top-small {
		margin-top: 0;
	}
	.mdl140-form .abstand-top-medium {
		margin-top: 10px;
	}
	.mdl140-form .abstand-top-large {
		margin-top: 20px;
	}
}
@media screen and (min-width: 1200px) {
	.mdl140-form .abstand-top-small {
		margin-top: 20px;
	}
	.mdl140-form .abstand-top-medium {
		margin-top: 50px;
	}
	.mdl140-form .abstand-top-large {
		margin-top: 70px;
	}
}


/* Hinweise */
.mdl140-modul-box .hinweis-box {
	margin-bottom: 40px;
}
@media screen and (min-width: 1200px) {
	.mdl140-modul-box .hinweis-box {
		margin-bottom: 60px;
	}
}