.pap-formular :is(
	input[type="text"],
	input[type="email"],
	input[type="number"],
	input[type="url"],
	input[type="search"],
	select,
	textarea
),
.pap-formularfilter :is(
	input[type="text"],
	input[type="email"],
	input[type="number"],
	input[type="url"],
	input[type="search"],
	select,
	textarea
) {
	border-radius: var(--pap-radius);
}

.pap-formular--editor {
	display: grid;
	gap: var(--pap-scale-500);
	padding: var(--pap-scale-500);
	border-radius: var(--pap-radius-12);
	background: var(--pap-dunkel-flaeche);
	color: var(--pap-dunkel-text);
}

@media (max-width: 48rem) {
	.pap-formular--editor {
		margin-inline: calc(-1 * var(--pap-scale-400));
		padding: var(--pap-scale-400);
		border-radius: var(--pap-scale-0);
	}
}

.pap-formular-kontext--dunkel :is(.pap-formular, .pap-formularfilter) :is(
	input[type="text"],
	input[type="email"],
	input[type="number"],
	input[type="url"],
	input[type="search"],
	select,
	textarea
) {
	box-sizing: border-box;
	padding: 5px 12px;
	border: 1px solid var(--pap-dunkel-border);
	background: var(--pap-dunkel-eingabe);
	color: var(--pap-dunkel-text);
}

.pap-formular-kontext--dunkel :is(.pap-formular, .pap-formularfilter) select {
	padding-top: 5px;
	padding-bottom: 5px;
}

.pap-formular-kontext--dunkel :is(.pap-formular, .pap-formularfilter) :is(
	input[type="text"],
	input[type="email"],
	input[type="number"],
	input[type="url"],
	input[type="search"],
	select,
	textarea
):focus,
.pap-formular-kontext--dunkel :is(.pap-formular, .pap-formularfilter) :is(
	input[type="text"],
	input[type="email"],
	input[type="number"],
	input[type="url"],
	input[type="search"],
	select,
	textarea
):focus-visible {
	border-color: var(--pap-petrol);
	outline: 2px solid var(--pap-petrol);
	outline-offset: 2px;
	background: var(--pap-dunkel-eingabe);
	color: var(--pap-dunkel-text);
}

.pap-formular-kontext--dunkel :is(.pap-formular, .pap-formularfilter) :is(input, textarea)::placeholder {
	color: var(--pap-dunkel-text-zart);
	opacity: 1;
}

.pap-formular-kontext--dunkel :is(.pap-formular, .pap-formularfilter) select option {
	background: var(--pap-dunkel-eingabe);
	color: var(--pap-dunkel-text);
}

.pap-formular-kontext--hell :is(.pap-formular, .pap-formularfilter) :is(
	input[type="text"],
	input[type="email"],
	input[type="number"],
	input[type="url"],
	input[type="search"],
	select,
	textarea
) {
	box-sizing: border-box;
	padding: 5px 12px;
	border: 1px solid var(--pap-border);
	background: var(--pap-eingabe);
	color: var(--contrast);
}

.pap-formular-kontext--hell :is(.pap-formular, .pap-formularfilter) select {
	padding-top: 5px;
	padding-bottom: 5px;
}

.pap-formular-kontext--hell :is(.pap-formular, .pap-formularfilter) :is(
	input[type="text"],
	input[type="email"],
	input[type="number"],
	input[type="url"],
	input[type="search"],
	select,
	textarea
):focus,
.pap-formular-kontext--hell :is(.pap-formular, .pap-formularfilter) :is(
	input[type="text"],
	input[type="email"],
	input[type="number"],
	input[type="url"],
	input[type="search"],
	select,
	textarea
):focus-visible {
	border-color: var(--pap-petrol);
	outline: 2px solid var(--pap-petrol);
	outline-offset: 2px;
	background: var(--pap-eingabe);
	color: var(--contrast);
}

.pap-formular-kontext--hell :is(.pap-formular, .pap-formularfilter) :is(input, textarea)::placeholder {
	color: var(--pap-text-zart);
	opacity: 1;
}

.pap-formular-kontext--hell :is(.pap-formular, .pap-formularfilter) select option {
	background: var(--pap-eingabe);
	color: var(--contrast);
}
