:root {
	--color-1: #e0d7cb;
	--col1-width: 40%;
	--col2-width: 60%;
	--normal-weight: 400;
	--fat-weight: 930;
}

:root body.Macintosh {
	--fat-weight: 900;
}


@font-face {
	font-family: 'Gliri-Web';
	src: url('fonts/Gliri-VF.woff2?v=164') format('truetype-variations');
	font-style: normal;
	font-weight: 100 950;
}

html {
	height: 100%;
}

body {
	position: relative;
	display:block;
	padding: 25vw 4vw 4vw 4vw;
	font-size: 16px;
	font-family: 'Gliri-Web', sans-serif;
	font-weight: var(--normal-weight);
	letter-spacing: 0.015em;
	line-height: 1.4em;
	min-height: 100%;
	overflow-x:hidden;
	overflow-y: auto;
	margin: 0 auto;
	max-width: calc(900px + 8vw);
}

main {
	
}

a {
	color: #000;
	text-decoration: underline;
	text-underline-offset: 0.2em;
	text-decoration-thickness: 0.13em;
	text-decoration-color:  var(--color-1);
}

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

a.tel {
	white-space:nowrap;
}

body.Chrome a {
	text-underline-offset: 0.05em;
}


/* header */

.pageHeader {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 4;
}

.logoNavWrapper {
	position: absolute;
	width: 100%;
	height: 12vw;
	background-color: white;
	z-index: 3;
}


.pageHeader h1 {
	position: absolute;
	top: 3vw;
	left: 4vw;
	width: 56%;
}

.pageHeader h1 img {
	display:block;
	width: 100%;
}

.pageHeader .menuButton {
	font-weight: 910;
	font-size: 3.9vw;
	text-transform: uppercase;
	position: absolute;
	top: 1.5vw;
	line-height: 1;
	right: 2vw;
	opacity: 0;
	padding: 2vw;
	pointer-events:none;
}

.pageHeader .menuButton.active {
	opacity: 1;
	pointer-events: auto;
}


.pageHeader .menuCloser {
	font-size: 11.4vw;
	position: absolute;
	right: 1vw;
	top: -1.5vw;
	padding: 2vw;
	font-weight: 180;
	line-height: 0.8;
	opacity: 0;
	pointer-events:none;
}

.pageHeader .menuCloser.active {
	opacity: 1;
	pointer-events:auto;
}


/* overlayButton */

.overlayButton {
	position: absolute;
	top: 16vw;
	right: 8vw;
	width: 27vw;
	height: auto;
	z-index: 2;
}

.overlayButton img {
	display:block;
	width: 100%;
	height: auto;
	transform: scale(1) rotate(-10deg);
	transition: transform 0.2s ease;
}

.overlayButton img:hover {
	transform: scale(1.1) rotate(-15deg);
}


/* projectEntries */

.projectEntries>h2 {
	display:none;
}

.projectEntries figure {
	position: relative;
	display:flex;
	flex-direction: column;
	margin-bottom: 40vw;
}

.projectEntries figure.filtered {
	display:none;
}

.projectEntries figure img,
.projectEntries figure video {
	width: auto;
	max-height: 100vw;
	max-width: calc(100% + 4vw);
	margin-left: -2vw;
	order: 1;
	align-self:flex-start;
}

.projectEntries figcaption {
	position: relative;
	order: 2;
	text-align: right;
	margin-top: 0.8em;
}

.homeEntries figure {
	margin-bottom: 1.4em;
}

.homeEntries figure img,
.homeEntries figure video {
	max-width: calc(100% + 8vw);
	margin-left: -4vw;
}

.projectEntries a.homeLink figcaption {
	margin-bottom: 0.7em;
	margin-top: 0;
	display:block;
	text-align: left;
}


/* page */

.pageSection img {
	display: block;
	width: auto;
	max-height: 100vw;
	max-width: calc(100% + 4vw);
	margin-left: -2vw;
	margin-bottom: 1.5em;
}

.pageSection .col-1 {
	margin-bottom: 0.7em;
	font-weight: var(--fat-weight);
	text-transform: uppercase;
}

.pageSection .col-1 h2 {
	margin: 0;
}


/* kontakt */

.kontaktSection {
	text-transform: uppercase;
}

.kontaktSection>h2 {
	display:none;
}

.kontaktSection .row {
	margin-bottom: 1.5em;
}

.kontaktSection .col-1 {
	font-weight: var(--normal-weight);
	margin-bottom: 0;
}

.kontaktSection .col-2 {
	font-weight: var(--fat-weight);
}

.teamEntries {
	margin-top: 3em;
}

.teamEntries .col-1 {
	text-transform: uppercase;
	margin-bottom: 0.7em;
}

.teamEntries .col-2 {
	display:grid;
	grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 1fr;
	grid-gap: 4vw;
	width: calc(100% + 4vw);
	margin-left: -2vw;
}

.teamEntries .col-1 h2 {
	margin: 0;
}

.teamEntries .col-2 figure {
	display:flex;
	flex-direction: column;
}

.teamEntries .col-2 figure figcaption {
	display:block;
	order: 2;
	margin-top: 0.4em;
	margin-bottom: 1em;
}

.teamEntries .col-2 figure img {
	display:block;
	width: 100%;
	height: auto;
	order: 1;
}


/* stellen */

.stelle {
	margin-bottom: 4em;
}

.stelle h2 {
	font-weight: var(--fat-weight);
	text-transform: uppercase;
	margin-bottom: 0;
}


/* footer */

.pageFooter {
	position: relative;
	text-align: center;
	margin : 42vw auto 1vw auto;
	font-weight: var(--fat-weight);
	text-transform: uppercase;
}



/* tablet */
@media only screen and (min-width: 700px) {
	
	body {
		padding-top: 0;
		overflow: visible;
	}
	
	
	/* header */

	.pageHeader {
		position: relative;
		z-index: 1;
		/*
		margin-bottom: 3em;
		min-height: 18em;*/
		width: 100%;
	}
	
	.headerWrapper {
		position: absolute;
		top: 0;
		padding-top: 5em;
		/*padding-bottom: 2vw;*/
		width: 100%;
		max-width: 900px;
		background-color: white;
		transition: transform 0.5s ease;
		/*transform: translate(0,0);
		*/
	}

	.pageHeader.floating .headerWrapper {
		position: fixed;
		transform: translate(0,0) !important;
	}
	/*
	.pageHeader.top .headerWrapper {
		position: relative;
	}
	
	.pageHeader.off .headerWrapper {
		transform: translate(0,-30em);
	}
	*/
	.logoNavWrapper {
		position: relative;
		height: auto;
		top: 0;
		left: 0;
		padding-bottom: 2.5em;
	}

	.pageHeader h1 {
		position: relative;
		top: 0;
		left: 0;
		width: 63%;
	}

	.pageHeader .menuButton,
	.pageHeader .menuCloser {
		display:none;
	}
	

	/* overlayButton */

	.overlayButton {
		top: 5vw;
		right: 3.5vw;
		width: 20%;
	}
	
	
	/* projectEntries */

	.projectEntries figure {
		display:flex;
		flex-direction: row;
		margin-bottom: 0.5em;
	}

	.projectEntries figure img,
	.projectEntries figure video {
		width: auto;
		max-height: 450px;
		max-width: var(--col2-width);
		margin-left: 0;
		order: 2;
		padding-top: 0.3em;
	}

	.projectEntries figcaption {
		width: var(--col1-width);
		text-align: right;
		order: 1;
		padding-right: 2%;
		margin-top: 0;
	}
	
	.homeEntries figure {
		display:block;
	}

	.homeEntries figure img,
	.homeEntries figure video {
		max-width: var(--col2-width);
		margin-left: 0;
	}
	
	.homeEntries figure a {
		display:flex;
		flex-direction: row;
	}


	.projectEntries a.homeLink figcaption {
		text-align: right;
	}

	
	/* page */
	
	.columns .row {
		display:flex;
		flex-direction: row;
	}
	
	.columns .col-1 {
		width: var(--col1-width);
		text-align: right;
		padding-right: 2%;
		font-weight: var(--fat-weight);
	}
	
	.columns .col-2 {
		width: var(--col2-width);
		margin-left: 0;
	}
	
	.pageSection {
		margin-bottom: 1.5em;
	}
	
	.pageSection .col-2 img {
		width: 100%;
		margin-left: 0;
		margin-top: 0.3em;
	}
	
	
	/* kontakt */
	
	.teamEntries {
		margin-top: 1.5em;
	}
	
	.teamEntries .col-2 {
		padding-top: 0.3em;
		grid-gap: 1em;
	}
	
	.teamEntries .col-2 figure img {
		width: 85%;
	}

	
	/* stellen */

	.stellenContainer {
		margin-top: 3em;
	}

	.stelle {
		margin-bottom: 6em;
	}


	/* footer */

	.pageFooter {
		position: relative;
		text-align: left;
		margin : 10em auto 1em var(--col1-width);
		font-weight: var(--fat-weight);
		text-transform: uppercase;
	}

	
}



/* desktop */
@media only screen and (min-width: 1000px) {
	
	.projectEntries figure img,
	.projectEntries figure video {
		max-height: 550px;
	}
	
	
	/* overlayButton */

	.overlayButton {
		right: 1vw;
		width: 200px;
	}

}


/* desktop */
@media only screen and (min-width: 1200px) {
	
	/* overlayButton */

	.overlayButton {
		right: -4vw;
	}

}