@font-face {
    font-family: myFirstFont;
    src: url(../fonts/MetricWeb-Medium.woff);
}

{
  box-sizing: border-box;
}

htlm, body  {
	font-family: myFirstFont;
	padding: 0;
	margin: 0;
	color:#000000;	
}

.txt__main {
	font-size: 22px;
	line-height: 22px;
}

.txt__main-link {
	font-size: 22px;
	line-height: 22px;
	color:#000000;
	font-weight: normal;
	text-decoration: underline;	
}

.txt__main-link:hover {
	color: #ff00ee;
	text-decoration: underline;
	font-weight: normal;
}



.txt__marginal {
	line-height: 17px;
	font-size: 14px;
}

.txt__marginal-link {
	color:#000000;
	font-weight: normal;
	text-decoration: underline;
}

.txt__marginal-link:hover {
	color: #ff00ee;
	text-decoration: underline;
	font-weight: normal;
}


/*
####################################################
													Navigation top
####################################################
*/

a[aria-current=page] {
	color: black;
}

.navContainer {
	background: #ffffff; /* red; */
    box-shadow: 0px 0px 24px 0px #9bafb6;
	padding: 0px;
	z-index: 5;
}

.navHolder {
  	position: relative;
  	z-index: 3;
	background: #9bafb6;
	visibility: none;
	padding: 0px 0px 20px 0px ;
	margin: 0px 0px 0px 0px ;	
}

.bar {
	display: flex;
	width: 100%;
	justify-content: space-between;
	position: relative;
	z-index: 4;
	background-color: #ffffff;
	height: 42px;
	padding: 0px;
	margin: 0px;
}

.isOpen .bar {
	background-color: #9bafb6;	
}

.bar__logo {
	font-size: 22px;
	line-height: 22px;
	color:#000000;
	padding: 10px 0px 5px 20px;
	margin: 0px;
	font-family: myFirstFont;
	font-weight: normal;
}

.bar__logo-link {
	color:#000000;
	text-decoration: none;
	list-style-position: inside;
	font-weight: normal;
}

.bar__logo-link:hover {
	color: #ff00ee;
}

.bar__button {
	cursor: pointer;
	background-color: transparent;/*#9bafb6; transparent*/
	height: 32px;
	font-size: 22px;
	line-height: 22px;
	font-family: myFirstFont;
	font-weight: normal;
	border: none;
	padding: 10px 20px 32px 0px;
	color:#000000;
	outline: none;
	position: absolute;
	right: 0px;
	top: 0px;
}

.isOpen .bar__button {
	color:#ffffff;	
}

.navigation__first {
	list-style: none;
	padding: 0px 0px 0px 20px;
	margin: 0px;
	font-size: 22px;
	line-height: 22px;
	font-weight: normal;
	color:#ffffff;
}

.navigation__firstEntry {
	padding: 0px 0px 0px 0px;
}

.navigation__firstEntry_padbut {
	padding: 0px 0px 14px 0px;
}


.navigation__second {
	display: flex;
	flex-wrap: wrap; 
	list-style: none;
	font-size: 22px;
	line-height: 22px;
	padding: 0px 0px 0px 8px;
	margin: 0;
	color: #ffffff;
}

.navigation__link {
	text-decoration: none;
	list-style-position: inside;
	font-weight: normal;
	color:#ffffff;
}

.navigation__link:hover {
	color: #ff00ee;
}

.navigation__link:before {
	content: '• '; /* → */
}

.navigation__link_second {
	text-decoration: none;
	list-style-position: inside;
	font-weight: normal;
	color:#ffffff;
	padding: 0px 0px 0px 0px;
	white-space: nowrap;
}

.navigation__link_second:hover {
	color: #ff00ee;
}

.navigation__link_second:before {
	content: ' / '; /* → */
}

.navigation__secondEntry {
	padding-right: 5px;
	list-style-position: inside;
}

.navigation__heading {
	padding: 0;
	margin: 0;
	font-size: 22px;
    line-height: 22px;
    font-weight: normal;
}

.navigation__heading-off {
	display: none;	
}

.navigation__ausgabe {
	color: #000000;	
}

.closeopen {
	display: inline-block;
	overflow: hidden;
	width: 22px;
	height: 18px;
 	background-color: transparent;
 }

.isOpen .closeopen svg {
	position: relative;
	top: -20px;	
}

.shade {
	display: none;
  	z-index: 1;	
}

.isOpen .shade {
	display: block;
	position: fixed;
	z-index: 1;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,.8);
}


/*
####################################################
													.js
####################################################
*/

.js .navContainer {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
}

.js .navContainer.isOpen {
	background: #9bafb6;  /*b4c7d2 a6b3b7 a0b1b7 9bafb6*/
	box-shadow: 0px 0px 24px 0px #000;  
}

.js .navHolder[aria-hidden=true] {
	display: none;
}

.js .isOpen .navHolder[aria-hidden=true] {
	display: block;
}


/*
####################################################
													About
####################################################
*/
.about__container {
	width: calc(100% - 40px);
	padding: 0px 0px 0px 20px;
	color:#000000;
}

.about__nav-ul {
	list-style: none;
	padding: 0px 0px 0px 0px;
	margin: 0px;
	font-size: 22px;
	line-height: 22px;
	font-weight: normal;
	color:#000000;
}

.about__nav-li {
	padding: 0px 0px 0px 0px;
	margin: 0;
	font-weight: normal;
}

.about__nav-link {
	text-decoration: none;
	list-style-position: inside;
	font-weight: normal;
	color:#000000;
}

.about__nav-link:hover {
	color: #ff00ee;
}

.about__nav-link:before {
	content: '• ';
}

.about__txt-link {
	text-decoration: none;
	list-style-position: inside;
	font-weight: normal;
	color:#000000;
}

.about__txt-link:hover {
	color: #ff00ee;
}

.about__link-to-top {
	padding: 52px 0px 7px 13px;
	margin: 0;	
}

.about__link-top {
	line-height: 17px;
	font-size: 14px;
	text-decoration: none;
	font-weight: normal;		
	margin: 0;	
	color: #000;	
}

.about__link-top:hover {
	color: #ff00ee;	
}

.about__figure {
	width: calc(80% - 40px);
	padding: 22px 0px 0px 13px;
	margin: 0px;	
}

.about__img {
	width: 100%;
	padding: 0px 0px 0px 0px;
	margin: 0px;
}

.about__imgtext {
	line-height: 17px;
	font-size: 14px;
	padding: 0px 0px 0px 0px;
	margin: 0px;
}

.about__p {
	font-size: 22px;
	line-height: 22px;
	font-weight: normal;
	text-indent: 0px;
	padding: 0px 0px 7px 0px;
	margin: 0;
}


.about__h3 {
	font-size: 22px;
	line-height: 22px;
	font-weight: normal;	
	padding: 33px 0px 7px 0px;
	margin: 0;
}

.about__h4 {
	line-height: 17px;
	font-size: 14px;
	font-weight: normal;	
	padding: 4px 0px 7px 13px;	
	margin: 0;	
}


.about__ul {
	font-size: 22px;
	line-height: 22px;
	font-weight: normal;	
	padding: 0px 0px 0px 13px;	
	margin: 0;	
}

li.about__li:before {
	content: "· ";
	position: absolute;
	left: -11px;
}

.about__li {
	font-size: 22px;
	line-height: 22px;
	font-weight: normal;
	list-style-position: outside;
	list-style-type: none;
	position: relative;/* · */
	/*list-style: none;*/
	padding: 0px 0px 7px 0px;	
	margin: 0;	
}


/*
####################################################
													Main  
####################################################
*/
.main__container {
	display: flex;
	flex-direction: column;
	padding: 10px 10px 0px 10px;
	background-color: #fff;
}

.main__container-align-center {
	align-items: center;
}

.main__container-align-base {
	align-items: baseline; /*baseline;*/
}


.container__titel {
	padding: 52px 0px 20px 20px;
	margin: 0px;
	border: 0px;
}

.container__titel-h2 {
	font-size: 22px;
	line-height: 22px;
	color:#000000;
	padding: 0px;
	margin: 0px;
	font-family: myFirstFont;
	font-weight: normal;
}

.container__titel-h2-link {
	color:#000000;
	font-weight: normal;
	text-decoration: none;	
}

.container__titel-h2-link:hover {
	color: #ff00ee;
	text-decoration: none;
	font-weight: normal;	
}

.main__figure {
	padding: 0px;	
	margin: 0px;	
	background-color: #bbb; 
}

.main__img {
	display: block;
	width: 100%;
	background-color: #bbb; 
	text-decoration: none;
}

.main__figcaption {
	padding: 3px 0px 3px 0px;
	background-color: #fff;
	color: inherit;
}

.main__figcaption-titel {
	padding: 0px 0px 3px 0px;
	margin: 0px;
	font-size: 22px;
	line-height: 22px;
	color:#000000;
}

.main__link-projekt-intern {
	color:#000000;
	font-weight: normal;
	text-decoration: none;	
}

.main__link-projekt-intern:hover {
	color: #ff00ee;
	text-decoration: none;
	font-weight: normal;	
}

.works__txt-container {
	width: calc(100% - 40px);
	padding: 0px 0px 0px 20px;
	background-color: #fff;	
}

.works__h3 {
	font-size: 22px;
	line-height: 22px;
	padding: 22px 0px 7px 0px;	
	margin: 0px;
	font-weight: normal;
	background-color: #fff;	
}

.works__p {
	font-size: 22px;
	line-height: 22px;
	font-weight: normal;
	padding: 0px 0px 7px 0px;
	margin: 0;
	background-color: #fff;	
}

.works__p-marginal {
	line-height: 22px;
	font-size: 22px;
	padding: 0px 0px 7px 0px;	
	margin: 0px;
	font-weight: normal;
	background-color: #fff;
}

.works__link-to-zoom {
	background-color: red;	
	/*opacity: 0.3;*/
	position: relative;
	width: 100%;
	height: 100%;
	cursor: zoom-in;
}

.ongoing__text-entry {
	padding: 0px 0px 44px 0px;
	margin: 0px 44px 44px 0px;
	background-color: #fb50d8;	
}

/*
####################################################
													Work  
####################################################
*/

.work__container {
	padding: 52px 20px 0px 20px;
	background-color: #fff;	
}

.work__figure {
	height: calc(100vh - 52px);
	padding: 0px 0 0 0;
	margin: 0;
	display: flex;
	flex-direction: column;	
}

.work__div {
	position: relative;
	flex-grow: 1;
}

.work__div img {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: left;
	opacity: 1;
	cursor: zoom-out;
	background-color: #fff;		
}


.work__nav {
	position: absolute;
	bottom: 0px;
	padding: 0px 0px 8px 0px;
	margin: 0;
	background-color: #red;
	z-index: 2;
	display: flex;
	line-height: 17px;
	font-size: 14px;	
}


.work__figcaption {
	line-height: 17px;
	font-size: 14px;
	padding: 5px 0px 18px 100px;	
	font-weight: normal;
	color: #000;
	display: block;
}


.work__navlink {
	margin: 0;		
	background-color: transparent;	
	line-height: 26px;
	font-size: 22px;
}

.work__navlinkprev {
	padding: 0px 10px 6px 0px;	
	text-align: right;	
}

.work__navlinknext {
	padding: 0px 10px 6px 10px;	
	text-align: left;
}

.work__navlinkcounter {
	line-height: 17px;
	font-size: 14px;
	padding: 5px 0px 0px 0px;	
	font-weight: normal;
	color: #000;
}

.link__zoom-in {
	cursor: zoom-in;
}

.link__zoom-out {
	cursor: zoom-out;
}



/* 
							 #################################### 
							 iPhone 5/6 		hoch:	b 320 px
							 iPhone 6/7/8 		hoch:	b 375 px
							 iPhone 6/7/8 Plus 	hoch:	b 414 px
							 iPhone X 			hoch:	b 375 px
							 ####################################
*/

.main__entry {
	width: calc(100% - 20px);
	padding: 10px 10px 30px 10px;
	margin: 0px;
	background-color: #fff; 
}


/*
####################################################
													Fuss
####################################################
*/

.flex-container-fuss {
	display: flex;
	flex-direction: column;  
	padding: 84px 10px 10px 10px;
	margin: 0px; 	
}

.flex-container-fuss-entry  {
	line-height: 18px;
	font-size: 14px;
	color: #000;
	padding: 10px 10px 10px 10px;
	background-color: #fff;
}


.fuss__nav-ul {
	list-style: none;
	padding: 0px 0px 0px 0px;
	margin: 0px;
	font-size: 14px;
	line-height: 18px;
	font-weight: normal;
	color:#000000;
}

.fuss__nav-li {
	padding: 0px 0px 0px 0px;
	margin: 0;
}

.fuss__nav-link {
	text-decoration: none;
	list-style-position: inside;
	font-weight: normal;
	color:#000000;
}

.fuss__nav-link:hover {
	color: #ff00ee;
}

.fuss__nav-link:before {
	content: '• ';
}



input {
	font-family: myFirstFont;
	font-weight: normal;
	line-height: 14px;
	font-size: 14px;
	background-color: #ddd;	
	color: #000;	
  	border: 1px solid #ddd;
	padding: 0;
	margin: 0;
}

/*
subscribe {
	font-family: myFirstFont;
	font-weight: normal;
	line-height: 14px;
	font-size: 14px;
	background-color: #fff;	
	color: #000;	
  	border: 0px solid #fff;
}
*/
.button__subscribe {
	font-family: myFirstFont;
	font-weight: normal;
	line-height: 14px;
	font-size: 14px;
	background-color: #fff;	
	color: #000;	
  	border: 1px solid #fff;
	padding: 0;
	margin: 0;
}
*/
.subscription__titel {
	color: #000;
}

.mc-field-group {
	color: red;
}

.fuss__link {
	text-decoration: none;
	font-weight: normal;
	color:#000;
}

.fuss__link:hover {
	color: #ff00ee;
}

.fuss__socialmedia-div {
	padding: 0px 0px 18px 0px;
	margin: 0px;
}



/* 
							 #################################### 
							 iPhone 5/6 			quer: 	b 568 px
							 ####################################
*/

@media (min-width: 420px) {

	
	.main__container {
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: flex-start;
		background-color: #fff;
	}
	
	
	.about__container {
		width: calc(100% - 40px);
	}
	.works__txt-container {
		width: calc(100% - 40px);
	}
	
	
	
	.works__entry-size1 {
		flex-basis: 140px;		
	}
	.works__entry-size2 {
		flex-basis: 155px;				
	}
	.works__entry-size3 {
		flex-basis: 170px;			
	}
	.works__entry-size4 {
		flex-basis: 185px;		
	}
	.works__entry-size5 {
		flex-basis: 200px;		
	}
	.works__entry-size6 {
		flex-basis: 220px;			
	}
	.works__entry-size7 {
		flex-basis: 240px;			
	}	
	.works__entry-size8 {
		flex-basis: 265px;			
	}	
	.works__entry-size9 {
		flex-basis: 295px;			
	}	
	.works__entry-size10 {
		flex-basis: 325px;			
	}
	.works__entry-size11 {
		flex-basis: 360px;			
	}	
	
	.projects__entry-size3 {
		flex-basis: calc(25% - 20px);
		flex-grow: .5; 			
	}
	.projects__entry-size4 {
		flex-basis: calc(30% - 20px);
		flex-grow: .5; 			
	}
	.projects__entry-size5 {
		flex-basis: calc(35% - 20px);
		flex-grow: .5; 					
	}
	.projects__entry-size6 {
		flex-basis: calc(40% - 20px);
		flex-grow: .5; 					
	}
	.projects__entry-size7 {
		flex-basis: calc(45% - 20px);
		flex-grow: .5; 					
	}	
	.projects__entry-size8 {
		flex-basis: calc(50% - 20px);
		flex-grow: .5; 					
	}
	
	.ongoing__entry-size5 {
		flex-basis: calc(45% - 20px);
		flex-grow: .0;			
	}
	.ongoing__entry-size6 {
		flex-basis: calc(50% - 20px);
		flex-grow: .2;			
	}
	.ongoing__entry-size7 {
		flex-basis: calc(60% - 20px);
		flex-grow: .3;			
	}
	.ongoing__entry-size8 {
		flex-basis: calc(70% - 20px);
		flex-grow: .4;			
	}
	.ongoing__entry-size9 {
		flex-basis: calc(80% - 20px);
		flex-grow: .5;			
	}	
}



/* 
							 #############################################
							 iPhone 6/7/8 		quer	b 667 px x h 375
							 iPhone 6/7/8 Plus 	quer	b 736 px x h 414
							 iPhone X 			quer 	b 812 px x h 375
							 iPad 				hoch 	b 768 px x h 1024
							 #############################################
*/

@media (min-width: 640px) {

	.about__container {
		width: 600px;
	}
	.works__txt-container {
		width: 600px;
	}
	.works__p-marginal {
		padding: 0px 200px 7px 0px;	
	}

/*	.works__link-to-zoom {
		display: block;
	}*/
	
	.about__img {
		width: 480px;
		object-fit: scale-down;
		
	}


	.flex-container-fuss {
		flex-direction: row;
		flex-wrap: wrap;		
		justify-content: flex-start;
	}
	

	.projects__entry-size3 {
		flex-basis: calc(24% - 20px);
		flex-grow: .4;
	}
	.projects__entry-size4 {
		flex-basis: calc(30% - 20px);
		flex-grow: .4;	
	}	
	.projects__entry-size5 {
		flex-basis: calc(36% - 20px);
		flex-grow: .4;	
	}
	.projects__entry-size6 {
		flex-basis: calc(43% - 20px);
		flex-grow: .4;	
	}
	.projects__entry-size7 {
		flex-basis: calc(50% - 20px);
		flex-grow: .4;
	}
	.projects__entry-size8 {
		flex-basis: calc(57% - 20px);
		flex-grow: .4;
	}	
	
	.ongoing__entry-size5 {
		flex-basis: calc(36% - 20px);	
	}
	.ongoing__entry-size6 {
		flex-basis: calc(43% - 20px);	
	}
	.ongoing__entry-size7 {
		flex-basis: calc(50% - 20px);
	}
	.ongoing__entry-size8 {
		flex-basis: calc(60% - 20px);	
	}
	.ongoing__entry-size9 {
		flex-basis: calc(65% - 20px);		
	}
}

/* 
							 ############################# 
							 iPad 		quer:	b 1024 px
							 iPadPro 	hoch:	b 1024 px
							 iPadPro 	quer:	b 1366 px
							 ############################# 
*/

@media (min-width: 820px) {
	
	.about__container {
		width: 600px);
	}

	.projects__entry-size3 {
		flex-basis: calc(24% - 20px);
		flex-grow: .3;	
	}	
	.projects__entry-size4 {
		flex-basis: calc(27% - 20px);
		flex-grow: .3;	
	}
	.projects__entry-size5 {
		flex-basis: calc(30% - 20px);
		flex-grow: .3;	
	}
	.projects__entry-size6 {
		flex-basis: calc(34% - 20px);
		flex-grow: .3;	
	}
	.projects__entry-size7 {
		flex-basis: calc(40% - 20px);
		flex-grow: .3;
	}
	.projects__entry-size8 {
		flex-basis: calc(46% - 20px);
		flex-grow: .3;
	}	
	
	
	.ongoing__entry-size5 {
		flex-basis: calc(30% - 20px);	
	}
	.ongoing__entry-size6 {
		flex-basis: calc(34% - 20px);	
	}
	.ongoing__entry-size7 {
		flex-basis: calc(40% - 20px);
	}
	.ongoing__entry-size8 {
		flex-basis: calc(50% - 20px);	
	}
	.ongoing__entry-size9 {
		flex-basis: calc(60% - 20px);		
	}
	
}


@media (min-width: 1024px) {

	.about__container {
		width: 600px);
	}

	.projects__entry-size3 {
		flex-basis: calc(15% - 20px);
		flex-grow: .3;	
	}
	.projects__entry-size4 {
		flex-basis: calc(17% - 20px);
		flex-grow: .3;	
	}
	.projects__entry-size5 {
		flex-basis: calc(20% - 20px);
		flex-grow: .3;	
	}
	.projects__entry-size6 {
		flex-basis: calc(23% - 20px);
		flex-grow: .3;	
	}
	.projects__entry-size7 {
		flex-basis: calc(30% - 20px);
		flex-grow: .3;
	}	
	.projects__entry-size8 {
		flex-basis: calc(37% - 20px);
		flex-grow: .3;
	}	
	
	
	.ongoing__entry-size5 {
		flex-basis: calc(20% - 20px);	
	}
	.ongoing__entry-size6 {
		flex-basis: calc(23% - 20px);	
	}
	.ongoing__entry-size7 {
		flex-basis: calc(30% - 20px);
	}
	.ongoing__entry-size8 {
		flex-basis: calc(36% - 20px);	
	}
	.ongoing__entry-size9 {
		flex-basis: calc(42% - 20px);		
	}
	
}