@font-face {
    font-family: 'Typ1451';
    src: url('../font/Typ1451-Medium.woff2') format('woff2'),
        url('../font/Typ1451-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
}



/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

html{
  scroll-behavior: smooth;
}

body{
	background-color:#FFFFFF;
	font-size: calc(11px + 0.4vw);
	line-height:1.4;
	letter-spacing:0.01em;
	font-family: 'Helvetica','Arial', sans-serif;
	color:#000;	
	height:100vh;
	overflow:hidden;

}
div,section,article{
	box-sizing: border-box;
}
img{
	display:block;
	width:100%;
}

a{
	text-decoration:none;
	color:#000;
	transition:color 0.2s ease-out;
}
section a,nav a.act{
	/*text-decoration:underline;*/
	/*border-bottom:1px solid black;*/
	text-decoration:underline;
}




h1,h2,h3,h4,header{
	/*font-family: 'Typ1451', sans-serif;*/
}
h1{
	margin-bottom:80px;
	margin-top:80px;
}
h2{
	margin-bottom:20px;
	margin-top:80px;
	padding-left:30px;
	font-weight:bold;
}

span{}


.row{
	display: flex;
	flex-wrap: wrap;
    justify-content: flex-start;
	width:calc(50vw + 10px);
	margin-left:-5px;
	margin-top:-5px;

}

.col{
	border:5px solid white;
	border-bottom-width:10px;
	
}

.col-25{
	flex: 0 0 25%;
    max-width: 25%;
}

.col-33{
	flex: 0 0 33.33333%;
    max-width: 33.33333%;
}
.col-44{
	flex: 0 0 44.44444%;
    max-width: 44.44444%;
}
.col-50{
	flex: 0 0 50%;
    max-width: 50%;
}
.col-58{
	flex: 0 0 58.33333%;
    max-width: 58.33333%;
}
.col-66{
	flex: 0 0 66.66666%;
    max-width: 66.66666%;
}
.col-75{
	flex: 0 0 75%;
    max-width: 75%;
}
.col-100{
	flex: 0 0 100%;
    max-width: 100%;
}




/* SCHRIFTGRÖSSEN */

h1{
	font-size: calc(15px + 2.2vw);
}
.logo, nav,.a-intro{
	font-size:150%;
}

/*h1,.a-intro{
	font-size: calc(15px + 1.5vw);
}*/


h2{
	/*font-size:120%;*/
	
}



/* ------- */



header{
	position:fixed;
	left:0;
	top:0;
	width:50vw;
	z-index:2;
	
}
#top-balken{
	background-color:white;
	padding:1vh 25px;
	/*-webkit-box-shadow: 0px 2px 6px 0px rgba(0,0,0,0.2);
	-moz-box-shadow: 0px 2px 6px 0px rgba(0,0,0,0.2);
	box-shadow: 0px 2px 6px 0px rgba(0,0,0,0.2);*/
	border-bottom:1px solid black;
	position:relative;
	z-index:2;
	display: flex;
    align-items: center; /* Vertical center alignment */
    justify-content: space-between;
}


.instagram{
	display:inline-block;
	text-decoration:none;
	height:30px;
}
.instagram svg{
	max-width:30px;
	max-height:30px;
	min-width:25px;
	min-height:25px;
	width:auto;
	height:auto;
	
	width:2vw;
	height:2vw;
	
	transform: scale(1);
	transition: all 0.2s ease-in-out;
	position:relative;
	
	
	
}
.instagram-kontakt svg{
	top:7px;
	margin-right:3px;
	width:2vw;
	height:2vw;
}
.instagram:hover svg{
	transform: scale(1.1);
}




nav{
	padding:0.75vh 15px 0.75vh 25px;
	background-color:white;
	/*-webkit-box-shadow: 0px 2px 6px 0px rgba(0,0,0,0.2);
	-moz-box-shadow: 0px 2px 6px 0px rgba(0,0,0,0.2);
	box-shadow: 0px 2px 6px 0px rgba(0,0,0,0.2);*/
	border-bottom:1px solid black;
	position:relative;
	z-index:1;
}
nav li{
	display:inline-block;
	padding-right:2vw;
}
nav ul li:last-child{
	padding-right:0;
}
nav a:hover, nav a.is-active{
	/*text-decoration:underline;*/
	/*color:#8c8c8c;*/
}


#linke-spalte{
	position:absolute;
	top:0;
	left:0;
	width:50vw;
	height:100vh;
	overflow:hidden;
	z-index:1;

}


article{
	min-height:100vh;
	padding:120px 25px;
}
article.a-intro{
	display: flex;
    align-items: center; /* Vertical center alignment */
     padding-right:5vw; 
    padding-left:55px;
}
article.a-intro a{
	text-decoration:none;
}


span.jahr{
	font-style:italic;
}



img.portrait{
	margin-bottom:4vw;
	width:40%;
}


table{
	width:100%;
	margin-bottom:3vw;
}
table td{
	padding-bottom:5px;
}
table tr td:first-child{
	padding-right:15px;
	white-space:nowrap;
}

table tr td:nth-child(2){
	width:100%;
}
tr.tr-abstand td{
	padding-top:10px;
}







#rechte-spalte{
	position:absolute;
	top:0;
	left:50vw;
	width:50vw;
	height:100vh;
	overflow:hidden;
	background:white;
	z-index:3;
}
.weitere-werke{
	text-align:center;
	padding:5vw;
}


/* BIOGRAFIE */

.a-biografie table{
	margin-bottom:0;
}

.texte a{
	display:inline-block;
	margin-bottom:5px;
	
}


/* AUSSTELLUNGEN */


/* KONTAKT */
/*.instagram-kontakt{
	background-image:url(../bilder/instagram_icon.svg);
	background-size:contain;
	background-position:0 0;
	background-repeat:no-repeat;
	padding-left:30px;
	border-bottom:0px;
}
.instagram-kontakt:hover{
	background-image:url(../bilder/instagram_icon_hover.svg);
}*/


.a-kontakt a{
	/*border-bottom:none;*/
	
}




.inner{
	width: calc(100% + 20px);
    overflow: auto;
    height: 100%;
}














/* MOBILE NAV */

.mobile-nav{
	position:absolute;
	right:0;
	display: none;
}


.c-hamburger {
	overflow: hidden;
	margin: 0;
	padding: 0;
	width: 25px;
	height: 25px;
	font-size: 0;
	text-indent: -9999px;
	appearance: none;
	box-shadow: none;
	border-radius: none;
	border: none;
	cursor: pointer;
	transition: background 0.3s;
	background:none;
}

.c-hamburger:focus {
  outline: none;
}


.c-hamburger span {
	display: block;
	position: absolute;
	top: 10px;
	left: 0px;
	right: 0px;
	height: 2px;
	background: #000;
}

.c-hamburger span::before,
.c-hamburger span::after {
	position: absolute;
	display: block;
	left: 0;
	width: 100%;
	height: 2px;
	background-color: #000;
	content: "";
}

.c-hamburger span::before {
	top: -8px;
}

.c-hamburger span::after {
	bottom: -8px;
}





.c-hamburger--htx span::before,
.c-hamburger--htx span::after {
  transition-duration: 0.3s, 0.3s;
  transition-delay: 0.3s, 0s;
}

.c-hamburger--htx span::before {
  transition-property: top, transform;
}

.c-hamburger--htx span::after {
  transition-property: bottom, transform;
}


/* active state, i.e. menu open */

.c-hamburger--htx.is-active span {
  background: none;
}

.c-hamburger--htx.is-active span::before {
  top: 0;
  transform: rotate(45deg);
}

.c-hamburger--htx.is-active span::after {
  bottom: 0;
  transform: rotate(-45deg);
}

.c-hamburger--htx.is-active span::before,
.c-hamburger--htx.is-active span::after {
  transition-delay: 0s, 0.3s;
}
.c-hamburger--htx.is-active span::before,
.c-hamburger--htx.is-active span::after{
	background-color:#F9F9FC;
}


/* ------------------------------------- */






@media screen and (max-width: 820px) {
	body{
		overflow:auto;
	}
	
	h1{
		margin-bottom:50px;
		margin-top:30px;
	}
	h2{
		margin-top:50px;
	}
	
	.inner{
		width:100%;
		height:auto;
		overflow-x:hidden;
	}
	
	#top-balken,nav,article{
		padding-left:15px;
		padding-right:15px;
	}
	
	
	
	header{
		width:100%;
	}
	nav{
		padding-right:0;
	}
	nav li{
		padding-right: 4vw;
	}
	#linke-spalte,#rechte-spalte{
		position:static;
		width:100%;
		left:0;
		top:0;
		overflow:auto;
		height:auto;
	}
	
	#linke-spalte{
		
	}
	#rechte-spalte{
		
	}
	
	.row{
		width:calc(100% + 10px);
	}
	
}
@media screen and (max-width: 475px) {
	h1{
		margin-top:0;
	}
	
	h2{
		padding-left:15px;
	}
	article.a-intro{
		padding-left:15px;
	}
	article{
		min-height:auto;
	}
	article.a-kontakt{
		min-height:100vh;
	}
	section#rechte-spalte{
		padding-bottom:120px;
	}
	
	
}
@media screen and (max-width: 370px) {
	nav,.logo{
		font-size:120%;
	}
	
	img.portrait{
		width:100%;
	}
}