/* =========================
   TYPO3 FORM FRAMEWORK
   ========================= */

.frame-type-form_formframework form {
	width: 100%;
}


/* =========================
   FORMULARINTERNE ÜBERSCHRIFT
   ========================= */

.frame-type-form_formframework form > h2 {
	display: none;
}


/* =========================
   TYPO3 GRID ROW
   ========================= */

.frame-type-form_formframework
.form-element-gridrow {
	display: flex;

	flex-wrap: wrap;

	gap: 1.4rem 2rem;

	width: 100%;
}


/* Standardmäßig volle Breite */

.frame-type-form_formframework
.form-element-gridrow > [class*="col-"] {
	width: 100%;

	min-width: 0;

	box-sizing: border-box;
}


/* Ab Desktop: col-lg-6 = halbe Breite */

@media (min-width: 992px) {

	.frame-type-form_formframework
	.form-element-gridrow > .col-lg-6 {
		width: calc(50% - 1rem);
	}

}


/* =========================
   FELDER
   ========================= */

.frame-type-form_formframework form
.form-element {
	margin-bottom: 1.4rem !important;
}


.frame-type-form_formframework
.form-element-gridrow
.form-element {
	margin-bottom: 0 !important;
}


.frame-type-form_formframework form
.form-label {
	display: block;

	margin-bottom: 0.5rem;

	font-weight: 600;
}


.frame-type-form_formframework form
.form-control {
	display: block;

	width: 100%;

	padding: 0.9rem 1rem;

	box-sizing: border-box;

	border:
		1px solid
		rgba(
			var(--shadow-color-rgb),
			0.25
		);

	border-radius:
		var(--border-radius-small);

	background: #ffffff;

	color:
		var(--font-color-dark);

	font: inherit;

	transition:
		border-color var(--transition-time),
		box-shadow var(--transition-time);
}


.frame-type-form_formframework form
.form-control::placeholder {
	color:
		var(--neutral-color-dark);

	opacity: 0.65;
}


.frame-type-form_formframework form
.form-control:focus {
	outline: none;

	border-color:
		var(--logo-color-1);

	box-shadow:
		0 0 0 2px
		rgba(
			var(--logo-color-1-rgb),
			0.12
		);
}


/* =========================
   DATENSCHUTZ
   ========================= */

.frame-type-form_formframework form
.form-check {
	display: flex;

	align-items: flex-start;

	gap: 0.7rem;
}


.frame-type-form_formframework form
.form-check-input {
	flex: 0 0 auto;

	margin-top: 0.3rem;
}


.frame-type-form_formframework form
.form-check-label {
	font-size: 0.9rem;
	line-height: 1.5;
}


/* =========================
   BUTTON
   ========================= */

.frame-type-form_formframework form
.actions {
	display: flex;

	justify-content: flex-start;

	margin-top: 1.5rem;
}


.frame-type-form_formframework form
.actions button,

.frame-type-form_formframework form
.actions input[type="submit"] {
	padding: 0.85rem 1.5rem;

	border: 0;

	border-radius:
		var(--border-radius-small);

	background:
		var(--logo-color-1);

	color:
		var(--font-color-light);

	font: inherit;
	font-weight: 600;

	cursor: pointer;

	transition:
		background-color var(--transition-time),
		transform var(--transition-time);
}


.frame-type-form_formframework form
.actions button:hover,

.frame-type-form_formframework form
.actions input[type="submit"]:hover {
	background:
		var(--logo-color-1-dark);

	transform: translateY(-2px);
}