#page-header {
		margin: 10vh 0 5vh;

		h1 + h2 {
			margin: 2.5vh 0 0;
		}
	}

	#page-header {
		h1 {
			font: 300 var(--font-size-xxl) var(--display-font);
			line-height: 1.5em;
			text-transform: uppercase;
			letter-spacing: 1rem;
			hyphens: auto;
			text-align: center;
			@media screen and (max-width: 30rem) {
				font: 400 var(--font-size-xl) var(--display-font);
				letter-spacing: 0.35rem;
				margin-left: -1.5rem;
				margin-right: -1.5rem;
			}
			@media screen and (max-width: 25rem) {
				font: 400 var(--font-size-xl) var(--display-font);
				letter-spacing: 0.25rem;
			}
		}

		h2 {
			font: 300 var(--font-size-l) var(--display-font);
			line-height: 1.5em;
			text-align: center;
			@media screen and (max-width: 30rem) {
				font: 400 var(--font-size-l) var(--display-font);
			}
		}
	}
/* Logic / Behaviour */
	/* #overview filter is active -> hides non-overview elements */
	body:has(dates-filter [href='#overview']:target) {
		.dates.list li:not([tags*='overview']) {
			display: none;
		}
	}
	/* Default filter when no filter is active -> hides non-overview elements */
	body:not(:has( :target )) {
		.dates.list li:not([tags*='overview']) {
			display: none;
		}
	}
	body:has(#details :target) {
		dates-filter {
			display: none;
		}
	}

	/* Layout  */
	dates-filter {
		display: block;
		margin: 0.5rem 0;

		a {
			display: inline-block;
		}
		a + a {
			margin-left: 0.75rem;
		}
	}

	/* Styles  */
	dates-filter {
		a {
			font: 400 var(--font-size-xxs) var(--text-font);
			text-transform: uppercase;
			letter-spacing: 0.125rem;
			color: var(--colour-grey-70);
		}
	}

	/* Interactive Styles */
	dates-filter {
		a {
			/* Hover link */
			&:hover {
				color: var(--colour-grey-80);
			}

			/* Active link */
			&:target {
				text-decoration: underline;
				outline: solid 1px transparent;
			}
		}
		/* Default active link */
		&:not(:has(:target)) a#overview {
			text-decoration: underline;
		}
	}

	/* Hacks */
	html {
		/* Avoid scrolling to element */
		/* Assumes the filter to be above the fold */
		&:has(dates-filter a:target) {
			scroll-padding-top: 100vh;
		}
		/* If scrolling to element, do it smoothly */
		scroll-behavior: smooth;
	}
more-button {
		display: block;
		margin: 1.5rem 0;
	}

	body:not(:has(#details :target)) {
		more-button {
			display: none;
		}
	}
/* Layout */
	dates-list {
		display: block;
		margin: 1.5rem 0;

		li {
			display: flex;
			padding: 0.5rem 0;
			@media screen and (max-width: 30rem) {
				padding: 0.125rem 0;
			}

			.label {
				padding: 0 1rem;
				flex: 0 0 4rem;
				@media screen and (min-width: 40rem) {
					flex: 0 0 5rem;
				}
			}
			.title {
				flex: 1 1 fit-content;
			}
		}
	}
/* Styles */
	dates-list {
		ul {
			border-left: 1px solid var(--colour-grey-80);
		}
	}
	.milestone {
		dates-list {
			ul {
				/* border-bottom: 1px solid var(--colour-grey-80); */
			}
		}
	}

	dates-list {
		li {
			list-style: none;
			/* line-height: 2rem; */
			&::before {
				content: '—';
				margin-left: -0.5px;
			}
			@media screen and (max-width: 30rem) {
				&:not(.emphasis) {
					color: var(--colour-grey-80);
				}
			}
			@media screen and (min-width: 30rem) {
				&:not(.emphasis) {
					font-weight: 300;
				}
			}
			a {
				color: inherit;
			}
		}
	}
/* Interaction Styles */
	/* Hide the dates not related to the :targeted milestone with details shown */
	body:has(#details :target) {
		li {
			transition: opacity 0.75s ease-in-out;

			&.show {
				cursor: auto;
				animation: slideup 0.15s cubic-bezier(0.5, 1, 0.89, 1) both;
			}
			&:not(.show) {
				display: none;
			}
		}
	}
	/* Highlighting Dates/Milestones */
	@media screen and (min-width: 40rem) {
		body .list:not(:has(.show)) {
			&:has(:hover) {
				.item {
					transition: all 0.25s ease-in-out;

					&:not(:hover) {
						opacity: 0.2;
						background: transparent;
					}
					&:hover {
						opacity: 1;
						cursor: pointer;
					}
				}
			}
			&:has(.highlight) {
				.item {
					transition: opacity 0.25s ease-in-out, background 1s ease-out;
					&.highlight {
						background: var(--colour-grey-30);
						opacity: 1;
					}
					&:not(.highlight) {
						opacity: 0.3;
					}
				}
			}
		}
	}
/* Layout  */
	milestones-list {
		display: block;

		ul {
			margin: 0rem 0 0;
		}
		li:not(:first-of-type) {
			margin: 2rem 0;
		}
	}
/* Styles */
	milestones-list {
		opacity: 0.5;

		li {
			list-style: none;
		}
		a {
			color: inherit;
		}
	}
/* Interactive Styles */
	/* Hide the milestones not related to the targeted milestone with details shown */
	body:has(#details :target) {
		li {
			transition: opacity 0.75s ease-in-out;

			&.show {
				cursor: auto;
				animation: slideup 0.15s cubic-bezier(0.5, 1, 0.89, 1) both;
			}
			&:not(.show) {
				display: none;
			}
		}
	}
/* Layout */
	milestones-details {
		*:has(> .column) {
			display: flex;

			.column {
				flex: 1 0 50%;
				min-width: 20rem;
				padding: 1rem;

				display: flex;
				flex-direction: column;
				justify-content: end;

				&:has(h3) {
					justify-content: space-between;
				}
				&:has(h4) {
					justify-content: space-between;
				}
				&:has(img) {
					padding: 0;
					justify-content: center;

					flex-direction: row;

					min-height: 100%;

					& > * {
						flex: 1 0 50%;
					}
					img,
					picture {
						min-height: 100%;
						height: 100%;
						width: 100%;
						object-fit: cover;
						@media screen and (max-width: 30rem) {
							margin-top: auto;
							max-height: 60vh;
							min-height: 60vh;
						}
					}
				}

				& > * {
					flex: 0 0 fit-content;
				}
				h3 {
					margin: 0 0 1rem;
				}
			}
		}
	}
	@media screen and (min-width: 40rem) {
		milestones-details {
			*:has(> .column) {
				flex-wrap: nowrap;
				.column {
					flex: 0 0 50%;

					min-height: 60vh;
					max-height: 70vh;
				}
			}
		}
	}
	milestones-details  {
		display: block;
	}
	*:has(> .progress > .indicator) {
		position: relative;
		.progress {
			position: absolute;
			bottom: -1.5rem;
			right: 0;
			& > .indicator {
				display: inline-block;
				margin: 0 0.125rem;
			}
		}
	}
/* Styles */
	#details {
		&:has(:target) {
			border: thin solid var(--colour-grey-100);
		}
		h3 {
			font: 300 var(--font-size-xxl) var(--display-font);
			line-height: 1.3em;
			@media screen and (max-width: 30rem) {
				font: 400 var(--font-size-xxl) var(--display-font);
			}
		}
		p {
			@media screen and (max-width: 30rem) {
				font: 400 var(--font-size-l) var(--display-font);
			}
		}
	}
/* Interaction Styles */

	milestones-details {
		& article:not(:target) {
			display: none;
		}
		*:has(> .column) {
			overflow-x: scroll;
			scroll-snap-type: x mandatory;
		}
		.column {
			scroll-snap-align: start;
			scroll-snap-stop: always;
		}
	}
	#details {
		transition: opacity 0.75s ease-in-out, transform 0.25s ease-out;
		&:has(:target) {
			opacity: 1;
			@media screen and (min-width: 40rem) {
				transform: translate(0, -1rem);
			}
		}
		&:not(:has(:target)) {
			opacity: 0;
			transform: translate(0, 0rem);
		}
	}

	.progress {
		color: var(--colour-grey-40);
		& .indicator {
			&[aria-current='true'] {
				color: var(--colour-grey-100);
				transition: color 0.5s ease-in-out;
			}
		}
	}
/* Layout */
	#zeitleiste {
		margin: 4.5rem auto;

		@media screen and (min-width: 40rem) {
			max-width: 80rem;
			margin: 15vh auto 10vh;

			display: grid;

			grid-template-columns: minmax(14rem, 1fr) minmax(18rem, 4fr);
			grid-template-rows: auto auto;

			gap: 1.5rem;
			@media screen and (min-width: 80rem) {
				gap: 2.5vw 10vw;
			}

			#chronologie {
				grid-column: 2 / 3;
				grid-row: 1 / 2;
			}
			#details {
				grid-column: span 2;
			}
			position: relative;
			#meilensteine {
				h2 {
					margin-bottom: 1.5rem;
				}
			}
		}
		@media screen and (max-width: 40rem) {
			#meilensteine {
				display: none;
			}
		}
		@media screen and (min-width: 40rem) {
			#meilensteine {
				h2 {
					padding-top: 2rem;
				}
			}
		}
	}
/* Styles */
	h2 {
		font: 300 var(--font-size-l) var(--display-font);
		line-height: 1.5em;
		text-transform: uppercase;
		letter-spacing: 1rem;
		@media screen and (max-width: 30rem) {
			font: 400 var(--font-size-l) var(--display-font);
			letter-spacing: 0.5rem;
		}
	}
	#meilensteine {
		@media screen and (min-width: 40rem) {
			h2 {
				font: 300 var(--font-size-s) var(--display-font);
				line-height: 1.5em;
				letter-spacing: 0.5rem;
			}
		}
	}
/* Interactive Styles */
	/* Page load animation */
	#zeitleiste {
		& > #chronologie {
			animation: slideup 0.75s ease-out both;
		}
		& > #meilensteine {
			animation: slideup 1.25s 0.1s ease-out both;
		}
	}
	/* Margin of #meilensteine conditional on whether milestone #details are not shown  */
	body:not(:has(#details :target)) {
		#meilensteine {
			margin: 5rem 0 0;
		}
	}
	/* Showing headings conditional on whether milestone #details are shown  */
	body:has(#details :target) {
		#meilensteine h2,
		#chronologie h2 {
			display: none;
		}
	}
	/* Showing milestones list conditional on whether on of them is highlighted */
	#meilensteine:not(:has(.milestone.show)):not(:has(.milestone.highlight)) {
		pointer-events: none;
		opacity: 0;
		transition: opacity 0.25s;
	}
	/* Showing milestones list conditional on whether on of them is highlighted */
	#meilensteine:not(:has(.milestone.show)):has(.milestone.highlight) {
		position: sticky;
		top: 3rem;
		max-height: 60vh;
		overflow-y: scroll;

		-ms-overflow-style: none;
		scrollbar-width: none;
		&::-webkit-scrollbar {
			display: none;
		}
	}
.wqpb-eny2 #site-header{max-width:70rem;min-height:4.5rem;margin:0 auto 5vh;display:flex;align-items:center;#site-title {
			width: fit-content;
			@media screen and (max-width: 40rem) {
				/* margin-top: -1rem; */
			}
			@media screen and (min-width: 40rem) {
				padding: 0rem 0 0;
			}
			span {
				display: block;
			}
		}
		#site-menu-toggle {
			display: block;
			height: 4.75rem;
			width: 2.25rem;
			position: absolute;
			top: 0rem;
			right: 2.25rem;

			@media screen and (min-width: 30rem) {
				right: 3.75rem;
			}
			@media screen and (min-width: 40rem) {
				height: 5.25rem;
			}
			@media screen and (min-width: 70rem) {
				right: 10vw;
				height: 5.25rem;
			}
			@media screen and (min-width: 90rem) {
				right: clamp(1rem, 25vw, 20rem);
			}
			&::before {
				position: absolute;
				inset: 0;
			}
			& span {
				position: relative;
				top: 3rem;
				left: -2rem;
				@media screen and (max-width: 30rem) {
					left: -1rem;
				}
				@media screen and (min-width: 40rem) {
					top: 3.5rem;
				}
			}
		}
		#site-menu {
			display: grid;

			& > * {
				width: fit-content;
				height: fit-content;
				margin: auto auto;
			}

			position: absolute;
			inset: 0;

			min-height: 100vh;
			max-height: 100vh;
		}
		.site-menu-list {
			padding: 5vw 5vw 10vw;

			&:first-of-type {
				padding-bottom: 2.5vw;
			}
			&:last-of-type {
				padding-top: 2.5vw;
			}
		}}
/* STYLES */
	#site-header {
		a {
			color: var(--colour-grey-40);
			&:hover {
				color: var(--colour-white);
			}
			&:active {
				color: var(--colour-grey-60);
			}
		}
		li {
			margin: 1rem 0;
			list-style: none;
			font: 300 var(--font-size-m) var(--display-font);
			text-transform: uppercase;
			letter-spacing: 0.75rem;
			@media screen and (max-width: 30rem) {
				font: 400 var(--font-size-m) var(--display-font);
				letter-spacing: 0.5rem;
			}
		}
		#site-title {
			mix-blend-mode: difference;

			span {
				color: var(--colour-grey-20);
				text-transform: uppercase;

				&:first-of-type {
					font: 300 var(--font-size-xs) var(--display-font);
					letter-spacing: 0.11rem;
				}
				&:last-of-type {
					font: 300 var(--font-size-l) var(--display-font);
					letter-spacing: 0.5rem;
				}
				@media screen and (max-width: 30rem) {
					&:first-of-type {
						font: 400 var(--font-size-xs) var(--display-font);
						letter-spacing: 0.05rem;
					}
					&:last-of-type {
						font: 400 var(--font-size-l) var(--display-font);
						letter-spacing: 0.3rem;
					}
				}
			}
		}
		#site-menu-toggle {
			span {
				font: 300 var(--font-size-m) var(--display-font);
				color: var(--colour-grey-20);
				mix-blend-mode: difference;
				text-transform: uppercase;
				letter-spacing: 0.75rem;
				text-align: center;

				@media screen and (max-width: 30rem) {
					font: 400 var(--font-size-m) var(--display-font);
					/* writing-mode: vertical-rl;
					text-orientation: upright; */
					letter-spacing: 0.3rem;
				}
			}

			&::before {
				content: '';
				background-color: var(--colour-grey-80);
				/* border: thin solid var(--colour-grey-80); */
			}
		}
		#site-menu {
			background: var(--colour-grey-100);
			backdrop-filter: blur(5px);
			-webkit-backdrop-filter: blur(10px);
		}
		.site-menu-list {
			border-left: thin solid var(--colour-grey-20);
		}
	}
	.homepage #site-header #site-menu-toggle::before {
		background-color: transparent;
		border: thin solid var(--colour-grey-80);
	}
	.homepage #site-header #site-title {
		display: none;
	}
/* STATES / TRANSITIONS */
	body {
		&:has(#site-menu.open) {
			height: 100vh;
			overflow: hidden;

			#site-menu-toggle {
				z-index: 2;

				&::before {
					background-color: var(--colour-grey-60);
				}
				span {
					/* display: none; */
				}
				&::after {
					/* content: "X" */
				}
			}
		}
	}
	#site-header {
		a {
			transition: color 0.15s ease-out;
		}
	}
	#site-menu.open {
		li {
			animation: fadein 0.25s ease-out both, slideup 0.75s ease-out both;
		}
	}
	#site-menu {
		transition: opacity 0.15s ease-out;
		&.open {
			opacity: 0.95;
			z-index: 1;
		}
		&:not(.open) {
			opacity: 0;
			pointer-events: none;
		}
	}