/* @group FONTS */

@font-face {
  font-family: 'Roboto';
  src: url('../fonts/Roboto-VariableFont_wdth100,wght400_700.woff2') format('woff2 supports variations'),
       url('../fonts/Roboto-VariableFont_wdth100,wght400_700.woff2') format('woff2-variations');
  font-weight: 400 700;
  font-display: swap;
}

@font-face {
  font-family: 'Roboto';
  src: url('../fonts/Roboto-Italic-VariableFont_wdth100,wght400_700.woff2') format('woff2 supports variations'),
       url('../fonts/Roboto-Italic-VariableFont_wdth100,wght400_700.woff2') format('woff2-variations');
  font-weight: 400 700;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Roboto Condensed';
  src: url('../fonts/RobotoCondensed-VariableFont_wght700.woff2') format('woff2 supports variations'),
       url('../fonts/RobotoCondensed-VariableFont_wght700.woff2') format('woff2-variations');
  font-weight: 700;
  font-display: swap;
}

/* @end */

/* @group VARIABLES */

:root {
	
	--color-base: 					#0B1918;
	--color-primary: 			#397D77;
	--color-primary-dark: 	#33706b;
	--color-lmu: 					#00883A;
	--color-tum: 					#0065BD;
	--color-lrz: 					#6CADDF;
	--color-white:					#FFFFFF;
	
	--color-primary-10: color-mix(in srgb, var(--color-primary) 10%, var(--color-white));
	--color-primary-20: color-mix(in srgb, var(--color-primary) 20%, var(--color-white));
	
	--background-gradient:
		radial-gradient(75% 75% at 10% 70%, var(--color-lmu) 0%, transparent 100%),
		radial-gradient(75% 75% at 70% 10%, var(--color-tum) 0%, transparent 100%),
		linear-gradient(var(--color-lrz) 0%, var(--color-lrz) 100%);
	
	--font-family: 					'Roboto', Arial, Helvetica, sans-serif;
	--font-family-heading: 	'Roboto Condensed', Arial Narrow, Helvetica, sans-serif;
	
	--font-sm:			400 .85rem/1.4em var(--font-family);
	--font: 				400 clamp(17px, 2vw, 20px)/1.4em var(--font-family);
	--font-lg: 			400 1.2rem/1.4em var(--font-family);
	--font-xl: 			400 1.4rem/1.4em var(--font-family);
	
	--font-heading: 	700 1.25rem/1.3em var(--font-family);
	--font-heading-lg: 	700 clamp(1.7rem, 4.2vw, 2.1rem)/1.2em var(--font-family-heading);
	--font-heading-xl: 	700 clamp(2.1rem, 5.4vw, 3.3rem)/1.1em var(--font-family-heading);
	
	--max-width: 		80rem;
	--max-width-sm:	45rem;
	
	--spacing-block-sm: 		clamp(.5rem, 2vw, 1rem);
	--spacing-block: 			clamp(2rem, 6vw, 3rem);
	--spacing-block-lg: 		clamp(3rem, 10vw, 5rem);
	--spacing-block-xl: 		clamp(6rem, 20vw, 10rem);
	
	--padding-inline: clamp(1.25rem, 4vw, 6rem);
	
	--column-gap: 			clamp(2rem, 4vw, 4rem);
	--column-gap-lg: 	clamp(3rem, 12vw, 6rem);
	
	--row-gap-sm: clamp(1.4rem, 4vw, 2rem);
	--row-gap: 		clamp(2rem, 6vw, 3rem);
	--row-gap-lg: clamp(3rem, 9vw, 4.5rem);
}

/* @end */

/* @group BASE */

html {
	scroll-behavior: smooth;
	min-width: 320px;
	color: var(--color-base);
	background-color: var(--color-background);
	font: var(--font);
	font-variant-numeric: tabular-nums;
}

h1 {
	font: var(--font-heading-xl);
}

h1:has(+ *) {
	margin-bottom: 1rem;
}

h2 {
	color: var(--color-primary);
	font: var(--font-heading-lg);
}

* + h2 {
	margin-top: 1.5em;
}

h2:has(+ *) {
	margin-bottom: .75em;
}

h2:has(+ .projects) {
	margin-bottom: var(--row-gap);
}

	@media (max-width: 39.999999999rem) {
		
		h1,
		h2 {
			hyphens: auto;
		}
		
	}

h3 {
	color: var(--color-primary);
	font: var(--font-heading);
}

* + h3 {
	margin-top: 1.5em;
}

.publications + h3 {
	margin-top: var(--row-gap);
}

h3:has(+ *) {
	margin-bottom: 1em;
}

h4 {
	font-weight: 700;
}

.main h4 {
	color: var(--color-primary);
}

h4:has(+ *) {
	margin-block-end: 1em;
}

p:has(+ *) {
	margin-block-end: 1em;
}

p:has(+ figure) {
	margin-block-end: 2em;
}

* + p:has(.button) {
	margin-block-start: 1.4em;
}

p:has(.button):has(+ *) {
	margin-bottom: 2em;
}

figure:not([class]):has(+ *) {
	margin-block-end: 2em;
}

figure:not([class]):has(> figcaption):has(+ *) {
	margin-block-end: 3em;
}

	figure:not([class]) img:has(+ *) {
		margin-block-end: 1em;
	}

	figure:not([class]) figcaption {
		font: var(--font-sm);
	}

em {
	font-style: italic;
}

strong {
	font-size: 1.05em;
	font-weight: 700;
}

img {
	max-width: 100%;
	height: auto;
}

svg {
	vertical-align: bottom;
}

.projects-list {
	display: flex;
	column-gap: .2em;
}

	.projects-list::before {
		content: "";
		flex: 0 0 1.4em;
		-webkit-mask-image: url(../images/hexagon.svg);
	  mask-image: url(../images/hexagon.svg);
	  -webkit-mask-size: cover;
	  mask-size: cover;
		height: 1.4em;
		margin-inline-end: .1em;
	  background-color: currentColor;
	}
	
	.projects-list > *:not(:first-child) {
		margin-inline-start: .3em;
	}

.hexagon {
  aspect-ratio: 1155/1000;
}
  
  .hexagon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%); /* Hexagon */
  }

/* @group Lists */

.main ul:not([class]):has(+ *) {
    margin-bottom: 1.4em;
}

	.main ul:not([class]) li {
	   display: flex;
	}
	
	.main ul:not([class]) li:has(+ li) {
	   margin-bottom: 1em;
	}
	
		.main ul:not([class]) li::before {
	    content: "•";
	    flex: 0 0 1em;
			padding-right: .25em;
			text-align: center;
		}
	
.main ol:not([class]) {
  counter-reset: counter;
}

.main ol:not([class]):has(+ *) {
	margin-bottom: 1.4em;
}

	.main ol:not([class]) li {
		display: table;
	  counter-increment: counter;
	}
	
	.main ol:not([class]) li:has(+ li) {
	   margin-bottom: 1em;
	}
	
		.main ol:not([class]) li::before {
		  content: counter(counter) ".";
	    display: table-cell;
	    width: 2em;
			padding-right: .3em;
			text-align: right;
		}

/* @end */

/* @group Links */

a {
	text-decoration: underline;
	text-decoration-thickness: .05em;
	text-decoration-color: transparent;
	text-underline-offset: .15em;
	transition: text-decoration .15s ease-in-out 0s;
}

a:hover {
	text-decoration-color: currentColor;
}

.projects-list a,
.text a,
.blocks a,
.roles a {
	text-decoration-color: color-mix(in srgb, var(--color-primary) 50%, transparent);
}

.blocks a.button {
	color: var(--color-primary);
	text-decoration-color: transparent;
}

.projects-list a:hover,
.text a:hover,
.blocks a:hover,
.roles a:hover {
	text-decoration-color: var(--color-primary);
}

a.active,
.colophon__text a,
.person a:hover {
	text-decoration-color: color-mix(in srgb, currentColor 50%, transparent);
}

a.button,
a.button[target="_blank"],
.person a[href^="mailto:"],
.person a[href^="tel:"],
.contact a[href^="mailto:"],
.contact a[href^="tel:"],
.footer a[href^="mailto:"],
.footer a[href^="tel:"],
.contact__address a,
.contact__weburl a,
.anchors a,
.publication__link a {
	position: relative;
	display: inline-block;
	padding-inline-start: 1.6em;
}

a[href^="mailto:"] {
	overflow-wrap: break-word;
  word-break: break-word;
}

a.button,
.person a[href^="mailto:"],
.person a[href^="tel:"] {
	color: var(--color-primary);
	font-weight: 450;
}

	a.button::before,
	a.button[target="_blank"]::before,
	.person a[href^="mailto:"]::before,
	.person a[href^="tel:"]::before,
	.contact a[href^="mailto:"]::before,
	.contact a[href^="tel:"]::before,
	.footer a[href^="mailto:"]::before,
	.footer a[href^="tel:"]::before,
	.contact__address a::before,
	.contact__weburl a::before,
	.anchors a::before,
	.publication__link a::before {
	  content: "";
		position: absolute;
		inset-inline-start: 0;
		width: 1.4em;
	  -webkit-mask-size: cover;
	  mask-size: cover;
		height: 1.4em;
	  background-color: currentColor;
		transition: transform .15s ease-in-out 0s;
	}
	
	a.button::before {
		-webkit-mask-image: url(../images/east.svg);
	  mask-image: url(../images/east.svg);
	}
	
	.person a[href^="mailto:"]::before,
	.contact a[href^="mailto:"]::before,
	.footer a[href^="mailto:"]::before {
	  -webkit-mask-image: url(../images/send.svg);
	  mask-image: url(../images/send.svg);
	}
	
	.person a[href^="tel:"]::before,
	.contact a[href^="tel:"]::before,
	.footer a[href^="tel:"]::before {
	  -webkit-mask-image: url(../images/call.svg);
	  mask-image: url(../images/call.svg);
	}
	
	.contact__address a::before {
	  -webkit-mask-image: url(../images/location.svg);
	  mask-image: url(../images/location.svg);
	}

	a.button[target="_blank"]::before,
	.contact__weburl a::before,
	.publication__link a::before {
	  -webkit-mask-image: url(../images/arrow-outward.svg);
	  mask-image: url(../images/arrow-outward.svg);
	}
	
	.anchors a::before {
	  -webkit-mask-image: url(../images/east.svg);
	  mask-image: url(../images/east.svg);
		margin-inline-end: .2em;
	}
	
	.anchors a[href^="#"]::before {
	  -webkit-mask-image: url(../images/arrow-downward.svg);
	  mask-image: url(../images/arrow-downward.svg);
	}

/* @end */

/* @end */

/* @group Header */

.header {
	position: fixed;
	z-index: 10;
	inset-block-start: 0;
	inset-inline: 0;
	display: flex;
	justify-content: flex-end;
	color: var(--color-primary-dark);
	font-weight: 450;
	line-height: 1.2em;
	transition: all .3s ease-in-out 0s;
}

.header--followedByHero {
	color: var(--color-white);
}

.header.fixed {
	color: var(--color-white);
	background-color: var(--color-primary);
}

	.header .logo {
		margin-inline-end: auto;
	}
	
	@media (max-width: 1199px) {
		
		.header.open {
			inset-block-end: 0;
			color: var(--color-white);
			background:	var(--background-gradient);
		}
		
	}
	
	@media (min-width: 1200px) {
		
		.header {
			padding-inline: 2rem;
		}
		
		.header:not(.fixed) {
			align-items: flex-end;
		}
		
	}
	
/* @group Logo */
	
		.logo svg {
			width: auto;
		}
		
		.logo.fixed:not(.open) .logo__full {
			display: none;
		}
	
			.logo__full svg {
				margin-block-start: .3rem;
				height: 4rem;
			}
		
		.logo__dense {
			display: none;
			align-items: center;
			height: 2.8rem;
		}
		
		.logo.fixed:not(.open) .logo__dense {
			display: flex;
		}
			
			.logo__dense svg {
				height: 1.6rem;
			}
		
		@media (max-width: 1199px) {
			
			.logo {
				padding-inline-start: .6rem;
			}
			
		}
	
	/* @end */

/* @group Menu */

.menu {
	display: flex;
}

	.menu > * {
		white-space: nowrap;
	}
	
	@media (max-width: 1199px) {
		
		.menu {
			position: fixed;
			inset-block: 7rem 0;
			inset-inline: 0;
			flex-direction: column;
			row-gap: .75em;
			width: 100vw;
			padding-inline: 2.2rem;
			font: var(--font-xl);
			font-weight: 500;
			transform: translateX(-100vw);
			/*transition: transform .3s ease-in-out 0s;*/
		}
		
		.menu.open {
			transform: translateX(0);
		}
		
	}
	
	@media (min-width: 1200px) {
		
		.menu {
			flex-wrap: wrap;
			justify-content: flex-end;
			column-gap: 1.5em;
			line-height: 2rem;
			margin-block-start: .4rem;
			margin-inline-start: 3rem;
		}
		
	}

/* @end */

/* @group Languages */

.languages {
	margin-inline-start: 3em;
	text-transform: uppercase;
	letter-spacing: .05em;
}

	.languages > * {
		display: inline-block;
		text-align: center;
	}

	.languages > .active {
		display: none;
	}
	
	@media (max-width: 1199px) {
		
			.languages > * {
				font-size: 1.2rem;
				width: 3rem;
				line-height: 3rem;
			}
		
	}
	
	@media (min-width: 1200px) {
		
			.languages > * {
				width: 2rem;
				margin-block-start: .4rem;
				line-height: 2rem;
			}
		
	}

/* @end */

/* @group Search-button */

.search-button {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 3rem;
	vertical-align: bottom;
}

	.search-button svg {
		width: 2rem;
		height: auto;
	}
	
	@media (max-width: 1199px) {
		
		.search-button {
			height: 3rem;
		}
		
	}
	
	@media (min-width: 1200px) {
		
		.search-button {
			height: 2rem;
			margin-block-start: .4rem;
		}
		
	}

/* @end */

/* @group Menu-toggle */

.menu-toggle {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 3rem;
	height: 3rem;
}

.menu-toggle:hover {
	cursor: pointer;
}

	@media (min-width: 1200px) {
		
		.menu-toggle {
			display: none;
		}
		
	}

/* @group Hamburger */

.hamburger {
	position: relative;
	width: 1.5rem;
	height: 1.5rem;
}

	.hamburger > * {
		display: block;
		position: absolute;
		inset-block-start: 50%;
		height: .12rem;
		width: 100%;
		background-color: currentColor;
		transition: all .15s ease-in-out 0s;
		transform: translateY(-50%);
	}
	
	.hamburger > *:nth-child(1) {
		transform: translateY(calc(-50% + .4rem));
	}

	.hamburger > *:nth-child(3) {
		transform: translateY(calc(-50% - .4rem));
	}
	
	.hamburger.open > *:nth-child(1),
	.hamburger.open > *:nth-child(3) {
		margin-inline: auto;
	}
	
	.hamburger.open > *:nth-child(1) {
		transform: rotate(45deg);
	}
	
	.hamburger.open > *:nth-child(2) {
		opacity: 0;
	}
	
	.hamburger.open > *:nth-child(3) {
		transform: rotate(-45deg);
	}

/* @end */

/* @end */

/* @end */

/* @group Main */

.main {
	container-type: inline-size;
	margin-block-end: var(--spacing-block-xl);
}

.main:has(> .headarea:only-child) {
	margin-block-end: unset;
}

/* @end */

/* @group Hero */

@property --pos1-x {
	syntax: '<percentage>';
	inherits: false;
	initial-value: 10%;
}
@property --pos1-y {
	syntax: '<percentage>';
	inherits: false;
	initial-value: 70%;
}
@property --pos2-x {
	syntax: '<percentage>';
	inherits: false;
	initial-value: 70%;
}
@property --pos2-y {
	syntax: '<percentage>';
	inherits: false;
	initial-value: 10%;
}

.hero {
	padding-block: 7rem 3rem;
	color: var(--color-white);
	
	--pos1-x: 10%;
	--pos1-y: 70%;
	--pos2-x: 70%;
	--pos2-y: 10%;
	
	background:
		radial-gradient(75% 75% at var(--pos1-x) var(--pos1-y), var(--color-lmu) 0%, transparent 100%),
		radial-gradient(75% 75% at var(--pos2-x) var(--pos2-y), var(--color-tum) 0%, transparent 100%),
		linear-gradient(var(--color-lrz) 0%, var(--color-lrz) 100%);
	animation: rotateGradients 20s linear infinite;
}

@keyframes rotateGradients {
	/* Uhrzeigersinn */
	0% {
		--pos1-x: 10%;
		--pos1-y: 70%;
		--pos2-x: 70%;
		--pos2-y: 10%;
	}
	10% {
		--pos1-x: 25%;
		--pos1-y: 15%;
		--pos2-x: 85%;
		--pos2-y: 65%;
	}
	20% {
		--pos1-x: 85%;
		--pos1-y: 25%;
		--pos2-x: 35%;
		--pos2-y: 85%;
	}
	30% {
		--pos1-x: 75%;
		--pos1-y: 85%;
		--pos2-x: 15%;
		--pos2-y: 35%;
	}
	/* Sanfte Pause und Richtungswechsel */
	45% {
		--pos1-x: 12%;
		--pos1-y: 68%;
		--pos2-x: 68%;
		--pos2-y: 12%;
	}
	50% {
		--pos1-x: 10%;
		--pos1-y: 70%;
		--pos2-x: 70%;
		--pos2-y: 10%;
	}
	55% {
		--pos1-x: 12%;
		--pos1-y: 68%;
		--pos2-x: 68%;
		--pos2-y: 12%;
	}
	/* Gegenuhrzeigersinn */
	70% {
		--pos1-x: 15%;
		--pos1-y: 35%;
		--pos2-x: 75%;
		--pos2-y: 85%;
	}
	80% {
		--pos1-x: 35%;
		--pos1-y: 85%;
		--pos2-x: 85%;
		--pos2-y: 25%;
	}
	90% {
		--pos1-x: 85%;
		--pos1-y: 65%;
		--pos2-x: 25%;
		--pos2-y: 15%;
	}
	/* Sanfte Rückkehr zum Start */
	100% {
		--pos1-x: 10%;
		--pos1-y: 70%;
		--pos2-x: 70%;
		--pos2-y: 10%;
	}
}

.hero:has(+ *) {
	margin-block-end: var(--spacing-block-lg);
}
	
	.hero__text {
		padding-inline: var(--padding-inline);
	}

	.hero__subheading {
		max-width: 25em;
		margin-block-start: .75em;
		font: var(--font-lg);
	}
	
	.hero__illustration {
		overflow-x: hidden;
	}
	
		.hero__animation {
			aspect-ratio: 887/473;
		}

			.hero__illustration svg {
				display: block;
				width: 100%;
				height: auto;
			}
	
	@media (max-width: 49.999999999rem) {
		
			.hero__text {
				margin-block-end: 2em;
			}
			
			.hero__illustration {
				padding-inline-start: 22%;
			}
			
			.hero__animation {
				height: 15rem;
				margin-inline-start: auto;
			}
		
	}
	
	@media (min-width: 50rem) {
		
		.hero {
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			align-items: center;
		}
		
			.hero__text {
				width: 100%;
				max-width: calc(var(--max-width) / 2);
				margin-inline-start: auto;
			}
			
			.hero__illustration {
				padding-inline-start: var(--padding-inline);
			}
			
			.hero__animation {
				margin-inline-end: -10%;
			}

	}

/* @end */

/* @group Headarea */

.headarea {
	padding-block: 7rem var(--spacing-block);
	color: var(--color-primary-dark);
	background-color: var(--color-primary-10);
}

.headarea:has(+ *) {
	margin-block-end: var(--spacing-block-lg);
}

	.headarea .container {
		display: grid;
	}
	
	.headarea .icon {
		display: flex;
		align-items: flex-start;
	}
	
		.headarea .icon img,
		.headarea .hexagon {
			width: 100%;
			height: auto;
		}
		
			.headarea .icon img {
				max-width: 12rem;
			}
	
	.headarea__subheading {
		font: var(--font-lg);
	}
	
	.headarea__subheading:has(+ *) {
		margin-bottom: 1.4rem;
	}
	
	.headarea__subheading + .headarea__date {
		font-weight: 700;
	}
	
	.headarea__authors {
		font: var(--font-lg);
		font-weight: 700;
	}
	
	.headarea__authors:not(:has(+ .headarea__date)) {
		margin-block-end: 1em;
	}
	
	.headarea__date {
		font: var(--font-lg);
	}
	
	.headarea__date:has(+ .headarea__time) {
		margin-block-end: unset;
	}
	
	.headarea__date {
		font: var(--font-lg);
	}
	
	.headarea__time {
		font: var(--font-lg);
	}
	
	.headarea__location {
		font: var(--font-lg);
	}
	
	.headarea__organisation {
		font: var(--font-lg);
		font-weight: bold;
	}
	
	.headarea__organisation:has(+ .headarea__department) {
		margin-block-end: unset;
	}
	
	.headarea__department {
		font: var(--font-lg);
	}
	
	.headarea__organisation-roles {
		font: var(--font-lg);
	}
	
	.headarea__organisation-roles:has(+ *) {
		margin-block-end:	1em;
	}
	
		.headarea .categories > * {
			display: inline-block;
			background-color: unset;
			border: 1px solid currentColor;
		}
		
	@container (max-width: 49.999999999rem) {
		
		.headarea .hexagon,
		.headarea .icon	{
			max-width: 25rem;
			margin-block: .7rem 1.4rem;
		}
		
	}

	@container (min-width: 50rem) {
		
			.headarea .container {
				grid-template-columns: 2fr 1fr;
				grid-template-rows: max-content 1fr;
				column-gap: var(--column-gap);
			}
			
			.headarea .breadcrumb {
				grid-column: span 2;
			}
			
			.headarea__image {
				grid-column: 2;
			}
			
			.headarea__content {
				grid-column: 1;
				grid-row: 2;
			}
			
			.headarea .hexagon {
				max-width: 40vw;
			}
			
			.headarea .icon {
				justify-content: flex-end;
			}
		
	}

/* @group Breadcrumb */

.breadcrumb {
	margin-block-end: .5em;
	font: var(--font-sm);
}

.breadcrumb:has(> *:has(> *:only-child)) {
	display: none;
}

	.breadcrumb__list {
		display: flex;
		flex-wrap: wrap;
	}
		
		.breadcrumb__list > *:last-child {
			display: none;
		}
	
		.breadcrumb__list > * {
			display: inline-block;
		}
	
			.breadcrumb__list > *:after {
				content: "/";
				display: inline-block;
				width: 1em;
				text-align: center;
			}

/* @end */

/* @group Contact */

.contact {
	
}

	.contact > *:has(+ *) {
		margin-bottom: .7em;
	}

/* @end */

/* @group Roles */

.roles {
	display: flex;
	flex-direction: column;
	row-gap: .35em;
}

.roles:has(+ *) {
	margin-bottom: 1.4em;
}

	.roles > * {
		position: relative;
		padding-inline-start: 1.6em;
	}

		.roles > *::before {
		  content: "";
			position: absolute;
			inset-inline-start: 0;
			width: 1.4em;
			vertical-align: bottom;
			-webkit-mask-image: url(../images/hexagon.svg);
		  mask-image: url(../images/hexagon.svg);
		  -webkit-mask-size: cover;
		  mask-size: cover;
			height: 1.4em;
			margin-inline-end: .1em;
		  background-color: currentColor;
			transition: transform .15s ease-in-out 0s;
		}

/* @end */

/* @group Anchors */

.anchors {
	display: flex;
	flex-direction: column;
	row-gap: .5em;
	font-weight: 500;
}

/* @end */

/* @end */

/* @group Categories */

.categories {
	display: flex;
	flex-wrap: wrap;
	gap: .15em;
	font: var(--font-sm);
	font-weight: 500;
}

	.categories > * {
		display: inline-block;
		padding-block: .35em;
		padding-inline: 1.2em;
		color: var(--color-primary);
		background-color: var(--color-primary-10);
	}
	
	.categories a {
		text-decoration: unset;
		transition: all .15s ease-in-out 0s;
	}
	
	.categories a:hover {
		background-color: var(--color-primary-20);
	}
	
	.categories a.active {
		color: var(--color-white);
		background-color: var(--color-primary);
	}

/* @end */

/* @group Container */

.container {
	max-width: var(--max-width);
	padding-inline: var(--padding-inline);
	margin-inline: auto;
}

/* @end */

/* @group Section */

.section {
	container-type: inline-size;
	max-width: var(--max-width);
	scroll-margin: calc(3rem + var(--spacing-block));
	margin-inline: auto;
	padding-inline: var(--padding-inline);
}

.section:has(> .authors),
.section:has(> .contacts)	{
	display: grid;
	column-gap: var(--column-gap-lg);
	row-gap: var(--spacing-block-lg);
}

.section.columns {
	display: grid;
	column-gap: var(--column-gap);
	row-gap: var(--row-gap);
}

	.section .section {
		margin-inline: unset;
		padding-inline: unset;
	}

.section:has(+ *) {
	margin-block-end: var(--spacing-block-lg);
}

.section:has(.categories:only-child) {
	margin-block-end: var(--spacing-block);
}

	.section__heading:not(h2):has(+ *) {
		margin-block-end: 1.5em;
	}
	
	h2.section__heading:has(+ *),
	.section__heading:has(+ .section) {
		margin-block-end: 1.25em;
	}
	
	.section__heading.compact {
		margin-block-end: 2em;
		padding-block-end: .2em;
		border-block-end: 2px solid var(--color-primary);
		font: var(--font);
		font-weight: 500;
	}
	
	.section__heading.compact:has(+ .events) {
		margin-block-end: unset;
	}
	
	@container (min-width: 50rem) {
		
		.section:has(> .authors),
		.section:has(> .contacts)	{
			grid-template-columns: 2fr 1fr;
		}
		
			.section:has(> .authors) .authors,
			.section:has(> .contacts) .contacts {
				grid-column: 2;
			}
			
		.section.columns-2 {
			grid-template-columns: repeat(2, 1fr);
			align-items: center;
		}
		
	}

/* @end */

/* @group Layout */

.layout {
	display: grid;
	row-gap: var(--row-gap);
}

.layout:has(+ *) {
	margin-bottom: var(--spacing-block);
}

.layout--columns-2 {
	column-gap: 5rem;
	row-gap: 4rem;
}

.layout--columns-2:has(+ *) {
	margin-bottom: 4rem;
}

.layout--columns-3 {
	column-gap: 2rem;
	row-gap: 4rem;
}

.layout--columns-3:has(+ *) {
	margin-bottom: 4rem;
}

.layout--align-center {
	text-align: center;
}

.layout--align-end {
	text-align: right;
}

	@media (min-width: 800px) {
		
		.layout {
			grid-template-columns: repeat(6, 1fr);
		}
		
			.layout > .column {
				grid-column: span var(--span);
			}
		
	}

/* @end */

/* @group Blocks */

.blocks:not(:has(.logos:only-child)) {
	max-width: var(--max-width-sm);
	margin-inline: auto;
}

/* @end */

/* @group Text */

.text {
	max-width: var(--max-width-sm);
	margin-inline: auto;
}

/* @end */

/* @group Logos */

.logos {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	column-gap: var(--column-gap-lg);
	row-gap: var(--row-gap);
}

	.logos > * {
		text-align: center;
	}
	
	.logos img {
		width: auto;
		height: 5rem;
	}

/* @end */

/* @group Persons & Person */

.persons {
	container-type: inline-size;
	display: grid;
}

.persons:has(+ .persons) {
	margin-block-end: var(--spacing-block-lg);
}

.persons.detailed {
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 21rem), 1fr));
	column-gap: var(--column-gap-lg);
	row-gap: var(--row-gap-lg);
}

.persons.standard,
.persons.compact {
	column-gap: var(--column-gap);
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
}

.persons.standard {
	row-gap: 1.4rem;
}

.persons.compact {
	row-gap: .5rem;
}

.person {
	container-type: inline-size;
}

	.person__grid {
		display: grid;
		row-gap: 1rem;
	}
	
	.person__portrait {
		max-width: 14rem;
	}
	
	.person__responsibility {
		margin-block-end: .25em;
		font: var(--font-sm);
	}
	
	.person__projectareas {
		display: flex;
		flex-direction: column;
		margin-block-end: .5em;
		font: var(--font-sm);
	}
	
	.person__title {
		color: var(--color-primary);
		font: var(--font-heading);
		margin-block-start: unset;
	}
	
	.person__title:has(+ *) {
		margin-block-end: .25em;
	}
	
	.person__organisation {
		font-weight: 700;
	}
	
	.person__organisation:has(+ *) {
		margin-block-end: .5em;
	}
	
	.person__department:has(+ *) {
		margin-block-end: 1em;
	}
	
	.person__email:has(+ *) {
		margin-block-end: .5em;
	}

	@container (min-width: 30rem) {
			
			.person__grid {
				grid-template-columns: auto 14rem;
				column-gap: 1em;
			}
			
			.person__details {
				grid-row: 1;
			}
			
			.person__portrait {
				grid-column: 2;
			}
		
	}

/* @end */

/* @group Blogposts & Blogpost */

.blogposts {
	display: grid;
	column-gap: var(--column-gap-lg);
	row-gap: var(--row-gap-lg);
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 21rem), 1fr));
}

.blogpost {
	position: relative;
}

	.blogpost__categories {
		margin-block-end: .5em;
		font: var(--font-sm);
	}

	.blogpost__title {
		margin-block-start: unset;
		margin-block-end: .25em;
	}

	.blogpost__authors {
		font-weight: 700;
	}
	
	.blogpost img {
		transition: transform .15s ease-in-out 0s;
	}
	
	.blogpost:hover img {
		transform: scale(1.05);
	}
	
		.blogpost__image img[orientation="portrait"],
		.blogpost__image img[orientation="square"] {
			width: 75%;
		}

	.blogpost__link {
		position: absolute;
		inset: 0;
	}

/* @end */

/* @group Events & Event */

.events {
	container-type: inline-size;
	display: flex;
	flex-direction: column;
}

.event {
	display: grid;
	column-gap: 1.5rem;
	row-gap: 1rem;
	padding-block: var(--spacing-block-sm) var(--spacing-block);
	border-block-start: 2px solid var(--color-primary);
}

.section__heading.compact + .events .event:first-child {
	border-block-start: unset;
}

	.event__date {
		margin-block-end: unset;
		font-weight: 700;
	}

	.event__categories {
		font-weight: 700;
	}

	.event__title {
		margin-block-start: unset;
		margin-block-end: .25em;
		font: var(--font-heading);
	}
	
	.event__image {
		max-width: 12rem;
		align-self: flex-end;
	}
	
	@container (max-width: 29.999999999rem) {
		
		.event {
			
		}
		
			.event > *:nth-child(4) {
				display: flex;
				justify-content: flex-end;
			}
		
	}
	
	@container (min-width: 30rem) and (max-width: 39.999999999rem) {
		
		.event {
			grid-template-columns: auto 12rem;
			grid-template-rows: max-content max-content 1fr;
		}
		
			.event > *:nth-child(2),
			.event > *:nth-child(3) {
				grid-column: 1;
			}
		
			.event > *:nth-child(4) {
				grid-column: 2;
				grid-row: 1 / span 3;
			}
		
	}
	
	
	@container (min-width: 40rem) and (max-width: 59.999999999rem) {
		
		.event {
			grid-template-columns: 8rem auto 12rem;
			grid-template-rows: max-content 1fr;
		}
		
			.event > *:nth-child(2) {
				grid-column: 2;
			}
			
			.event > *:nth-child(3) {
				grid-column: 2;
			}
		
			.event > *:nth-child(4) {
				grid-column: 3;
				grid-row: 1 / span 2;
			}
		
	}
	
	@container (min-width: 60rem) {
		
		.event {
			grid-template-columns: 8rem 4fr 2fr 1fr;
		}
		
	}

/* @end */

/* @group Teasers & Teaser */

.teasers {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 21rem), 1fr));
	column-gap: var(--column-gap-lg);
	row-gap: var(--row-gap-lg);
}

.teaser {
	position: relative;
	padding-block-start: .75rem;
	border-block-start: 2px solid var(--color-primary);
}

	.teaser__title {
		display: flex;
		column-gap: .5em;
		margin-block-end: 1rem;
	}
	
		.teaser__title::after {
			content: "";
			flex: 0 0 1em;
			-webkit-mask-image: url(../images/east.svg);
			mask-image: url(../images/east.svg);
		  -webkit-mask-size: cover;
		  mask-size: cover;
			margin-inline-start: auto;
			height: 1em;
		  background-color: currentColor;
			transition: transform .15s ease-in-out 0s;
		}
		
		.teaser:hover .teaser__title::after {
			transform: translateX(50%);
		}
		
	.teaser__link {
		position: absolute;
		inset: 0;
	}

/* @end */

/* @group Projectareas & Projectarea */

.projectareas {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
	column-gap: var(--column-gap-lg);
	row-gap: var(--row-gap);
}

.projectarea {
	position: relative;
}

	.projectarea__icon {
		width: 9rem;
		margin-block-end: 1rem;
		transition: transform .15s ease-in-out 0s;
	}
	
		@media (min-width: 40rem) {
			
				.projectarea__icon img {
					margin-inline-start: -1rem;
				}
			
		}
		
	.projectarea:hover .projectarea__icon {
		transform: scale(1.05);
	}

	.projectarea__title {
		display: none;
	}
	
	.projectarea__link {
		position: absolute;
		inset: 0;
	}

/* @end */

/* @group Projects & Project */

.projects {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 21rem), 1fr));
	column-gap: var(--column-gap-lg);
	row-gap: var(--row-gap);
}

.project {
	position: relative;
}

	.project__icon {
		width: 9rem;
		margin-block-end: 1rem;
		transition: transform .15s ease-in-out 0s;
	}
	
		@media (min-width: 40rem) {
			
				.project__icon img {
					margin-inline-start: -1rem;
				}
			
		}
		
	.project:hover .project__icon {
		transform: scale(1.05);
	}

	.project__title {
		display: none;
	}
	
	.project__subheading {
		margin-block-end: unset;
	}
	
	.project__link {
		position: absolute;
		inset: 0;
	}

/* @end */

/* @group Publications & Publication */

.publications {
	display: flex;
	flex-direction: column;
	row-gap: var(--row-gap);
}

.publication {
	
}

	.publication > * {
		margin-block: unset;
	}

	.publication__authors {
		margin-block-end: .15em;
	}
	
	.publication__title:has(+ *) {
		margin-block-end: .25em;
	}
	
	.publication__title:not(:has(a)) {
		color: var(--color-base);
	}
	
	.publication__journal {
		position: relative;
		padding-inline-start: 1.6em;
	}
	
	.publication__journal:has(+ *) {
		margin-block-end: .35em;
	}
	
		.publication__journal::before {
			content: "";
			position: absolute;
			inset-block-start: 0;
			inset-inline-start: 0;
			width: 1.4em;
			height: 1.4em;
			-webkit-mask-image: url(../images/menu-book.svg);
		  mask-image: url(../images/menu-book.svg);
		  -webkit-mask-size: cover;
		  mask-size: cover;
		  background-color: currentColor;
		}
	
	.publication__link {
		color: var(--color-primary);
		font-weight: 450;
	}
	
		.publication__link a {
			overflow-wrap: break-word;
			word-break: break-word;
		}
	
	.publication__projects {
		margin-block-start: .35em;
	}

/* @end */

/* @group Footer */

.footer {
	padding-block: clamp(2rem, 6vw, 3rem);
	color: var(--color-white);
	background-color: var(--color-primary);
}

/* @group Colophon */

.colophon {
	display: grid;
	column-gap: var(--column-gap);
	max-width: var(--max-width);
	margin-block-end: clamp(4rem, 10vw, 5rem);
	margin-inline: auto;
	padding-inline: var(--padding-inline);
}

		.colophon__logo a {
			display: block;
			margin-block: .6em 1em;
		}

		.colophon__logo svg {
			width: auto;
			height: 3em;
		}
	
	.colophon__subheading {
		max-width: 25em;
		margin-block-end: 2.5em;
	}
	
		.colophon__subheading svg {
			display: block;
			margin-block-start: 1.4em;
		}
		
	.colophon__text {
		margin-block-end: 2.5em;
	}
	
	@media (min-width: 800px) and (max-width: 1199px) {
		
		.colophon {
			grid-template-columns: repeat(2, 1fr);
		}
		
			.colophon__logo {
				grid-column: span 2;
			}
			
			.colophon__text {
				grid-column: 2;
			}
			
			.colophon__email {
				grid-column: 2;
			}
		
	}

	@media (min-width: 1200px) {
		
		.colophon {
			grid-template-columns: repeat(4, 1fr);
		}
		
			.colophon__logo {
				grid-column: span 4;
			}
			
			.colophon__subheading {
				grid-column: span 2;
			}
			
			.colophon__email {
				grid-column: 3 / span 2;
			}
		
	}

/* @end */

/* @group Footer-menu */

.footer-menu {
	display: flex;
	flex-wrap: wrap;
	column-gap: 1.5em;
	row-gap: 1em;
	max-width: var(--max-width);
	margin-inline: auto;
	padding-inline: var(--padding-inline);
	font-weight: 500;
	letter-spacing: .02em;
}

/* @end */

/* @end */

/* @group Scrollup */

.scrollup {
	position: fixed;
	top: 100dvh;
	right: 0;
	display: flex;
	justify-content: center;
	width: 2.4rem;
	height: 2.4rem;
	padding: .6em;
	color: var(--color-white);
	background-color: var(--color-primary);
	transition: all .15s ease-in-out 0s;
}

.scrollup:hover {
	cursor: pointer;
}

.scrollup.fixed {
	top: calc(100dvh - env(safe-area-inset-bottom, 0.5vh));
	transform: translateY(-100%);
}

	.scrollup > svg {
		width: 100%;
		height: auto;
	}

/* @end */