.domcrm--login-header-box {
    display: block;
	position: absolute;

	.domcrm--title {
		pointer-events: none;
		display: flex;
		align-items: center;

		h2 {
			color: white;
			font-size: 12px !important;
			white-space: nowrap;
			padding: 0 !important;
			margin: 0px !important;
		}

		.domcrm--chevron {
			display: inline-block;
			width: 12px;
			height: 12px;
			border-right: 2px solid white; 
			border-bottom: 2px solid white; 
			transform: rotate(45deg); 
			transition: transform 0.3s ease; 
			margin-top: 0 !important;
			margin-left: 15px;
		}
	}

	.domcrm--title:before {
		/*content: "\25c0" !important;
		font-family: sans-serif;
		display: inline;
		color: #D97F36;
		position: absolute;
		right: 20px;
		font-size: 10px;
		transition: all 0.5s ease-in-out;
		transform: scaleX(1.25) scaleY(1.5) rotate(-90deg);*/
		content: "";
		display: inline-block;
		position: absolute;
		right: 12px !important;
		width: 10px;
		height: 10px;
		background-color: white;
		-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z'/%3E%3C/svg%3E");
		-webkit-mask-size: contain;
		-webkit-mask-repeat: no-repeat;
		mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z'/%3E%3C/svg%3E");
		mask-size: contain;
		mask-repeat: no-repeat;
		transition: all 0.5s ease-in-out;
		transform: rotate(0deg) scale(1.25) !important;
	}
	input[type="text"],
	input[type="email"],
	input[type="password"] {
	    border: none;
	    padding: 4px 8px;
	    color: #000;
	    font-size: 12px;
		background-color: #F9F9F7;
	}
	.domcrm--header-login-block {
	    border-radius: 2rem;
	    padding: 0.25rem;
		cursor: pointer;
		background-color: #D4843C;

		.domcrm--header-login {
			display: none;
		}

		form {
		    display: flex;
		    flex-direction: column;
		    gap: 10px;
		}

		.domcrm-buttons {
			display: flex;
			flex-direction: column;
			align-items: start;
		}
		.domcrm-forgotpw {
			a {
				font-size: 12px;
				color: white !important;
				text-decoration: underline;
			}
		}
		.domcrm-registrationlink {
			a {
				color: white !important;
				text-decoration: underline;
			}
		}
		.domcrm-button {
		    flex-grow: 1;
			width: 100%;
		    text-align: right;
			margin-top: 0.5rem;
			margin-bottom: 0.5rem;
		}
    	.domcrm-registrationlink {
    		padding: 0 0 10px 0px;
    		a {
			    display: block;
				font-size: 12px;
				line-height: 16px;
				color: #8297a4;
			}
		}
		.domcrm-errormsg {
		    font-size: 12px;
    		line-height: 16px;
    	}
		a.btn.domcrm-btn,
		button.btn.domcrm-btn {
			font-size: 12px;
		    display: inline-block;
		    background: white;
		    color: black;
		    padding: 5px 20px;
		    border: 1px solid #D97F36;
		    border-radius: 50px;
		    transition: all 0.25s ease-in-out;
			font-weight: bold;
			width: 100%;
		}
		
		a.btn.domcrm-btn:hover,
		button.btn.domcrm-btn:hover {
		    background: white;
		    color: #D97F36 !important;
		}
		
		a.domcrm-inline-link,
		button.domcrm-inline-link {
		    color: #D97F36 !important;
		    text-decoration: underline;
		}
	}

	.domcrm--header-logout-block {

		.btn-logout {
			background: white;
			color: black !important;
			text-align: center;
			border-radius: 2rem;
			margin-top: 1rem;
			font-weight: bold;
		}

		.domcrm--logout-title {
			font-size: 12px;
			color: #000;
			text-align: center;
		}
		
		.domcrm--logout-box {		
		    border-radius: 1rem;
		    color: #fff;
		    font-size: 12px;

			.domcrm--logout-greetings {
				display: flex;
				align-items: center;
				padding: 0.25rem;
				text-align: left;
				background-color: #D4843C;
				border-radius: 1.4rem;
				cursor: pointer;
				

				.d-logo {
					background: #ffbb34;
					aspect-ratio: 1;
					border-radius: 5rem;
					padding: 0 12px;
					font-size: 1rem;
				}
			}

			.domcrm--logout-greetings:before {
					content: "";
					display: inline-block;
					position: absolute;
					right: 12px !important;
					width: 10px;
					height: 10px;
					background-color: white;
					-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z'/%3E%3C/svg%3E");
					-webkit-mask-size: contain;
					-webkit-mask-repeat: no-repeat;
					mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z'/%3E%3C/svg%3E");
					mask-size: contain;
					mask-repeat: no-repeat;
					transition: all 0.5s ease-in-out;
					transform: rotate(0deg) scale(1.25) !important;
				}

			.domcrm--login-header-dropdown {
				display: flex;
				flex-direction: column;
				background-color: #D4843C;
				color: white;
				border-radius: 0px 0px 20px 20px;
			}

			.domcrm--login-header-dropdown div {
				border-top: solid 1px white;
				color: white;
			}

			.domcrm--login-header-dropdown a {
				color: white !important;
				padding: 0rem 0.75rem 0;
                display: block;
			}
		}
	}

	span.bold {
		font-weight: 600;
		pointer-events: none;
	}

	span.domcrm--header-hello {
		pointer-events: none;
		line-height: 1.5em;
	}

	span.domcrm--username {
		pointer-events: none;
		font-weight: 600;
		line-height: 1.5em;
	}

	/* Text 1px tiefer, damit Text ohne Unterlängen in der Pille mittig wirkt */
	.domcrm--title h2,
	span.domcrm--header-hello,
	span.domcrm--username {
		position: relative;
		top: 1px;
	}
}

.domcrm--login-header-box.open {

	.domcrm--header-login {
    	display: block;
		padding: 1rem 0.75rem 0;
	}

	.domcrm--chevron {
		transform: rotate(-135deg); 
	}
}

.domcrm--login-header-box.domcrm--status-loggedin {

	.domcrm--login-header-dropdown {
		display: none !important;
	}
}

.domcrm--login-header-box.domcrm--frontendmode.domcrm--status-loggedout.open {

	.domcrm--header-login-block {
		border-radius: 1rem;
	}
}

.domcrm--login-header-box.domcrm--frontendmode.domcrm--status-loggedin.open {

	.domcrm--logout-greetings {
		border-radius: 1rem 1rem 0rem 0rem;
	}
}

.domcrm--login-header-box.domcrm--status-loggedin.open,
.domcrm--login-header-box.domcrm--frontendmode.domcrm--status-loggedout.open {

	.domcrm--logout-greetings:before {
		transform: scaleX(1.25) scaleY(1.5) rotate(90deg);
	}

	.domcrm--title:before {
		transform: scaleX(1.25) scaleY(1.5) rotate(90deg);
	}

	.domcrm--login-header-dropdown {
		display: block !important;
		padding: 1rem 0;
	}
}


@media (max-width: 768px) {
    .domcrm--login-header-box {
    	flex-direction: column;
    	gap: 50px;

		.domcrm--title {
			padding-top: 6px;
		}

		.domcrm--title h2 {
			display: none;
		}

		.domcrm--title:before {
			display: none;
		}

		.domcrm--title svg {
			pointer-events: none;
			width: 25px;
			padding-right: 1px;
			margin-top: -1px;
			margin-right: 3px;
		}

		.domcrm--header-login-block {
			display: flex;
			flex-direction: column;
			align-items: end;
			border-radius: 3px;
			padding: 0px;
			width: 33px;
			height: 33px;
			margin-top: -15px;

			.domcrm-buttons {
				flex-direction: column;
			}

			.domcrm-button {
				text-align: left !important;
			}
		}

		.domcrm--header-logout-block {

			.domcrm--logout-title {
				display: none;
			}

			.domcrm--logout-box {
				display: flex;
				flex-direction: column;
				align-items: end;
				width: 33px;
				margin-top: -15px;

				.domcrm--login-header-dropdown {
					background-color: #D4843C;
				}

				.domcrm--login-header-dropdown div {
					color: white;
				}

				.domcrm--logout-greetings {
					padding: 0.3rem;
					border-radius: 3px;
					height: 33px;
					width: 33px;
				}

				.domcrm--logout-greetings svg .st0,
				.domcrm--logout-greetings svg .st1 {
					fill: white !important;
				}

				.domcrm--logout-greetings span.domcrm--header-hello,
				.domcrm--logout-greetings span.domcrm--username {
					display: none;
				}

				.domcrm--logout-greetings svg {
					pointer-events: none;
					width: 25px;
					padding-right: 1px;
					margin-top: -0.5px;
				}

				.domcrm--logout-greetings:before {
					display: none;
				}
			}
    	}
	}

	.domcrm--login-header-box.open {

		.domcrm--header-login {
			width: 200px;
			background: #D4843C;
			padding: 10px !important;
			border-radius: 3px;
			margin-top: 21px;
		}
		
		.domcrm--header-login-block {
			height: 33px;
		}
	}

	.domcrm--login-header-box.domcrm--status-loggedin.open,
	.domcrm--login-header-box.domcrm--frontendmode.domcrm--status-loggedout.open {

		.domcrm--header-login-block {
			border-radius: 3px;
		}

		.domcrm--login-header-dropdown {
			width: 150px;
			border-radius: 3px 0px 3px 3px;
			text-align: left;
			margin-top: 18px;
		}
	}

	.domcrm--login-header-box.domcrm--frontendmode.domcrm--status-loggedin.open {

		.domcrm--logout-greetings {
			border-radius: 3px 3px 0px 0px;
			height: 33px;
		}
	}

}

@media (min-width: 769px) {

	.domcrm--login-header-box {
		width: 180px;

		.domcrm--title svg {
			width: 25px;
			margin-right: 0.5rem;
		}

		.domcrm--logout-greetings svg,
		.domcrm--header-login-block svg {
			width: 24px;
			margin-right: 0.5rem;
			pointer-events: none;
		}
	}

	.domcrm--header-login-block {
		margin-top: -6px;
	}

	.domcrm--login-header-box.domcrm--frontendmode.domcrm--status-loggedin {
		margin-top: -16px !important;
	}

	.domcrm--login-header-box.domcrm--frontendmode.domcrm--status-loggedout {
		margin-top: -10px !important;
	}
    .domcrm--login-header-box .domcrm--login-block {
	    padding-right: 50px;
    }

}

.domcrm--account-form-header {
    position: relative;
    background: #EDEDE9;
    padding: 16px 0;
}

.domcrm--account-form-header::after {
    content: "";
    position: absolute;
    left: 2%;
    right: 2%;
    bottom: -6px;
    height: 20px;
    background: rgba(0, 0, 0, 0.15);
    filter: blur(10px);
    z-index: -1;
}
/* Hinweisbalken direkt nach dem Login, unter dem Header (header-login-form.js).
   Breite des Inhalts über die Elementor-Klassen wie bei den boxed Sektionen. */
.domcrm--login-success-bar {
    background: var(--e-global-color-primary);
    color: #fff;
    font-size: 14px;
    line-height: 1.4;
}
.domcrm--login-success-inner {
    align-items: center;
    gap: 8px 24px;
    padding: 8px 10px;
}
.domcrm--login-success-text {
    flex: 1;
}
.domcrm--login-success-bar a.domcrm--login-success-link {
    color: #fff;
    text-decoration: underline;
    white-space: nowrap;
}
.domcrm--login-success-bar a.domcrm--login-success-link:hover {
    color: #fff;
    text-decoration: none;
}
.domcrm--login-success-bar button.domcrm--login-success-close {
    background: none;
    border: 0;
    border-radius: 0;
    padding: 0 2px;
    margin: 0;
    color: #fff;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}
.domcrm--login-success-bar button.domcrm--login-success-close:hover,
.domcrm--login-success-bar button.domcrm--login-success-close:focus {
    background: none;
    color: #fff;
    opacity: 0.7;
}
@media (max-width: 767px) {
    .domcrm--login-success-inner {
        flex-wrap: wrap;
    }
    .domcrm--login-success-text {
        flex-basis: calc(100% - 40px);
    }
    .domcrm--login-success-close {
        order: 2;
    }
    .domcrm--login-success-link {
        order: 3;
    }
}
@media (min-width: 768px) {
    .domcrm--login-success-inner {
        padding-left: 0;
        padding-right: 0;
    }
}

/* Platzhalter nach dem Login (Aufbau wie die „Hallo …“-Box): Spinner statt Symbol,
   kein Pfeil, nicht klickbar */
.domcrm--login-header-box.domcrm--status-loading .domcrm--logout-greetings {
    cursor: default;
    pointer-events: none;
}
.domcrm--login-header-box.domcrm--status-loading .domcrm--logout-greetings:before {
    display: none;
}
.domcrm--header-spinner {
    display: inline-block;
    box-sizing: border-box;
    width: 18px;
    height: 18px;
    margin: 3px calc(0.5rem + 3px) 3px 3px;
    border: 3px solid rgba(255, 255, 255, 0.35);
    border-top-color: #fff;
    border-radius: 50%;
    flex-shrink: 0;
    animation: button-loading-spinner 1s linear infinite;
}
@media (min-width: 769px) {
    .domcrm--login-header-box.domcrm--frontendmode.domcrm--status-loading {
        margin-top: -16px !important;
    }
}
@media (max-width: 768px) {
    .domcrm--login-header-box.domcrm--status-loading .domcrm--logout-greetings {
        justify-content: center;
    }
    .domcrm--header-spinner {
        margin: 0;
    }
}