@import "reset.css";

:root {
	--main-color: #666666;
	--dark-grey: #333333;
	--grey: #999999;
	--light-grey: #cccccc;
	/*--pine: #cccc99;*/
	--pine: #aaaa61;
	--light-pine: #fafaf5;
}

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

/* @group TYPE */

@font-face {
	font-family: 'Madera';
	src: url('../fonts/36F19A_0_0.eot');
	src: 
		url('../fonts/36F19A_0_0.woff2') format('woff2'),
		url('../fonts/36F19A_0_0.woff') format('woff'),
		url('../fonts/36F19A_0_0.ttf') format('truetype');
	font-weight: normal;
}

html, body {
	font-family: 'Madera', Helvetica, Arial, sans-serif;
	font-size: 20px;
	font-weight: normal;
	line-height: 1.5em;
}

	.footer__links,
	.footer__credits {
		font-size: 15px;
		line-height: 1.5em;
	}

	@media (max-width: 699px) {
		
		.main,
		.footer {
			font-size: 17px;
			line-height: 1.5em;
		}
		
		.footer__links,
		.footer__credits {
			font-size: 15px;
			line-height: 1.5em;
		}
		
	}
	
.footer-menu {
	font-size: 1rem;
	line-height: 1.4em;
}

h1 {
	color: var(--dark-grey);
	margin-bottom: 1rem;
	font-size: 1.25rem;
	line-height: 1.2em;
}

h1:has(+ div) {
	margin-bottom: clamp(2rem, 8vw, 4rem);
}

h2 {
	margin-bottom: .5em;
}

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

	h2.teaser__title {
		margin-bottom: 0;
	}

h3,
.picture {
	font-size: .9em;
	line-height: 1.5em;
}

h3:not(:first-child) {
	margin-top: -.5em;
}

	h2 + h3:not(:first-child) {
		margin-top: 1em;
	}
	
p:not(:last-child) {
	margin-bottom: 1em;
}

.intro {
	font-size: 1.5rem;
	line-height: 1.5em;
	letter-spacing: -.01em;
}

	.intro strong {
		color: var(--pine);
		text-transform: uppercase;
		letter-spacing: .05em;
	}
	
	@media (max-width: 699px) {
		
		.intro {
			font-size: 1rem;
			line-height: 1.5em;
		}
		
	}

.main a,
.footer__contact a {
	text-decoration: underline;
	text-decoration-thickness: .06em;
	text-decoration-color: var(--light-grey);
	text-underline-offset: 0.15em;
	transition: all .1s ease-in-out 0s;
}

.main a:hover,
.footer__contact a:hover {
	text-decoration-color: var(--pine);
}

.main ul:not([class]) {
	margin-bottom: 1rem;
}

.main h3 + ul:not([class]) {
	margin-top: .5rem;
}

.main li:not([class]) {
	display: flex;
	margin-bottom: .5rem;
}

	.main li:not([class]):before {
		content: "–";
		flex: 0 0 1em;
		text-align: center;
	}

/* @end */

/* @group VISUAL */

html, body {
	color: var(--main-color);
}

h2,
h3,
.picture {
	color: var(--pine);
}

.aside,
.annex__headline {
	color: var(--grey);
}

.footer {
	color: var(--light-grey);
}

.footer-menu__item:hover,
.footer-menu__item.active,
.footer-links__item:hover,
.footer-links__item.active {
	color: var(--pine);
}

.footer-wrapper {
	background-color: var(--dark-grey);
}

.annex__outer {
	background-color: var(--light-pine);
}

.menu__item:hover {
	color: var(--dark-grey);
}

.menu__item.active a {
	color: #fff;
	background-color: var(--main-color);
}

.menu__item.active a:hover {
	background-color: var(--dark-grey);
}

/* @end */


/* @group LAYOUT */

body {
	min-width: 320px;
}

.header,
.main,
.annex,
.footer {
	max-width: 1320px;
	margin-right: auto; margin-left: auto;
}

	.header__inner {
		padding-top: 4.545454545%;
	}

	.header__inner,
	.main__inner,
	.annex__inner,
	.footer__inner {
		padding-right: 4.545454545%; padding-left: 4.545454545%;
	}
	
	.main__inner {
		padding-bottom: 4.545454545%;
	}
	
	.annex__inner {
		padding-top: 4.545454545%;
		padding-bottom: 4.545454545%;
	}

	@media (max-width: 699px) {
		
		.header {
			margin-top: 2.5%;
			margin-bottom: 10%;
		}
		
		.title--hidden {
			display: none;
		}
		
	}
	
	@media (min-width: 700px) {
		
		.title {
			margin-left: 50%;
		}
		
		.title--hidden {
			visibility: hidden;
		}
		
	}

/* @end */

/* @group mixrow */

.mixrow {
	display: grid;
}

	.mixrow__item {
		margin-bottom: 2rem;
	}
	
	@media (max-width: 899px) {
	
		.mixrow--landscape .mixrow__item--left {
			
		}
		
		.mixrow--portrait .mixrow__item--left {
			padding-right: 20%; padding-left: 20%;
		}
		
	}

	@media (min-width: 900px) {
		
		.mixrow {
	        grid-template-columns: 10% 50% 10% 30%;
	    }
	    
	    .mixrow--portrait {
	        grid-template-columns: 20% 30% 10% 40%;
	    }
	
	        .mixrow .mixrow__item--left {
	            grid-column: 2;
	        }
	
	        .mixrow .mixrow__item--right {
	            grid-column: 4;
	        }
	}

/* @end */

/* @group picrow */

.picrow {
	margin-bottom: clamp(2rem, 8vw, 4rem);
}

	.picrow img {
		width: 100%;
	}
	
	@media (max-width: 699px) {
	
			.picrow__item {
				margin-bottom: 1rem;
			}
			
			.picrow--one-col .picrow__item,
			.picrow--m-xs .picrow__item--right,
			.picrow--xs-m .picrow__item--right,
			.picrow--s-m .picrow__item--left,
			.picrow--xs-l .picrow__item--left,
			.picrow--three-cols .picrow__item--center {
				margin-right: -5%; margin-left: -5%;
			}
			
				.picrow--one-col .picrow__item .picture__caption,
				.picrow--m-xs .picrow__item--right .picture__caption,
				.picrow--xs-m .picrow__item--right .picture__caption,
				.picrow--s-m .picrow__item--left .picture__caption,
				.picrow--xs-l .picrow__item--left .picture__caption,
				.picrow--three-cols .picrow__item--center .picture__caption {
					padding-right: 5%; padding-left: 5%;
				}
				
				.picrow--three-cols .picrow__item--center img {
					width: 100%;
				}
			
			.picrow--three-cols .picrow__item--right,
			.picrow--three-cols .picrow__item--left {
				padding-right: 20%; padding-left: 20%;
			}
			
	}
	

	@media (min-width: 700px) {
	
		.picrow {
			display: grid;
			align-items: center;
			/*margin-bottom: 2rem;*/
		}
	
	
		/* one-col */
		
		.picrow--one-col {
			grid-template-columns: 10% 80% 10%;
		}
		
			.picrow--one-col .picrow__item {
				grid-column: 2;
			}
			
			
		/* two-cols */
		
		.picrow--m-s {
			grid-template-columns: 50% 10% 40%;
		}
			
		.picrow--s-m {
			grid-template-columns: 40% 10% 50%;
		}
			
		.picrow--xs-m {
			grid-template-columns: 35% 10% 55%;
		}
		
		.picrow--m-xs {
			grid-template-columns: 55% 10% 35%;
		}
		
		.picrow--m-m {
			grid-template-columns: 45% 10% 45%;
		}
		
		.picrow--l-xs {
			grid-template-columns: 60% 10% 30%;
		}
		
		.picrow--xs-l {
			grid-template-columns: 30% 10% 60%;
		}
		
			.picrow--two-cols .picrow__item--left {
				grid-column: 1;
			}
			
			.picrow--two-cols .picrow__item--right {
				grid-column: 3;
			}
		
		
		/* three-cols */	
			
		.picrow--three-cols {
			grid-template-columns: 25% 5% 40% 5% 25%;
		}
		
			.picrow--three-cols .picrow__item--right {
				grid-column: 1;
			}
			
			.picrow--three-cols .picrow__item--center {
				grid-column: 3;
			}
			
			.picrow--three-cols .picrow__item--left {
				grid-column: 5;
			}
	}

/* @end */

/* @group txtrow */

.txtrow {
	margin-bottom: 1rem;
}

	@media (min-width: 700px) and (max-width: 899px) {
		
		.txtrow {
			margin-bottom: 2rem;
		}
	
			.txtrow:nth-child(odd) {
				padding-left: 5%; padding-right: 20%;
			}
			
			.txtrow:nth-child(even) {
				padding-left: 25%; padding-right: 5%;
			}
		
	}
	
	@media (min-width: 900px) and (max-width: 1199px) {
		
		.txtrow {
			margin-bottom: 2rem;
			padding-left: 10%; padding-right: 10%;
		}
	
			.txtrow:nth-child(odd) {
				padding-left: 10%; padding-right: 25%;
			}
			
			.txtrow:nth-child(even) {
				padding-left: 25%; padding-right: 10%;
			}
		
	}

	@media (min-width: 1200px) {
	
		.txtrow {
			margin-bottom: 2rem;
			padding-left: 20%; padding-right: 20%;
		}
	
			.txtrow:nth-child(odd) {
				padding-left: 10%; padding-right: 40%;
			}
			
			.txtrow:nth-child(even) {
				padding-left: 30%; padding-right: 20%;
			}
	
	}


/* @end */

/* @group header */

.header {
	
}

	@media (max-width: 699px) {
		
		.header {
			margin-left: 10%;
		}
		
			.header__emblem {
				width: 208px;
			}
		
			.header__menu {
				text-align: right;
			}
		
	}

	@media (min-width: 700px) {
	
		.header__inner {
			display: flex;
		}
			
		.header__emblem {
			flex: 0 0 280px;
		}
		
		.header__menu {
			flex: 1 1 auto;
		}
	}

/* @end */

/* @group annex */

.annex {
	
}

	.annex__headline {
		margin-top: unset;
		margin-bottom: 1rem;
	}
	
	.annex__homelink {
		grid-column-start: 3;
		margin-top: 3rem;
		margin-bottom: unset;
	}
	
		.annex__homelink a:hover {
			color: var(--dark-grey);
			text-decoration: underline;
			transition: all .15s ease-in-out 0s;
		}
		
	@media (min-width: 700px) {
		
		.annex__inner {
			display: grid;
		}
		
		.annex__headline {
			grid-column: 1 / span 3;
		}
		
			.annex__inner .teaser:nth-child(even) {
				grid-column: 1 / span 2;
			}
			
		.annex__homelink {
			grid-column: 1 / span 3;
		}
		
	}
		
	@media (min-width: 700px) and (max-width: 1199px) {
		
		.annex__inner {
			grid-template-columns: 30% 40% 30%;
		}
		
	}
		
	@media (min-width: 1200px) {
		
		.annex__inner {
			grid-template-columns: 45% 10% 45%;
		}
		
	}

/* @end */

/* @group emblem */

.emblem {
	position: relative;
	transition: transform .3s;
}

.emblem:hover {
	transform: scale(1.05);
}

	.emblem__logo,
	.emblem__label {
		
	}
	
	@media (max-width: 699px) {
	
		.emblem__logo {
			width: 100%; height: auto;
			margin-bottom: -10%;
		}
		
		.emblem__label {
			display: none;
		}
		
	}
	
	@media (min-width: 700px) {
		
		.emblem__logo {
			position: absolute;
			top: 0;
			left: 0;
			width: auto; height: 100%;
		}
		
		.emblem__label {
			width: 100%; height: auto;
		}
		
	}

/* @end */

/* @group menu */

.menu {
	
}

	.menu__item {
		
	}
	
		.menu__item a {
			display: inline-block;
			padding-top: .1em;
			padding-right: .4em; padding-left: .4em;
			line-height: 1.2em;
		}
		
	@media (max-width: 699px) {
	
		.menu__item {
			display: block;
		}
		
			.menu__item:not(:first-child) {
				margin-top: .2em;
			}	
	}


	@media (min-width: 700px) {
		
		.menu {
			text-align: right;
		}
		
			.menu__item {
				display: inline-block;
			}
			
			.menu__item:not(:first-child) {
				margin-left: .4em;
			}
	}


/* @end */

/* @group intro */

.intro {
	border-top: 1px solid var(--main-color);
	border-bottom: 1px solid var(--main-color);
	margin-bottom: 2em;
	padding-top: 1.25em; padding-bottom: 1.25em;
}

	@media (max-width: 899px) {
		
		.intro {
			margin-right: -5%; margin-left: -5%;
			padding-right: 5%; padding-left: 5%;
		}
	}

	@media (min-width: 900px) {
	
		.intro {			
			padding-right: 10%; padding-left: 10%;
		}

	}
	     

/* @end */

/* @group teasers */

.teasers {
	
}

	@media (max-width: 699px) {
	
			.teasers__item {
				margin-bottom: 2rem;
			}
	
	}
	
	@media (min-width: 700px) {
	
		.teasers {
			display: grid;
			grid-auto-flow: dense;
		}
			
	}
	
	@media (min-width: 700px) and (max-width: 1199px) {
		
		.teasers {
			grid-template-columns: 30% 40% 30%;
			grid-row-gap: 2rem;
		}
		
			.teasers__item:nth-child(odd) {
				grid-column: 1 / span 2;
			}
			
			.teasers__item:nth-child(even) {
				grid-column: 2 / span 2;
			}
		
	}

	@media (min-width: 1200px) {
		
		.teasers {
			grid-template-columns: 45% 10% 45%;
			grid-row-gap: 5rem;
		}
		
			.teasers__item {
				grid-row: span 2;
			}
			
			.teasers__item:nth-of-type(2) {
				grid-row: 2 / span 2;
			}
		
			.teasers__item:nth-of-type(odd) {
				grid-column: 1;
			}
			
			.teasers__item:nth-of-type(even) {
				grid-column: 3;
			}
		
	}

/* @end */

/* @group teaser */

.teaser {
	line-height: 1.4em;
}

	.teaser__figure {
		overflow: hidden;
	}

		.teaser__figure img {
			width: 100%;
			transition: transform .4s ease;
		}
		
		.teaser:hover .teaser__figure img {
			transform: scale(1.05);	
		}

	.teaser__title {
		margin-top: .5em;
	}

	.teaser__title,
	.teaser__subtitle {
		display: inline-block;
		color: #fff;
		background-color: var(--pine);
		padding-top: .2em;
		padding-right: .4em; padding-left: .4em;
		line-height: 1.2em;
	}
	
	.teaser__subtitle {
		margin-top: -.5em;
	}
	
	.teaser:hover .teaser__title,
	.teaser:hover .teaser__subtitle {
		background-color: var(--main-color);
	}


/* @end */

/* @group cover */

.cover {
	display: block;
	margin-right: -5%; margin-left: -5%;
	margin-bottom: 5%;
}

	.cover img {
		width: 100%;
		max-width: none;
	}

/* @end */

/* @group aside */

.aside {
	
}

	@media (max-width: 899px) {
		
		.aside {
			margin-right: -5%; margin-left: -5%;
			padding-right: 5%; padding-left: 25%;
			padding-top: 1rem; padding-bottom: 1rem;
			border-top: 1px solid var(--grey);
			border-bottom: 1px solid var(--grey); 
		}
		
		.mixrow:last-child .aside {
			border-bottom: none;
		}
	}

/* @end */

/* @group footer */

.footer-wrapper {
	
}

.footer-wrapper:before {
	content: "";
	display: block;
	height: 80px;
	background-image: url(../images/bordure-1.svg);
	background-repeat: repeat-x;
	background-size: auto 100%;
}

.footer-wrapper.projects:before,
.footer-wrapper.profile:before {
	background-color: var(--pine);
}

.footer-wrapper.projects:before {
	background-image: url(../images/bordure-2.svg);
}

.footer-wrapper.project:before {
	background-image: url(../images/bordure-3.svg);
}

.footer-wrapper.profile:before {
	background-image: url(../images/bordure-4.svg);
}

.footer-wrapper.contact:before {
	background-image: url(../images/bordure-5.svg);
}

.footer__inner {
	display: flex;
}

	.footer-links__item:not(:first-child) {
		margin-left: .75em;	
	}
	
	@media (max-width: 899px) {
	
		.footer-wrapper:before {
			height: 40px;
		}
		
		.footer {
			text-align: center;
		}
		
			.footer__inner {
				flex-direction: column;
				row-gap: 1rem;
				padding-top: 1rem;
				padding-bottom: 2rem;
			}
			
			.footer__contact {
				margin-bottom: 1rem;
			}
			
			.footer__menu {
				margin-bottom: 1rem;
			}
		
	}
	
	@media (min-width: 900px) {
	
			.footer__inner {
				display: flex;
				flex-wrap: wrap;
				row-gap: 3rem;
				padding-block: 2.5%;
			}
			
			.footer__contact {
				flex: 0 0 50%;
			}
			
			.footer__menu {
				flex: 0 0 50%;
				text-align: right;
			}
			
			.footer__credits {
				flex: 0 0 50%;
			}
			
			.footer__links {
				flex: 0 0 50%;
				text-align: right;
			}
			
			.footer-menu__item {
				display: inline-block;
				margin-left: .5em;
			}
		
	}
	

/* @end */

/* @group picture */

.picture {

}

	.picture__caption {
		 max-width: 15rem;
	}

		.picture__caption:before {
			content: "—";
			display: block;
			margin-top: .5em;
		}


/* @end */

/* @group image */

.image {
	position: relative;
}

	.image__copyright {
		position: absolute;
		bottom: 0;
		right: 0;
		padding: .6em 1em;
		color: white;
		text-shadow: 0 0 .1em rgba(0,0,0,.5);
		opacity: .8;
		font-size: 14px;
		line-height: 1em;
	}
	
		.image__copyright a {
			color: inherit;
		}

/* @end */