/* Variables
--------------------------------------------------------- */
:root {
/* fonts */
	--ff-default: 'Noto Sans', 'HelveticaNeue', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	--ff-alt: 'Noto Sans', 'HelveticaNeue', 'Helvetica Neue', Helvetica, Arial, sans-serif;

/* colors */
	--c-white: #FFFFFF;
	--c-white-alt: color-mix(in srgb, var(--c-white) 90%, black);
	
	--c-linen: #F6F2EB;
	--c-linen-alt: color-mix(in srgb, var(--c-linen) 90%, black);
	
	/* --c-primary: #AAC264; */
	--c-primary: #556A6E;
	--c-primary-alt: color-mix(in srgb, var(--c-primary) 90%, black);
	
	/* --c-secondary: #556A6E; */
	--c-secondary: #AAC264;
	--c-secondary-alt: color-mix(in srgb, var(--c-secondary) 90%, black);
	
	--c-error: #C84630;
	--c-error-alt: color-mix(in srgb, var(--c-error) 90%, white);
	
	--c-warning: #FCC130;
	--c-warning-alt: color-mix(in srgb, var(--c-warning) 90%, white);
	
	--c-success: #48C572;
	--c-success-alt: color-mix(in srgb, var(--c-success) 90%, white);
	
	--c-info: #639BFB;
	--c-info-alt: color-mix(in srgb, var(--c-info) 90%, white);
	
	--c-text-base:      #333333;
	--c-text-invert:    #FFFFFF;
	--c-headlines-base:   #556A6E;
	--c-headlines-invert: #FFFFFF;
	
	--c-text: var(--c-text-base);
	--c-headlines: var(--c-headlines-base);
	--c-gray: color-mix(in srgb, var(--c-text) 70%, white);
	
	--c-light-gray: #F9F5FF;
	--c-lightest-gray: #F6F2EB;
	
	/* === Background colors === */
	/* Base */
	--c-bg: #F6F2EB;
	--c-bg-invert: #556A6E;
	
	/* === Alpha scale (transparency of each base) === */
	/* Light background */
	--c-bg-a100: var(--c-bg);
	--c-bg-a90: rgb(from var(--c-bg) r g b / 90%);
	--c-bg-a75: rgb(from var(--c-bg) r g b / 75%);
	--c-bg-a50: rgb(from var(--c-bg) r g b / 50%);
	--c-bg-a25: rgb(from var(--c-bg) r g b / 25%);
	--c-bg-a10: rgb(from var(--c-bg) r g b / 10%);
	--c-bg-a5:  rgb(from var(--c-bg) r g b / 5%);
	--c-bg-a2:  rgb(from var(--c-bg) r g b / 2%);
	--c-bg-a1:  rgb(from var(--c-bg) r g b / 1%);
	
	/* Dark background */
	--c-bg-invert-a100: var(--c-bg-invert);
	--c-bg-invert-a90: rgb(from var(--c-bg-invert) r g b / 90%);
	--c-bg-invert-a75: rgb(from var(--c-bg-invert) r g b / 75%);
	--c-bg-invert-a50: rgb(from var(--c-bg-invert) r g b / 50%);
	--c-bg-invert-a25: rgb(from var(--c-bg-invert) r g b / 25%);
	--c-bg-invert-a10: rgb(from var(--c-bg-invert) r g b / 10%);
	--c-bg-invert-a5:  rgb(from var(--c-bg-invert) r g b / 5%);
	--c-bg-invert-a2:  rgb(from var(--c-bg-invert) r g b / 2%);
	--c-bg-invert-a1:  rgb(from var(--c-bg-invert) r g b / 1%);
	
	/* === Mix scale (blend base with its opposite) === */
	/* Light background mixed with dark */
	--c-bg-m90: color-mix(in srgb, var(--c-bg) 90%, var(--c-bg-invert));
	--c-bg-m75: color-mix(in srgb, var(--c-bg) 75%, var(--c-bg-invert));
	--c-bg-m50: color-mix(in srgb, var(--c-bg) 50%, var(--c-bg-invert));
	--c-bg-m25: color-mix(in srgb, var(--c-bg) 25%, var(--c-bg-invert));
	--c-bg-m10: color-mix(in srgb, var(--c-bg) 10%, var(--c-bg-invert));
	--c-bg-m5:  color-mix(in srgb, var(--c-bg) 5%, var(--c-bg-invert));
	--c-bg-m2:  color-mix(in srgb, var(--c-bg) 2%, var(--c-bg-invert));
	--c-bg-m1:  color-mix(in srgb, var(--c-bg) 1%, var(--c-bg-invert));
	
	/* Dark background mixed with light */
	--c-bg-invert-m90: color-mix(in srgb, var(--c-bg-invert) 90%, var(--c-bg));
	--c-bg-invert-m75: color-mix(in srgb, var(--c-bg-invert) 75%, var(--c-bg));
	--c-bg-invert-m50: color-mix(in srgb, var(--c-bg-invert) 50%, var(--c-bg));
	--c-bg-invert-m25: color-mix(in srgb, var(--c-bg-invert) 25%, var(--c-bg));
	--c-bg-invert-m10: color-mix(in srgb, var(--c-bg-invert) 10%, var(--c-bg));
	--c-bg-invert-m5:  color-mix(in srgb, var(--c-bg-invert) 5%, var(--c-bg));
	--c-bg-invert-m2:  color-mix(in srgb, var(--c-bg-invert) 2%, var(--c-bg));
	--c-bg-invert-m1:  color-mix(in srgb, var(--c-bg-invert) 1%, var(--c-bg));

	/* === 3. Fixed/Flat scale (tint/shade toward neutral) === */
	/* Light bg → darker (toward black) */
	--c-bg-f90: color-mix(in srgb, var(--c-bg) 90%, black);
	--c-bg-f75: color-mix(in srgb, var(--c-bg) 75%, black);
	--c-bg-f50: color-mix(in srgb, var(--c-bg) 50%, black);
	--c-bg-f25: color-mix(in srgb, var(--c-bg) 25%, black);
	--c-bg-f10: color-mix(in srgb, var(--c-bg) 10%, black);
	--c-bg-f5:  color-mix(in srgb, var(--c-bg) 5%, black);
	--c-bg-f2:  color-mix(in srgb, var(--c-bg) 2%, black);
	--c-bg-f1:  color-mix(in srgb, var(--c-bg) 1%, black);
	
	/* Dark bg → lighter (toward white) */
	--c-bg-invert-f90: color-mix(in srgb, var(--c-bg-invert) 90%, white);
	--c-bg-invert-f75: color-mix(in srgb, var(--c-bg-invert) 75%, white);
	--c-bg-invert-f50: color-mix(in srgb, var(--c-bg-invert) 50%, white);
	--c-bg-invert-f25: color-mix(in srgb, var(--c-bg-invert) 25%, white);
	--c-bg-invert-f10: color-mix(in srgb, var(--c-bg-invert) 10%, white);
	--c-bg-invert-f5:  color-mix(in srgb, var(--c-bg-invert) 5%, white);
	--c-bg-invert-f2:  color-mix(in srgb, var(--c-bg-invert) 2%, white);
	--c-bg-invert-f1:  color-mix(in srgb, var(--c-bg-invert) 1%, white);

/* container widths and gaps / margins / paddings */
	/* gaps */
	--gap-default: 	24px;
	--gap-half: 	12px;
	--gap-default-negative: calc(var(--gap-default) * -1);
	--gap-half-negative: 	calc(var(--gap-half) * -1);
	/* containers */
	--container-width: 		calc(1280px + (var(--gap-default) * 2));
	--container-width-s: 	calc(1080px + (var(--gap-default) * 2));
	--container-width-xs: 	calc(767px + (var(--gap-default) * 2));
	--container-width-xxs: 	calc(520px  + (var(--gap-default) * 2));
	/* viewport widths */
	--scrollbar-width: 			10px;
	--container-outer-width: 	calc(var(--container-width) + (var(--gap-default) * 2));
	--screen-sides: 			calc(100vw - var(--container-outer-width));
	--screen-side: 				calc(var(--screen-sides) / 2);
	--scrollbar-width-half: 	calc(var(--scrollbar-width) / 2);
	/* spacers */
	--space-xxl: clamp(10rem, -0.270rem + 13.500vw, 20rem);
	--space-xl:  clamp(8rem, -0.216rem + 10.800vw, 16rem);
	--space-l:   clamp(6rem, -0.162rem + 8.100vw, 12rem);
	--space-m:   clamp(4rem, -0.108rem + 5.400vw, 8rem);
	--space-s:   clamp(2.4rem, -0.054rem + 2.700vw, 5rem);
	--space-xs:  clamp(2.2rem, 1.876rem + 0.700vw, 3.2rem);

/* font-sizes */
	--fs-xl: clamp(2.0rem, 1.767rem + 0.600vw, 2.6rem);
	--fs-l:  clamp(1.7rem, 1.503rem + 0.300vw, 2.0rem);
	--fs-m:  clamp(1.4rem, 1.269rem + 0.200vw, 1.6rem);
	--fs-s:  clamp(1.1rem, 0.903rem + 0.300vw, 1.4rem);
	--fs-xs: clamp(0.9rem, 0.703rem + 0.300vw, 1.2rem);
	
	--fs-schaltflaechen: clamp(2.1rem, 1.903rem + 0.300vw, 2.4rem);

/* letters-spacing */
	--ls-l: 0.20rem;
	--ls-m: 0.10rem;
	--ls-s: 0.05rem;
	
/* line-height */
	--lh-l: 1.6;
	--lh-m: 1.4;
	--lh-s: 1.2;

/* animations */
	--a-easing-default: ease;
	--a-timing-default: 0.3s;
	--a-easing-slow: ease-in-out;
	--a-timing-slow: 0.6s;
	--transition: all var(--a-timing-default) var(--a-easing-default);
	--transition-slow: all var(--a-timing-slow) var(--a-easing-slow);
	--a-distance: 40px;

/* miscellaneous */
	--border-radius: 14px;
	--border-radius-buttons: 100px;
	--box-shadow-default: 0 0 10px var(--c-bg-invert-14);
	--box-shadow-large: 0 5px 30px var(--c-bg-invert-34);
	
/* list */
	--ul-list-style-width: 	0.3em; /* best use em units to scale with clamp() font-size */
	--ul-list-style-height: 0.3em; /* best use em units to scale with clamp() font-size */
	--ul-list-style-radius: 50%;
	
/* header */
	--header-height: 120px;
}

@media (max-width: 1080px) {
	:root {
		--header-height: 100px;
	}
}
@media (max-width: 767px) {
	:root {
		--header-height: 80px;
	}
}

/* accessibility */
html.high-contrast {
	--c-primary: #000;
}
html.high-contrast #theme-toggle {
	display: none !important;
}

/* --- Dark Mode Variable Overrides --- */
html[data-color-theme="dark"] {
	&:root {
		--c-white: #232323;
		--c-text: var(--c-text-invert);
		--c-headlines: var(--c-headlines-invert);
		--c-bg: #232323;
		--c-bg-invert: #ffffff;
		--c-lightest-gray: color-mix(in srgb, var(--c-bg) 80%, #000000);
	}
	& .sticky-nav header#main-header {
		box-shadow: 0 -5px 20px 0 rgba(0, 0, 0, .4);
	}
	& header#main-header.has-light-logo #logo-light {
		display: inline-block;
	}
	& header#main-header.has-light-logo #logo-default {
		display: none;
	}
	& .footer-bottom {
		background-color: color-mix(in srgb, var(--c-bg) 0%, #000000);
		color: var(--c-text);
	}
}
/* --- Inverted background text color swap --- */
/* Light mode: dark bg → white text */
.bg-invert {
	--c-text: var(--c-text-invert);
	--c-headlines: var(--c-headlines-invert);
}
/* Dark mode: light bg → default dark text */
html[data-color-theme="dark"] .bg-invert {
	--c-text: var(--c-text-base);
	--c-headlines: var(--c-headlines-base);
}