.newsletter-form-wrapper input:not([type="checkbox"]),
.newsletter-form-wrapper select {
	width: 100%;
}

.newsletter-form-wrapper input,
.newsletter-form-wrapper select {
	margin-bottom: 1.5em;
}

.newsletter-form-wrapper label {
	font-weight: 700;
}

.newsletter-form-wrapper button {
	color: var(--color-white);
	background-color: var(--color-blue);
	border: 1px solid var(--color-blue);
	padding: 0.5em 1.5em;
	border-radius: 99em;
	font-weight: var(--fw-bold);
	cursor: pointer;
	transition: 400ms all ease;
}

.newsletter-form-wrapper button:hover {
	color: var(--color-blue);
	background-color: var(--color-white);
	border: 1px solid var(--color-blue);
}

.newsletter-form-wrapper label:has([type="checkbox"]) {
	font-weight: normal;
}

.newsletter-form-wrapper input[type="checkbox"] {
	margin-right: .5em;
}

.newsletter-form-wrapper {
	/* Den Container stylen */

	.custom-checkbox {
		display: inline-flex;
		position: relative;
		padding-left: 35px;
		margin-bottom: 12px;
		user-select: none;
		cursor: pointer;
	}

	/* Die echte Checkbox verstecken */

	.custom-checkbox input {
		position: absolute;
		opacity: 0;
		height: 0;
		width: 0;
	}

	/* Unsere eigene Checkbox (das Quadrat) */

	.checkmark {
		position: absolute;
		top: 0;
		left: 0;
		height: 25px;
		width: 25px;
		background-color: var(--color-light-blue);
		border-radius: 100%;
		transition: background-color 0.3s;
	}

	/* Hintergrundfarbe, wenn ausgewählt */

	.custom-checkbox input:checked~.checkmark {
		background-color: var(--color-blue);
	}

	/* Häkchen anzeigen, wenn ausgewählt */

	.custom-checkbox input:checked~.checkmark:after {
		display: block;
	}

	/* Das Häkchen-Design (ein weißer Winkel) */

	.checkmark:after {
		content: "";
		position: absolute;
		display: none;
		left: 10px;
		top: 6px;
		width: 6px;
		height: 10px;
		border: solid #fff;
		border-width: 0 3px 3px 0;
		transform: rotate(45deg);
	}

	.custom-checkbox input:focus-visible~.checkmark {
		outline: 2px solid #000;
	}

	.custom-checkbox input:focus {
		outline: none;
	}
}

.area-checkboxes {
	margin-top: 20px;
}

.grid-two {
	display: grid;
	grid-template-columns: 1fr 1fr;
	width: fit-content;
	column-gap: 30px;
	margin-top: 20px;
}

.grid-two label {
	width: fit-content;
}

@media screen and (min-width: 768px) {
	label:has(#nm-area-all) {
		grid-column: span 2;
	}
}

@media screen and (max-width: 767px) {
	.grid-two {
		grid-template-columns: 1fr;
	}

	label:has(#nm-area-all) {
		font-weight: 700;
	}
}

.nm-success-box {
	margin-top: 15px;
	padding: 14px 16px;
	border-radius: 12px;
	background: #ffffff;
	border-left: 5px solid #2CB0E8;
	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
	font-size: 15px;
	line-height: 1.4;

	opacity: 0;
	transform: translateY(-8px);
	animation: nmSuccessShow 0.4s ease forwards, nmPulse 0.8s ease 0.4s 1;
}

@keyframes nmSuccessShow {
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes nmPulse {
	0% {
		transform: scale(1);
	}

	50% {
		transform: scale(1.03);
	}

	100% {
		transform: scale(1);
	}
}