@layer layout-base {

html {
	width: 100%;
	height: 100%;
}

body {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

body > * {
	isolation: isolate;
}

* {
	box-sizing: border-box;
}

h1,
h2,
h3,
h4,
h5,
h6,
blockquote,
p,
ul,
ol {
	padding: 0;
	margin: 0;
}

ul, ol {
	list-style: none;
}

address {
	font-style: normal;
}

input,
button,
a {
	text-decoration: none;
	color: inherit;
	cursor: pointer;
	background-color: transparent;
	border: none;
	padding: 0;
	font: inherit;
	text-align: left;
}

figure {
	padding: 0;
	margin: 0;
}

iframe,
img,
svg,
video {
	display: block;
}

label {
	cursor: pointer;
}

q {
	quotes: "«" "»";
}

fieldset {
	border: unset;
	margin: unset;
	padding: unset;
}

dl, dd, dt {
	padding: 0;
	margin: unset;
}

summary {
	cursor: pointer;
}
}

@layer layout-base {
@layer core {
	:root {
		/* For convenience, not for usage anywhere else */
		--_size-25: calc(
			var(--size-base, 1rem) * var(--sizeMultiplier-25, 0.5)
		);
		--_size-50: calc(var(--size-base, 1rem) * var(--sizeMultiplier-50, 1));
		--_size-100: calc(
			var(--size-base, 1rem) * var(--sizeMultiplier-100, 2)
		);
		--_size-200: calc(
			var(--size-base, 1rem) * var(--sizeMultiplier-200, 4)
		);
		--_size-300: calc(
			var(--size-base, 1rem) * var(--sizeMultiplier-300, 8)
		);
		--_size-400: calc(
			var(--size-base, 1rem) * var(--sizeMultiplier-400, 16)
		);
		--_size-500: calc(
			var(--size-base, 1rem) * var(--sizeMultiplier-500, 32)
		);
		--_size-600: calc(
			var(--size-base, 1rem) * var(--sizeMultiplier-600, 64)
		);

		/* Fallback usage */
		--size-25: var(--_size-25);
		--size-50: var(--_size-50);
		--size-100: var(--_size-100);
		--size-200: var(--_size-200);
		--size-300: var(--_size-300);
		--size-400: var(--_size-400);
		--size-500: var(--_size-500);
		--size-600: var(--_size-600);

		/* Usage if round() is supported */
		--size-25: round(up, var(--_size-25), 1px);
		--size-50: round(up, var(--_size-50), 1px);
		--size-100: round(up, var(--_size-100), 1px);
		--size-200: round(up, var(--_size-200), 1px);
		--size-300: round(up, var(--_size-300), 1px);
		--size-400: round(up, var(--_size-400), 1px);
		--size-500: round(up, var(--_size-500), 1px);
		--size-600: round(up, var(--_size-600), 1px);

		/* Other sizes with fallbacks */
		--size-100dvh: 100vh;
		--size-100dvh: 100dvh;
		--size-1dvh: 1vh;
		--size-1dvh: 1dvh;
		--size-100svh: 90vh;
		--size-100svh: 100svh;
		--size-1svh: 0.9vh;
		--size-1svh: 1svh;
	}
}
}

@layer layout-base {
@layer core {
	:root {
		/* ROOT
	*/

		/* Fallback usage */
		font-size: clamp(
			var(--font-rootSize-min, 10px),
			var(--font-rootSize-base, 16px),
			var(--font-rootSize-max, 20px)
		);

		/* Usage if round() is supported */
		font-size: clamp(
			var(--font-rootSize-min, 10px),
			round(up, var(--font-rootSize-base, 16px), 1px),
			var(--font-rootSize-max, 20px)
		);

		/* SIZES
	*/

		/* For convenience, not for usage anywhere else */
		--_font-size-25: calc(1rem * var(--font-sizeMultiplier-25, 0.25));
		--_font-size-50: calc(1rem * var(--font-sizeMultiplier-50, 0.5));
		--_font-size-100: calc(1rem * var(--font-sizeMultiplier-100, 1));
		--_font-size-150: calc(1rem * var(--font-sizeMultiplier-150, 1.5));
		--_font-size-200: calc(1rem * var(--font-sizeMultiplier-200, 2));
		--_font-size-250: calc(1rem * var(--font-sizeMultiplier-250, 2.5));
		--_font-size-300: calc(1rem * var(--font-sizeMultiplier-300, 3));
		--_font-size-350: calc(1rem * var(--font-sizeMultiplier-350, 3.5));
		--_font-size-400: calc(1rem * var(--font-sizeMultiplier-400, 4));
		--_font-size-450: calc(1rem * var(--font-sizeMultiplier-450, 4.5));
		--_font-size-500: calc(1rem * var(--font-sizeMultiplier-500, 5));

		/* Fallback usage */
		--font-size-25: var(--_font-size-25);
		--font-size-50: var(--_font-size-50);
		--font-size-100: var(--_font-size-100);
		--font-size-150: var(--_font-size-150);
		--font-size-200: var(--_font-size-200);
		--font-size-250: var(--_font-size-250);
		--font-size-300: var(--_font-size-300);
		--font-size-350: var(--_font-size-350);
		--font-size-400: var(--_font-size-400);
		--font-size-450: var(--_font-size-450);
		--font-size-500: var(--_font-size-500);

		/* Usage if round() is supported */
		--font-size-25: round(up, var(--_font-size-25), 1px);
		--font-size-50: round(up, var(--_font-size-50), 1px);
		--font-size-100: round(up, var(--_font-size-100), 1px);
		--font-size-150: round(up, var(--_font-size-150), 1px);
		--font-size-200: round(up, var(--_font-size-200), 1px);
		--font-size-250: round(up, var(--_font-size-250), 1px);
		--font-size-300: round(up, var(--_font-size-300), 1px);
		--font-size-350: round(up, var(--_font-size-350), 1px);
		--font-size-400: round(up, var(--_font-size-400), 1px);
	}
}
}

@layer layout-base {

:root {
	/* PROJECT
	*/

	--page-paddingInline: var(--layout-space-200);

	--pageHeader-approxLogoHeight: calc(var(--font-size-100) * 2);
	/* Approx. height from padding, logo height, and inner vertical spacing  */
	--pageHeader-height: calc(var(--font-size-100) * 6);

	--pageMain-paddingTop: var(--layout-space-300);
	--pageMain-paddingBottom: var(--layout-space-500);
	--pageMain-space-y: var(--layout-space-400);

	--section-paddingInline-50: var(--layout-space-100);
	--section-paddingInline-100: var(--layout-space-200);
	--section-paddingInline-200: var(--layout-space-300);
	--section-paddingInline-300: var(--layout-space-400);
	--section-paddingBlock-100: var(--layout-space-200);
	--section-paddingBlock-200: var(--layout-space-300);
	--section-paddingBlock-300: var(--layout-space-400);
	--section-gap-100: var(--layout-space-200);

	--content-gap-100: var(--layout-space-200);

	--borderRadius-10: 3px;
	--borderRadius-50: 0.3rem;
	--borderRadius-100: 0.4rem;

	--line-width-focus: 3px;

	--icon-lineWidth: var(--line-width-200);
	--icon-size: 1.1em;

	--color-main-0: hsl(215, 15%, 0%);
	--color-main-100: hsl(215, 15%, 12%);
	--color-main-200: hsl(215, 15%, 27%);
	--color-main-300: hsl(210, 15%, 43%);
	--color-main-400: hsl(210, 15%, 60%);
	--color-main-700: hsl(210, 15%, 82%);
	--color-main-800: hsl(210, 15%, 92%);
	--color-main-900: hsl(210, 15%, 95%);
	--color-main-950: hsl(210, 15%, 98%);
	--color-main-1000: hsl(210, 15%, 100%);

	--color-1-100: hsl(356, 95%, 46%);
	--color-2-100: hsl(138, 100%, 41%);
	--color-3-50: hsl(210, 100%, 36%);
	--color-3-100: hsl(210, 100%, 50%);
	--color-3-200: hsl(210, 100%, 80%);

	--color-error-50: hsl(18 100% 30%);
	--color-error-100: hsl(18 100% 40%);
	--color-error-200: hsl(18 100% 70%);
	--color-error-300: hsl(18 100% 90%);

	--color-text-100: var(--color-main-100);
	--color-text-200: var(--color-main-300);
	--color-text-300: var(--color-main-400);

	--color-focus-100: var(--color-3-200);
	--color-softHighlight-100: var(--color-main-950);

	--media-aspectRatio-wide-50: 1.14;
	--media-aspectRatio-wide-100: 1.72;
	--media-aspectRatio-wide-200: 2.5;
	--media-aspectRatio-wide-300: 3;
	--media-aspectRatio-wide-400: 3.5;
	--media-aspectRatio-wide-500: 4;
	--media-aspectRatio-tall-100: 0.75;

	/* CORE
	*/

	--font-rootSize-min: 16px;
	--font-rootSize-max: 24px;
	--font-rootSize-multiplier: 1;

	--font-rootSize-base-raw: calc(1vw * var(--font-rootSize-multiplier) + 1px);

	--font-rootSize-base: var(--font-rootSize-base-raw);
	/**/
	/* Deriving the the values from the px values given in the design: */
	--font-sizeMultiplier-50: 0.8;
	--font-sizeMultiplier-100: 1;
	--font-sizeMultiplier-200: 1.14;
	--font-sizeMultiplier-300: 1.45;
	--font-sizeMultiplier-400: 2.18;
	--font-sizeMultiplier-500: 2.73;

	--font-weight-50: 200;
	--font-weight-100: 400;
	--font-weight-200: 600;

	--text-lineHeight-50: 1.2;
	--text-lineHeight-100: 1.5;
	--text-width-50: 40ch;
	--text-width-100: 80ch;

	--layout-space-25: var(--size-25);
	--layout-space-50: var(--size-50);
	--layout-space-100: var(--size-100);
	--layout-space-200: var(--size-200);
	--layout-space-300: var(--size-300);
	--layout-space-400: var(--size-400);
	--layout-space-500: var(--size-500);
	--layout-space-600: var(--size-600);

	--line-width-50: 0.5px;
	--line-width-100: 1px;
	--line-width-200: 1.5px;
	--line-width-300: 2px;
	--line-width-400: 2.5px;
	--line-width-focus: 3px;

	--ms-300: 1500ms;
	--ms-200: 600ms;
	--ms-100: 300ms;
	--ms-75: 200ms;
	--ms-50: 100ms;

	--ease-bounce-100: cubic-bezier(0.68, -0.6, 0.32, 1.6);

	--size-base: 1rem;
	--sizeMultiplier-25: 0.4;
	--sizeMultiplier-50: 0.6;
	--sizeMultiplier-100: 1;
	--sizeMultiplier-200: 1.5;
	--sizeMultiplier-300: 2.5;
	--sizeMultiplier-400: 5;
	--sizeMultiplier-500: 10;
	--sizeMultiplier-600: 20;

	--z-front: 100;
	--z-midFront: 75;
	--z-center: 50;
	--z-midBack: 25;
	--z-back: 0;
}

@media (width <= 1400px) {
	:root {
		--font-rootSize-multiplier: 1;
	}
}

@media (width <= 1000px) {
	:root {
		--page-paddingInline: var(--layout-space-100);

		/*--font-sizeMultiplier-50: 0.8;
		--font-sizeMultiplier-100: 1;
		--font-sizeMultiplier-200: 1.14;
		--font-sizeMultiplier-300: 1.45;
		--font-sizeMultiplier-400: 2.18;
		--font-sizeMultiplier-500: 2.73;*/
		/*
		--sizeMultiplier-25: 0.4;
		--sizeMultiplier-50: 0.6;
		--sizeMultiplier-100: 1;
		--sizeMultiplier-200: 1.25;
		--sizeMultiplier-300: ;
		--sizeMultiplier-400: 3;
		--sizeMultiplier-500: 5;
		--sizeMultiplier-600: 10;*/
	}
}

@media (width <= 600px) {
	:root {
		--page-paddingInline: var(--layout-space-50);

		--text-lineHeight-50: 1.1;

		--font-sizeMultiplier-50: 0.8;
		--font-sizeMultiplier-100: 1;
		--font-sizeMultiplier-200: 1.14;
		--font-sizeMultiplier-300: 1.45;
		--font-sizeMultiplier-400: 1.8;
		--font-sizeMultiplier-500: 2;
	}
}
}

@layer layout-base {

:root {
	font-family: "Cadiz", sans-serif;
	font-weight: 400;
	font-style: normal;
}

@font-face {
	font-family: "Cadiz";
	font-weight: 400;
	src: url("/_astro/CadizWeb-Regular.3yI2vSAq.woff2") format("woff2");
}

@font-face {
	font-family: "Cadiz";
	font-weight: 600;
	src: url("/_astro/CadizWeb-SemiBold.BSWzs9ZZ.woff2") format("woff2");
}
}

@layer layout-base {

body {
	font-size: var(--font-size-100);
	color: var(--color-text-100);
	line-height: var(--text-lineHeight-100);
	font-weight: 400;
}

h1,
h2,
h3,
h4,
h5 {
	font-weight: inherit;
}
}

@layer layout-base {
*:focus {
	outline: var(--line-width-focus) solid var(--color-3-200);
}
}

@layer layout-base {
[data-as-site] {
	height: 100%;
	overflow-y: auto;
}
}

@layer layout-base {
[data-as-page] {
	display: grid;
	grid-template-columns: 100%;
	grid-template-rows: auto 1fr auto;
	grid-template-areas: "header" "main" "footer";
	height: auto;
	overflow-x: hidden;

	min-height: 100vh;
	min-height: 100svh;

	> * {
		min-height: 0;
		min-width: 0;
	}

	> header {
		grid-area: header;
		z-index: 100;
		isolation: isolate;
	}

	> main {
		grid-area: main;
		z-index: 50;
		margin-top: var(--pageHeader-height);
	}

	> .siteSearch {
		z-index: 75;
	}

	&:has(.pageHero) > main {
		margin-top: 0px;
	}

	> footer {
		grid-area: footer;
		z-index: 25;
		isolation: isolate;
	}
}
}

@layer layout-base {

[data-as-layout] {
	gap: var(--layout-space-200);
}

[data-as-layout^="stack:"] {
	display: flex;
	flex-direction: column;
	align-items: center;
}

[data-as-layout^="stack:wide:"] {
	> * {
		width: 100%;
		max-width: 1200px;
	}
}

[data-as-layout^="stack:fullwidth:"] {
	> * {
		width: 100%;
	}
}

[data-as-layout^="cols:"] {
	display: grid;
	grid-template-columns: repeat(var(---cols), 1fr);

	> * {
		min-width: 0;
		min-height: 0;
	}
}

[data-as-layout^="cols:1,1,1,1:"] {
	---cols: 4;
	> * {
		grid-column: span 1;
	}
}

[data-as-layout^="cols:1,1,1:"] {
	---cols: 3;
	> * {
		grid-column: span 1;
	}
}

[data-as-layout^="cols:-,2,-:"] {
	---cols: 4;
	> * {
		grid-column: 2 / 4;
	}
}

[data-as-layout^="cols:2,2:"] {
	---cols: 4;
	> * {
		grid-column: span 2;
	}
}

[data-as-layout^="cols:3,1:"] {
	---cols: 4;
	> :nth-child(odd) {
		grid-column: span 3;
	}
	> :nth-child(even) {
		grid-column: span 1;
	}
}

@media (width <= 1400px) {
	[data-as-layout^="cols:1,1,1,1:"] {
		---cols: 2;
		> * {
			grid-column: span 1;
		}
	}

	[data-as-layout^="cols:1,1,1:"] {
		---cols: 2;
		> * {
			grid-column: span 1;
		}
	}

	[data-as-layout^="cols:-,2,-:"] {
		---cols: 6;
		> * {
			grid-column: 2 / 6;
		}
	}

	[data-as-layout^="cols:2,2:"] {
		---cols: 1;
		> * {
			grid-column: span 1;
		}
	}

	[data-as-layout^="cols:3,1:"] {
		---cols: 3;
		> :nth-child(odd) {
			grid-column: span 2;
		}
		> :nth-child(even) {
			grid-column: span 1;
		}
	}
}

@media (width <= 1000px) {
	[data-as-layout^="cols:1,1,1,1:"] {
		---cols: 1;
		> * {
			grid-column: span 1;
		}
	}

	[data-as-layout^="cols:1,1,1:"] {
		---cols: 1;
		> * {
			grid-column: span 1;
		}
	}

	[data-as-layout^="cols:-,2,-:"] {
		---cols: 1;
		> * {
			grid-column: span 1;
		}
	}

	[data-as-layout^="cols:2,2:"] {
		---cols: 1;
		> * {
			grid-column: span 1;
		}
	}

	[data-as-layout^="cols:3,1:"] {
		---cols: 1;
		> :nth-child(odd) {
			grid-column: span 1;
		}
		> :nth-child(even) {
			grid-column: span 1;
		}
	}
}

@media (width <= 600px) {
	[data-as-layout^="cols:"] {
		display: flex;
		flex-direction: column;
	}
}
}

@layer layout-base {

[data-as-richtext] a,
[data-as-link] {
	width: fit-content;
	&:hover {
		text-decoration: underline;
	}
}

[data-as-link] {
	color: var(--color-1-100);
}
}

@layer layout-base {
[data-as-pill] {
	--asPill-border: var(--line-width-200) solid var(--color-main-700);
	border: var(--asPill-border);
	display: inline-flex;
	align-items: center;
	white-space: nowrap;
	line-height: 1;
	width: fit-content;
	---pill-height: var(--pill-height, 1.6em);
	height: var(---pill-height);
	border-radius: calc(var(---pill-height) / 2);
	padding-inline: calc(var(---pill-height) / 2.5);
}
}

@layer layout-base {

[data-as-rich-text] {
	font-size: var(--font-size-100);
	line-height: var(--text-lineHeight-100);


	> * {
		max-width: var(--text-width-100);
	}

	> * + * {
		margin-top: var(--layout-space-50);

		&:is(h1,h2,h3,h4) {
			margin-top: var(--layout-space-200);
		}
	}

	a {
		color: var(--color-1-100);
		&:hover {
			text-decoration: underline;
		}
	}

	ul {
		list-style: initial;
		list-style-position: outside;
	}

	ol {
		list-style: number;
		list-style-position: outside;
	}

	ul, ol {
		padding-left: 3ch;
	}
}

[data-as-text] [data-as-rich-text] {
	line-height: inherit;
	font-size: inherit;
}
}

@layer layout-base {
[data-as-page-main] {
	display: flex;
	flex-direction: column;
	padding-top: var(--pageMain-paddingTop);
	padding-bottom: var(--pageMain-paddingBottom);
	gap: var(--pageMain-space-y);

	> * {
		padding-inline: var(--page-paddingInline);
	}
}
}

@layer layout-base {
[data-as-page-header] {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;

	p {
		color: var(--color-main-400);
		font-size: var(--font-size-400);
	}
}
}

@layer layout-base {
[data-as-pagesections] {
	display: flex;
	flex-direction: column;
	margin-block: var(--layout-space-400);
}
}

@layer layout-base {

[data-as-icon] {
	---icon-size: var(--icon-size, 1em);
	---icon-sizeAdjustment: 1;
	---icon-lineWidth: var(--icon-lineWidth, 1px);
	width: calc(var(---icon-size) * var(---icon-sizeAdjustment));
	height: calc(var(---icon-size) * var(---icon-sizeAdjustment));
	stroke: currentColor;
	fill: transparent;
	stroke-width: var(--icon-lineWidth);
	overflow: visible;
	display: inline-flex;
	align-items: center;
	justify-content: center;

	* {
		vector-effect: non-scaling-stroke;
		stroke-width: var(---icon-lineWidth);
	}
}

/* icon specific adjustment */
[data-as-icon="arrowRight"] {
	---icon-sizeAdjustment: 0.4;
}

[data-as-icon="arrowUpRight"] {
	---icon-sizeAdjustment: 0.4;
	height: 0.75em;
	* {
		stroke: var(--color-1-100);
	}
}

[data-as-icon="arrowRightMinimal"] {
	---icon-sizeAdjustment: 0.5;
}
}

@layer layout-base {

[data-as-text~="50"] {
	font-size: var(--font-size-50);
	line-height: var(--text-lineHeight-50);
}

[data-as-text~="100"] {
	font-size: var(--font-size-100);
}

[data-as-text~="200"] {
	font-size: var(--font-size-200);
}

[data-as-text~="300"] {
	font-size: var(--font-size-300);
}

[data-as-text~="400"] {
	font-size: var(--font-size-400);
	line-height: var(--text-lineHeight-50);
}

[data-as-text~="500"] {
	font-size: var(--font-size-500);
	line-height: var(--text-lineHeight-50);
}
}

@layer layout-base {

[data-as-title="100"], h2, h1 {
	font-weight: var(--font-weight-200);
	font-size: var(--font-size-500);
	line-height: var(--text-lineHeight-50);
}

[data-as-title="90"], [data-as-title="pageSection"], h3 {
	font-size: var(--font-size-400);
	font-weight: var(--font-weight-200);
	line-height: var(--text-lineHeight-50);
}

[data-as-title="pageSection"] {
	text-align: center;
	margin-bottom: var(--layout-space-300);
	display: block;
}

[data-as-title="80"], h4 {
	font-size: var(--font-size-300);
	font-weight: var(--font-weight-200);
	line-height: var(--text-lineHeight-50);
}

[data-as-title="70"], h5 {
	font-size: var(--font-size-200);
	font-weight: var(--font-weight-200);
}

[data-as-title="60"], h6 {
	font-size: var(--font-size-100);
	font-weight: var(--font-weight-200);
}
}

@layer layout-base {

:root {
	--navbox-heightMin: 100px;
}

[data-as-article-item] {
	---boxPadding: var(--layout-space-100);
	position: relative;
	display: grid;
	min-height: var(--navbox-heightMin);
	grid-template-columns: 100%;
	grid-template-rows: auto 1fr;
	grid-template-areas:
		"a"
		"b";
	gap: var(--layout-space-50);

	&:has(> [data-slot="thumbnail"]) {
		grid-template-columns: 1fr auto;
		grid-template-areas:
			"a i"
			"b i";
	}

	/* Border bottom */
	&::before {
		content: "";
		position: absolute;
		grid-column: 1 / 2;
		grid-row: 3;
		border-bottom: var(--line-width-200) solid var(--color-main-100);
		display: block;
		width: 100%;
		bottom: 0;
	}
	/**/

	> [data-slot="main"] {
		grid-column: 1;
		grid-row: 1 / 3;
		padding-block: var(---boxPadding);
	}

	> [data-slot="thumbnail"] {
		grid-area: i;
		aspect-ratio: var(--media-aspectRatio-wide-50);
		background-color: var(--color-main-900);
		border-radius: var(--borderRadius-100);
		overflow: hidden;
		/* Create margin from top, without increasing item height: */
		height: calc(var(--navbox-heightMin) - var(--layout-space-50));
		position: relative;
		margin-top: auto;
		* {
			object-fit: cover;
			width: 100%;
			height: 100%;
		}
	}
}

@media (width <= 600px) {
	[data-as-article-item] {
		--navbox-heightMin: auto;
		padding-bottom: var(--layout-space-100);
		grid-template-columns: 100%;
		grid-template-rows: auto auto;
		grid-template-areas:
			"a"
			"b";

		&:has(> [data-slot="thumbnail"]) {
			grid-template-columns: 100%;
			grid-template-rows: auto auto auto;
			grid-template-areas:
				"a"
				"b"
				"i";
		}

		> [data-slot="thumbnail"] {
			aspect-ratio: var(--media-aspectRatio-wide-100);
		}

		> [data-slot="main"] {
			grid-column: 1;
			grid-row: 1 / 3;
			padding-block: unset;
		}
	}
}
}

@layer layout-base {

[data-as-button-200] {
	width: fit-content;
	color: var(--color-1-100);
	position: relative;
	display: flex;
	align-items: center;
	--movement-x: 1.4em;
	isolation: isolate;

	> span,
	&::before {
		transition: transform var(--ms-100), opacity var(--ms-50) var(--ms-50);
	}
}

[data-as-button-200]::before {
	content: "";
	height: 0.5em;
	width: 0.5em;
	background-image: url("/assets/icons/arrow-right.svg");
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
	transform: translateX(calc(var(--movement-x) * -1));
	position: absolute;
	opacity: 0;
}


[data-as-button-200]:where(:hover, :focus, :active) {
	&::before {
		opacity: 1;
		transform: translateX(0);
	}

	> span {
		transform: translateX(var(--movement-x));
	}
}
}

@layer layout-base {

[data-as-button-300] {
	color: var(--color-1-100);
	width: fit-content;
	border: var(--line-width-400) solid var(--color-1-100);
	position: relative;
	display: inline-flex;
	align-items: center;
	isolation: isolate;
	font-size: var(--font-size-200);
	font-weight: 600;
	border-radius: var(--borderRadius-50);
	padding: 0.5em 2em;
	gap: 0.66em;
	transition: background-color var(--ms-100);
}

[data-as-button-300] * {
	transition: color var(--ms-100);
	display: inline-flex;
	height: fit-content;
}

[data-as-button-300]:where(:active, :focus, :hover) {
	background-color: var(--color-1-100);

	> * {
		color: var(--color-main-1000);
	}
}

[data-as-button-300] {
	--icon-lineWidth: var(--line-width-300);
	&, svg *, span {
		transition: color var(--ms-100), stroke var(--ms-100);
	}
}

:where(button, a):has(> [data-as-button-300]) {
	width: fit-content;
}

/* data-button-300 is set on the interactive element */
[data-as-button-300]:where(:active, :focus, :hover) {
	background-color: var(--color-1-100);
}

[data-as-button-300]:where(:active, :focus, :hover) {
	color: var(--color-main-1000);
}

[data-as-button-300]:where(:active, :focus, :hover) svg * {
	stroke: white;
}

/* data-button-300 is set the direct child of interactive element */

:where(button, a):has(> [data-as-button-300]):where(:active, :focus, :hover) [data-as-button-300] {
	background-color: var(--color-1-100);
}

:where(button, a):has(> [data-as-button-300]):where(:active, :focus, :hover) [data-as-button-300] > * {
	color: var(--color-main-1000);
}

:where(button, a):has(> [data-as-button-300]):where(:active, :focus, :hover) [data-as-button-300] svg * {
	stroke: white;
}
}

@layer layout-base {

[data-as-dropdown] {
	isolation: isolate;
	position: relative;
	display: block;
}

[data-as-dropdown-label] input {
	position: absolute;
	pointer-events: none;
	width: 0;
	height: 0;
	opacity: 0.00000001;
}

[data-as-dropdown-content] {
	position: absolute;
	width: fit-content;
	top: 100%;
	background-color: var(--color-main-900);
	height: 0;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

/* Default */
[data-as-dropdown-content],
[data-as-dropdown-content][data-align="left"] {
	right: unset;
	left: 0;
}

[data-as-dropdown-content][data-align="right"] {
	right: 0;
	left: unset;
}

[data-as-dropdown-content][data-align="center"] {
	left: 50%;
	right: unset;
	transform: translateX(-50%);
}

[data-as-dropdown-content] > * {
	display: flex;
	align-items: center;
	padding: var(--layout-space-100) var(--layout-space-100);
	white-space: nowrap;

	&:hover {
		background-color: var(--color-main-700);
	}
}

[data-as-dropdown-label]:has(input:checked),
[data-as-dropdown]:focus-within [data-as-dropdown-label] {
	color: var(--color-1-100);
	+ [data-as-dropdown-content] {
		height: auto;
		overflow: visible;
	}
}
}

@layer layout-base {

[data-as-box] {
	border-radius: var(--borderRadius-100);
	padding: var(--layout-space-200);
}

[data-as-box~="solid"] {
	background-color: var(--color-main-900);
}

[data-as-box~="border"] {
	border: 2px solid var(--color-text-100);
}

[data-as-box~="input"] {
	border-radius: var(--borderRadius-100);
	border: 2px solid var(--color-text-100);
	padding: 0.5em 0.75em;
	height: 2.5em;
}

[data-as-box~="input"]:focus {
	border-color: var(--color-3-100);
	outline: 3px solid var(--color-3-200);
}

[data-as-box~="error"] {
	background-color: var(--color-error-300);
	/*color: var(--color-error-100);
	color: var(--color-error-50);*/
	font-weight: 600;
	border: var(--line-width-200) solid var(--color-error-200);
}
}

@layer layout-base {
[data-as-callout] {
	background-color: var(--color-main-900);
	border-radius: var(--borderRadius-100);
	padding: var(--layout-space-300);
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: var(--layout-space-300);

	&:has(:nth-child(2)) {
		grid-template-columns: 1fr auto;
	}

	> :nth-child(1) {
		/* Optical alignment: */
		margin-top: -1ex;
	}

	> :nth-child(2) {
		display: flex;
		justify-content: center;
	}

	> * {
		min-width: 0;
	}
}
}

@layer layout-base {

dl[data-as-description-list-100] {
	display: grid;
	grid-template-columns: 1fr 2fr;
	grid-template-rows: auto;
	grid-auto-rows: auto;
	grid-auto-flow: row;
	gap: 0;
	overflow-x: auto;

	dt {
		font-weight: 600;
	}
}

/* dt & dd must be wrapped in common parent: */
dl[data-as-description-list-100] > * {
	grid-column: span 2;
	padding: var(--layout-space-100);
	border-bottom: var(--line-width-300) solid currentColor;
	display: flex;
	> * {
		flex: 1;
		padding-right: 1em;
		white-space: nowrap;
	}
}

@supports (grid-template-columns: subgrid) {
	dl[data-as-description-list-100] > * {
		display: grid;
		grid-template-columns: subgrid;
		> * {
			flex: unset;
		}
	}
}
}

@layer layout-base {

dl[data-as-description-list-200] {
	display: flex;
	justify-content: space-around;
	flex-wrap: wrap;
}

/* dt and dd must be wrapped in a common element inside dl: */
dl[data-as-description-list-200] > :not(:is(dt, dd)) {
	display: flex;
	flex-direction: column;
	align-items: center;
}

dl[data-as-description-list-200] {
	dt {
		color: var(--color-main-400);
	}

	dd {
		font-size: var(--font-size-300);
		font-weight: 600;
		text-align: center;
		line-height: var(--text-lineHeight-50);
	}
}
}

@layer layout-base {

:root {
	--field-fontSize-100: var(--font-size-100);
	--field-fontSize-200: var(--font-size-200);
	--field-label-marginBottom: var(--layout-space-25);
	--field-spaceBlock-50: var(--layout-space-50);
	--field-spaceBlock-100: var(--layout-space-100);
	--field-spaceInline-50: var(--layout-space-50);
	--field-spaceInline-100: var(--layout-space-100);
	--field-box-minHeight: 3em;
	--field-box-padding: 1em 0.75em;
}

[data-as-field] {
	font-size: var(--field-fontSize-100);
	label {
		font-size: var(--field-fontSize-200);
		font-weight: 600;
		margin-bottom: var(--field-label-marginBottom);
	}
}
}

@layer layout-base {
[data-as-field="text"],
[data-as-field^="text:"] {
	display: flex;
	flex-direction: column;

	gap: var(--field-gapBlock-50);

	input {
		padding: var(--field-box-padding);
		height: var(--field-box-minHeight);
	}
}
}

@layer layout-base {
[data-as-field="textarea"] {
	display: flex;
	flex-direction: column;
	textarea {
		font: inherit;
		display: block;
		width: 100%;
		resize: block;
		min-height: 10em;
	}
}
}

@layer layout-base {

[data-as-field="checkbox"] {
	display: grid;
	grid-template-columns: auto 1fr;
	grid-template-areas: "input label";
	gap: var(--field-spaceInline-50);
	align-items: baseline;
	isolation: isolate;
	---box-size: 0.8em;

	label {
		grid-area: label;
	}

	input {
		grid-area: input;
		user-select: none;
		opacity: 0.0000001;
		/*box-shadow: 0px 0px 0px 1px red inset;*/
	}

	&::before {
		grid-area: input;
		display: block;
		width: var(---box-size);
		height: var(---box-size);
		border: 2px solid var(--color-text-100);
		border-radius: var(--borderRadius-10);
		content: "";
		transition: background-color var(--ms-75), border-color var(--ms-75);
	}

	&::after {
		---scale: 0;
		grid-area: input;
		display: block;
		width: calc(var(---box-size) * 0.3);
		height: calc(var(---box-size) * 0.6);
		content: "";
		border-bottom: 2px solid var(--color-main-1000);
		border-right: 2px solid var(--color-main-1000);
		transform: translate(calc(var(---box-size) * 0.4), calc(var(---box-size) * -0.4)) rotate(45deg) scale(var(---scale));
		transition: transform var(--ms-100) var(--ease-bounce-100);
	}
}

[data-as-field="checkbox"]:has(:checked) {
	&::before {
		background-color: var(--color-3-100);
		border-color: var(--color-3-100);
	}
	&::after {
		---scale: 1;
	}
}

[data-as-field="checkbox"]:has(> input:focus) {
	&::before {
		outline: var(--line-width-focus) solid var(--color-focus-100);
	}
}
}

@layer layout-base {

[data-as-field="radio"] {
	display: grid;
	grid-template-columns: auto 1fr;
	grid-template-areas: "input label";
	gap: var(--field-spaceInline-50);
	align-items: baseline;
	isolation: isolate;
	---box-size: 1em;

	label {
		grid-area: label;
	}

	input {
		grid-area: input;
		user-select: none;
		opacity: 0.0000001;
	}

	&::before {
		---ringWidth: 2px;
		content: "";
		grid-area: input;
		display: block;
		width: var(---box-size);
		height: var(---box-size);
		border-radius: 50%;
		box-shadow: 0px 0px 0px var(---ringWidth) var(--color-3-100) inset;
		transition: box-shadow var(--ms-100) var(--ease-bounce-100);
	}
}

[data-as-field="radio"]:has(:checked) {
	&::before {
		---ringWidth: calc(var(---box-size) * 0.3);
	}
}

[data-as-field="radio"]:focus-within {
	&::before {
		outline: var(--line-width-focus) solid var(--color-focus-100);
	}
}
}

@layer layout-base {
[data-as-field="select"] {
	display: flex;
	flex-direction: column;
}
}

@layer layout-base {
[data-as-fieldset] {
	display: flex;
	flex-direction: column;
	gap: 0px;

	legend {
		font-size: var(--field-fontSize-200);
		font-weight: 600;
		margin-bottom: var(--field-label-marginBottom);
	}

	label {
		font-weight: 400;
		font-size: var(--field-fontSize-100);
	}
}
}

@layer layout-base {
[data-as-form] {
	display: flex;
	flex-direction: column;
	gap: var(--layout-space-200);
}
}

@layer layout-base {

[data-as-portrait] {
	display: flex;
	flex-direction: column;
	gap: var(--layout-space-50);
	align-items: center;
	max-width: 16ch;
}

[data-as-portrait--image] {
	aspect-ratio: 1;
	display: block;
	overflow: hidden;
	border-radius: var(--borderRadius-100);
	background-color: var(--color-main-800);
	width: var(--portrait-image-width, 100%);

	/* Defined like this allows the img be used plain or from Image component: */
	--media-width: 100%;
	--media-height: 100%;
	--media-objectPosition: center;
	--media-objectFit: cover;
	/**/

	img {
		width: var(--media-width);
		height: var(--media-height);
		object-fit: var(--media-objectFit);
		object-position: var(--media-objectPosition);
		/* Hide alt text (visible while loading) */
		color: transparent;
	}
}

[data-as-portrait--caption] {
	text-align: center;
	line-height: var(--text-lineHeight-50);
}

[data-as-portrait--designation] {
	color: var(--color-main-400);
	margin-bottom: var(--layout-space-25);
}

[data-as-portrait--name-first],
[data-as-portrait--name-last] {
	color: var(--color-1-100);
	font-size: var(--font-size-300);
	font-weight: 600;
}
}

@layer layout-base {

[data-as-fetch-indicator] {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--layout-space-100);
	color: var(--color-main-400);
	background-color: var(--color-main-900);
	border-radius: var(--borderRadius-100);
	margin-block: var(--layout-space-300);
}

[data-as-fetch-indicator="loading"] {
	&::before {
		content: 'Laden...';
	}
}


[data-as-fetch-indicator="at-end"] {
	&::before {
		content: 'Keine weiteren Einträge.';
	}
}
}

@layer layout-base {

[data-as-dynamic-element="highlight:insert"] {
	animation: highlight-insert;
	animation-duration: 3000ms;
	animation-timing-function: ease-in-out;
}

@keyframes highlight-insert {
	0% {
		transform: transparent;
	}
	15% {
		background-color: var(--color-softHighlight-100);
	}
	100% {
		transform: transparent;
	}
}
}

@layer layout-base {

[data-as-tooltip] {
	position: relative;
	display: inline;
}

[data-as-tooltip]::after {
	content: attr(data-content);
	position: absolute;
	bottom: calc(100% + 0.4em);
	left: 50%;
	transform: translateX(-50%);
	white-space: nowrap;
	pointer-events: none;
	z-index: 100;
	opacity: 0;
	transition: opacity 0.15s ease;
	background: var(--color-main-900);
	color: var(--color-main-50);
	padding: 0.25em 0.6em;
	border-radius: var(--border-radius-100, 0.25em);
	font-size: 0.8em;
	line-height: 1.4;
}

[data-as-tooltip]:hover::after,
[data-as-tooltip]:focus-visible::after {
	opacity: 1;
}
}

@layer layout-base {

[data-as-table] {
	width: 100%;
	border-collapse: collapse;
	table-layout: auto;
}

[data-as-table] tr {
	border-bottom: var(--line-width-300) solid currentColor;
}

[data-as-table] th {
	font-weight: 600;
	white-space: nowrap;
}

[data-as-table] th,
[data-as-table] td {
	padding-block: var(--layout-space-100);
	padding-inline: var(--layout-space-50);
	text-align: left;
}
}
/*@import "./sets/block.css" layer(layout-base);*/
@layer layout-base {
/* If not fulfilling the condition: */
/*****************************************************************************/
/*****************************************************************************/
/*****************************************************************************/

/* not fullfilling: is less than or equal to */

@media (width > 2200px) {
	[data-if="<=vw200"] {
		display: none !important;
	}
}

@media (width > 1400px) {
	[data-if="<=vw100"] {
		display: none !important;
	}
}

@media (width > 1000px) {
	[data-if="<=vw50"] {
		display: none !important;
	}
}

@media (width > 600px) {
	[data-if="<=vw25"] {
		display: none !important;
	}
}

/* not fullfilling: is greater than */

@media (width <= 2200px) {
	[data-if=">vw200"] {
		display: none !important;
	}
}

@media (width <= 1400px) {
	[data-if=">vw100"] {
		display: none !important;
	}
}

@media (width <= 1000px) {
	[data-if=">vw50"] {
		display: none !important;
	}
}

@media (width <= 600px) {
	[data-if=">vw25"] {
		display: none !important;
	}
}


/* If fulfilling the condition: */
/*****************************************************************************/
/*****************************************************************************/
/*****************************************************************************/

/* fullfilling: is less than or equal to */

@media (width <= 2200px) {
	[data-if="<=vw200"] {
		display: contents !important;
	}
}

@media (width <= 1400px) {
	[data-if="<=vw100"] {
		display: contents !important;
	}
}

@media (width <= 1000px) {
	[data-if="<=vw50"] {
		display: contents !important;
	}
}

@media (width <= 600px) {
	[data-if="<=vw25"] {
		display: contents !important;
	}
}

/* fullfilling: is greater than */

@media (width > 2200px) {
	[data-if=">vw200"] {
		display: contents !important;
	}
}

@media (width > 1400px) {
	[data-if=">vw100"] {
		display: contents !important;
	}
}

@media (width > 1000px) {
	[data-if=">vw50"] {
		display: contents !important;
	}
}

@media (width > 600px) {
	[data-if=">vw25"] {
		display: contents !important;
	}
}
}
@layer layout-base {
:root {
	/* Colors */
	--pf-text: var(--color-text-100);
	--pf-text-secondary: currentColor;
	--pf-text-muted: currentColor;
	--pf-background: var(--color-main-1000);
	--pf-border: currentColor;
	--pf-border-focus: currentColor;
	--pf-skeleton: var(--color-main-400);
	--pf-skeleton-shine: var(--color-main-1000);
	--pf-hover: var(--color-main-1000);
	--pf-mark: var(--color-text-100);
	--pf-scroll-shadow: rgba(0, 0, 0, 0.08);

	/* Shadows */
	--pf-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
	--pf-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
	--pf-shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.2);

	/* Error states */
	--pf-error-bg: var(--color-main-900);
	--pf-error-border: var(--color-error-100);
	--pf-error-text: var(--color-error-50);
	--pf-error-text-secondary: var(--color-error-50);

	/* Focus ring */
	--pf-outline-focus: var(--color-focus-100);
	--pf-outline-width: var(--line-width-focus);
	--pf-outline-offset: 2px;

	/* Typography */
	--pf-font: inherit,
		-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial,
		sans-serif;

	/* Sizing */
	--pf-input-height: 5ex;
	--pf-input-font-size: var(
		--font-size-100
	); /* Keep at 16px+ to prevent iOS auto-zoom on focus */
	--pf-summary-font-size: var(--font-size-100);
	--pf-result-title-font-size: var(--font-size-200);
	--pf-result-excerpt-font-size: var(--font-size-100);

	/* Results layout */
	--pf-results-display: flex;
	--pf-results-flex-direction: column;
	--pf-results-flex-wrap: nowrap;
	--pf-results-columns: none; /* grid-template-columns value, used when display is grid */
	--pf-results-gap: var(--layout-space-50);

	--pf-border-radius: var(--borderRadius-100);
	--pf-image-width: 64px;
	--pf-image-height: 48px;

	/* Icons (SVG data URIs) */
	/*--pf-icon-search: url("data:image/svg+xml,...");
  --pf-icon-arrow: url("data:image/svg+xml,...");*/

	/* Modal */
	--pf-modal-backdrop: rgba(0, 0, 0, 0.5);
	--pf-modal-max-width: 560px;
	--pf-modal-max-height: min(80dvh, 800px);
	--pf-modal-top: 10dvh;

	/* Searchbox dimensions */
	--pf-searchbox-max-width: 480px;
	--pf-searchbox-dropdown-max-height: 320px;

	/* Dropdown settings */
	--pf-dropdown-max-height: 280px;
	--pf-dropdown-z-index: 9999;
}
}
@media (width <= 1000px) {
	.pageHeader .pageHeader-regular,
	.pageHeader .pageHeader-login-regular {
		display: none !important;
	}
}

@media (width > 1000px) {
	.pageHeader .pageHeader-compact,
	.pageHeader .pageHeader-login-compact {
		display: none !important;
	}

	.pageHeader-buttons {
		> nav > *,
		> *,
		.pageHeader-dropdown {
			display: flex;
			align-items: center;
		}

		.pageHeader-dropdown,
		.pageHeader-login {
			/* Reason: Align Dropdown content with bottom edge of header: */
			height: 100%;
		}
	}
}

.pageHeader-button,
.pageHeader-link,
.pageHeader-item label {
	white-space: nowrap;
	display: flex;
	gap: 0.75em;
}

.pageHeader-login-regular,
.pageHeader-login-compact {
	display: contents;
}


[data-is-current="true"] {
	color: var(--color-1-100) !important;
}
.pageHeader-regular {
	background-color: var(--color-main-1000);
	border-bottom: 2px solid var(--color-main-800);
	padding: 0 var(--page-paddingInline);
	gap: var(--layout-space-200);
	display: flex;
	height: var(--pageHeader-height);
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
}

.pageHeader-title {
	display: flex;
	height: 100%;
	padding-block: var(--layout-space-100);
	gap: var(--layout-space-50);

	h1 {
		color: var(--color-1-100);
		font-size: var(--font-size-100);
		white-space: nowrap;
		margin-block: auto;
	}

	.pageHeader-title-logo {
		position: relative;
		height: 100%;
		* {
			height: 100%;
		}
	}
}

[data-show-site-title="false"] .pageHeader-title h1 {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
}

.pageHeader-buttons {
	display: flex;
	align-items: center;
	margin-left: auto;
	gap: calc(25vw / var(---pageHeader-nav-itemCount));
}

.pageHeader-buttons-label {
	display: flex;
	align-items: center;
	gap: 0.8em;
}

.pageHeader-buttons :is(button, a, label):hover {
	color: var(--color-main-400);
}

.pageHeader-buttons [data-as-dropdown-content] :is(button, a, label):hover {
	color: var(--color-text-100);
}

@media (width <= 1400px) {
	.pageHeader-buttons {
		justify-content: space-between;
		gap: unset;
		width: 100%;
	}
}
.pageHeader-nav {
	display: contents;
}.pageHeader-compact {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	pointer-events: none;
	display: flex;
	flex-direction: column;
	width: 100vw;
}

.pageHeader-compact-head {
	height: var(--pageHeader-height);
	background-color: var(--color-main-1000);
	pointer-events: all;
	display: flex;
	padding: 0 var(--page-paddingInline);
}

.pageHeader-compact-head-text {
	flex: 1;
	position: relative;

	> * {
		position: absolute;
		inset: 0;
	}
}

.pageHeader-compact-title {
	display: flex;
	height: 100%;
	padding-block: var(--layout-space-100);
	gap: var(--layout-space-50);

	h1 {
		color: var(--color-1-100);
		font-size: var(--font-size-100);
		white-space: nowrap;
		margin-block: auto;
	}

	.pageHeader-compact-logo {
		position: relative;
		height: 100%;
		* {
			height: 100%;
		}
	}
}

[data-show-site-title="false"] .pageHeader-compact-title h1 {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
}

@media (width <= 500px) {
	[data-show-site-title="true"] .pageHeader-compact-title h1 {
		white-space: wrap;
	}
}

@media (width <= 350px) {
	[data-show-site-title="true"] .pageHeader-compact-logo {
		display: none;
	}
}

.pageHeader-compact-menu {
	flex: 1;
	position: relative;
	display: none;
	isolation: isolate;

	&::before {
		content: "";
		display: block;
		width: 100%;
		position: absolute;
		top: 0;
		border-bottom: var(--line-width-300) solid var(--color-text-100);
		z-index: 3;
	}

	[data-panel-level="1"] {
		z-index: 1;
	}

	[data-panel-level="2"] {
		z-index: 2;
	}
}

.pageHeader-compact-menuToggle {
	--icon-size: calc(var(--pageHeader-height) * 0.5);
	position: relative;
	display: flex;
	align-items: center;

	[data-if-open] {
		visibility: hidden;
	}

	[data-if-closed] {
		visibility: visible;
	}

	> :nth-child(2) {
		position: absolute;
	}
}

html:has(.pageHeader-compact[data-do-show-menu="true"]) {
	overflow: hidden;
}

.pageHeader-compact[data-do-show-menu="true"] {
	[data-if-open] {
		visibility: visible;
	}

	[data-if-closed] {
		visibility: hidden;
	}

	.pageHeader-compact-menu {
		display: block;
	}
}

.pageHeader-compact-logo {
	opacity: 0;
	display: flex;

	img {
		height: 60%;
		margin-block: auto;
	}
}

.pageHeader-compact-crntPosition {
	display: flex;
}

.pageHeader-compact-buttonReturn {
	margin-block: auto;
	display: flex;
	font-size: var(--font-size-300);
	align-items: center;
	gap: 0.5em;

	[data-as-icon] {
		transform: rotate(180deg);
		--icon-lineWidth: var(--line-width-300);
		color: var(--color-1-100);
	}
}

.pageHeader-compact-logo,
.pageHeader-compact-crntPosition {
	transition: opacity var(--ms-100) ease-in-out;
}

.pageHeader-compact[data-item-active="-"] {
	.pageHeader-compact-logo {
		opacity: 1;
		pointer-events: all;
	}

	.pageHeader-compact-crntPosition {
		opacity: 0;
		pointer-events: none;
	}
}

.pageHeader-compact:not([data-item-active="-"]) {
	.pageHeader-compact-logo {
		opacity: 0;
		pointer-events: none;
	}

	.pageHeader-compact-crntPosition {
		opacity: 1;
		pointer-events: all;
	}
}

.pageHeader-compact-menuPanel {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	gap: 1.4em;
	background-color: var(--color-main-1000);
	pointer-events: all;
	padding: var(--layout-space-300) var(--page-paddingInline);
	font-size: var(--font-size-500);
	font-weight: 600;
	overflow-y: auto;
}

.pageHeader-compact-menuPanel[data-panel-level="2"] {
	transform: translateX(100%);
	transition-property: transform, opacity;
	transition-duration: var(--ms-100);
	transition-timing-function: ease-in-out;
	opacity: 0;
}

.pageHeader-compact-menuPanel[data-panel-level="2"][data-is-active="true"] {
	transform: translateX(0%);
	opacity: 1;
}

.pageHeader-compact {
	.pageHeader-link {
		white-space: wrap;
		line-height: 1;
		text-wrap: balance;
	}
}

.pageHeader-compact-selectSubItem {
	display: flex;
	justify-content: space-between;
	align-items: center;

	[data-as-icon] {
		color: var(--color-1-100);
		--icon-lineWidth: var(--line-width-300);
		margin-right: 0.2em;
	}
}

.pageHeader-compact-buttonsSecondary {
	display: flex;
	flex-direction: column;
	gap: 1em;
	font-size: var(--font-size-300);
	font-weight: 400;
	button {
		display: flex;
		gap: 0.5em;
	}
}
.pageFooter {
	padding: var(--layout-space-300) var(--page-paddingInline);
	background-color: var(--color-main-800);

	gap: var(--layout-space-300) var(--layout-space-300);

	> * {
		display: flex;
		flex-direction: column;
		gap: var(--layout-space-100);
	}
}

.pageFooter-about {
	grid-column: span 2;
}

.pageFooter-links > div {
	display: flex;
	flex-direction: column;
}

@media (width <= 1400px) {
	.pageFooter-contact {
		grid-column: unset;
	}
}
wbc-dev-info-layout[data-astro-cid-lgx4fwsx] {
  display: contents;
}

.devInfoLayout[data-astro-cid-lgx4fwsx] {
  isolation: isolate;
  display: flex;
  font-size: 16px;
  position: fixed;
  z-index: 99999999;
  top: 0;
  left: 0;
  background-color: #fff;
  padding: .2em;
  opacity: .8;
  pointer-events: none;
}
fn-observe-pointer-type[data-astro-cid-v4wlbfsh] {
  display: contents;
  pointer-events: none;
}