@charset "utf-8";
@font-face{
	font-family: 'inter';
	src: url('Inter-VariableFont_slnt,wght.ttf') format('truetype');
	font-display: swap;
}
body{
    font-family: inter;
    font-size: 22px;
    font-variation-settings: "wght" 300;
	font-display: swap;
    color: #303030;
    text-decoration: none;
	margin-right: 15px;
	margin-left: 15px;
	margin-top: 15px;
	margin-bottom: 15px;
	hyphens: auto;
	height: 100%;
}
/**style font**/
h1{
	text-transform: uppercase;
}
h2{
	text-transform: uppercase;
	margin-top: 40px;
	hyphens: auto;
}
.titel{
	font-style: italic;
	text-align: left;
	margin-top: 0.3rem;
	margin-bottom: 0;
	width: 100%;
	display: inline-flex;
}
.material{
	text-align: left;
	margin-top: 0;
	margin-bottom: 2rem;
}
.input{
	display:flex;
}
.list{
	list-style: none;
	display: block;
	width: 70%;
	margin-left: 4%;
	}
.normal{
	font-size: 2rem;
}
.normal2{
	font-style: italic;
}
.y{
	margin-top: 0px;
	margin-bottom: 0px;
	display: inline-flex;
	flex-wrap: wrap;
}
.y2{
	margin-top: 15px;
}
.year{
	width: 20%;
	margin-right: 8px;
}
.vita{
	margin-top: 0px;
	margin-bottom: 10px;
}
.vita2{
	margin-top: 15px;
	margin-bottom: 10px;
}
img{
	max-width: 100%; height: auto;
	cursor: pointer;
}
ul.works_children{
	margin-left: 2rem;
}
li{
	list-style: none;
	font-style: bold;
	cursor: pointer;
}
a{
	color: #303030;
	text-decoration: none;
	width: 100%;
}
#menubutton {
	display: none;
}
.anav{
	text-decoration: none;
}
.anav_children{
	text-decoration: none;
	font-style: italic;
	hyphens: manual;
	text-transform: uppercase;
}
li.linav{
	margin-top: 0.5rem;
	margin-bottom: 0.5rem;
	font-size: 1.5rem;
	text-decoration: none;
}
.mail{
	display: block;
	width: 70%;
	margin-left: 4%;
	margin-top: 45px;
}
.mailicon{
	font-size: 6rem;
	width: 30%;
	height: auto;
}
#active{
	display: none;
}
.maintitle{
	font-size: 3rem;
	margin-top: 20px;
	text-transform: uppercase;
	word-break: break-words;
	hyphens: auto;
	color: white;
	animation: mymove 5s infinite;
}
@keyframes mymove{
	50% {text-shadow: 0px 0px 10px #f76363}
}

/**style smal phone**/
@media only screen and (max-width: 330px){
	body{
		font-size: 20px;
	}
	.body_header{
		width: 100%;
		text-align: left;
		margin-top: 30px;
		margin-bottom: 20px;
		height: min-content;
    	display: inline-flex;
    	font-size: 2.3rem;
		letter-spacing: -0.2rem;
		font-variation-settings: "wght" 96;
	}
	a.name{
		flex: max-content;
	}
	#divheader{
		width: 100%;
	}
	.menubuttons{
		display:flex;
		flex-wrap: wrap;
		margin-top: -0.5rem;
	}
	#menubutton{
		font-size: 4rem;
		margin-left: 1rem;
		margin-top: -10px;
		cursor: pointer;
		display: inline-flex;
		border: none;
		background-color: white;
	}
	.language{
		background-color: white;
		border: solid;
		border-width: 1px;
		font-family: inter;
		font-variation-settings: "wght" 96;
		font-size: 2rem;
		height: 60px;
		margin-top: -0.7rem;
		margin-left: 1.46rem;
	}
	.titelright{
		margin-bottom: 0px;
		overflow: visible;
		display: inline-block;
		width: 100%;
	}
	.titelr{
		font-style: italic;
		margin-top: 0.3rem;
		margin-bottom: 0;
	}
	.materialr{
		margin-top: 0;
		margin-bottom: 2rem;
	}
	#pcnav{
		display: none;
	}
	ul{
		margin-left: 0rem;
   		padding-left: 0px;
    	margin-right: 2rem;
    	margin-top: 0px;
	}
	main{
		margin-top: 5rem;
		margin-bottom: 2rem;
	}
	img {
		cursor: unset;
	}
	#arrows{
		display: none;
	}
	.maintitle{
		font-size: 46px;
	}
	.mailicon{
		font-size: 4rem;
		margin-top: 30px;
	}
	@supports (touch-action:manipulation){
		.manipulation{
		touch-action: auto;
		}
	}
	.push {
		height: 8rem;
	}
	footer {
		width: 100%;
		text-align: left;
		margin-bottom: 0.7rem;
		margin-right: 0.7rem;
		font-size: 0.7rem;
	}
}

/**style phone**/
@media only screen and (min-width: 330px) and (max-width: 621px){
	.body_header{
		width: 100%;
		text-align: left;
		margin-top: 30px;
		margin-bottom: 20px;
		height: min-content;
    	display: inline-flex;
    	font-size: 3rem;
		letter-spacing: -0.2rem;
		font-variation-settings: "wght" 96;
	}
	a.name{
		flex: max-content;
	}
	#divheader{
		width: 100%;
	}
	.menubuttons{
		display:flex;
		flex-wrap: wrap;
		margin-top: -0.45rem;
	}
	#menubutton{
		font-size: 5rem;
		margin-left: 1.3rem;
		margin-top: -13px;
		cursor: pointer;
		display: inline-flex;
		border: none;
		background-color: white;
	}
	.language{
		background-color: white;
		border: solid;
		border-width: 1px;
		font-family: inter;
		font-variation-settings: "wght" 96;
		font-size: 3rem;
		height: 70px;
		margin-left: 1.5rem;
		width: 71px;
	}
	.titelright{
		margin-bottom: 0px;
		overflow: visible;
		display: inline-block;
		width: 100%;
	}
	.titelr{
		font-style: italic;
		margin-top: 0.3rem;
		margin-bottom: 0;
	}
	.materialr{
		margin-top: 0;
		margin-bottom: 2rem;
	}
	#pcnav{
		display: none;
	}
	ul{
		margin-left: 0rem;
   		padding-left: 0px;
    	margin-right: 2rem;
    	margin-top: 0px;
	}
	main{
		margin-top: 5rem;
		margin-bottom: 2rem;
	}
	img {
		cursor: unset;
	}
	.maintitle{
		font-size: 46px;
	}
	@supports (touch-action:manipulation){
		.manipulation{
		touch-action: auto;
		}
	}
	#arrows{
		display: none;
	}
	.push {
		height: 8rem;
	}
	footer {
		width: 100%;
		text-align: left;
		margin-bottom: 0.7rem;
		margin-right: 0.7rem;
		font-size: 0.7rem;
	}
}
/*style tablet media*/
@media only screen and (min-width: 621px) and (max-width:1023px){
	.body_header{
		text-align: left;
		margin-top: 30px;
		margin-left: 20px;
		display: inline-flex;
		font-size: 3rem;
		letter-spacing: -0.2rem;
		font-variation-settings: "wght" 96;
		width: 95%;
	}
	img {
		cursor: unset;
	}
	/** links hoover effect**/
	a:hover{
    	color: #f69292;
    	cursor: cell;
    	font-family: inter;
    	font-style: normal;
    	font-weight: 100;
	}
	label{
		display: none;
	}
	.language{
		background-color: white;
		border: solid medium #6B6B6B;
		font-family: inter;
		font-variation-settings: "wght" 96;
		font-size: 3rem;
		margin-left: 1rem;
		margin-right: 0.3rem;
		margin-top: -1px;
		border-width: 1px;
		height: 60px;
	}
	.titelright{
		margin-bottom: 0px;
		overflow: visible;
		display: inline-block;
		text-align: right;
		width: 100%;
	}
	.titelr{
		font-style: italic;
		margin-top: 0.3rem;
		margin-bottom: 0;
	}
	.materialr{
		text-align: right;
		margin-top: 0;
		margin-bottom: 2rem;
	}
	#pcnav{
		display: block;
		padding-left: 20px;
	}
	a{
		color: #303030;
    	cursor: cell;
		font-family: inter;
		font-style: normal;
		font-weight: 100;
    	text-decoration-line: none;
	}
 /** end Link hover effect **/
	
	ul{
		list-style: none;
	}
	#arrows{
		display: none;
	}
	.slideright{
		float: right;
		margin-bottom: 2rem;
	}
	main{
		margin-top: 5rem;
		margin-left: 20px;
		margin-right: 40px;
		margin-bottom: 2rem;
	}
	footer {
		text-align: left;
		margin-bottom: 0.7rem;
		margin-right: 0.7rem;
		margin-left:20px;
		font-size: 0.7rem;
	}
}



/**style pc media **/
@media only screen and (min-width: 1023px){
	.start{
		height: 31px;
	}
	.start2{
		height: 24px;
	}
	.body_header{
		margin-top: 30px;
		margin-left:2.5rem;
		font-size: 3rem;
    	position: fixed;
		letter-spacing: -0.2rem;
		font-variation-settings: "wght" 96;
	}
	.language{
		background-color: white;
		font-size: 3rem;
		border: solid;
		border-width: 1px;
		display: block;
		height: 60px;
		margin-top: 2rem;
	}
	aside {
    	height: 50%;
		position: fixed;
		width: 50%;
	}
	main {
   		position:absolute;
		top: 0;
		right: 2rem;
    	left: 40rem;
		padding-bottom: 30px;
  	}
	.maintitle{
		font-size: 3.6vw;
	}
	.slideright {
		float: right;
		margin-bottom: 2rem;
		margin-right: 10px;
	}
	.sliderr {
		float: right;
		margin-right: 10px;
	}
	.titelright{
		margin-bottom: 0px;
		overflow: visible;
		display: inline-block;
		text-align: right;
		width: 100%;
	}
	.titelr{
		font-style: italic;
		margin-top: 0.6rem;
		margin-bottom: 0;
		margin-right: 10px;
	}
	.materialr{
		margin-top: 0;
		margin-bottom: 2rem;
		margin-right: 10px;
	}
	label{
		display: none;
	}
	#pcnav{
		display: block;
		margin-top: 12rem;	
	}
	footer{
    	position: fixed;
    	top: 96%;
		margin-left: 2.5rem;
		font-size: 0.8rem;
		display: block;
		background-color: white;
		height: 31px;
	}
	li{
    	font-style: normal;
    	font-weight: 400;
    	text-decoration: none;
		list-style: none;
		cursor: initial;
	}
	 .works_children{ 
		display: block;
		list-style: none;
	}
 
	

/** links hoover effect**/
	a:hover{
    	color: #f69292;
    	cursor: cell;
    	font-family: inter;
    	font-style: normal;
    	font-weight: 100;
	}
	a{
		color: #303030;
    	cursor: cell;
		font-family: inter;
		font-style: normal;
		font-weight: 100;
    	text-decoration-line: none;
	}
 /** end Link hover effect **/


/**imageslideshow**/
	#overlay{
		position:fixed;
		display: none;
		width: 100%;
		height:100%;
		top:0;
		left:0;
		bottom:0;
		background-color: rgba(0,0,0,0.8);
		z-index: 2;
	}
	#arrows{
		display: flex;
		justify-content: center;
	}
	.slide{
		top: 3%;
		position:absolute;
		height: 90%;
		width:auto;
		cursor: pointer;
		display: none;
	}

/** Pfeile bei Slideshow**/
	span{
		font-size: 70px;
		color: white;
		position:absolute;
		top: 50%;
		cursor: pointer;
	}
	span.next{
		content: "\27F6";
		right: 3rem;
	}
	span.previous {
		content: "\27F5";
		left: 3rem;
	}
}