:root {
	/* color variables */
	--primary-w-ffffff-text: #fff;
	--primary-k10-262626-text: #262626;
	--on-light-primary-text: #242424;
	--pmisom-flain-dev-black: #000;
	--color-white-solid: #fff;
	--color-black-solid: #000;
	--neutral-grey-bg: #f3f3f3;
	--neutral-neutral-100: #181818;
	--title: var(--neutral-neutral-100);
	--colors-backgound-grey: #f3f3f3;
	--backgound-grey: var(--colors-backgound-grey);
	--colors-neutral-900: #3b3b3b;
	--text-subtle: var(--colors-neutral-900);
	--colors-backgound-white: #fefefe;
	--backgound-white: var(--colors-backgound-white);
	--borders-default: var(--colors-base-black);
	--icons-default: var(--colors-base-black);
	--colors-neutral-300: #e0e0e0;
	--borders-divider-grey: var(--colors-neutral-300);
	--backgound-interactive-seconary-default: var(--colors-base-white);
	--borders-input-default: var(--colors-base-black);
	--text-button-secondary-default: var(--colors-base-black);
	--colors-base-black: #1e1e1e;
	--text-default: var(--colors-base-black);
	--backgound-interactive-primary-default: var(--colors-backgound-black);
	--colors-backgound-black: #1e1e1e;
	--backgound-default: var(--colors-backgound-black);
	--icons-white: var(--colors-base-white);
	--color-grey-900: #181818;
	--color-red: #E2001A;
	--button-bck: var(--color-red);
	--colors-base-white: #fefefe;
	--text-button-primary-default: var(--colors-base-white);

	/* string variables */
	--font-family-font-1: "Times New Roman";

	/* number variables */
	--item-spacing-21-44: 21.440000534057617px;
	--font-size-32: 32px;
	--font-weight-700: 700px;
	--font-size-16: 16px;
	--font-weight-400: 400px;
	--number-48: 48px;
	--spacing-3x-large: var(--number-48);
	--font-size-md: 16px;
	--number-32: 32px;
	--spacing-x-large: var(--number-32);
	--number-4: 4px;
	--spacing-2x-small: var(--number-4);
	--font-size-heading-sm: 24px;
	--number-56: 56px;
	--spacing-4x-large: var(--number-56);
	--number-40: 40px;
	--spacing-2x-large: var(--number-40);
	--number-100: 100px;
	--spacing-7x-large: var(--number-100);
	--number-64: 64px;
	--spacing-5x-large: var(--number-64);
	--number-24: 24px;
	--spacing-large: var(--number-24);
	--number-8: 8px;
	--spacing-x-small: var(--number-8);
	--number-16: 16px;
	--spacing-medium: var(--number-16);
	--number-12: 12px;
	--spacing-small: var(--number-12);

	/* responsive margins / paddings */
	--margin-sm: 16px;
	--margin-md: 32px;
}

* {
	--min-screen-size: 430;
	--max-screen-size: 1440;
	--interpolate-diff: calc(var(--max-font-size) - var(--min-font-size));
	--interpolate: clamp(calc(var(--min-font-size) * 1px), calc((var(--min-font-size) * 1px) + var(--interpolate-diff) * ((100vw - calc(var(--min-screen-size) * 1px)) / (var(--max-screen-size) - var(--min-screen-size)))), calc(var(--max-font-size) * 1px));
}

html {
	height: 100%;
	font-size: 16px;
}



/* text utility classes */

.body-large {
	color: var(--text-default);
	font-size: 18px;
	font-family: 'Söhne';
	font-style: normal;
	line-height: 1.333;
	letter-spacing: 0px;
}

.text {
	font-size: 16px;
	font-family: 'Söhne';
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: 0px;
}

.subtitle {
	font-size: 32px;
	line-height: normal;
}

.bold {
	font-weight: 600;
}

.sub-text3 {
	text-transform: lowercase;
}

.sub-text2 {
	font-weight: 400;
}

.bold2 {
	font-weight: 700;
}

.sub-text {
	text-transform: uppercase;
}



/* section utility classes */

.section-light {
	display: flex;
	flex-direction: column;
	align-items: center;
	background-color: #f3f3f3;
	padding: var(--spacing-4x-large) var(--spacing-7x-large);
}

.section {
	display: flex;
	flex-direction: column;
	align-items: center;
}

@media screen and (min-width: 768px) {
	.section {
	padding: 80px 24px;
	/*padding: 80px 24px;*/
}
}

/* ui objects utility classes */

.card {
	display: flex;
	flex-direction: column;
	background-color: var(--backgound-white);
	padding: var(--spacing-medium);
}



/* button hover utility classes */

.hover-bright:hover {
	filter: brightness(1.2);
}
.font-light{
	font-weight: 400;
}

.font-light::after {
  content: "\00a0";
}