/*
Theme Name:   Bricks Child Theme
Theme URI:    https://bricksbuilder.io/
Description:  Use this child theme to extend Bricks.
Author:       Bricks
Author URI:   https://bricksbuilder.io/
Template:     bricks
Version:      1.1.2
Text Domain:  bricks
*/

:root {  
	--wfxp--danger: var(--danger, #dc3848);
	--wfxp--danger-hover: var(--danger-hover, #e25b68);
	--wfxp--danger-ultra-light: var(--danger-ultra-light, #fbe9eb);
	--wfxp--danger-light: var(--danger-light, #f4bec3);
	--wfxp--danger-semi-light: var(--danger-semi-light, #e46774);
	--wfxp--danger-semi-dark: var(--danger-semi-dark, #981b27);
	--wfxp--danger-dark: var(--danger-dark, #410b11);
	--wfxp--danger-ultra-dark: var(--danger-ultra-dark, #2b080b);
	--wfxp--warning: var(--warning, #ffc20a);
	--wfxp--warning-hover: var(--warning-hover, #ffcc32);
	--wfxp--warning-ultra-light: var(--warning-ultra-light, #fff9e6);
	--wfxp--warning-light: var(--warning-light, #ffecb3);
	--wfxp--warning-semi-light: var(--warning-semi-light, #ffd24d);
	--wfxp--warning-semi-dark: var(--warning-semi-dark, #b38600);
	--wfxp--warning-dark: var(--warning-dark, #4d3900);
	--wfxp--warning-ultra-dark: var(--warning-ultra-dark, #332600);
	--wfxp--info: var(--info, #18a4b9);
	--wfxp--info-hover: var(--info-hover, #1cbcd5);
	--wfxp--info-ultra-light: var(--info-ultra-light, #e8f9fc);
	--wfxp--info-light: var(--info-light, #bbeef6);
	--wfxp--info-semi-light: var(--info-semi-light, #61d8ea);
	--wfxp--info-semi-dark: var(--info-semi-dark, #158c9e);
	--wfxp--info-dark: var(--info-dark, #093c44);
	--wfxp--info-ultra-dark: var(--info-ultra-dark, #06282d);
	--wfxp--success: var(--success, #29a844);
	--wfxp--success-hover: var(--success-hover, #2fc24f);
	--wfxp--success-ultra-light: var(--success-ultra-light, #eafaee);
	--wfxp--success-light: var(--success-light, #c1f0cc);
	--wfxp--success-semi-light: var(--success-semi-light, #6fdc87);
	--wfxp--success-semi-dark: var(--success-semi-dark, #23903a);
	--wfxp--success-dark: var(--success-dark, #0f3e19);
	--wfxp--success-ultra-dark: var(--success-ultra-dark, #0a2911);

	--black-trans-5: rgba(0, 0, 0, 0.05);

	--wfxp-page--icons-huge: 80px;
	--wfxp-page--icons-largest: 60px;
	--wfxp-page--icons-larger: 45px;
	--wfxp-page--icons-large: 30px;
	--wfxp-page--icons-medium: 20px;
	--wfxp-page--icons-small: 15px;

	--wfxp-page--decoration-offset: .125em;
	--wfxp-page--decoration-thickness: 1px;

	--wfxp-page--archive-featured-ratio: '16 / 9';
	--wfxp-page--featured-ratio: '16 / 9';

	--radius--minimal: calc(var(--radius-xs) * 0.25);

	/* BREAKPOINTS */
	--breakpoint-desktop: 1259px;
	--breakpoint-tablet: 1099px;
	--breakpoint-mobile: 959px;
	--breakpoint-smartphone: 479px;

	/* ICONS */
	--icons--size-mini: 12px;
	--icons--size-small: 15px;
	--icons--size-medium: 20px;
	--icons--size-neutral: 24px;
	--icons--size-large: 30px;
	--icons--size-larger: 45px;
	--icons--size-largest: 60px;
	--icons--size-huge: 60px;
	--icons--size-mega: 120px;


	/* COLORS: FILES */
	--wfxp--file-word: #1A5CBD;
	--wfxp--file-powerpoint: #ED6C47;
	--wfxp--file-excel: #1d6f42;
	--wfxp--file-pdf: #B80000;

	--usable-height: 100vh; /* FALLBACK */
	--usable-height-onlyheader: 100vh; /* FALLBACK */

	--usable-header-height: 0px; /* FALLBACK */
}

.only-print {
	display: none;
}

.wfxp-lms {
	& main {
		background-color: var(--white);
	}
}

body {
	& main {
		min-block-size: var(--usable-height);
	}
}

@media print {
	header, footer, .sidebar, .no-print, .brx-popup, .acss-dashboard-app {
		display: none !important;
		& * {
			display: none !important;
		}
	}


	.only-print {
		display: block !important;
	}

	.wfxp-page__maincontent {
		grid-column: 1 / span all !important;
	}
}

#mollie-payment-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: var(--white-trans-90);
	z-index: 999999;
	display: flex;
	align-items: center;
	justify-content: center;

	& .mollie-payment-overlay-inner {
		text-align: center;
		padding: 2rem;
		max-width: 80vw;
		display: grid;
		grid-gap: 1ch;

		& .mollie-payment-overlay-spinner {
			height: 50px;
			width: 50px;
			border: 8px solid var(--secondary-ultra-light, var(--primary-ultra-light));
			border-top-color: var(--secondary, var(--primary));
			border-radius: 50%;
			animation: mollie-spin 1s linear infinite;
			margin: 0 auto 1lh;
		}

		& .mollie-payment-overlay-heading {
			font-size: var(--h2);
            color: var(--text-dark);
            line-height: var(--h2-line-height, var(--heading-line-height));
            font-weight: var(--h2-font-weight, var(--heading-font-weight));
		}

		& .mollie-payment-overlay-text {
			color: var(--text-dark-muted);
			font-size: var(--text-l);
			line-height: var(--text-line-height);
			font-weight: var(--text-font-weight);
			text-wrap: balance;
		}

		& button {
			padding: var(--btn-padding-block) var(--btn-padding-inline);
			min-inline-size: var(--btn-min-width);
			line-height: var(--btn-line-height);
			font-size: var(--btn-font-size, var(--text-m));
			font-weight: var(--btn-font-weight);
			font-style: var(--btn-font-style);
			text-transform: var(--btn-text-transform);
			letter-spacing: var(--btn-letter-spacing);
			text-decoration: var(--btn-text-decoration);
			background-color: var(--btn-background);
			color: var(--btn-text-color);
		}
	}
}
@keyframes mollie-spin { to { transform: rotate(360deg); } }


/*
* -------------------- 
* WFXP Bricks-Element:
* WFXP Widget 
* -------------------- 
*/
.wfxp--widget {
	width: 100%;
	flex-grow: 0;
	display: flex;	
	flex-direction: column;
	justify-content: flex-start;
	align-self: stretch !important;
	transition: .3s;

	ul:not(.bricks-nav-menu) {
		padding:0;
		gap: 1.75ch;
		display: grid;

		li {
			margin-left: var(--space-s);
			text-indent:0;
		}
	}
}
.wfxp--widget--alert {
	flex-grow: 0;

	ul {
		padding:0;
		gap: var(--space-xs);
		display: grid;

		li {
			margin-left: var(--space-s);
			text-indent:0;
		}
	}
}

.wfxp--widget--box-title,
.wfxp--widget--alert-title {
	display: flex;
	justify-content: center;
	align-items: flex-start;
	flex-direction: column;
	gap: var(--space-xs);
	font-size: var(--text-l);
	font-weight: var(--heading-font-weight);
	line-height: var(--heading-line-height);
	text-align: left;
	color: var(--currentColor);

	* {
		text-wrap: balance;
		color: var(--currentColor);
	}

	& .icon {
		color: var(--currentColor);
		width: 1em;
		display: flex;
		align-self: baseline;

		*:not(i) {
			fill: var(--currentColor);
			vertical-align: baseline;
			width: inherit;
			height: inherit;
			min-width: auto;
			min-height: auto;
		}
		i {
			color: var(--currentColor);
			vertical-align: baseline;
			font-size: var(--icons--size-neutral);
			line-height: 1;
		}
	}


	.preTitle,
	.afterTitle {
		font-size: var(--text-s);
		font-weight: var(--heading-font-weight);
		line-height: var(--heading-line-height);
		text-transform: uppercase;
		letter-spacing: 0.25ch;

		& a {
			font-weight: inherit;
		}

	}

	.titleWrapper {
		display: flex;
		align-items: flex-start;
		line-height: 1;
		flex-direction: row;
		column-gap: var(--space-xs);
		row-gap: var(--space-xs);	
		-webkit-text-decoration:none;
		text-decoration: none;
	}
	a.titleWrapper:hover {
		.title {
			-webkit-text-decoration: var(--link-decoration-hover, underline);
			text-decoration: var(--link-decoration-hover, underline);
			text-underline-offset: var(--link-underline-offset, auto);
			transition: var(--link-transition, var(--transition));
		}
	}

}

.wfxp--widget {
	&>.inner {
		padding-top: var(--space-s);
		padding-right: var(--space-s);
		padding-bottom: var(--space-s);
		padding-left: var(--space-s);
		gap: var(--space-xs);
		width: 100%;
		display: flex;	
		flex-direction: column;
		justify-content: flex-start;
		border-radius: var(--radius-xs);
		box-shadow: var(--box-shadow-1);
		position:relative;
		transition: .3s;

		&.with-background--image {
			background-size: cover !important;
			background-repeat: no-repeat !important;
			background-position: center center !important;
		}
		&.with-background--gradient::after {
			content:'';
			width: 100%;
			height: 100%;
			position: absolute;
			top:0;
			left:0;
			pointer-events:none;
			z-index:0;
			border-radius: var(--radius-xs);
		}
		& > * {
			z-index:1;
		}
		&.inner-standard,
		&.inner-question,
		&.inner-custom {
			background: var(--white);
			border-width: var(--border-size, 1px);
			border-style: var(--border-style, solid);
			border-color: var(--neutral-light, var(--border-color-dark));

			.wfxp--widget--box-title {
				.icon {
					color: var(--primary);
				}
			}
		}
		&.inner-clean {
			background: transparent;
			border: none;
			padding:0;
			box-shadow: none;
		}

		&.layout-card.image--no-padding {
			padding-top: 0;
			padding-right: 0;
			padding-bottom: 0;
			padding-left: 0;
			grid-gap: 0;
			overflow: hidden;

			.widgetContent {
				padding-top: var(--space-s);
				padding-right: var(--space-s);
				padding-bottom: var(--space-s);
				padding-left: var(--space-s);
				grid-gap: var(--space-xs);
			}
		}
	}

	&>a.inner:hover {
		.wfxp--widget--box-title,
		.widgetContent {
			.title {
				-webkit-text-decoration: var(--link-decoration-hover, underlin);
				text-decoration: var(--link-decoration-hover, underline);
				text-underline-offset: var(--link-underline-offset, auto);
				transition: var(--link-transition, var(--transition));
			}
		}
	}
}
.wfxp--widget.wfxp--widget--box-callout>.inner {

	& .icon {
		color: var(--currentColor);
		width: var(--icons--size-neutral);
		display: flex;
		align-self: baseline;


		*:not(i) {
			fill: var(--currentColor);
			vertical-align: baseline;
			width: inherit;
			height: inherit;
			min-width: auto;
			min-height: auto;
		}
		i {
			color: var(--currentColor);
			vertical-align: baseline;
			font-size: var(--icons--size-neutral);
			line-height: 1;
		}
	}

	.preTitle,
	.afterTitle {
		font-size: var(--text-s);
		font-weight: var(--heading-font-weight);
		line-height: var(--heading-line-height);
		text-transform: uppercase;
		letter-spacing: 0.25ch;

		& a {
			font-weight: inherit;
		}

	}
	& .titleWrapper {
		display: flex;
		align-items: flex-start;
		flex-direction: row;
		/*flex-wrap: wrap;*/
		column-gap: 1ch;
		row-gap: 0.375ch;

		.title {
			font-size: var(--text-l);
			font-weight: var(--heading-font-weight);
			line-height: var(--heading-line-height);
			text-align: left;
			align-self: center;
			color: var(--currentColor);
			text-wrap: balance;
		}	

	}
	&.inner-standard,
	&.inner-custom {
		box-shadow: var(--box-shadow-1), var(--wfxp--callout--border-left-shadow) var(--primary);
		border-left-color: var(--primary);
		background: var(--white);
		& .icon {			
			color: var(--primary);
		}
	}
	&.inner-question {
		box-shadow: var(--box-shadow-1), var(--wfxp--callout--border-left-shadow) var(--neutral-semi-dark);
		border-left-color: var(--neutral-semi-dark);
		background: var(--white);
		color: var(--neutral);
		& .icon {			
			color: var(--neutral);
		}
	}
	& .text {
		gap: 1em;
		display: flex;
		flex-direction: column;
	}
	& b,
	& strong {
		font-weight: var(--heading-font-weight);
	}
	& a {
		--link-decoration: underline;
		--link-underline-offset: .15em;
		--link-transition: .3s;
		font-weight: calc(var(--text-font-weight) + 100);

	}
}

.wfxp--widget.wfxp--widget--box-quicklink {
	&>.inner {
		.widgetContent {
			.contentText {
				display: flex;
				flex-direction: column;
				text-align: left;
				gap: 0.375ch;
				flex-grow: 1;
				line-height: 1;

				.title {
					line-height: var(--heading-line-height);
					font-weight: var(--heading-font-weight);
					color: var(--currentColor);
					text-wrap: balance;

				}
				.subTitle {
					/*opacity: .6;*/
					font-weight: var(--text-font-weight);
					line-height: var(--text-line-height);
				}

				.file_attr {
					font-weight: var(--text-font-weight);
					font-size: 90%;
					.file_attr__type {
						text-transform:uppercase;
					} 
				}
			}

			.image {					
				width: var(--icons--size-neutral);
				display: flex;
				align-self: flex-start;
				line-height:1;
			}

			.icon {
				color: var(--currentColor);
				width: var(--icons--size-neutral);
				display: flex;
				align-self: flex-start;
				line-height:1;

				*:not(i) {
					fill: var(--currentColor);
					vertical-align: baseline;
					width: inherit;
					height: inherit;
					min-width: auto;
					min-height: auto;
				}
				i {
					color: var(--currentColor);
					vertical-align: baseline;
					font-size: var(--icons--size-neutral);
					line-height: 1;
				}
			}

			& b,
			& strong {
				font-weight: var(--heading-font-weight);
			}
		}

		&.layout-simple {
			.widgetContent {
				display: grid;
				grid-template-columns: auto 1fr;
				align-items: baseline;
				text-align: left;
				justify-content: flex-start;
				gap: 0.375ch 1ch;

				&.image {
					display: flex;
					flex-wrap: wrap;
					flex-direction: row;
				}

			}
		}
		&.layout-advanced {
			.widgetContent {
				display: flex;
				flex-direction: column;
				flex-wrap: wrap;
				align-items: center;
				text-align: center;
				justify-content: space-between;
				gap: 2ch;


				.image {					
					width: auto;
					max-width: var(--icons--size-mega);
					align-self: center;

					img {
						width: 100%;
					}
				}

				.icon {
					align-self: center;
					width: var(--icons--size-larger);
					text-align: center;
					justify-content: center;

					i {
						font-size: var(--icons--size-larger);
					}
				}

				.contentText {
					text-align: center;

				}
			}
		}
		&.layout-card {
			.widgetContent {
				display: grid;
				grid-template-columns: 1fr;
				align-items: baseline;
				text-align: left;
				justify-content: flex-start;
				gap: 1ch;

				&.image {
					display: flex;
					flex-wrap: wrap;
					flex-direction: row;

					& .image {

						width: 100%;
					}
				}

			}
		}

		&.inner-standard,
		&.inner-custom {
			.widgetContent {
				.icon {			
					color: var(--primary);
				}
			} 
		}
		&.file-type--pdf {
			.widgetContent {
				.icon {
					color: var(--wfxp--file-pdf);
				}
			}
		}
		&.file-type--doc,
		&.file-type--docx,
		&.file-type--docm,
		&.file-type--dot,
		&.file-type--dotm,
		&.file-type--dotx,
		&.file-type--odt {
			.widgetContent {
				.icon {
					color: var(--wfxp--file-word);
				}
			}
		}
		&.file-type--ppt,
		&.file-type--pptx,
		&.file-type--pptm,
		&.file-type--pot,
		&.file-type--potm,
		&.file-type--potx,
		&.file-type--ppsx,
		&.file-type--ppsm,
		&.file-type--odp {
			.widgetContent {
				.icon {
					color: var(--wfxp--file-powerpoint);
				}
			}
		}
		&.file-type--xls,
		&.file-type--xlsx,
		&.file-type--xlm,
		&.file-type--xlsm,
		&.file-type--xlsb,
		&.file-type--ods,
		&.file-type--csv {
			.widgetContent {
				.icon {
					color: var(--wfxp--file-excel);
				}
			}
		}

	}

	&.wfxp--widget--box-quicklink-file {
		& > a.inner {			
			font-weight: inherit;
			text-decoration: none;
			& .widgetContent {
				& .contentText {
					.title { 
						font-weight: var(--link-weight,var(--heading-font-weight));
						text-decoration: var(--link-decoration, underline);
						text-underline-offset: var(--link-underline-offset, auto);
						text-decoration-thickness: var(--link-decoration-thickness,1px);
					}
				}
			}
			&:hover {
				font-weight: inherit;
				text-decoration: none;
				& .widgetContent {
					& .contentText {
						.title { 
							text-decoration: var(--link-decoration-hover, underline);
							text-decoration-thickness: var(--link-decoration-thickness,1px);
						}
					}
				}
			}
		}
	}
}

.wfxp--widget>a.inner {
	text-decoration: none;
	&.bg--ultra-dark {
		color: var(--bg-ultra-dark-link);
		&:hover {
			color: var(--bg-ultra-dark-link-hover);
		}
	}
	&.bg--dark {
		color: var(--bg-dark-link);
		&:hover {
			color: var(--bg-dark-link-hover);
		}
	}
	&.bg--light {
		color: var(--bg-light-link);
		&:hover {
			color: var(--bg-light-link-hover);
		}
	}
	&.bg--ultra-light {
		color: var(--bg-ultra-light-link);
		&:hover {
			color: var(--bg-ultra-light-link-hover);
		}
	}

	&:not(.inner-clean):hover {
		box-shadow: var(--box-shadow-2) !important;
	}
} 


.wfxp--widget--danger {
	&>.inner {
		background-color: var(--wfxp--danger-ultra-light);
		border-color: var(--wfxp--danger-semi-light);
		border-width: var(--border-size, 1px);
		border-style: var(--border-style, solid);
		color: var(--wfxp--danger-dark);

		.wfxp--widget--box-title {
			.icon *	{
				fill: var(--wfxp--danger);
				color: var(--wfxp--danger);
			}
		}
	}	
	&.wfxp--widget--box-callout {
		&>.inner {
			box-shadow: var(--box-shadow-m), var(--wfxp--callout--border-left-shadow) var(--wfxp--danger);
			border-left-color: var(--wfxp--danger);
			& .titleWrapper>.icon * {
				fill: var(--wfxp--danger);
				color: var(--wfxp--danger);
			}
		}
	}
	&.wfxp--widget--box-quicklink {
		&>.inner {
			.widgetContent {
				& .icon {
					*:not(i) {
						fill: var(--wfxp--danger);
					}
					i {
						color: var(--wfxp--danger);
					}
				} 
			} 
		} 
	}

}
.wfxp--widget--warning {
	&>.inner {
		background-color: var(--wfxp--warning-ultra-light);
		border-color: var(--wfxp--warning-semi-light);
		border-width: var(--border-size, 1px);
		border-style: var(--border-style, solid);
		color: var(--wfxp--warning-dark);

		.wfxp--widget--box-title {
			.icon * {
				fill: var(--wfxp--warning);
				color: var(--wfxp--warning);
			}
		}
	}
	&.wfxp--widget--box-callout {
		&>.inner {
			box-shadow: var(--box-shadow-m), var(--wfxp--callout--border-left-shadow) var(--wfxp--warning);
			border-left-color: var(--wfxp--warning);
			& .titleWrapper>.icon * {
				fill: var(--wfxp--warning);
				color: var(--wfxp--warning);
			}
		}
	}

	&.wfxp--widget--box-quicklink {
		&>.inner {
			.widgetContent {
				& .icon {
					*:not(i) {
						fill: var(--wfxp--warning);
					}
					i {
						color: var(--wfxp--warning);
					}
				} 
			} 
		} 
	}
}
.wfxp--widget--info {
	&>.inner {
		background-color: var(--wfxp--info-ultra-light);
		border-color: var(--wfxp--info-semi-light);
		border-width: var(--border-size, 1px);
		border-style: var(--border-style, solid);
		color: var(--wfxp--info-dark);

		.wfxp--widget--box-title {
			.icon * {
				fill: var(--wfxp--info);	
				color: var(--wfxp--info);			
			}
		}
	}
	&.wfxp--widget--box-callout {
		&>.inner {
			box-shadow: var(--box-shadow-m), var(--wfxp--callout--border-left-shadow) var(--wfxp--info);
			border-left-color: var(--wfxp--info);
			& .titleWrapper>.icon * {
				fill: var(--wfxp--info);
				color: var(--wfxp--info);
			}
		}
	}

	&.wfxp--widget--box-quicklink {
		&>.inner {
			.widgetContent {
				& .icon {
					*:not(i) {
						fill: var(--wfxp--info);
					}
					i {
						color: var(--wfxp--info);
					}
				} 
			} 
		} 
	}
}
.wfxp--widget--success {
	&>.inner {
		background-color: var(--wfxp--success-ultra-light);
		border-color: var(--wfxp--success-semi-light);
		border-width: var(--border-size, 1px);
		border-style: var(--border-style, solid);
		color: var(--wfxp--success-dark);

		.wfxp--widget--box-title {
			.icon * {
				fill: var(--wfxp--success);
				color: var(--wfxp--success);
			}
		}
	}
	&.wfxp--widget--box-callout {
		&>.inner {
			box-shadow: var(--box-shadow-m), var(--wfxp--callout--border-left-shadow) var(--wfxp--success);
			border-left-color: var(--wfxp--success);
			& .titleWrapper>.icon * {
				fill: var(--wfxp--success);
				color: var(--wfxp--success);
			}
		}
	}
	&.wfxp--widget--box-quicklink {
		&>.inner {
			.widgetContent {
				& .icon {
					*:not(i) {
						fill: var(--wfxp--success);
					}
					i {
						color: var(--wfxp--success);
					}
				} 
			} 
		} 
	} 
}

/* 
* -------------------- 
* WFXP Portal BricksBuilder 
* --------------------
*/
.wfxp-bricks-element-preview-placeholder,
.wfx-bricks-element-preview-placeholder {
	font-size: 87.5%;
	line-height: 1.2;
	background-color: var(--wfxp--info-ultra-light);
	border: 1px solid var(--wfxp--info-light);
	color: var(--wfxp--info-dark);
	padding: 1ch 1.375ch;
}

/* 
* -------------------- 
* WFXP Portal Progress 
* --------------------
*/
.brxe-wfxp-widget-progress-lms {
	flex-grow: 1;
}
.wfxp-progress {
	color: var(--currentColor) !important;

	& * {
		color: var(--currentColor);
	}

	& .form-group {
		line-height: 1;
		gap: 1ch !important;

		& .label {
			width: auto;
			white-space: nowrap;
		}
		&.label_left,
		&.label_right{
			align-items: center;
			gap: 2ch !important;
		}
		&.label_left{
			grid-template-columns: auto 1fr;
		}
		&.label_right{
			grid-template-columns: 1fr auto;
			& .label {
				order: 2;
			}
			& meter,
			& progress {
				order: 1;
			}
		}
		&.label_bottom-left,
		&.label_bottom-center,
		&.label_bottom-right,		
		&.label_top-left,
		&.label_top-center,
		&.label_top-right {			
			width: 100%;
			grid-template-columns: 1fr;
		}
		&.label_top-left,
		&.label_bottom-left { 
			& .label {			
				justify-self: flex-start;
			}
		}
		&.label_top-center,
		&.label_bottom-center { 
			& .label {				
				justify-self: center;
			}
		}
		&.label_top-right,
		&.label_bottom-right { 
			& .label {			
				justify-self: flex-end;
			}
		}
		&.label_bottom-left,
		&.label_bottom-center,
		&.label_bottom-right { 
			& .label {
				order: 2;
			}
			& meter,
			& progress {
				order: 1;
			}
		}
	}
	& .wfx-progress-meter {
		width: 100%;
		height: 2ch;
		border: unset;
		background: none;
		border-radius: var(--radius-xs);

		/* Alle Browser außer Firefox */
		&::-webkit-meter-bar {
			background: var(--base-ultra-light);
			border-radius: var(--radius-xs);
		}
		/* Mozilla-spezifische Anpassung */
		&::-moz-meter-bar {
			background: var(--base);
			border-radius: var(--radius-xs);
		}
		&.wfxp-meter-low {
			&::-webkit-meter-bar {
				background: var(--wfxp--danger-ultra-light);
			}
			&::-webkit-meter-even-less-good-value {
				background: var(--wfxp--danger);
			}
			&::-moz-meter-bar {
				background: var(--wfxp--danger);				
			}
		}
		&.wfxp-meter-medium {
			&::-webkit-meter-bar {
				background: var(--wfxp--warning-ultra-light);
			}
			&::-webkit-meter-suboptimum-value {
				background: var(--wfxp--warning);
			}
			&::-moz-meter-bar {
				background: var(--wfxp--warning);				
			}
		}
		&.wfxp-meter-high {
			&::-webkit-meter-bar {
				background: var(--wfxp--success-ultra-light);
			}
			&::-webkit-meter-optimum-value {
				background: var(--wfxp--success);
			}
			&::-moz-meter-bar {
				background: var(--wfxp--success);				
			}
		}		
	}
	& .wfx-progress-percentage {
		width: 100%;
		height: 1ch;
		border: unset;
		background: none;
		border-radius: var(--radius-xs);
		appearance: none;
		-webkit-appearance: none;

		/* Alle Browser außer Firefox */
		&::-webkit-progress-bar {
			background: var(--base-ultra-light);
			border-radius: var(--radius-xs);
		}
		&::-webkit-progress-value {
			background: var(--base);
			border-radius: var(--radius-xs);
		}
		/* Mozilla-spezifische Anpassung */
		&::-moz-progress-bar {
			background: var(--base);
			border-radius: var(--radius-xs);
		}
		&.wfxp-progress-low {
			&::-webkit-progress-bar {
				background: var(--wfxp--danger-ultra-light);
			}
			&::-webkit-progress-value {
				background: var(--wfxp--danger);
			}			
			&::-moz-progress-bar {
				background: var(--wfxp--danger);				
			}
		}
		&.wfxp-progress-medium {
			&::-webkit-progress-bar {
				background: var(--wfxp--warning-ultra-light);
			}
			&::-webkit-progress-value {
				background: var(--wfxp--warning);
			} 		
			&::-moz-progress-bar {
				background: var(--wfxp--warning);				
			}
		}
		&.wfxp-progress-high {
			&::-webkit-progress-bar {
				background: var(--wfxp--success-ultra-light);
			}
			&::-webkit-progress-value {
				background: var(--wfxp--success);
			} 		
			&::-moz-progress-bar {
				background: var(--wfxp--success);				
			}
		}	
	}
}
/* 
* -------------------- 
* WFXP Portal Formulare 
* --------------------
*/
.wfxp-form {
	padding:0;

	& .wfx-form-inside {
		width: 100%;
		padding:0;
		display: grid;
		gap: var(--f-grid-gutter);

		&>*:empty {
			display: none;
			visibility:hidden;
		}

		& .wfx-form-notifications {
			margin:0;
			padding: var(--f-input-padding-y, 0.5em) var(--f-input-padding-x, 0.5em);
			border: 1px solid;
			line-height: 1.2;
			font-weight: var(--f-label-font-weight,500);
			text-wrap: balance;
			text-align: center;

			&.wfx-notification-error {
				background-color: var(--wfxp--danger-ultra-light);
				color: var(--wfxp--danger);
				border-color: var(--wfxp--danger-light);
			}
			&.wfx-notification-success {
				background-color: var(--wfxp--success-ultra-light);
				color: var(--wfxp--success);
				border-color: var(--wfxp--success-light);
			}
		}

		& a {
			font-weight: var(--link-weight,500);
			text-decoration: underline;
		}
	}
	& .options-wrapper {
		display: grid;
		grid-template-columns: 1fr;
		gap: 1ch;

		& > .item {
			display: grid;
			grid-template-columns: auto 1fr;
			gap: 1ch;
		}

		&.wfx-optional-links {
			display: flex;
			flex-wrap: wrap;
			row-gap: 0.375ch;
			column-gap: 1.75ch;
		}
	}
	& button[type="submit"] {
		flex-grow:1;
	}

	& .wfx-form-fields {
		display: grid;
		gap: var(--f-grid-gutter);
	}
	& .form-group {
		display: grid;
		gap: var(--f-field-margin-bottom);

		& *:not(.wfx-field):not(input):empty {
			display: none;
		}

		& .wfx-error {
			padding: var(--f-input-padding-y, 0.5em) var(--f-input-padding-x, 0.5em);
			border: 1px solid;
			line-height: 1.2;
			border-color: var(--wfxp--danger-light);
			background-color: var(--wfxp--danger-ultra-light);
			color: var(--wfxp--danger);
			font-weight: var(--f-label-font-weight,500);
		}
		& .wfx-success {				
			padding: var(--f-input-padding-y, 0.5em) var(--f-input-padding-x, 0.5em);
			border: 1px solid;
			line-height: 1.2;
			border-color: var(--wfxp--success-light);
			background-color: var(--wfxp--success-ultra-light);
			color: var(--wfxp--success);
			font-weight: var(--f-label-font-weight,500);
		}
		& label {
			font-size: var(--f-label-size,16px);
			font-weight: var(--f-label-font-weight,500);
			/*color: var(--f-light-label-text-color, var(--neutral-dark));*/
			color: var(--f-light-label-text-color, var(--currentColor, var(--neutral)));
			line-height: var(--f-label-line-height,1);
			text-transform: var(--f-label-text-transform, none);
			padding: var(--f-label-padding-y, 0) var(--f-label-padding-x, 0);
			background-color: var(--f-light-label-background-color );
			margin-block-end: var(--f-label-margin-bottom, 0);
		}

		& input:not([type="checkbox"]),
			& select {
				background-color: var(--f-light-input-background, var(--white));
				border-top-width: var(--f-input-border-top-size, 0.1rem);
				border-right-width: var(--f-input-border-right-size, 0.1rem);
				border-bottom-width: var(--f-input-border-bottom-size, 0.1rem);
				border-left-width: var(--f-input-border-left-size, 0.1rem);
				border-style: var(--f-input-border-style, solid);
				border-color: var(--f-light-input-border-color, var(--neutral-light));
				border-radius: var(--f-input-border-radius, var(--radius-xs));
				color: var(--f-light-input-text-color, var(--neutral-dark));
				font-size: var(--f-input-size, --text-m);
				font-weight: var(--f-input-font-weight, 400);
				line-height: var(--f-input-line-height, 1);
				padding: var(--f-input-padding-y, 0.5em) var(--f-input-padding-x, 0.5em);
				-webkit-border-radius: var(--f-input-border-radius, var(--radius-xs));
				-moz-border-radius: var(--f-input-border-radius, var(--radius-xs));
				-ms-border-radius: var(--f-input-border-radius, var(--radius-xs));
				-o-border-radius: var(--f-input-border-radius, var(--radius-xs));

				&.wfx-input-error {
					border-color: var(--wfxp--danger) !important;
				}
		}

		& .form-group-item {
			display: flex;
			align-items: center;
			position: relative;
		}
		&.submit-button-wrapper {
			display: grid;
			gap: var(--f-field-margin-bottom) var(--space-s);
			grid-template-columns: repeat(auto-fit, minmax(var(--btn-min-width,14rem),1fr));
		}
	}

	& .wfx-password-toggle {
		margin-top:0;
		top:unset;
		right: var(--f-input-padding-x, 0.5em);
	} 
}

.wfxp__sc__table .table {
	--table-txt: var(--base);
	--table-bg: var(--white);
	--table-th-bg: var(--base);
	--table-th-txt: var(--white);
	--divider: var(--divider-dark);

	color: var(--currentColor);
	width: 100%;
	margin-bottom: unset;

}
.wfxp__sc__table.ultra-light .table {
	--divider: var(--divider-dark);
	--table-bg: var(--bg-ultra-light);
	--table-txt: var(--bg-ultra-light-text);
	--table-th-bg: var(--bg-ultra-light);
	--table-th-txt: var(--bg-ultra-light-text);
}
.wfxp__sc__table.light .table {
	--divider: var(--divider-dark);
	--table-bg: var(--bg-ultra-light);
	--table-txt: var(--bg-ultra-light-text);
	--table-th-bg: var(--bg-light);
	--table-th-txt: var(--bg-light-text);
}
.wfxp__sc__table.dark .table {
	--divider: var(--divider-dark);
	--table-bg: var(--bg-dark);
	--table-txt: var(--text-light);
	--table-th-bg: var(--bg-ultra-dark);
	--table-th-txt: var(--bg-ultra-dark-text);
}
.wfxp__sc__table.ultra-dark .table {
	--divider: var(--divider-dark);
	--table-bg: var(--bg-ultra-dark);
	--table-txt: var(--bg-ultra-dark-text);
	--table-th-bg: var(--bg-ultra-dark);
	--table-th-txt: var(--bg-ultra-dark-text);
}
.wfxp__sc__table .table > table {
	display: block;
	overflow-x: auto;
	white-space: nowrap;	
	width: 100%;
	border-collapse: collapse;
}

.wfxp__sc__table .table > table > thead th {
	font-size: .9em;
	vertical-align: bottom;
	text-align: inherit;
	border-top: unset;
	border-bottom: unset;
	background: var(--table-th-bg);
	color: var(--table-th-txt);
}


.wfxp__sc__table .table > table td,
.wfxp__sc__table .table > table th {	
	border-bottom: var(--divider);
	border-top: unset;
	padding: var(--space-xs);
}
.wfxp__sc__table .table > table td {	
	color: var(--table-txt, var(--table-txt));
	background: var(--table-bg);
	border-right: var(--divider);
}


/* -----------------------------------
* WFXP LMS
* -----------------------------------*/
.brxe-wfx-lms-show-course-enrollment:empty {
	display: none;
	visibility:hidden;
}
.brxe-wfx-lms-show-course-overview{
	width: 100%;

	& .wfx-lms-lesson-container {
		&>.inner {
			gap: var(--space-m);
			display: grid;
			grid-template-columns: 1fr;

			&>.widgetContent {
				gap: var(--space-m);
				display: grid;
				/*grid-template-columns: repeat(10,1fr);*/

				&.lesson_show_thumbnail {
					grid-template-columns: repeat(auto-fit,minmax(75px,1fr));
				}
				&.lesson_show_no_thumbnail {
					grid-template-columns: 1fr;
				}


				@media (max-width: 1099px) {
					/*grid-template-columns: repeat(5,1fr);*/
				}


				&>.image {
					grid-column: 1 / span 1;
					aspect-ratio: 3/2;
					overflow: hidden;
					border-radius: var(--radius-xs);
					background-color: var(--black-trans-5);
					display: flex;
					align-items: center;
					justify-content: center;

					& svg {
						max-width: 50%;
						height: 30%;
						fill: var(--black-trans-30);
						mix-blend-mode: multiply;
						& * {
							fill: var(--black-trans-30);
						}
					}
					& img {
						object-fit: cover;
						aspect-ratio: 3/2;
					}
				}
				&>.contentText  {
					grid-column: 2 / span all;
					display: flex;
					flex-direction: column;
					gap: 0.4lh;
					line-height: 1.2;


					@media (max-width: 1099px) {
						grid-column: 2 / span 4;
					}

					& .title {
						font-size: var(--text-l);
						font-weight: var(--link-weight, 500);
						color: var(--primary);
						display: inline-flex;
						flex-wrap: nowrap;
						align-items: baseline;
						text-wrap: balance;
						hyphens: auto;
						gap: 0.375ch;
						& .lesson_completed {
							color: var(--success);
							font-size: medium;
							transition: var(--link-transition, var(--transition));
						}

						&>span:not(.lesson_completed) {

							overflow: hidden;
							max-width: 100%;
							display: -webkit-box;
							-webkit-line-clamp: 1;
							line-clamp: 1;
							-webkit-box-orient: vertical;
						}
					}

					& .modulTitle {
						font-size: var(--text-xs);
						text-align: left;
						text-transform: uppercase;
						letter-spacing: 1px;
						line-height: 1.2;
						margin-bottom: 1ch;
						font-weight: var(--link-weight, 500);
						opacity:.6;
					}

					& .subTitle {
						opacity: .6;

						overflow: hidden;
						max-width: 100%;
						display: -webkit-box;
						-webkit-line-clamp: 1;
						line-clamp: 1;
						-webkit-box-orient: vertical;
					}

					& .wfx-lms-lesson-meta {
						flex-grow: 1;
						color: var(--text-dark-muted);
						display: flex;
						flex-wrap: wrap;
						gap: 1ch;
						line-height:1;
						align-items: baseline;
						font-size: var(--text-xs);
						margin-top: 1lh;
						& .single--meta {
							align-content: flex-end;
							color: var(--text-dark-muted);
							display: flex;
							flex-wrap: nowrap;
							align-items: flex-start;
							text-wrap: balance;
							line-height:1.2;
							gap: 0.75ch;

							&:not(:last-child):after {
								content:'|';
								padding-left: .25ch;
								pointer-events: none;
							}

							&.meta--module {
								&>span:not(.icon) {
									overflow: hidden;
									max-width: 100%;
									display: -webkit-box;
									-webkit-line-clamp: 1;
									line-clamp: 1;
									-webkit-box-orient: vertical;

								}
							}

							&.meta--zuarbeit {
								padding: .5ch 1ch;
								background: var(--wfxp--warning-ultra-light);
								border-color: var(--wfxp--warning-semi-light);
								border-width: var(--border-size, 1px);
								border-style: var(--border-style, solid);
								color: var(--wfxp--warning-dark);
								&:after {
									display: none;
								}
							}

							& .icon {
								width: var(--icons--size-small);
								line-height:1;
								& * {
									width: 100%;
									height: 100%;
									fill: currentcolor;
									line-height:1;
								}

							}
						}
					}
				}

				&.lesson_show_no_thumbnail {
					&>.contentText  { 
						grid-column: 1 / span all;
					}

				} 
			}



			&>.wfx-lms-lesson-status {
			}
		}


		&:not([href]):not(.wfxp-lms-course--not-enrolled){
			pointer-events: none;
			position: relative;
			overflow: hidden;
			&>.inner {
				position: relative;
				overflow: hidden;
				&:before {
					content:'';
					position:absolute;
					top:0;
					left:0;
					width: 100%;
					height: 100%;
					background:var(--white-trans-60);
					display: flex;
					align-items: center;
					justify-content: center;
					z-index:2;
				}
			}
		}
		&:not([href]){
			pointer-events: none;
			position: relative;
			overflow: hidden;
			&>.inner {
				position: relative;
				overflow: hidden;
				&:before {
					content:'';
					position:absolute;
					top:0;
					left:0;
					width: 100%;
					height: 100%;
					background:var(--white-trans-60);
					display: flex;
					align-items: center;
					justify-content: center;
					z-index:2;
				}
			}
		}
		&.lesson_current {
			pointer-events: none;
			position: relative;
			overflow: hidden;
			&>.inner {
				box-shadow: var(--box-shadow-3), inset 0 0 0 2px var(--primary);
				border-color: var(--primary);
				background-color: var(--primary-ultra-light);
			}
		}
		&[href] {
			text-decoration: none;
			font-weight: var(--text-font-weight);
			color: currentColor;

			&:hover {				
				&>.inner {
					box-shadow: var(--box-shadow-3), inset 0 0 0 2px var(--primary);
					border-color: var(--primary);
					&>.widgetContent {
						&>.contentText  {
							& .title {
								color: var(--primary-hover, currentColor);
								font-weight: var(--link-weight, 500);
								text-decoration: unset;
								&>span:not(.lesson_completed) {
									-webkit-text-decoration: var(--link-decoration, underline);
									text-decoration: var(--link-decoration, underline);
									text-underline-offset: var(--link-underline-offset, 0.125em);
									transition: var(--link-transition, var(--transition));
								}
							}
						}
					}
				}
			}

			&.wfxp-lms-lesson--completed{
				&:hover {				
					&>.inner {
						box-shadow: var(--box-shadow-3), inset 0 0 0 2px var(--success);
						border-color: var(--success);
						background-color: var(--success-ultra-light);
					}
				}
				&.lesson_current {
					pointer-events: none;
					position: relative;
					overflow: hidden;
					&>.inner {
						box-shadow: var(--box-shadow-3), inset 0 0 0 2px var(--success);
						border-color: var(--success);
						background-color: var(--success-ultra-light);
					}
				}
			}
		}

	}

	& .wfx-lms-all-lessons {
		display: grid;
		gap: var(--space-xs);

		& .wfx-lms-lesson-container {
			margin:0;
		}
	}		

	&.wfx_lms_course_overview_styling_2 {
		& .wfx-lms-all-lessons {
			overflow: hidden;
			gap:0;

			& .wfx-lms-lesson-container {
				&>.inner { 
					border-radius: 0;
					padding: var(--space-xs);
					border: unset !important;
					box-shadow: inset 0 1px 0 var(--black-trans-5, var(--border-color-dark)), inset 0 -1px 0 var(--black-trans-5, var(--border-color-dark)) !important;

					&>.widgetContent {
						gap: var(--space-xs);
						grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));
						&.lesson_show_thumbnail {
							grid-template-columns: 60px 1fr;
							&>.contentText {
								grid-column: 2 / span 1;
							}	
						}
						&.lesson_show_no_thumbnail {
							grid-template-columns: 1fr;
							&>.contentText {
								grid-column: 1 / span -1;
							}
						}
						&>.contentText {
							& .wfx-lms-lesson-meta {
								margin-top: 1ch;
								& .single--meta {
									&.meta--module {
										display: none;
									}
								}
							}
						}
					}
				}
				&.lesson_current {
					&>.inner {
						box-shadow: inset 0 1px 0 var(--secondary-light, var(--border-color-dark)), inset 0 -1px 0 var(--secondary-light, var(--border-color-dark)) !important;
						background-color: var(--secondary-ultra-light);
					}
				}
				&[href] {
					&:hover {
						&>.inner {
							background-color: var(--neutral-ultra-light);
						}
					}
					&.wfxp-lms-lesson--completed {
						&:hover {
							&>.inner {

								box-shadow: inset 0 1px 0 var(--success-light, var(--border-color-dark)), inset 0 -1px 0 var(--success-light, var(--border-color-dark)) !important;
								background-color: var(--success-ultra-light);
							}
						}
						&.lesson_current {
							&>.inner {
								box-shadow: inset 0 1px 0 var(--success-light, var(--border-color-dark)), inset 0 -1px 0 var(--success-light, var(--border-color-dark)) !important;
								background-color: var(--success-ultra-light);
							}
						}
					}
				}
			}
		}

	}

	& .wfxp--notifications {
		padding: var(--f-input-padding-y, 0.5em) var(--f-input-padding-x, 0.5em);
		border: 1px solid;
		line-height: 1.2;
		font-weight: var(--f-label-font-weight,500);
		display: grid;
		grid-template-columns: auto 1fr;
		justify-self: flex-end;
		gap: 1ch;
		align-items: baseline;

		&.info {
			background-color: var(--wfxp--info-ultra-light);
			color: var(--wfxp--info);
			border-color: var(--wfxp--info-light);
		}
		&.danger,
		&.error {
			background-color: var(--wfxp--danger-ultra-light);
			color: var(--wfxp--danger);
			border-color: var(--wfxp--danger-light);
		}
		&.warning {
			background-color: var(--wfxp--warning-ultra-light);
			color: var(--wfxp--warning);
			border-color: var(--wfxp--warning-light);
		}
		&.success {
			background-color: var(--wfxp--success-ultra-light);
			color: var(--wfxp--success);
			border-color: var(--wfxp--success-light);
		}
	}
}

.wfxp--page--lms {
	display: grid;
	gap: var(--space-m);
	padding-block: var(--space-m);
	align-items: stretch;
	align-self: flex-start;

	&:before {
		content:'';
		z-index: 0;
		background: var(--bg-dark, var(--primary));
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		pointer-events: none;
		height: var(--combined-height, 50rem);
	}

	&>.wfxp--page--main {
		width: 100% !important;
		max-width: 100%;
		display: grid;
		align-items: stretch;
		gap: var(--space-xl);
		z-index:1;
		grid-template-columns: 2fr 1fr;


		@media (max-width: 1099px) {
			display: flex;
			flex-direction: column;
			align-items: flex-start;
		}

		& .wfxp--page--main--content-wp {
			& .wp-block-heading {
				hyphens: auto;
			}
			&>.wp-block-group {
				background-color: var(--white);
				border-width: var(--border-size, 1px);
				border-style: var(--border-style, solid);
				border-color: var(--neutral-light, var(--border-color-dark));
				border-radius: var(--radius-xs);
				box-shadow: var(--box-shadow-1);
				padding: var(--space-s);			
			}
		}

	}


	& .wfxp--page--teaser--image {
		aspect-ratio: 16 / 9;
		width: 100%;
		position: relative;
		transition: .3s;
		border-radius: var(--radius-xs);
		box-shadow: var(--box-shadow-1);
		overflow: hidden;
		& img {
			width: 100%;
			object-fit: cover;
			aspect-ratio: inherit;
		}
	}
	& .wfxp--page--sidebar {
		background-color: var(--white);
		border-width: var(--border-size, 1px);
		border-style: var(--border-style, solid);
		border-color: var(--neutral-light, var(--border-color-dark));
		border-radius: var(--radius-xs);
		box-shadow: var(--box-shadow-1);
		display: flex;
		column-gap: 0px;
		row-gap: var(--space-s);
		justify-content: space-between;
		flex-direction: column;
		align-self: flex-start !important;
		position: relative;
		overflow: hidden;

		@media (max-width: 1099px) {
			height: auto;
			top: unset;
		}

		& .wfxp--page--sidebar--inner {
			flex-grow: 1;
			padding: var(--space-s);
			align-items: stretch;
			display: flex;
			flex-direction: column;
			width: 100%;

			&:empty {
				display: none !important;
				visibility: hidden;
			}
		}
		& .wfxp--page--teaser--image {

			border-radius: 0;
			box-shadow: unset;
		}
	}

	& .wfxp--lms--teaser {
		grid-column: full !important;
		padding-top: var(--section-space-s);
		padding-bottom: var(--section-space-l);
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
		background-color: var(--bg-ultra-dark);
		position: relative;
		display: grid;

		&:before {
			content:'';
			z-index: 2;
			background-image: linear-gradient(var(--white-trans-50) 0%, var(--body-bg-color, var(--white)) 100%);
			position: absolute;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			pointer-events: none;
		}

		&[featured-image-attr="0"] {
			padding-bottom: var(--section-space-s);
			&:before {
				display: none !important;
			}

			& * {
				color: var(--bg-ultra-dark-text);
			}
		}


		& > * {
			position: relative;
			z-index: 3;
		}
	}

	& .wfxp--page--main--content {
		padding: 0;
		row-gap: var(--space-m);
		margin: 0 auto;
		max-width: var(--content-width);

		& .wfxp--page--account--main-wp,
		& .wfxp--page--account--main-bricks {			
			padding: var(--space-s);
			background: white;
			gap: var(--space-xs);
			width: 100%;
			display: flex;	
			flex-direction: column;
			justify-content: flex-start;
			position:relative;
			transition: .3s;
			background: var(--white);
			border-width: var(--border-size, 1px);
			border-style: var(--border-style, solid);
			border-color: var(--neutral-light, var(--border-color-dark));
			border-radius: var(--radius-xs);
			box-shadow: var(--box-shadow-1);
			max-width: var(--content-width);

			@media (max-width: 1099px) {
				max-width: 100%;
			}
		}
	}

	& .wfxp--page--main--headline {
		display: flex;
		flex-direction: column;
		row-gap: 2ch;
		color: var(--bg-dark-text);
	}
}

/* Fullscreen Overlay */
#fullscreenLoader {
	position: fixed;
	inset: 0;
	background: var(--primary-trans-80);
	backdrop-filter: blur(5px);

	display: none;              /* ausgeblendet */
	justify-items: center;
	align-content: center;

	z-index: 9999;
}

/* Spinner */
#fullscreenLoader .spinner {
	width: var(--icon-xxl);
	height: var(--icon-xxl);
	border: 8px solid var(--accent);
	border-top-color: transparent;
	border-radius: 50%;
	animation: fullscreenSpinner 1s linear infinite;
}

@keyframes fullscreenSpinner {
	to { transform: rotate(360deg); }
}


/* ANIMATION FUER WFX-BUTTONS */
/* GLOBALE Animation für alle Buttons, die KEIN Teil des Register-Forms sind */
.wfxp__btn_animate {
	pointer-events: none; /* optional – entfernen, wenn nicht gewünscht */
	opacity: .8;
	position: relative;

	&::after {
		content:'↻';
		font-weight: var(--text-font-weight);
		animation: rotateIcon 0.8s linear infinite;
	}
}



.wfxp__btn_animate__success {
	position: relative;
	&:after {
		content:'✓';
		font-weight: var(--text-font-weight);
	}
}
.wfxp__btn_animate__error {
	position: relative;
	&:after {
		content:'𐄂';
		font-weight: var(--text-font-weight);
	}
}

/* Rotations-Animation */
@keyframes rotateIcon {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}