@font-face {
	font-family: "Cordia-New";
	src: url("../fonts/CordiaNew.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: block
}

@font-face {
	font-family: "Cordia-New";
	src: url("../fonts/CordiaNew-Bold.woff2") format("woff2");
	font-weight: 600;
	font-style: normal;
	font-display: block
}

:root {
	
	--fontFamily: "Cordia-New";

	--colorBlack: #000000;
	--colorGreyLight: #D9D9D9;
	--colorGreyDark: #989898;
	--colorWhite: #FFFFFF;
	
	--fontSize12: 0.8rem;
	--fontSize14: 1rem;
	--fontSize16: 1.2rem;
	--fontSize18: 1.4rem;
	--fontSize20: 1.6rem;
	--fontSize22: 1.8rem;
	--fontSize24: 2rem;
	--fontSize26: 2.2rem;
	--fontSize28: 2.4rem;
	--fontSize30: 2.6rem;
	--fontSize32: 2.8rem;
	--fontSize34: 3rem;
	--fontSize36: 3.2rem;
	--fontSize38: 3.4rem;
	--fontSize40: 3.6rem;
	--fontSize42: 3.8rem;
	--fontSize44: 4rem;
	--fontSize46: 4.2rem;
	--fontSize48: 4.4rem;
	--fontSize50: 4.6rem;
	--fontSize52: 4.8rem;
	--fontSize54: 5rem;
	--fontSize56: 5.2rem;
	--fontSize58: 5.4rem;
	--fontSize60: 5.6rem;
	--fontSize62: 5.8rem;
	--fontSize64: 6rem;
	--fontSize66: 6.2rem;
	--fontSize68: 6.4rem;
	--fontSize70: 6.6rem;
	--fontSize72: 6.8rem;
	--fontSize74: 7rem;
	--fontSize76: 7.2rem;
	--fontSize78: 7.4rem;
	--fontSize80: 7.6rem;
	
	--sideSpacing: 2rem;
	
	--headerHeight: 3rem;

	@media (max-width: 767px) {
		--sideSpacing: 1rem;
		--headerHeight: 3.25rem;
	}
}


html, body {
	scrollbar-gutter: stable;
}

html {
	font-size: clamp(
		16px,
		calc(16px + 4 * ((100vw - 767px) / 693)),
		20px
	);

	@media (max-width: 767px) {
		font-size: 16px;
	}
}

body.frontend {
	margin: 0;
	padding: 0;
	text-align: left;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-size: var(--fontSize20);
	line-height: 1;
	-webkit-text-size-adjust: 100%;
	font-family: "Cordia-New";
	color: var(--colorBlack);
	background-color: #f2f2f2;
	
	input[type=text],
	input[type=email],
	input[type=tel],
	input[type=url],
	input[type=search],
	input[type=submit],
	button {
	  appearance: none;
	  -moz-appearance: none;
	  -webkit-appearance: none;
	  border-radius: 0;
	  -moz-border-radius: 0;
	  -webkit-border-radius: 0;
	}
	
	*, *:before, *:after {
		-moz-box-sizing: border-box; 
		-webkit-box-sizing: border-box; 
		box-sizing: border-box;
	}
	
	*:focus:not(:focus-visible) {
	  outline: 0;
	}
	
	img {
		border: 0;
	}

	@media (max-width: 767px) {
		padding-top: var(--headerHeight);
		background-color: var(--colorWhite);
	}
}

body.frontend header,
body.frontend footer,
body.frontend main {
	background-color: var(--colorWhite);
	max-width: 1380px;
	margin-inline: auto;
	width: calc(100% - var(--sideSpacing) - var(--sideSpacing));

	@media (max-width: 767px) {
		width: 100%;
		max-width: none;
	}
}

body.frontend main {
	min-height: calc(100svh - var(--headerHeight) - var(--headerHeight) - 1px - var(--sideSpacing) - var(--sideSpacing));	
	display: flex;
	flex-direction: column;
	padding-block: var(--sideSpacing);

	@media (max-width: 767px) {
		min-height: calc(100svh - var(--headerHeight) - var(--headerHeight) - 1px - var(--sideSpacing) - var(--sideSpacing));	
		padding-block: var(--sideSpacing);
	}
}

body.frontend .innerwrapper {
	width: calc(100% - var(--sideSpacing) - var(--sideSpacing));
	margin: 0 auto;

	@media (max-width: 767px) {
		width: calc(100% - var(--sideSpacing) - var(--sideSpacing));
	}
	
	&.small {
		width: calc(100% - var(--sideSpacing) - var(--sideSpacing) - 8rem);
		
		@media (max-width: 767px) {
			width: calc(100% - var(--sideSpacing) - var(--sideSpacing));
		}
	}
}

body.frontend header {
	margin-top: var(--sideSpacing);
	font-size: var(--fontSize20);

	@media (max-width: 767px) {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 50;
		margin-top: 0;
		font-size: var(--fontSize22);
		box-shadow: 0 1px 0 var(--colorGreyLight);
	}
	
	.innerwrapper {
		height: var(--headerHeight);
		display: flex;
		justify-content: center;
		border-bottom: 1px solid var(--colorGreyLight);

		@media (max-width: 767px) {
			position: relative;
			width: 100%;
			height: var(--headerHeight);
			padding-inline: var(--sideSpacing);
			justify-content: space-between;
			align-items: center;
			border-bottom: 0;
		}
		
		nav {
			display: flex;
			position: relative;

			@media (max-width: 767px) {
				position: absolute;
				top: 100%;
				left: 0;
				right: 0;
				width: 100%;
				display: none;
				background-color: var(--colorWhite);
				border-top: 1px solid var(--colorGreyLight);
				border-bottom: 1px solid var(--colorGreyLight);
			}
			
			ul {
				list-style-type: none;
				margin: 0;
				padding: 0;
				display: flex;
				justify-content: center;

				@media (max-width: 767px) {
					width: 100%;
					display: flex;
					flex-direction: column;
					align-items: stretch;
					padding-block: 0.45rem;
				}
				
				li {
					list-style-type: none;
					margin: 0;
					padding: 0 1em;
					display: flex;
					flex-direction: column;
					justify-content: center;
					color: var(--colorGreyDark);

					@media (max-width: 767px) {
						width: 100%;
						padding: 0;
						display: block;

						&:first-child {
							display: none;
						}
					}
					
					a {
						color: inherit;
						text-decoration: none;
						display: block;

						@media (max-width: 767px) {
							padding: 0.75rem var(--sideSpacing);
							font-size: var(--fontSize22);
							line-height: 1;
						}
					}
					
					&.current-menu-item {
						color: var(--colorBlack);

						@media (max-width: 767px) {
							a {
								color: var(--colorBlack);
								font-weight: 600;
							}
						}
					}
				}
			}
			
			.nav__indicator {
				position: absolute;
				left: 0;
				bottom: 0;
				width: 0;
				height: 0.2rem;
				background-color: var(--colorGreyLight);
				pointer-events: none;
				transform-origin: left center;

				@media (max-width: 767px) {
					display: none;
				}
			}
		}
	}

	&.is-nav-open {
		.mobile__nav-toggle {
			span {
				@media (max-width: 767px) {
					&:nth-child(1) {
						transform: translateY(0.32rem) rotate(45deg);
					}

					&:nth-child(2) {
						opacity: 0;
					}

					&:nth-child(3) {
						transform: translateY(-0.32rem) rotate(-45deg);
					}
				}
			}
		}
	}
}

.mobile__logo,
.mobile__nav-toggle {
	display: none;
}

.mobile__logo {
	@media (max-width: 767px) {
		display: block;
		color: var(--colorBlack);
		text-decoration: none;
		line-height: 1;
	}
}

.mobile__nav-toggle {
	@media (max-width: 767px) {
		width: 2.25rem;
		height: 2.25rem;
		padding: 0.55rem 0.35rem;
		display: flex;
		flex-direction: column;
		justify-content: center;
		gap: 0.26rem;
		border: 0;
		background: transparent;
		cursor: pointer;
	}
	
	span {
		@media (max-width: 767px) {
			display: block;
			width: 100%;
			height: 1px;
			background-color: var(--colorBlack);
			transition: transform 220ms ease, opacity 220ms ease;
		}
	}
}

body.frontend {
	main {
		flex: 1;
	}
}

		
body.frontend.single-projekt footer {
	@media (max-width: 767px) {
		margin-bottom: calc(var(--sideSpacing) + 4rem) !important;
	}
}

body.frontend footer {
	margin-top: auto;
	font-size: var(--fontSize16);
	margin-bottom: var(--sideSpacing);

	@media (max-width: 767px) {
		margin-bottom: 0;

	}
	
	.innerwrapper {
		height: var(--headerHeight);
		display: flex;
		justify-content: center;

		@media (max-width: 767px) {
			height: auto;
			padding-block: 0.75rem;
		}
		
		ul {
			list-style-type: none;
			margin: 0;
			padding: 0;
			display: flex;
			justify-content: center;

			@media (max-width: 767px) {
				flex-wrap: wrap;
				gap: 0.25rem 0;
			}
			
			li {
				list-style-type: none;
				margin: 0;
				padding: 0 1em;
				display: flex;
				flex-direction: column;
				justify-content: center;
				color: var(--colorGreyDark);

				@media (max-width: 767px) {
					padding-inline: 0.5em;
				}
				
				a {
					color: inherit;
					text-decoration: none;
					display: block;
				}
				
				&.current {
					color: var(--colorBlack);
				}
			}
		}
	}
}

.section__start {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	
	
	
	.innerwrapper {
		display: flex;
		justify-content: center;
		
		@media (max-width: 767px) {
			flex: 1;	
		}
		
		.image {
			font-size: 0;
			line-height: 0;
			width: 100%;
			max-width: 46rem;
			
			@media (max-width: 767px) {
				display: flex;
				flex-direction: column;
				
				a {
					flex: 1;
					display: flex;
				}	
			}
			
			img {
				width: 100%;
				height: auto;
				
				@media (max-width: 767px) {
					object-fit: cover;	
				}
				
				&.only__desktop {
					display: block !important;
					
					@media (max-width: 767px) {
						display: none !important;	
					}
				}
				
				&.only__mobile {
					display: none !important;
					
					@media (max-width: 767px) {
						display: block !important;	
					}
				}
			}
		}
	}
}

.section__project {
	.innerwrapper {
		display: grid;
		display: grid;
		grid-template-columns: 14rem 1fr;
		gap: 0 4rem;
		align-items: start;

		@media (max-width: 767px) {
			display: block;
		}
		
		.project__sidebar {
			//background-color: lightblue;
			position: sticky;
			margin-bottom: auto;

			@media (max-width: 767px) {
				position: fixed;
				left: calc(var(--sideSpacing) * 2);
				right: calc(var(--sideSpacing) * 2);
				bottom: var(--sideSpacing);
				z-index: 40;
				margin-bottom: 0;
				
				
				
			}
			
			> ul {
				list-style-type: none;
				margin: 0;
				padding: 0;
				display: flex;
				flex-direction: column;
				font-size: var(--fontSize20);

				@media (max-width: 767px) {
					display: none;
					max-height: min(70svh, 28rem);
					overflow-y: auto;
					padding: 0.45rem var(--sideSpacing) 0.75rem;
					border-top: 0;
					-webkit-overflow-scrolling: touch;
					background-color: var(--colorWhite);
					border-radius: 0.5rem !important;
					box-shadow: 0 0.2rem 0.5rem rgba(0, 0, 0, 0.7);
					margin-top: 0.5rem;
				}
				
				> li {
					list-style-type: none;
					margin: 0;
					cursor: pointer;
					/*border-bottom: 1px solid yellow;*/
					
					&.current {
						> button {
							font-weight: 600;
							
							&:after {
								transform: rotate(90deg);
							}
						}
					}
					
					> button {
						padding: 0.15em 0 0.1em 0;
						display: grid;
						grid-template-columns: 1fr 0.3em;
						line-height: 1.2;
						border: 0;
						background: transparent;
						font-size: var(--fontSize20);
						font-family: "Cordia-New";
						width: 100%;
						text-align: left;
						cursor: pointer;
						color: var(--colorBlack) !important;
						
						&:after {
							content: '';
							background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='6' height='11' fill='none' viewBox='0 0 6 11'><path stroke='%23bcbcbc' stroke-linejoin='round' d='m.354.354 5 5-5 5'/></svg>");	
							background-repeat: no-repeat;
							background-size: 98% auto;
							width: 100%;
							aspect-ratio: 6 / 11;
							margin-top: 0.3em;
							transition: transform 250ms ease;
							
						}
					}
					
					> ul {
						list-style-type: none;
						margin: 0;
						padding: 0;
						display: none;
						font-size: var(--fontSize18);
						padding-left: 0;
						line-height: 1;
						padding-bottom: 0.5em;
						
						> li {
							list-style-type: none;
							margin: 0;
							padding: 0;
							color: var(--colorGreyDark);
							
							&.current {
								color: var(--colorBlack);
								font-weight: 600;
							}
							
							a {
								color: inherit;
								text-decoration: none;
								display: block;
								
								@media (hover: hover) {
									&:hover {
										color: var(--colorBlack);
									}	
								}
							}
						}
					}
					
					
				}
			}

			&.is-open {
				.project__sidebar-toggle {
					@media (max-width: 767px) {
						&:after {
							transform: rotate(-90deg);
						}
					}
				}
			}
		}
		
		.project__detail {
			display: flex;
			flex-direction: column;
			gap: 2rem 0;

			@media (max-width: 767px) {
				gap: 1.25rem 0;
			}

			.project__header {
				display: flex;
				flex-direction: column;
				gap: 1rem 0;

				@media (max-width: 767px) {
					display: block;
				}
				
				h1 {
					font-size: var(--fontSize34);
					margin: 0;
					font-weight: 600;
					line-height: 0.7;

					@media (max-width: 767px) {
						font-size: var(--fontSize30);
						line-height: 0.85;
					}
				}
				
				.description {
					text-align: left;
					line-height: 0.9;
					font-size: var(--fontSize18);

					@media (max-width: 767px) {
						margin-top: 0.8rem;
						text-align: left;
					}
					
					p {
						&:first-child {
							margin-top: 0;
						}
						
						&:last-child {
							margin-bottom: 0;
						}
					}
				}
				
			}
			
			.grid {
				--spacing: 1.5rem;
				display: grid;
				grid-template-columns: repeat(2,1fr);
				gap: var(--spacing);

				@media (max-width: 767px) {
					--spacing: 1rem;
					display: flex;
					flex-direction: column;
				}
				
				.grid-col {
					width: 100%;
					gap: var(--spacing);
					display: flex;
					flex-direction: column;

					@media (max-width: 767px) {
						gap: var(--spacing);
					}
				}
				
				.grid-item {
					
					display: block;
					
					> a {
						font-size: 0;
						line-height: 0;
						display: block;
					}
					
					.description {
						font-size: var(--fontSize16);
						margin-top: 0.3em;
						line-height: 0.9;
					}
					
					img {
						width: 100%;
						height: auto;
					}
				}
			}
		}
	}
}

.project-lightbox-is-open {
	overflow: hidden;
}

.project-lightbox {
	position: fixed;
	inset: 0;
	z-index: 100;
	display: grid;
	grid-template-columns: 4rem 1fr 4rem;
	align-items: center;
	gap: 1rem;
	padding: var(--sideSpacing);
	background-color: rgba(0, 0, 0, 0.88);
	opacity: 0;
	pointer-events: none;
	transition: opacity 180ms ease;

	@media (max-width: 767px) {
		grid-template-columns: 3rem 1fr 3rem;
		gap: 0.4rem;
		padding: 1rem;
	}

	&.is-open {
		opacity: 1;
		pointer-events: auto;
	}

	button {
		border: 0;
		background-color: transparent;
		color: var(--colorWhite);
		font-family: "Cordia-New";
		cursor: pointer;

		svg {
			display: block;
		}
	}
}

.project-lightbox__close {
	position: absolute;
	top: 0.75rem;
	right: 0.9rem;
	z-index: 2;
	width: 2rem;
	height: 2rem;
	padding: 0;
	line-height: 1;
}

.project-lightbox__figure {
	grid-column: 2;
	margin: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-width: 0;
	max-height: calc(100svh - var(--sideSpacing) - var(--sideSpacing));

	img {
		display: block;
		width: auto;
		max-width: 100%;
		max-height: calc(100svh - 6rem);
		object-fit: contain;
	}

	figcaption {
		margin-top: 0.6rem;
		color: var(--colorWhite);
		font-size: var(--fontSize18);
		line-height: 1;
		text-align: center;
	}
}

.project-lightbox__nav {
	width: 100%;
	height: 4rem;
	padding: 0;
	line-height: 1;
	opacity: 0.8;
	transition: opacity 160ms ease;

	@media (hover: hover) {
		&:hover {
			opacity: 1;
		}
	}

	@media (max-width: 767px) {
		height: 3rem;
	}
}

.project-lightbox__nav--prev {
	grid-column: 1;
}

.project-lightbox__nav--next {
	grid-column: 3;
}

.project__sidebar-toggle {
	display: none;

	@media (max-width: 767px) {
		width: 100%;
		display: grid;
		grid-template-columns: 1fr 0.5rem;
		gap: 1rem;
		align-items: center;
		border: 0;
		background-color: var(--colorWhite);
		padding: 0.75rem var(--sideSpacing);
		font-family: "Cordia-New";
		font-size: var(--fontSize20);
		line-height: 1;
		text-align: left;
		cursor: pointer;
		color: var(--colorBlack);
		-webkit-appearance: none;
		border-radius: 0.5rem !important;
		font-weight: 700;
		box-shadow: 0 0.2rem 0.5rem rgba(0, 0, 0, 0.7);
	}
	
	&:after {
		@media (max-width: 767px) {
			content: '';
			width: 0.45rem;
			aspect-ratio: 6 / 11;
			background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='6' height='11' fill='none' viewBox='0 0 6 11'><path stroke='%23000000' stroke-linejoin='round' d='m.354.354 5 5-5 5'/></svg>");
			background-repeat: no-repeat;
			background-size: 100% auto;
			transform: rotate(90deg);
			transition: transform 220ms ease;
		}
	}
}

.section__two-column-text {
	.innerwrapper {
		display: grid;
		grid-template-columns: repeat(2,1fr);
		gap: 0 2rem;
		padding-top: 1rem;
		
		@media (max-width: 767px) {
			display: flex;
			flex-direction: column;
			gap: 2rem 0;	
		}
		
		.column {
			font-size: var(--fontSize20);
			line-height: 1;
			
			&:first-child {
				text-align: right;
				
				@media (max-width: 767px) {
					text-align: left;	
				}
			}
			
			p {
				&:first-child {
					margin-top: 0;
				}
				
				&:last-child {
					margin-bottom: 0;
				}
			}
			
			&.smaller {
				font-size: var(--fontSize16);
				line-height: 0.85;
				margin-top: 0.1em;
				
				@media (max-width: 767px) {
					margin-top: 0;
				}
			}
		}
	}
}

.section__default-text {
	.innerwrapper {
		font-size: var(--fontSize18);
		line-height: 1;
		
		a {
			color: inherit;
		}
		
		p {
			&:first-child {
				margin-top: 0;
			}
			
			&:last-child {
				margin-bottom: 0;
			}
		}

	}
}

.section__spacer-line {
	padding-block: 3rem;
	
	
	.innerwrapper {
		border-top: 1px solid var(--colorGreyLight);
		height: 1px;
	}
}

.section__persons {
	.innerwrapper {
		
		.person__wrapper {
			display: grid;
			grid-template-columns: repeat(2,1fr);
			gap: 0 2rem;
			width: calc(100% - 10rem);
			margin-inline: auto;
			
			@media (max-width: 767px) {
				display: flex;
				flex-direction: column;	
				width: 100%;
				gap: 4rem 0;
			}
			
			.single__person {
				display: flex;
				flex-direction: column;
				gap: 2rem;
				
				@media (max-width: 767px) {
					gap: 1rem;	
				}
				
				.image {
					font-size: 0;
					line-height: 0;
					
					img {
						width: 100%;
						height: auto;
						aspect-ratio: 775/568;
						object-fit: cover;
					}
				}
				
				.content {
					h2 {
						margin: 0;
						font-size: var(--fontSize24);
						line-height: 0.9;
						margin-bottom: 0.2em;
					}
					
					table {
						font-size: var(--fontSize18);
						line-height: 0.9;
						border-spacing: 0;
						border-collapse: separate;
						
						tr {
							td {
								padding: 0;
								vertical-align: top;
								
								&:first-child {
									width: 4em;
								}
							}
						}
					}
				}
			}
		}
	}
}