/******************************/
/* enerxite AG                */ 
/*                            */
/*                            */
/******************************/

:root {
	--base-size: .5rem;
	--base-fontsize: 1.125rem;
	--base-fontsize-ratio: 1.125;

	--base-test-background: #afafaf;

	--core-color-brand-primary: oklch(38% 0.27 310 / var(--core-color-alpha, 100%)); /* #6c0079 */
	--core-color-brand-accent-1: oklch(55% 0.30 310); /* #9f00a8 */
	--core-color-brand-accent-2: oklch(67% 0.26 308); /* #C33BD1 */
	--core-color-brand-contrast-cool: oklch(60% 0.22 230); /* #0087A8 */
	--core-color-brand-accent-warm: oklch(68% 0.22 60); /* #E27200 */
	--core-color-text-default: oklch(28% 0.02 270); /* #1E1E1E */
	--core-color-text-muted: oklch(45% 0.02 270); /* #4B4B4B */
	--core-color-text-aside: oklch(58% 0.02 270); /* #6F6F6F */
	/* --core-color-text-on-dark-default: oklch(97.61% 0.0000 0.00); #f7f7f7 */
	--core-color-text-on-dark-default: oklch(95% 0.02 270); /* #f7f7f7 */
	--core-color-text-on-dark-accent-1: oklch(85% 0.14 80); /* #ffd96c */
	--core-color-text-on-dark-accent-2: oklch(88% 0.10 230); /* #b7f3ff */
	/*--core-color-text-link-default: oklch(60% 0.22 230); /* #0087A8 */
	--core-color-text-link-default: var(--core-color-brand-contrast-cool); /* #0087A8 */
	--core-color-gradient-default: linear-gradient(135deg, var(--core-color-brand-primary) 0%, var(--core-color-brand-accent-1) 35%, var(--core-color-brand-contrast-cool) 100%);
	--core-color-gradient-default: linear-gradient(135deg, oklch(from var(--core-color-brand-primary) l c h / var(--core-color-alpha)) 0%, oklch(from var(--core-color-brand-accent-1) l c h / var(--core-color-alpha)) 35%, oklch(from var(--core-color-brand-contrast-cool) l c h / var(--core-color-alpha)) 100%);
	--core-color-gradient-warm-energy: linear-gradient(120deg, var(--core-color-brand-primary) 0%, var(--core-color-brand-accent-warm) 100%);
	--core-color-gradient-subtle: linear-gradient(160deg, var(--core-color-brand-primary) 0%, var(--core-color-brand-contrast-cool) 100%);
	--core-color-surface-page: oklch(100% 0 0); /* #fff */
	--core-color-surface-extralight: oklch(96% 0.02 310); /* #f9f5fa */
	--core-color-surface-light: oklch(92% 0.04 310); /* #f3e6f8 */
	--core-color-surface-mid: oklch(88% 0.02 270); /* #e9e9ec */
	--core-color-surface-deeptint: oklch(85% 0.04 310); /* #e3d8eb */
	--core-color-surface-divider: oklch(78% 0.03 310); /* #d0c7d6 */
	--core-borderradius-full: calc(var(--core-borderradius-xl) * 8);
	--core-borderradius-s: .5rem;
	--core-borderradius-m: calc(var(--core-borderradius-s) * 2);
	--core-borderradius-l: calc(var(--core-borderradius-m) * 2);
	--core-borderradius-xl: calc(var(--core-borderradius-l) * 2);
	--core-spacing-xxs: var(--base-size);
	--core-spacing-xs: calc(var(--core-spacing-xxs) * 1.5);
	--core-spacing-s: calc(var(--core-spacing-xxs) * 2);
	--core-spacing-m: calc(var(--core-spacing-xs) * 2);
	--core-spacing-l: calc(var(--core-spacing-s)* 2);
	--core-spacing-xl: calc(var(--core-spacing-m)* 2);
	--core-spacing-xxl: calc(var(--core-spacing-l)* 2);
	--core-spacing-xxxl: calc(var(--core-spacing-xl)* 2);

	/* --core-fontsize-xxs: calc(var(--core-fontsize-xs) / var(--base-fontsize-ratio));
	--core-fontsize-xs: calc(var(--core-fontsize-s) / var(--base-fontsize-ratio));
	--core-fontsize-s: var(--base-fontsize);
	--core-fontsize-m: calc(var(--core-fontsize-s) * var(--base-fontsize-ratio));
	--core-fontsize-l: calc(var(--core-fontsize-m) * var(--base-fontsize-ratio) * var(--base-fontsize-ratio));
	--core-fontsize-xl: calc(var(--core-fontsize-l) * var(--base-fontsize-ratio) * var(--base-fontsize-ratio) * var(--base-fontsize-ratio));
	--core-fontsize-xxl: calc(var(--core-fontsize-xl) * var(--base-fontsize-ratio) * var(--base-fontsize-ratio) * var(--base-fontsize-ratio));
	--core-fontsize-xxxl: calc(var(--core-fontsize-xxl) * var(--base-fontsize-ratio) * var(--base-fontsize-ratio) * var(--base-fontsize-ratio)); */
	--core-fontsize-xxs: 0.8888888888888888rem;
	--core-fontsize-xs: 1rem;
	--core-fontsize-s: 1.125rem;
	--core-fontsize-m: 1.265625rem;
	--core-fontsize-l: 1.601806640625rem;
	--core-fontsize-xl: 2.2806973457336426rem;
	--core-fontsize-xxl: 3.247321025468409rem;
	--core-fontsize-xxxl: 4.623627006965762rem;

	/* --core-lineheight-xs: 1.5rem;
	--core-lineheight-s: 1.6875rem;
	--core-lineheight-m: 1.7718749999999999rem;
	--core-lineheight-l: 2.0823486328125003rem;
	--core-lineheight-xl: 2.736836814880371rem;
	--core-lineheight-xxl: 3.5720531280152503rem;
	--core-lineheight-xxxl: 4.623627006965762rem; */
	--core-lineheight-xxs: calc(var(--core-fontsize-xxs) * 1);
	--core-lineheight-xs: calc(var(--core-fontsize-xs) * 1.5);
	--core-lineheight-s: calc(var(--core-fontsize-s) * 1.5);
	--core-lineheight-m: calc(var(--core-fontsize-m) * 1.4);
	--core-lineheight-l: calc(var(--core-fontsize-l) * 1.3);
	--core-lineheight-xl: calc(var(--core-fontsize-xl) * 1.2);
	--core-lineheight-xxl: calc(var(--core-fontsize-xxl) * 1.1);
	--core-lineheight-xxxl: calc(var(--core-fontsize-xxxl) * 1.0);

	--font-display: Exo2;
	--font-body: NunitoSans;

	--brand-primary: var(--core-color-brand-primary);
	--brand-secondary: var(--core-color-brand-accent-warm);


	--page-max-width: 64rem;
	/* --page-max-width: 32rem; TEST */
	--page-min-width: 12rem;
	--page-color-bg: var(--core-color-surface-page);
	--page-color-text: var(--core-color-text-default);
	
	/* --page-header-padding-block: calc(.5rem * 2);
	--page-header-padding-inline: calc(.5rem * 2);
	--page-header-gap: Auto; */
	--page-header-padding-block: max(var(--core-spacing-s), min(0.0986rem + 2.8169vw, var(--core-spacing-l))) max(var(--core-spacing-xxs), min(0.0493rem + 1.4085vw, var(--core-spacing-s)));
	--page-header-padding-block: max(var(--core-spacing-s), min(0.0986rem + 2.8169vh, var(--core-spacing-l))) max(var(--core-spacing-xxs), min(0.0493rem + 1.4085vh, var(--core-spacing-s)));
	--page-header-padding-inline: calc((var(--page-main-gap) * 2));
	--page-header-padding-inline: max(var(--core-spacing-xxs), min(0.0493rem + 1.4085vw, var(--core-spacing-s)));
	--page-header-gap: Auto;
	/* --page-main-padding-block: 0;
	--page-main-padding-inline: .5rem;
	--page-main-gap: .5rem;
	--page-main-gap: max(var(--core-spacing-xxs), min(-0.4014rem + 2.8169vw, var(--core-spacing-m))); */
	--page-main-padding-block: 0;
	--page-main-padding-inline: max(var(--core-spacing-xxs), min(0.0493rem + 1.4085vw, var(--core-spacing-s)));
	--page-main-gap: max(var(--core-spacing-xxs), min(0.0493rem + 1.4085vw, var(--core-spacing-s)));
	/* --page-footer-padding-block: calc(.5rem * 2);
	--page-footer-padding-inline: calc(.5rem * 2);
	--page-footer-gap: var(--core-spacing-xxs); */
	--page-footer-padding-block: max(var(--core-spacing-s), min(0.0986rem + 2.8169vw, var(--core-spacing-l)));
	--page-footer-padding-inline: calc(.5rem * 2);
	--page-footer-gap: var(--core-spacing-xxs);

	/* --page-main-col-outside: minmax(0, 1fr); */
	--page-main-col-outside: minmax(0, 3fr);
	/* --page-main-col-bleed: minmax(0, calc(var(--base-size) * 4)); */
	/* --page-main-col-bleed: minmax(0, 2vw); */
	--page-main-col-bleed: minmax(0, 1fr);
	/* --page-main-col-bleed: minmax(2vw, 2fr); */

	--page-header-logo-height: 2rem;

	/* --container-default-padding-block: var(--core-spacing-s);
	--container-default-padding-inline: var(--core-spacing-xs);
	--container-default-padding-inline: var(--core-spacing-s);
	--container-default-gap: var(--core-spacing-xxs);
	--container-default-borderradius: var(--core-borderradius-m); */
	--container-default-padding-block: max(var(--core-spacing-m), min(0.1479rem + 4.2254vw, var(--core-spacing-xl)));
	--container-default-padding-inline: max(var(--core-spacing-s), min(0.0986rem + 2.8169vw, var(--core-spacing-l)));
	--container-default-gap: max(var(--core-spacing-xxs), min(-0.4014rem + 2.8169vw, var(--core-spacing-m)));
	--container-default-borderradius: max(var(--core-borderradius-m), min(0.0986rem + 2.8169vw, var(--core-borderradius-l)));
	--container-cta-padding-block: var(--container-default-padding-block);
	--container-cta-padding-inline: var(--container-default-padding-inline);
	--container-cta-gap: var(--container-default-gap);
	--container-cta-borderradius: var(--container-default-borderradius);
	/* --container-hero-padding-block: var(--core-spacing-xxl);
	--container-hero-padding-inline: var(--core-spacing-s);
	--container-hero-gap: var(--core-spacing-m);
	--container-hero-borderradius: var(--core-borderradius-l); */
	--container-hero-padding-block: max(var(--core-spacing-xl), min(0.2958rem + 8.4507vw, var(--core-spacing-xxxl)));
	--container-hero-padding-inline: max(var(--core-spacing-s), min(-1.7042rem + 8.4507vw, var(--core-spacing-xxl)));
	--container-hero-gap: max(var(--core-spacing-xxs), min(-0.4014rem + 2.8169vw, var(--core-spacing-m)));
	--container-hero-borderradius: max(var(--core-borderradius-m), min(0.0986rem + 2.8169vw, var(--core-borderradius-l)));



/* Light backgrounds */
/* --link-light: oklch(88% 0.10 230);
--link-light-hover: oklch(82% 0.14 230);
--link-light-active: oklch(74% 0.16 230);
--link-light-focus: oklch(78% 0.18 230); */

/* Dark backgrounds */
/* --link-dark: oklch(85% 0.14 80);
--link-dark-hover: oklch(88% 0.18 80);
--link-dark-active: oklch(78% 0.20 80);
--link-dark-focus: oklch(90% 0.22 80); */

	--link-default: transparent;
	--link-visited: var(--link-text-visited);
	--link-hover: var(--link-text-hover);
	--link-active: var(--link-text-active);
	--link-focus: var(--link-text-focus);
	--link-text-default: oklch(60% 0.22 230);
	--link-text-visited: var(--link-text-default);
	--link-text-hover: oklch(66% 0.26 230);
	--link-text-active: oklch(52% 0.24 230);
	--link-text-focus: oklch(70% 0.30 230);

	--link-on-dark-default: var(--link-on-dark-text-default);
	--link-on-dark-visited: var(--link-on-dark-text-visited);
	--link-on-dark-hover: var(--link-on-dark-text-hover);
	--link-on-dark-active: var(--link-on-dark-text-active);
	--link-on-dark-focus: var(--link-on-dark-text-focus);
	--link-on-dark-text-default: oklch(85% 0.14 80);
	--link-on-dark-text-visited: var(--link-on-dark-text-default);
	--link-on-dark-text-hover: oklch(88% 0.18 80);
	--link-on-dark-text-active: oklch(78% 0.20 80);
	--link-on-dark-text-focus: oklch(90% 0.22 80);

	/* --button-padding-block: var(--core-spacing-xs); */
	--button-padding-block: var(--core-spacing-xxs);
	/* --button-padding-inline: var(--core-spacing-s); */
	--button-padding-inline: var(--core-spacing-s);
	--button-gap: var(--core-spacing-xxs);
	--button-borderradius: var(--core-borderradius-s);

	/* --button-primary-border: #6c0079; */
	--button-primary-border: var(--link-text-default);

	/* --button-primary-default: #6c0079; */
	--button-primary-default: var(--link-text-default);
	--button-primary-visited: var(--link-text-visited);
	--button-primary-hover: var(--link-text-hover);
	--button-primary-active: var(--link-text-active);
	--button-primary-focus: var(--link-text-focus);
	--button-primary-text-default: var(--core-color-text-on-dark-default);
	--button-primary-text-visited: var(--core-color-text-on-dark-default);
	--button-primary-text-hover: var(--core-color-text-on-dark-default);
	--button-primary-text-active: var(--core-color-text-on-dark-default);
	--button-primary-text-focus: var(--core-color-text-on-dark-default);

	--button-secondary-default: transparent;
	--button-secondary-default-border: var(--link-text-default);
	--button-secondary-visited: var(--link-text-default);
	--button-secondary-hover: var(--link-text-hover);
	--button-secondary-active: var(--link-text-active);
	--button-secondary-focus: var(--link-text-focus);
	--button-secondary-text-default: var(--link-text-default);
	--button-secondary-text-visited: var(--core-color-text-on-dark-default);
	--button-secondary-text-hover: var(--core-color-text-on-dark-default);
	--button-secondary-text-active: var(--core-color-text-on-dark-default);
	--button-secondary-text-focus: var(--core-color-text-on-dark-default);

	
	--button-on-dark-primary-border: var(--link-on-dark-text-default);

	--button-on-dark-primary-default: var(--link-on-dark-text-default);
	--button-on-dark-primary-visited: var(--link-on-dark-text-visited);
	--button-on-dark-primary-hover: var(--link-on-dark-text-hover);
	--button-on-dark-primary-active: var(--link-on-dark-text-active);
	--button-on-dark-primary-focus: var(--link-on-dark-text-focus);
	--button-on-dark-primary-text-default: var(--core-color-text-default);
	--button-on-dark-primary-text-visited: var(--core-color-text-default);
	--button-on-dark-primary-text-hover: var(--core-color-text-default);
	--button-on-dark-primary-text-active: var(--core-color-text-default);
	--button-on-dark-primary-text-focus: var(--core-color-text-default);

	--button-on-dark-secondary-default: transparent;
	--button-on-dark-secondary-default-border: var(--link-on-dark-text-default);
	--button-on-dark-secondary-visited: var(--link-on-dark-text-default);
	--button-on-dark-secondary-hover: var(--link-on-dark-text-hover);
	--button-on-dark-secondary-active: var(--link-on-dark-text-active);
	--button-on-dark-secondary-focus: var(--link-on-dark-text-focus);
	--button-on-dark-secondary-text-default: var(--link-on-dark-text-default);
	--button-on-dark-secondary-text-visited: var(--core-color-text-default);
	--button-on-dark-secondary-text-hover: var(--core-color-text-default);
	--button-on-dark-secondary-text-active: var(--core-color-text-default);
	--button-on-dark-secondary-text-focus: var(--core-color-text-default);


	--icon-borderradius: var(--core-borderradius-full);
	--icon-border: .2rem;
	--icon-default: 1.5rem;
	--icon-default: 2rem;
	--icon-bg: var(--core-color-gradient-subtle);


	/* --font-h1-size: var(--core-fontsize-xl);
	--font-h1-line: var(--core-lineheight-xl);
	--font-h2-size: var(--core-fontsize-l);
	--font-h2-line: var(--core-lineheight-l);
	--font-h3-size: var(--core-fontsize-m);
	--font-h3-line: var(--core-lineheight-m);
	--font-h4-size: var(--core-fontsize-s);
	--font-h4-line: var(--core-lineheight-s);
	--font-p-size: var(--core-fontsize-s);
	--font-p-line: var(--core-lineheight-s);
	--font-small-size: var(--core-fontsize-xs);
	--font-small-line: var(--core-lineheight-xs);
	--font-btn-size: var(--core-fontsize-s);
	--font-btn-line: var(--core-lineheight-s);
	--font-nav-size: var(--core-fontsize-s);
	--font-nav-line: var(--core-lineheight-s); */


	/* --btn-primary: oklch(89.7% 0.134 90);
	--btn-primary-base: 0.05;
	--btn-primary-10: oklch(from var(--btn-primary) 10% calc(var(--btn-primary-base) + (sin(1.0 * pi) * c)) h);
	--btn-primary-20: oklch(from var(--btn-primary) 20% calc(var(--btn-primary-base) + (sin(0.9 * pi) * c)) h);
	--btn-primary-30: oklch(from var(--btn-primary) 30% calc(var(--btn-primary-base) + (sin(0.8 * pi) * c)) h);
	--btn-primary-40: oklch(from var(--btn-primary) 40% calc(var(--btn-primary-base) + (sin(0.7 * pi) * c)) h);
	--btn-primary-50: oklch(from var(--btn-primary) 50% calc(var(--btn-primary-base) + (sin(0.6 * pi) * c)) h);
	--btn-primary-60: oklch(from var(--btn-primary) 60% calc(var(--btn-primary-base) + (sin(0.5 * pi) * c)) h);
	--btn-primary-70: oklch(from var(--btn-primary) 70% calc(var(--btn-primary-base) + (sin(0.4 * pi) * c)) h);
	--btn-primary-80: oklch(from var(--btn-primary) 80% calc(var(--btn-primary-base) + (sin(0.3 * pi) * c)) h);
	--btn-primary-90: oklch(from var(--btn-primary) 90% calc(var(--btn-primary-base) + (sin(0.2 * pi) * c)) h);
	--btn-primary-100: oklch(from var(--btn-primary) 100% calc(var(--btn-primary-base) + (sin(0.1 * pi) * c)) h); */

  /* --container-desktop-hero-borderradius: (((.5rem * 2) * 2) * 2);
  --container-desktop-hero-padding-block: .5rem * 2 * 2 * 2;
  --container-desktop-hero-gap: .5rem * 1.5 * 2;
  --container-desktop-hero-padding-inline: .5rem * 2 * 2 * 2;
  --container-desktop-default-borderradius: ((.5rem * 2) * 2);
  --container-desktop-default-padding-block: .5rem * 1.5 * 2 * 2;
  --container-desktop-default-gap: .5rem * 1.5 * 2;
  --container-desktop-default-padding-inline: .5rem * 2 * 2;
  --container-desktop-cta-borderradius: ((.5rem * 2) * 2);
  --container-desktop-cta-padding-block: .5rem * 2 * 2 * 2;
  --container-desktop-cta-gap: .5rem * 1.5 * 2;
  --container-desktop-cta-padding-inline: .5rem * 2 * 2; */

  /* --button-link-border: [object Object];
  --button-on-dark-link-border: [object Object]; */

  /* --h1: [object Object];
  --h2: [object Object];
  --h3: [object Object];
  --h4: [object Object];
  --p: [object Object];
  --p-teaser: [object Object];
  --small: [object Object];
  --btn: [object Object];
  --nav: [object Object]; */

  --page-desktop-header-padding-block: .5rem * 2 * 2 * 2;
  --page-desktop-header-gap: .5rem * 1.5 * 2;
  --page-desktop-header-padding-inline: .5rem * 2 * 2;
  --page-desktop-main-padding-block: .5rem * 2 * 2 * 2;
  --page-desktop-main-gap: .5rem * 1.5 * 2;
  --page-desktop-main-padding-inline: .5rem * 2 * 2;
  --page-desktop-footer-padding-block: .5rem * 2 * 2 * 2;
  --page-desktop-footer-gap: .5rem;
  --page-desktop-footer-padding-inline: .5rem * 2 * 2;


}





@font-face {
	font-family: "Exo2";
	src: url("fonts/exo-2-v26-latin-700.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "NunitoSans";
	src: url("fonts/nunito-v32-latin-regular.woff2") format("woff2");
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "NunitoSans";
	src: url("fonts/nunito-v32-latin-700.woff2") format("woff2");
	font-weight: bold;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "NunitoSans";
	src: url("fonts/nunito-v32-latin-italic.woff2") format("woff2");
	font-weight: normal;
	font-style: italic;
	font-display: swap;
}



*,
*:before,
*:after {
	box-sizing: inherit;
}
@-ms-viewport {
	width: extend-to-zoom;
	zoom: 1;
}

html {
	box-sizing: border-box;
	min-height: 100%;
	/* font: clamp(1.125rem, 1.125rem + 0vw, 1.125rem) / 1.5 sentient, serif; */
	/* font: var(--base-fontsize) / var(--base-fontsize-ratio) var(--font-body), sans-serif; */
	/* font: var(--_fnt-fontsize) / var(--_fnt-lineheight) var(--_fnt-weight) var(--font-body), sans-serif; */
	font: clamp(var(--core-fontsize-xs), 0.8873rem + 0.3521vw, var(--core-fontsize-s)) / clamp(var(--core-lineheight-xs), 0.8873rem + 0.3521vw, var(--core-lineheight-s)) var(--font-body), sans-serif;
	-webkit-text-size-adjust: 100%;
	-webkit-hyphens: auto;
	hyphens: auto;
	background: var(--page-color-bg);
	color: var(--page-color-text);
	transition: color 0.25s ease-in-out, background-color 0.25s ease-in-out,
		opacity 0.25s ease-in-out;
	overflow-y: scroll; /* enforce a scrollbar at first paint to remove one CLS cumulative layout shift. ERROR: maybe position:sticky stops working because parent element has other overflow-default */
}
@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}
body {
	margin: 0;
}

main > hr {
	margin-block: var(--page-main-gap);
	border: 0;
}

.page-header,
.page-footer,
main > section,
main > hr {
	display: grid;
	gap: var(--page-main-gap);
	/* grid-template-columns: [column-start] var(--page-main-col-outside) [content-bleed-start] var(--page-main-col-bleed) [content-column-start] minmax(var(--page-min-width), var(--page-max-width)) [content-column-end] var(--page-main-col-bleed) [content-bleed-end] var(--page-main-col-outside) [column-end]; */
	grid-template-columns: [content-bleed-start] var(--page-main-col-bleed) [content-column-start] minmax(var(--page-min-width), var(--page-max-width)) [content-column-end] var(--page-main-col-bleed) [content-bleed-end];
	grid-template-rows: [row-start] auto [row-end];
	min-height: calc(var(--container-default-borderradius) * 2.5);
}
main > section + section {
	margin-block-start: var(--page-main-gap);
}

.wrapper,
main > section > * {
	grid-column: content-column-start / content-column-end;
}

/* @media (min-width: var(--page-min-width)) { */
@media (min-width: calc(36rem - .5rem)) {
	.page-header,
	.page-footer,
	main > section,
	main > hr {
		grid-template-columns: [column-start] var(--page-main-col-outside) [content-bleed-start] var(--page-main-col-bleed) [content-column-start] minmax(var(--page-min-width), var(--page-max-width)) [content-column-end] var(--page-main-col-bleed) [content-bleed-end] var(--page-main-col-outside) [column-end];
	}
	main > section {
		overflow-x: hidden;
	}
	/* main > section::before,
	main > hr::before {
		content: "";
		background: var(--core-color-surface-extralight);
		border-radius: 0 var(--container-default-borderradius) var(--container-default-borderradius) 0;
		grid-column: column-start / content-column-start;
		grid-row: row-start / row-end;

		overflow: hidden;
		margin-inline-start: calc(var(--container-default-borderradius) * -1);
	}
	main > section::after,
	main > hr::after {
		content: "";
		background: var(--core-color-surface-extralight);
		border-radius: var(--container-default-borderradius) 0 0 var(--container-default-borderradius);
		grid-column: content-column-end / column-end;
		grid-row: row-start / row-end;

		overflow: hidden;
		margin-inline-end: calc(var(--container-default-borderradius) * -1);
	} */
}

.wrapper {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: var(--core-spacing-xs);
	padding-block: var(--page-header-padding-block);
	padding-inline: var(--page-header-padding-inline);
}

@media (min-height: 30rem) and (min-width: calc(36rem - .5rem)) {
	.page-header {
		position: sticky;
		top: 0;
		z-index: 1;
		backdrop-filter: blur(1rem);

		border-block-end: .1rem solid oklch(from var(--page-color-bg) L C H / 75%);
		background: oklch(from var(--page-color-bg) L C H / 65%);
	}
}
.page-header .logo svg {
	width: auto;
	height: var(--page-header-logo-height);
	filter: drop-shadow(-.05rem -.05rem 0px oklch(from var(--page-color-bg) L C H / 65%)) drop-shadow(.05rem -.05rem 0px oklch(from var(--page-color-bg) L C H / 65%)) drop-shadow(.05rem .05rem 0px oklch(from var(--page-color-bg) L C H / 65%)) drop-shadow(-.05rem .05rem 0px oklch(from var(--page-color-bg) L C H / 65%));
}
.page-header menu {
	margin-block: 0;
	padding-inline: 0;
	list-style-type: ""; /* https://www.matuzo.at/blog/2023/removing-list-styles-without-affecting-semantics */

	display: inline-flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--core-spacing-xxs);
}
/* .page-header a:not([class*="btn"]) {
	display: inline-flex;
	font-weight: bold;
	text-decoration: none;
	white-space: nowrap;
	-webkit-text-stroke: .25em oklch(from var(--page-color-bg) L C H / 65%);
  	paint-order: stroke fill;
}
.page-header a:not([class*="btn"]):hover,
.page-header a:not([class*="btn"]):active,
.page-header a:not([class*="btn"]):focus {
	text-decoration: underline;
} */

.page-footer p {
	margin-block-end: 0;
}
.page-footer-legal {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1ch;
}

main > section.content-bleed > * {
	grid-column: content-bleed-start / content-bleed-end;
}
main > section.content-bleed::before {
	grid-column: column-start / content-bleed-start;
}
main > section.content-bleed::after {
	grid-column: content-bleed-end / column-end;
}

section > .content-inner {
	/* 12er-grid innerhalb von section, weil es keine Möglichkeit gibt, eine flexibel breite mittlere Spalte mit einer Maximalbreite zu setzen. */
	display: grid;
	gap: var(--page-main-gap);
	grid-template-columns: [inner-column-start] repeat(6, 1fr) [inner-column-end];
	grid-template-rows: [inner-row-start] auto [inner-row-end];
}
.grid-sub {
	/* 12er-grid wird an verschachtelte Container vererbt, um gleiche Breiten der Spalten zu erhalten. */
	grid-template-columns: subgrid;
	display: grid;
	gap: var(--page-main-gap);
}
.grid-12,
.grid-8,
.grid-6,
.grid-4 {
	grid-column: span 6;
}
.grid-sub .grid-4,
.grid-3 {
	grid-column: span 3;
}
@media (min-width: calc(36rem - .5rem)) {
	section > .content-inner {
		grid-template-columns: [inner-column-start] repeat(12, 1fr) [inner-column-end];
	}

	.grid-12 {
		grid-column: span 12;
	}
	.grid-8 {
		grid-column: span 8;
	}
	.grid-sub .grid-4,
	.grid-4 {
		grid-column: span 4;
	}
}

.grid-reversed {
	direction: rtl;
}
.grid-reversed > * {
	direction: ltr;
}
:dir(rtl) .grid-reversed {
	direction: ltr;
}
:dir(rtl) .grid-reversed > * {
	direction: rtl;
}

[class*="container"] {
	--_container-gap: var(--container-default-gap);
	--_container-padding-block: var(--container-default-padding-block);
	--_container-padding-inline: var(--container-default-padding-inline);
	--_container-borderradius: var(--container-default-borderradius);
	--_container-background: var(--core-color-surface-extralight);
	--_container-color: var(--core-color-text-default);

	position: relative;
	gap: var(--_container-gap);
	padding-block: var(--_container-padding-block);
	padding-inline: var(--_container-padding-inline);
	border-radius: var(--_container-borderradius);
	background: var(--_container-background);
	color: var(--_container-color);
}
/* @media (min-width: calc(36rem - .5rem)) { */
@media (min-width: calc(54rem - .5rem)) {
	[class*="container"]:has(.grid-sub) .grid-sub {
		/* Hack um Container in Containern zu zentrieren und zum äußeren Grid passende Maximalbreite zu setzen. */
		margin-inline: auto;
		width: calc(((100% + var(--_container-padding-inline) + var(--_container-padding-inline))/12) * 8);
	}
}

.container-highlight {
	--_container-background: var(--core-color-surface-deeptint);
	/* --_container-color: var(--core-color-text-on-dark-default); */
}
.container-no-background {
	--_container-background: transparent;
}
.container-no-padding {
	--_container-padding-block: 0;
	--_container-padding-inline: 0;

	overflow: hidden;
	object-fit: cover;
}
.container-hero {
	--_container-gap: var(--container-hero-gap);
	--_container-padding-block: var(--container-hero-padding-block);
	--_container-padding-inline: var(--container-hero-padding-inline);
	--_container-borderradius: var(--container-hero-borderradius);
	--core-color-alpha: 75% !important;
	--_container-background: linear-gradient(135deg, oklch(from var(--core-color-brand-primary) l c h / var(--core-color-alpha)) 0%, oklch(from var(--core-color-brand-accent-1) l c h / var(--core-color-alpha)) 35%, oklch(from var(--core-color-brand-contrast-cool) l c h / var(--core-color-alpha)) 100%), url(images/hero.avif);
	/* --_container-background: linear-gradient(135deg, oklch(from var(--core-color-brand-primary) l c h / var(--core-color-alpha)) 0%, oklch(from var(--core-color-brand-accent-1) l c h / var(--core-color-alpha)) 35%, oklch(from var(--core-color-brand-contrast-cool) l c h / var(--core-color-alpha)) 100%); */
	--_container-color: var(--core-color-text-on-dark-default);

	position: relative;
	text-align: center;
	background-position: center;
	background-size: cover;
	/* backdrop-filter: auto, blur(1rem); */
	/* -webkit-backdrop-filter: blur(.25rem); */
	backdrop-filter: blur(.25rem);
	overflow: hidden;
}
/* .container-hero::after {
	content: "";
	background: url(images/hero.avif);
	background-size: cover;
	position: absolute;
	inset: 0;
	z-index: -1;
	background-clip: inherit;
} */
.container-cta {
	/* --_container-gap: var(--container-cta-gap);
	--_container-padding-block: var(--container-cta-padding-block);
	--_container-padding-inline: var(--container-cta-padding-inline);
	--_container-borderradius: var(--container-cta-borderradius); */
	--_container-background: var(--core-color-gradient-subtle);
	--_container-color: var(--core-color-text-on-dark-default);

	text-align: center;
}


.contenttype-center {
	text-align: center;
}
.contenttype-center p {
	text-align: start;
}
.contenttype-list {
	display: grid;
	grid-template-areas: "icon headline" "icon description";
	grid-template-rows: min-content min-content;
	grid-template-columns: auto 1fr;
	gap: 0 var(--container-default-gap);
	text-align: start;
}
.contenttype-list > * {
	grid-area: description;
}
.contenttype-list > .image-icon {
	grid-area: icon;
	align-self: start;
}
.contenttype-list h3 {
	grid-area: headline;
}


a {
	--_lnk-link-background: var(--link-default);
	--_lnk-link-border: var(--link-default);
	--_lnk-link-color: var(--link-text-default);
	--_lnk-hover-background: var(--link-hover);
	--_lnk-hover-border: var(--link-hover);
	--_lnk-hover-color: var(--link-text-hover);

	border-radius: calc(var(--button-borderradius) / 2);
	/* background-color: var(--_lnk-background); */
	color: var(--_lnk-color);
	text-decoration: underline;
	text-decoration-thickness: 0.075em;
	text-underline-offset: 0.15em;
	transition: background-color 0.15s ease-in, border-color 0.15s ease-in, color 0.15s ease-in;
}
a:link, a:visited {
	--_lnk-background: var(--_lnk-link-background);
	--_lnk-border: var(--_lnk-link-border);
	--_lnk-color: var(--_lnk-link-color);
}
a:hover, a:active, a:focus {
	--_lnk-background: var(--_lnk-hover-background);
	--_lnk-border: var(--_lnk-hover-border);
	--_lnk-color: var(--_lnk-hover-color);
}
a:focus {
	outline: .125rem solid var(--_lnk-color);
	outline-offset: .25rem;
}
.container-hero a,
.container-cta a {
	--_lnk-link-background: var(--link-on-dark-default);
	--_lnk-link-border: var(--link-on-dark-default);
	--_lnk-link-color: var(--link-on-dark-text-default);
	--_lnk-hover-background: var(--link-on-dark-hover);
	--_lnk-hover-border: var(--link-on-dark-hover);
	--_lnk-hover-color: var(--link-on-dark-text-hover);
}


[class*="btn"] {
	--_btn-link-background: var(--button-secondary-default);
	--_btn-link-border: var(--button-secondary-default-border);
	--_btn-link-color: var(--button-secondary-text-default);
	--_btn-hover-background: var(--button-secondary-hover);
	--_btn-hover-border: var(--button-secondary-hover);
	--_btn-hover-color: var(--button-secondary-text-hover);

	--_btn-background: var(--_btn-link-background);
	--_btn-border: var(--_btn-link-border);
	--_btn-color: var(--_btn-link-color);

	display: inline-flex;
	gap: var(--button-gap);
	flex-direction: row;
	flex-wrap: nowrap;
	padding-block: var(--button-padding-block);
	padding-inline: var(--button-padding-inline);
	border: .2rem solid var(--_btn-border);
	border-radius: var(--button-borderradius);
	background: var(--_btn-background);
	color: var(--_btn-color);
	/* font: var(--core-fontsize-s)/var(--core-lineheight-s) var(--font-display); */
	font-family: var(--font-display);
	text-decoration: none;
	text-box-trim: trim-both;
	white-space: nowrap;
}
/* [class*="btn"]:link, [class*="btn"]:visited {
	--_btn-background: var(--_btn-link-background);
	--_btn-border: var(--_btn-link-border);
	--_btn-color: var(--_btn-link-color);
} */
[class*="btn"]:hover, [class*="btn"]:active, [class*="btn"]:focus {
	--_btn-background: var(--_btn-hover-background);
	--_btn-border: var(--_btn-hover-border);
	--_btn-color: var(--_btn-hover-color);
}
.btn-nav {
	--_btn-link-background: transparent;
	--_btn-link-border: transparent;
}
.btn-primary {
	--_btn-link-background: var(--button-primary-default);
	--_btn-link-border: var(--button-primary-default);
	--_btn-link-color: var(--button-primary-text-default);
	--_btn-hover-background: var(--button-primary-hover);
	--_btn-hover-border: var(--button-primary-hover);
	--_btn-hover-color: var(--button-primary-text-hover);
}

.container-hero [class*="btn"],
.container-cta [class*="btn"] {
	--_btn-link-background: var(--button-on-dark-secondary-default);
	--_btn-link-border: var(--button-on-dark-secondary-default-border);
	--_btn-link-color: var(--button-on-dark-secondary-text-default);
	--_btn-hover-background: var(--button-on-dark-secondary-hover);
	--_btn-hover-border: var(--button-on-dark-secondary-hover);
	--_btn-hover-color: var(--button-on-dark-secondary-text-hover);
}
.container-hero .btn-primary,
.container-cta .btn-primary {
	--_btn-link-background: var(--button-on-dark-primary-default);
	--_btn-link-border: var(--button-on-dark-primary-default);
	--_btn-link-color: var(--button-on-dark-primary-text-default);
	--_btn-hover-background: var(--button-on-dark-primary-hover);
	--_btn-hover-border: var(--button-on-dark-primary-hover);
	--_btn-hover-color: var(--button-on-dark-primary-text-hover);
}

.button-group {
	display: inline-flex;
	gap: var(--button-gap);
	flex-direction: row;
	flex-wrap: wrap;
	margin-block: 0 var(--core-spacing-s);
}
.button-group > * {
	margin-inline: auto;
}



/* :is(h1, h2, h3, h4, h5, h6, p, ul, ol) { */
:is(h1, h2, h3, h4, h5, h6) {
	/* --_fnt-fontsize: var(--core-fontsize-s);
	--_fnt-lineheight: var(--core-lineheight-s); */
	--_fnt-weight: 600;

	margin-block: 0 var(--text-padding);
	font-size: var(--_fnt-fontsize);
	line-height: var(--_fnt-lineheight);
	font-weight: var(--_fnt-weight);
	/* hyphens: none; */
}
:is(h1, h2, h3, h4, h5, h6) {
	font-family: var(--font-display);
	text-wrap: balance;
	letter-spacing: 0;

	/* @media #{$device-phone} {
		-webkit-hyphens: none;
		hyphens: none;
	} */
}
h1, .h1 {
	/* --_fnt-fontsize: var(--core-fontsize-xl); */
	/* --_fnt-lineheight: var(--core-lineheight-xl); */
	/* --_fnt-fontsize: clamp(var(--core-fontsize-xxl), 2.0067rem + 3.8769vw, var(--core-fontsize-xxxl));
	--_fnt-lineheight: clamp(var(--core-lineheight-xxl), 2.0067rem + 3.8769vw, var(--core-lineheight-xxxl)); */
	/* --_fnt-fontsize: clamp(var(--core-fontsize-xl), 0.1688rem + 6.5998vw, var(--core-fontsize-xxxl)); */
	--_fnt-fontsize: clamp(var(--core-fontsize-xl), 0.1688rem + 4.5998vw, var(--core-fontsize-xxxl));
	--_fnt-lineheight: clamp(var(--core-lineheight-xl), 0.1688rem + 6.5998vw, var(--core-lineheight-xxxl));
	--_fnt-weight: 700;
	margin-block-end: var(--core-spacing-m);
}
h2, .h2 {
	/* --_fnt-fontsize: var(--core-fontsize-l);
	--_fnt-lineheight: var(--core-lineheight-l); */
	/* --_fnt-fontsize: clamp(var(--core-fontsize-l), 0.1185rem + 4.6353vw, var(--core-fontsize-xxl)); */
	--_fnt-fontsize: clamp(var(--core-fontsize-l), 0.2rem + 2.6353vw, var(--core-fontsize-xxl));
	--_fnt-lineheight: clamp(var(--core-lineheight-l), 0.1185rem + 4.6353vw, var(--core-lineheight-xxl));
	margin-block-end: var(--core-spacing-s);
}
h3, .h3 {
	/* --_fnt-fontsize: var(--core-fontsize-m);
	--_fnt-lineheight: var(--core-lineheight-m); */
	--_fnt-fontsize: clamp(var(--core-fontsize-s), 0.6952rem + 1.3431vw, var(--core-fontsize-l));
	--_fnt-lineheight: clamp(var(--core-lineheight-s), 0.6952rem + 1.3431vw, var(--core-lineheight-l));
	margin-block-end: var(--core-spacing-s);
}
h4, .h4 {
	/* --_fnt-fontsize: var(--core-fontsize-s);
	--_fnt-lineheight: var(--core-lineheight-s); */
	--_fnt-fontsize: clamp(var(--core-fontsize-s), 0.9982rem + 0.3961vw, var(--core-fontsize-m));
	--_fnt-lineheight: clamp(var(--core-lineheight-s), 0.9982rem + 0.3961vw, var(--core-lineheight-m));
	margin-block-end: var(--core-spacing-s);
	text-transform: uppercase;
}
/* h5, .h5 {
	--_fnt-fontsize: var(--core-fontsize-xl);
	--_fnt-lineheight: var(--core-lineheight-xl);
	margin-block-end: var(--core-spacing-s);
}
h6, .h6 {
	--_fnt-fontsize: var(--core-fontsize-xl);
	--_fnt-lineheight: var(--core-lineheight-xl);
	margin-block-end: var(--core-spacing-s);
} */
/* p, ul, ol {
	--_fnt-fontsize: var(--core-fontsize-xl);
	--_fnt-lineheight: var(--core-lineheight-xl);
} */
p, address {
	/* --_fnt-fontsize: clamp(var(--core-fontsize-xs), 0.8873rem + 0.3521vw, var(--core-fontsize-s));
	--_fnt-lineheight: clamp(var(--core-lineheight-xs), 0.8873rem + 0.3521vw, var(--core-lineheight-s)); */

	margin-block: 0 var(--core-spacing-s);
	text-wrap: pretty;
	orphans: 2;
	widows: 2;
}
p.teaser, .container-hero p, .container-cta p {
	/* font-size: var(--core-fontsize-m);
	line-height: var(--core-lineheight-m); */
	/* --_fnt-fontsize: clamp(var(--core-fontsize-s), 0.9982rem + 0.3961vw, var(--core-fontsize-m));
	--_fnt-lineheight: clamp(var(--core-lineheight-s), 0.9982rem + 0.3961vw, var(--core-lineheight-m)); */

	font-size:clamp(var(--core-fontsize-s), 0.9982rem + 0.3961vw, var(--core-fontsize-m));
	line-height: clamp(var(--core-lineheight-s), 0.9982rem + 0.3961vw, var(--core-lineheight-m));
	margin-block-end: var(--core-spacing-s);
}
small, .page-footer > p {
	/* font-size: var(--core-fontsize-xxs);
	line-height: var(--core-lineheight-xxs); */
	/* --_fnt-fontsize: clamp(var(--core-fontsize-xxs), 0.7887rem + 0.313vw, var(--core-fontsize-xs));
	--_fnt-lineheight: clamp(var(--core-lineheight-xxs), 0.7887rem + 0.313vw, var(--core-lineheight-xs)); */
	font-size: clamp(var(--core-fontsize-xxs), 0.7887rem + 0.313vw, var(--core-fontsize-xs));
	line-height: clamp(var(--core-lineheight-xxs), 0.7887rem + 0.313vw, var(--core-lineheight-xs));
	margin-block-end: var(--core-spacing-xxs);
}
address {
	font-style: normal;
}

ul, ol {
	margin-block: 0 var(--core-spacing-s);
	padding-inline-start: var(--core-spacing-m);
	text-wrap: pretty;
}
:where(ul, ol) > li::marker {
	/* content: url(images/enerxite-x.svg);
	width: .5rem; */
	color: var(--core-color-brand-primary);
	line-height: 1;
	font-weight: 600;
}

audio, iframe, img, svg, video {
	display: block;
	max-block-size: 100%;
	max-inline-size: 100%;
}
svg {
	display: block;
	width: auto;
	height: auto; /* TEST */
	margin-inline: auto;
}

figure {
	width: auto;
	height: auto;
	margin-block: 0 var(--core-spacing-s);
	margin-inline: auto;
}
figcaption {
	max-width: 80ch;
	margin-block: var(--core-spacing-xs) 0;
	font-size: clamp(var(--core-fontsize-xxs), 0.7887rem + 0.313vw, var(--core-fontsize-xs));
	line-height: clamp(var(--core-lineheight-xxs), 0.7887rem + 0.313vw, var(--core-lineheight-xs));
	font-style: italic;
	color: var(--core-color-text-muted);
}
figcaption::before,
figcaption::after {
	content: "";
	display: block;
	width: 2rem;
	height: 0;
	max-width: 40%;
}
figcaption::before {
	margin-block: 0 var(--core-spacing-xxs);
	border-block-start: .1rem solid var(--core-color-text-aside);
}
figcaption::after {
	width: 4rem;
	max-width: 80%;
	margin-block: var(--core-spacing-xxs) 0;
	border-block-end: .2rem solid var(--core-color-text-aside);
}

section hr {
	height: 0;
	max-width: 40%;
	margin-block: var(--page-main-gap);
	border-block-start: .2rem solid var(--core-color-text-aside);
	border-block-end: 0;
	overflow: visible;
}

[class*="container"] > *:not(div):last-child {
	margin-block-end: 0;
}

.image-icon {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	padding-inline: var(--core-spacing-xs);
	padding-block: var(--core-spacing-xs);
	border-radius: var(--icon-borderradius);
	border: var(--icon-border) solid transparent;
	background-image: linear-gradient(to bottom right, var(--_container-background), var(--_container-background)), repeating-conic-gradient(from var(--_angle), var(--core-color-brand-primary), var(--core-color-brand-contrast-cool), var(--core-color-brand-primary));
	background-clip: padding-box, border-box;
	background-origin: padding-box, border-box;
	animation: angleCycle 7.2s linear infinite;
}
@property --_angle {
	syntax: '<angle>';
	initial-value: 0deg;
	inherits: false;
}
@keyframes angleCycle {
	0% {
		--_angle: 0deg;
	}
	100% {
		--_angle: 360deg;
	}
}
.image-icon > svg {
	width: var(--icon-default);
	height: var(--icon-default);
	stroke: currentColor;
}
.image-icon + * {
	margin-block-start: var(--core-spacing-xxs);
}



.hyphens {
	-webkit-hyphens: auto;
	hyphens: auto;
}

.container-hero strong {
	color: var(--core-color-text-on-dark-accent-1);
}



@layer test {

.image-icon1 {
	display: inline-flex;
	padding-inline: var(--core-spacing-s);
	padding-block: var(--core-spacing-s);
	border-radius: var(--icon-borderradius);
	/* background: var(--icon-bg); */
	border: .5rem solid;
	border-image: var(--icon-bg) 5;
}

.image-icon2 {
	display: inline-flex;
	border: .2rem solid;
	border-image: var(--core-color-gradient-subtle) 2;
}

.image-icon3 {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	background: lime;
	background-clip: padding-box;
	padding-inline: var(--core-spacing-s);
	padding-block: var(--core-spacing-s);
	border-radius: var(--icon-borderradius);
	border: .2rem solid transparent;
	/* border-image: var(--core-color-gradient-subtle) 2; */
	position: relative;
	z-index: 1;
}
.image-icon3::after {
	content: '';
	position: absolute;
	/* 
	border-radius: inherit;
	background:  var(--core-color-gradient-subtle);
	background: red; */


			inset: 0;
			margin: -0.2rem;
			border-radius: 1000px;
			background-image: linear-gradient(to bottom right, #008cff, #e100ff);
			z-index: -1;
}

.image-icon4 {
display: inline-flex;
  justify-content: center;
  align-items: center;
  background: lime;
  background-clip: padding-box;
  padding-inline: var(--core-spacing-s);
  padding-block: var(--core-spacing-s);
  border-radius: var(--icon-borderradius);
  border: .2rem solid transparent;
  position: relative;
  z-index: 1;
  background-image: linear-gradient(to bottom right, #008cff, #e100ff);
}
.image-icon4::after {
	content: '';
  position: absolute;
  inset: 0;
  border-radius: 1000px;
  z-index: -1;
  background: lime;
  background-clip: padding-box;
  border: 5px solid transparent;
}
}