/**
 * Hier sollte nichts überschrieben werden.
 * Alle Stile für das Newsletter-Formular sollten in der newsletter-form-theme.css definiert werden.
 */

.newsletter-form {
	--color-text: black;
	--color-theme: #0000ff;
	--color-error: #ca0431;
	--color-success: #1C871E;
	--height-input: 60px;
	--field-gap: 40px;
}

.newsletter-form {
	color: var(--color-text);
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 0 var(--field-gap);
	box-sizing: border-box;
}

.newsletter-form * {
	box-sizing: border-box;
}

.newsletter-form .form__group {
	position: relative;
	margin-top: 40px;
}

.newsletter-form .form__group {
	width: 100%;
}

@media (min-width: 1024px) {
	.newsletter-form .form__group--half {
		width: calc(50% - var(--field-gap) * 1 / 2);
	}
}

@media (min-width: 1024px) {
	.newsletter-form .form__group--third {
		width: calc(33.33% - var(--field-gap) * 3 / 2);
	}
}

@media (min-width: 1024px) {
	.newsletter-form .form__group--fourth {
		width: calc(25% - var(--field-gap) * 4 / 3);
	}
}

.newsletter-form .form__group.has-violations input, .form__group.has-violations .control__indicator {
	border: 1px solid var(--color-error);
}

.newsletter-form input {
	width: 100%;
	height: var(--height-input);
	padding: 0.625rem 0.9375rem;
	font-size: 0.875rem;
	line-height: var(--height-input);
	background: white;
	border-radius: 0.125rem;
	transition: box-shadow 0.15s ease-in-out;
	box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);
	border: 1px solid #ddd;
}

.newsletter-form input:disabled {
	background: #cbcbcb;
}

.newsletter-form input:focus {
	background-color: #ffffff;
	outline: 0;
	box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);
}

.newsletter-form label.floating {
	display: block;
	background: #ffffff;
	position: absolute;
	cursor: text;
	margin: 0;
	padding: 0 0.3125rem;
	transform: translateY(-50%);
	transition: all 0.2s ease-in-out;
	left: 0.9375rem;
	z-index: 10;
	line-height: 1.3;
	pointer-events: none;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
	max-width: calc(100% - (2 * 0.9375rem));
	top: 50%;
	font-size: 0.875rem;
	color: #707070;
}

.newsletter-form input:focus + label.floating, .newsletter-form input:not(:placeholder-shown) + label.floating {
	top: 0;
	font-size: 0.7525rem;
}

.newsletter-form .control--radio {
	position: relative;
	padding-left: 25px;
	margin-right: 20px;
}

.newsletter-form .control--radio input {
	opacity: 0;
	position: absolute;
	width: 20px;
	height: 20px;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
}

.newsletter-form .control--radio .control__indicator {
	width: 20px;
	height: 20px;
	border-radius: 100%;
	border: 2px solid #9b9b9b;
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
}

.newsletter-form .control--radio .control__indicator:after {
	content: '';
	position: absolute;
	top: 3px;
	left: 3px;
	width: 10px;
	height: 10px;
	background: #9b9b9b;
	opacity: 0;
	border-radius: 100%;
	transition: all 0.2s ease-in-out;
}

.newsletter-form .control--radio input:checked + .control__indicator {
	border: 2px solid var(--color-theme);
}

.newsletter-form .control--radio input:checked + .control__indicator:after {
	opacity: 1;
	background: var(--color-theme);
}

.newsletter-form .control--checkbox {
	display: inline-flex;
	padding-left: 1.5rem;
	position: relative;
}

.newsletter-form .control--checkbox + .gdpr-text-secondary {
	padding-left: 1.5rem;
}

.newsletter-form .form__group.has-violations .control--checkbox .control__indicator {
	border: none;
}

.newsletter-form .form__group.has-violations .control--checkbox .control__indicator:before {
	border: 1px solid var(--color-error);
}

.newsletter-form .control--checkbox input {
	position: absolute;
	left: 0;
	z-index: -1;
	width: 1rem;
	height: 1.15625rem;
	opacity: 0;
}

.newsletter-form .control--checkbox .control__indicator:before {
	content: '';
	position: absolute;
	top: 0.15625rem;
	left: 0;
	display: block;
	width: 1rem;
	height: 1rem;
	pointer-events: none;
	content: "";
	background-color: #ffffff;
	border: #9b9b9b solid 1px;
	box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);
}

.newsletter-form .control--checkbox .control__indicator:after {
	content: '';
	position: absolute;
	top: 0.15625rem;
	left: 0;
	display: block;
	width: 1rem;
	height: 1rem;
	content: "";
	background: no-repeat 50% / 50% 50%;
}

.newsletter-form .control--checkbox input:checked + .control__indicator:before {
	color: #ffffff;
	border-color: var(--color-theme);
	background-color: var(--color-theme);
}

.newsletter-form .control--checkbox input:checked + .control__indicator:after {
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%23ffffff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26l2.974 2.99L8 2.193z'/%3e%3c/svg%3e");
}

.newsletter-form .messages.has-violations {
	color: var(--color-error);
}

.newsletter-form .messages.success {
	color: var(--color-success);
}

.newsletter-form .submit {
	cursor: pointer;
}

.newsletter-form .submit.disabled {
	background-color: #cbcbcb;
	cursor: progress;
}