#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);
			}
		}
	}
/* Layout */
	dateslist-minimal {
		display: block;

		ul {
			padding: 1.5rem 0 1.5rem;
			@media screen and (min-width: 40rem) {
				padding: 1.5rem 0 2rem;
			}
		}

		li {
			display: flex;
			padding: 0.5rem 0;
			@media screen and (max-width: 30rem) {
				padding: 0rem 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 */

	dateslist-minimal + div.description {
		border-top: 1px solid var(--colour-grey-80);
	}

	dateslist-minimal {
		li {
			list-style: none;
			@media screen and (max-width: 30rem) {
				&:not(.emphasis) {
					color: var(--colour-grey-80);
				}
			}
			@media screen and (min-width: 30rem) {
				&:not(.emphasis) {
					font-weight: 300;
				}
			}
		}
	}
.milestone#publikationen-und-herausgeberschaften {
		.figure,
		images,
		.column  {
			max-width: 100%;
		}
	}
	.book-pile {
		padding: 1rem 0;
		@media (min-width: 60rem) {
			padding: 4.5rem 0;
		}
	}
	.book {
		margin: 0 auto 0;
		&:not(:first-of-type) {
			margin: -1px auto 0;
		}
		padding: 0.75rem 1.5rem;
		width: 30rem;
		max-width: 80%;
		@media screen and (max-width: 30rem) {
			width: 20rem;
			max-width: 70%;
		}

		display: flex;

		& > * {
			align-content: center;
		}
		.date {
			flex: 0 0 auto;
		}
		.separator {
			flex: 0 0 2rem;
			text-align: center;
		}
		.title {
			flex: 1 1 auto;
			height: 1rem;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
		}
	}
	.book {
		border: thin solid var(--colour-grey-100);
		border-radius: 1px;
		text-transform: uppercase;
		font: 400 var(--font-size-xxs) var(--display-font);
		letter-spacing: 0.125rem;
	}
#publikationen-herausgeberschaften {
		.description {
			margin: 3rem 0;
		}
		@media screen and (min-width: 60rem) {
			.description {
				margin: 3rem 0;
			}
		}
	}
	#auszeichnungen {
		margin: 10vh 0rem 5vh;
		@media screen and (min-width: 40rem) {
			padding: 1rem;
			margin: 10vh auto 10vh;
			max-width: 60rem;
			padding: 1.5rem;
		}
		@media screen and (max-width: 40rem) {
			.title {
				margin: 1rem 0;
			}
		}
	}

	.milestone {
		min-height: 50vh;
	}
	.milestone:has(.dates.list) {
		max-width: 80rem;
		display: flex;
		gap: 1.5rem;
		margin: 10vh auto;
		padding: 1rem;
		@media screen and (max-width: 40rem) {
			margin: 5vh -0.5rem;
		}

		.images:has(figure) {
			display: flex;

			& > figure {
				flex: 1 0 100%;
			}
		}

		flex-wrap: wrap;
		& > * {
			flex: 1 0 100%;
		}
		@media screen and (min-width: 60rem) {
			flex-wrap: nowrap;
			& > * {
				flex: 1 0 calc(50% - 1.5rem);
			}

			&:nth-of-type(even) {
				flex-direction: row-reverse;
			}
			&:not(:has(.images)) {
				.dates.list {
					columns: 2;
				}
				.description {
					p {
						max-width: 50%;
					}
				}
			}
		}
		.images {
			/* aspect-ratio: 4/3; */

			img,
			picture {
				max-width: 100%;
				height: 100%;
				max-height: 60vh;
				margin: 0 auto;
				@media screen and (max-width: 30rem) {
					max-height: initial;
					width: 100%;
				}
			}
		}
		h2 {
			padding: 0 0 1.5rem;
		}
		.description {
			padding: 1.5rem 0 0;
		}
	}
	.progress {
		margin-top: -0.125rem;
		margin-bottom: -1.25rem;
	}
	.progress > .indicator {
		margin: 0 0.125rem 0;
	}
.milestone {
		border: thin solid black;
		h2 {
			font: 300 var(--font-size-xxl) var(--display-font);
			line-height: 1.35em;
			@media screen and (max-width: 30rem) {
				font: 400 var(--font-size-xxl) var(--display-font);
			}
		}
		.description {
			p {
				@media screen and (max-width: 30rem) {
					font: 400 var(--font-size-l) var(--text-font);
				}
				line-height: 1.75rem;
			}
		}
		@media screen and (min-width: 40rem) {
			/* &:nth-of-type(odd) {
				.images {
					border-right: thin solid var(--colour-grey-100);
					border-left: none;
				}
			}
			&:nth-of-type(even) {
				.images {
					border-left: thin solid var(--colour-grey-100);
					border-right: none;
				}
			} */
		}
	}
@keyframes fadin {
		from {
			opacity: 0.1;
		}
		to {
			opacity: 1;
		}
	}

	#auszeichnungen {
		/* Hover over .auszeichnung */
		@media screen and (min-width: 40rem) {
			&:has(.description:hover) span {
				color: var(--colour-grey-60);
			}
			&:has(.auszeichnung:hover) {
				:not(:hover) {
					color: var(--colour-grey-60);
				}
				:hover + span,
				:has(+ :hover) {
					color: var(--colour-grey-100);
				}
			}
		}
		/* Fade in .auszeichnung */
		&.animate {
			.auszeichnung,
			.auszeichnung + .separator {
				animation: fadin 1s both;
				animation-delay: calc(var(--fadein-delay) * 100ms);
			}
		}
	}

	.milestone {
		/* ??? */
		&:has(.images figure) {
			h2 {
				border-bottom: thin solid var(--colour-grey-100);
			}
		}
		/* Swipeable  */
		& .images:has(figure) {
			overflow-x: scroll;
			scroll-snap-type: x mandatory;
			& > figure {
				scroll-snap-align: start;
				scroll-snap-stop: always;
			}
		}
	}

	/* Swipeable  */
	.progress {
		color: var(--colour-grey-60);
		& .indicator {
			&[aria-current='true'] {
				color: var(--colour-grey-100);
				transition: color 0.5s ease-in-out;
			}
		}
	}
#highlights {
		margin: 15vh auto 5vh;
		@media screen and (min-width: 40rem) {
			margin: 15vh auto 5vh;
		}
	}
#highlights {
		> h2 {
			font: 300 var(--font-size-xl) var(--display-font);
			line-height: 1.5em;
			text-align: center;
			text-transform: uppercase;
			letter-spacing: 0.5rem;
		}
	}
#highlights {
		li {
			list-style: none;
		}

		#auszeichnungen {
			border: 1px solid var(--colour-grey-100);

			@media screen and (max-width: 40rem) {
				.title {
					font: 300 var(--font-size-xxl) var(--display-font);
					line-height: 2rem;
				}
			}
			@media screen and (min-width: 40rem) {
				& * {
					font: 300 var(--font-size-xl) var(--display-font);
					letter-spacing: 0.5rem;
					text-transform: uppercase;
					text-align: justify;
					-webkit-hyphens: auto;
					-moz-hyphens: auto;
					hyphens: auto;
				}

				.title,
				.description {
					display: inline;
				}
				.title {
					color: var(--colour-red);
				}
			}

			span {
				&.separator {
					margin: 0 1rem;
				}
				@media screen and (max-width: 40rem) {
					&.separator {
						display: none;
					}
					&.auszeichnung {
						display: list-item;
						margin-left: 1rem;
						text-transform: initial;
						letter-spacing: initial;
					}
				}
			}
			& > * {
				transition: color 0.25s ease-out;
			}
		}
		#publikationen-herausgeberschaften {
			max-width: 55rem;
			margin: 5vh auto;
			h2 {
				font: 300 var(--font-size-xl) var(--display-font);
				line-height: 1.5em;
				text-transform: uppercase;
				letter-spacing: 0.5rem;
				margin: 5vh 0 2.5vh;
				hyphens: auto;
			}
			@media screen and (min-width: 40rem) {
				.description {
					font: 300 var(--font-size-l) var(--display-font);
					text-transform: uppercase;
					line-height: 2em;
					letter-spacing: 0.25rem;
				}
			}
			.separator {
				margin: 0 0.5rem;
			}
			.publikation {
				font: 400 var(--font-size-s) var(--display-font);

				text-transform: uppercase;
				line-height: 2em;
				letter-spacing: 0.05rem;

				padding: 0.5rem 1em;
				border: 1px solid var(--colour-grey-100);
				border-radius: 1px;
				margin: -1px;

				@media screen and (min-width: 40rem) {
					letter-spacing: 0.25rem;
					padding: 0.5rem 1.5rem;
				}
			}
		}
	}
.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;
		}
	}