/* NBF Theme sparkasse Tokens */

@font-face {
	font-family: "Body Text";
	src: url("SparkasseNEURg-Regular.woff2") format("woff2");
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: "Body Text";
	src: url("SparkasseNEURg-Bold.woff2") format("woff2");
	font-weight: bold;
	font-style: normal;
}
@font-face {
	font-family: "Body Text";
	src: url("SparkasseNEUMedium-Regular.woff2") format("woff2");
	font-weight: 500;
	font-style: normal;
}
@font-face {
	font-family: "Body Text";
	src: url("SparkasseNEULt-Regular.woff2") format("woff2");
	font-weight: 300;
	font-style: normal;
}
@font-face {
	font-family: "Body Text";
	src: url("SparkasseNEURg-Italic.woff2") format("woff2");
	font-weight: normal;
	font-style: italic;
}
@font-face {
	font-family: "Body Text";
	src: url("SparkasseNEULt-Italic.woff2") format("woff2");
	font-weight: 300;
	font-style: italic;
}
@font-face {
	font-family: "Body Text";
	src: url("SparkasseNEURg-BoldItalic.woff2") format("woff2");
	font-weight: bold;
	font-style: italic;
}
@font-face {
	font-family: "Display Text";
	src: url("SparkasseNEUHead-Regular.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
}
@font-face {
	font-family: "Alternate Text";
	src: url("SparkasseNEUSerif-Regular.woff2") format("woff2");
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: "Alternate Text";
	src: url("SparkasseNEUSerif-Bold.woff2") format("woff2");
	font-weight: bold;
	font-style: normal;
}
@font-face {
	font-family: "Alternate Text";
	src: url("SparkasseNEUSerif-Italic.woff2") format("woff2");
	font-weight: normal;
	font-style: italic;
}
@font-face {
	font-family: "Alternate Text";
	src: url("SparkasseNEUSerif-BoldItalic.woff2") format("woff2");
	font-weight: bold;
	font-style: italic;
}

:root {
	/* sizes */
	--auto: auto;
	--size-0: 0;
	--size-1: 0.0625rem;
	--size-2: 0.125rem;
	--size-4: 0.25rem;
	--size-8: 0.5rem;
	--size-12: 0.75rem;
	--size-14: 0.875rem;
	--size-16: 1rem;
	--size-18: 1.125rem;
	--size-20: 1.25rem;
	--size-22: 1.375rem;
	--size-24: 1.5rem;
	--size-28: 1.75rem;
	--size-32: 2rem;
	--size-36: 2.25rem;
	--size-40: 2.5rem;
	--size-48: 3rem;
	--size-64: 4rem;
	--size-72: 4.5rem;
	--size-96: 6rem;
	--size-128: 8rem;
	--size-152: 9.5rem;
	--size-160: 10rem;
	--size-176: 11rem;

	/* size-tokens */
	--noSize: var(--size-0);
	/* Deprecated - stattdessen tiny0x verwenden */
	--border01: var(--size-1);
	/* Deprecated - stattdessen tiny0x verwenden */
	--border02: var(--size-2);
	--tiny01: var(--size-1);
	--tiny02: var(--size-2);
	--small02: var(--size-4);
	--small05: var(--size-8);
	--small10: var(--size-12);
	--small15: var(--size-14);
	--small20: var(--size-16);
	--small22: var(--size-18);
	--small25: var(--size-20);
	--small27: var(--size-22);
	--small30: var(--size-24);
	--small35: var(--size-28);
	--medium10: var(--size-32);
	--medium12: var(--size-36);
	--medium15: var(--size-40);
	--medium20: var(--size-48);
	--medium30: var(--size-64);
	--medium35: var(--size-72);
	--large10: var(--size-96);
	--large20: var(--size-128);
	--large25: var(--size-152);
	--large30: var(--size-160);
	--large35: var(--size-176);

	/* shadows */
	--shadow-default: 0px 2px 3px rgba(86, 86, 86, 0.1);
	--shadow-hover: 0px 4px 8px rgba(86, 86, 86, 0.16);
	--shadow-draganddrop: 0px 16px 8px rgba(86, 86, 86, 0.24);
	--shadow-sticky-bottom: 0px 15px 10px -15px rgba(86, 86, 86, 0.60);
	--shadow-sticky-top: 0px -15px 10px -15px rgba(86, 86, 86, 0.60);

}
	
@media only all and (prefers-color-scheme: dark) {
	:root body:not(.no-darkmode) {
		/* shadows */
		--shadow-default: 0px 2px 4px rgba(0, 0, 0, 0.16);
		--shadow-hover: 0px 4px 20px rgba(0, 0, 0, 0.7);
		--shadow-draganddrop: 0px 16px 20px rgba(0, 0, 0, 1);
		--shadow-sticky-bottom: 0px 20px 15px -15px rgba(0, 0, 0, 1);
		--shadow-sticky-top: 0px -20px 15px -15px rgba(0, 0, 0, 1);

	}
} 


/* Typography */
.mcd_typo_headline-02 {
	font-family: "Display Text";
	font-weight: 700;
	font-size: 1.5rem;
	line-height: 2rem;
	color: var(--readable-01);
	font-style: normal;
}
.mcd_typo_headline-02-light {
	font-family: "Body Text";
	font-weight: 300;
	font-size: 1.5rem;
	line-height: 2rem;
	color: var(--readable-01);
	font-style: normal;
}
.mcd_typo_headline-03 {
	font-family: "Body Text";
	font-weight: 500;
	font-size: 1.25rem;
	line-height: 1.5rem;
	color: var(--readable-01);
	font-style: normal;
}
.mcd_typo_headline-04 {
	font-family: "Body Text";
	font-weight: 500;
	font-size: 1.125rem;
	line-height: 1.375rem;
	color: var(--readable-01);
	font-style: normal;
}
.mcd_typo_headline-05 {
	font-family: "Body Text";
	font-weight: 500;
	font-size: 1rem;
	line-height: 1.25rem;
	color: var(--readable-01);
	font-style: normal;
}
.mcd_typo_headline-06 {
	font-family: "Body Text";
	font-weight: 500;
	font-size: 0.875rem;
	line-height: 1rem;
	color: var(--readable-01);
	font-style: normal;
}
.mcd_typo_multiline-01 {
	font-family: "Body Text";
	font-weight: normal;
	font-size: 1rem;
	line-height: 1.5rem;
	color: var(--readable-02);
	font-style: normal;
}
.mcd_typo_multiline-02 {
	font-family: "Body Text";
	font-weight: normal;
	font-size: 0.875rem;
	line-height: 1.25rem;
	color: var(--readable-02);
	font-style: normal;
}
.mcd_typo_input-01 {
	font-family: "Body Text";
	font-weight: normal;
	font-size: 1rem;
	line-height: 1.5rem;
	color: var(--readable-02);
	font-style: normal;
}
.mcd_typo_label-default-01 {
	font-family: "Body Text";
	font-weight: normal;
	font-size: 1.25rem;
	line-height: 1.5rem;
	color: var(--readable-02);
	font-style: normal;
}
.mcd_typo_label-default-02 {
	font-family: "Body Text";
	font-weight: normal;
	font-size: 1.125rem;
	line-height: 1.375rem;
	color: var(--readable-02);
	font-style: normal;
}
.mcd_typo_label-default-03 {
	font-family: "Body Text";
	font-weight: normal;
	font-size: 1rem;
	line-height: 1.25rem;
	color: var(--readable-02);
	font-style: normal;
}
.mcd_typo_label-bold-03 {
	font-family: "Body Text";
	font-weight: bold;
	font-size: 1rem;
	line-height: 1.25rem;
	color: var(--readable-02);
	font-style: normal;
}
.mcd_typo_label-default-04 {
	font-family: "Body Text";
	font-weight: normal;
	font-size: 0.875rem;
	line-height: 1.25rem;
	color: var(--readable-02);
	font-style: normal;
}
.mcd_typo_label-bold-04 {
	font-family: "Body Text";
	font-weight: bold;
	font-size: 0.875rem;
	line-height: 1.25rem;
	color: var(--readable-02);
	font-style: normal;
}
.mcd_typo_label-default-05 {
	font-family: "Body Text";
	font-weight: normal;
	font-size: 0.75rem;
	line-height: 1rem;
	color: var(--readable-02);
	font-style: normal;
}
.mcd_typo_label-default-06 {
	font-family: "Body Text";
	font-weight: normal;
	font-size: 0.5rem;
	line-height: 0.5rem;
	color: var(--readable-02);
	font-style: normal;
}
.mcd_typo_label-bold-06 {
	font-family: "Body Text";
	font-weight: normal;
	font-size: 0.5rem;
	line-height: 0.5rem;
	color: var(--readable-02);
	font-style: normal;
}
.mcd_typo_label-button-01 {
	font-family: "Body Text";
	font-weight: 500;
	font-size: 1.25rem;
	line-height: 1.5rem;
	color: var(--readable-02);
	font-style: normal;
}
.mcd_typo_label-button-02 {
	font-family: "Body Text";
	font-weight: 500;
	font-size: 1rem;
	line-height: 1rem;
	color: var(--readable-02);
	font-style: normal;
}
.mcd_typo_label-button-03 {
	font-family: "Body Text";
	font-weight: 500;
	font-size: 0.875rem;
	line-height: 1rem;
	color: var(--readable-02);
	font-style: normal;
}
.mcd_typo_label-underline-01 {
	font-family: "Body Text";
	font-weight: 500;
	font-size: 1.25rem;
	line-height: 1.5rem;
	text-decoration-line: underline;
	color: var(--readable-02);
	font-style: normal;
}
.mcd_typo_label-button-underline-02 {
	font-family: "Body Text";
	font-weight: 500;
	font-size: 1rem;
	line-height: 1rem;
	text-decoration-line: underline;
	color: var(--readable-02);
	font-style: normal;
}
.mcd_typo_label-button-underline-03 {
	font-family: "Body Text";
	font-weight: 500;
	font-size: 0.875rem;
	line-height: 1rem;
	text-decoration-line: underline;
	color: var(--readable-02);
	font-style: normal;
}
.mcd_typo_tan-01 {
	font-family: "Body Text";
	font-weight: normal;
	font-size: 1rem;
	line-height: 1rem;
	text-transform: uppercase;
	color: var(--readable-02);
	font-style: normal;
}
.mcd_typo_tan-02 {
	font-family: "Body Text";
	font-weight: normal;
	font-size: 2.5rem;
	line-height: 3rem;
	color: var(--readable-01);
	font-style: normal;
}
.mcd_typo_currency-01 {
	font-family: "Body Text";
	font-weight: 500;
	font-size: 1.25rem;
	line-height: 1.5rem;
	color: var(--readable-01);
	font-style: normal;
}
.mcd_typo_currency-02 {
	font-family: "Body Text";
	font-weight: 500;
	font-size: 1.125rem;
	line-height: 1.25rem;
	color: var(--readable-02);
	font-style: normal;
}
.mcd_typo_label-error-01 {
	font-family: "Body Text";
	font-size: 0.875rem;
	font-style: normal;
	font-weight: 500;
	line-height: 1.25rem;
	color: var(--error-01-contrast);
}
.mcd_typo_headline-01 {
	font-family: "Display Text";
	font-weight: 700;
	font-size: 2.25rem;
	line-height: 2.5rem;
	color: var(--readable-01);
	font-style: normal;
}
.mcd_typo_headline-01-light {
	font-family: "Body Text";
	font-weight: "Body Text";
	font-size: 2.25rem;
	line-height: 2.5rem;
	color: var(--readable-01);
	font-style: normal;
}
.mcd_typo_multiline-01-bold {
	font-family: "Body Text";
	font-weight: bold;
	font-size: 1rem;
	line-height: 1.5rem;
	color: var(--readable-02);
	font-style: normal;
}
.mcd_typo_label-underline-02 {
	font-family: "Body Text";
	font-weight: normal;
	font-size: 1rem;
	line-height: 1.125rem;
	text-decoration-line: underline;
	color: var(--readable-02);
	font-style: normal;
}
.mcd_typo_label-underline-03 {
	font-family: "Body Text";
	font-weight: normal;
	font-size: 0.875rem;
	line-height: 1rem;
	text-decoration-line: underline;
	color: var(--readable-02);
	font-style: normal;
}
.mcd_typo_link-01 {
	font-family: "Body Text";
	font-weight: normal;
	font-size: 1rem;
	line-height: 1.25rem;
	text-decoration-line: underline;
	color: var(--readable-02);
	font-style: normal;
}
.mcd_typo_link-02 {
	font-family: "Body Text";
	font-weight: 500;
	font-size: 0.875rem;
	line-height: 1.125rem;
	text-decoration-line: underline;
	color: var(--readable-02);
	font-style: normal;
}

/* Typography Mobile */
@media (max-width: 500px) {
	.mcd_typo_headline-02 {
		font-size: 1.25rem;
		line-height: 1.5rem;
	}
	.mcd_typo_headline-02-light {
		font-size: 1.25rem;
		line-height: 1.5rem;
	}
	.mcd_typo_headline-03 {
		font-size: 1.125rem;
		line-height: 1.375rem;
	}
	.mcd_typo_headline-04 {
		font-size: 1rem;
		line-height: 1.25rem;
	}
	.mcd_typo_headline-05 {
		font-size: 1rem;
		line-height: 1.25rem;
	}
	.mcd_typo_headline-06 {
		font-size: 0.75rem;
		line-height: 1rem;
	}
	.mcd_typo_multiline-01 {
		font-size: 0.875rem;
		line-height: 1.25rem;
	}
	.mcd_typo_multiline-02 {
		font-size: 0.75rem;
		line-height: 1.125rem;
	}
	.mcd_typo_input-01 {
		font-size: 1rem;
		line-height: 1.5rem;
	}
	.mcd_typo_label-default-01 {
		font-size: 1.125rem;
		line-height: 1.375rem;
	}
	.mcd_typo_label-default-02 {
		font-size: 1rem;
		line-height: 1.25rem;
	}
	.mcd_typo_label-default-03 {
		font-size: 0.875rem;
		line-height: 1.125rem;
	}
	.mcd_typo_label-bold-03 {
		font-size: 0.875rem;
		line-height: 1.125rem;
	}
	.mcd_typo_label-default-04 {
		font-size: 0.75rem;
		line-height: 1rem;
	}
	.mcd_typo_label-bold-04 {
		font-size: 0.75rem;
		line-height: 1rem;
	}
	.mcd_typo_label-default-05 {
		font-size: 0.75rem;
		line-height: 1rem;
	}
	.mcd_typo_label-default-06 {
		font-size: 0.5rem;
		line-height: 0.5rem;
	}
	.mcd_typo_label-bold-06 {
		font-size: 0.5rem;
		line-height: 0.5rem;
	}
	.mcd_typo_label-button-01 {
		font-size: 1.25rem;
		line-height: 1.5rem;
	}
	.mcd_typo_label-button-02 {
		font-size: 1rem;
		line-height: 1rem;
	}
	.mcd_typo_label-button-03 {
		font-size: 0.875rem;
		line-height: 1rem;
	}
	.mcd_typo_label-underline-01 {
		font-size: 1.25rem;
		line-height: 1.5rem;
	}
	.mcd_typo_label-button-underline-02 {
		font-size: 1rem;
		line-height: 1rem;
	}
	.mcd_typo_label-button-underline-03 {
		font-size: 0.875rem;
		line-height: 1rem;
	}
	.mcd_typo_tan-01 {
		font-size: 0.875rem;
		line-height: 0.875rem;
	}
	.mcd_typo_tan-02 {
		font-size: 2.25rem;
		line-height: 3rem;
	}
	.mcd_typo_currency-01 {
		font-size: 1.125rem;
		line-height: 1.25rem;
	}
	.mcd_typo_currency-02 {
		font-size: 1rem;
		line-height: 1rem;
	}
}