:root {
	--blau: #5E82F1;
	--font-smaller:70%;
	--font-size:calc(10px + 0.7vw);
	--font-large:calc(15px + 10vw);
}


@font-face {
  font-family: 'Agrandir';
  src: url('../font/Agrandir-Medium.eot'); 
  src: url('../font/Agrandir-Medium.eot?#iefix') format('embedded-opentype'), 
       url('../font/Agrandir-Medium.woff2') format('woff2'),
       url('../font/Agrandir-Medium.woff') format('woff');
}


body {
	margin: 0;
	padding: 0;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	
	background-color:var(--blau);
	color:black;
	font-family:'Agrandir','Arial',sans-serif;
	
	font-size:calc(10px + 2vw);
	line-height:1.2;	
}

div,section,main,header{
	box-sizing: border-box;
}


h1,h2,h3,h4,h5,h6{
	font-size:100%;
	margin:0;
}
h1{
	padding-bottom:30px;
}
h2{
	padding-bottom:30px;
	color:white;
	font-size:var(--font-smaller);
	letter-spacing:0.03em;
	text-transform: uppercase;
}

h3{
	
}

a{
	text-decoration: none;
	color:inherit;
}
a:hover{
	
}
.arrow{
	display:inline-block;
	transform:scale(1.4);
	transform-origin: right center; 
}


/* ---------------------------------
	
	SEITE
	
-----------------------------------*/


header{
	position:fixed;
	left:0px;
	top:100vh;
	transform:rotate(-90deg);
	transform-origin:0 0;
	height:calc(40px + 2vw);
	line-height:calc(40px + 2vw);
	padding-top:0.2vw;
	width:100vh;
	text-align:center;
	border-bottom:1px solid black;
	
	animation: headerSlide 1s ease 0.3s backwards;
}
header div{
	animation: fadeIn 1s ease 1.3s backwards;
}
header span{
	color:white;
	animation: blackToWhite 0.5s ease 2s backwards;
}

main{
	padding-left:calc(70px + 4vw);
	padding-right:120px;
	max-width:2200px;
	width:100%;
}

table{
	width:100%;
}
table tr td{
	border-top:2px solid black;
	padding-top:0.5vw;
}
table tr td:first-child{
	padding-right:5%;
}
table tr td:nth-child(2){
	width:auto;
}
table tr td:nth-child(3){
	text-align:right;
}
table tr:last-child td{
	border-bottom:2px solid black;
}

.link-list a{
	display:flex;
	border-top:2px solid black;
	transition:all .1s ease;
	padding-top:0.3vw;
} 
.link-list .arrow{
	transition:all .1s ease;
} 
.link-list a:hover{
	/*opacity:.5;*/
} 
.link-list a:hover .arrow{
	margin-right:20px;
} 
.link-list a:last-child{
	border-bottom:2px solid black;
} 
.link-list a span:first-child{
	padding-right:5%;
} 

.link-list a span:nth-child(2){
	width:100%;
} 
.link-list a span:nth-child(3){
	text-align:right;
} 

	

section{
	padding-bottom:10vw;
	padding-top:10vw;
}


section.zweispaltig{
	display:flex;
}
.linke-spalte{
	width:20%;
}
.rechte-spalte{
	width:80%;
}


.intro{
	
	height:100vh;
	display:flex;
	align-items: center;
	padding-bottom:0px;
	padding-top:0px;
}


.intro-text{
	/*color:black;*/
	width:66%;
	font-size:var(--font-large);
	line-height:1;
	animation: fadeIn 1s ease 3s backwards;
}

.intro-bild{
	width:33%;
	animation: fadeIn 1s ease 3.2s backwards;
}
.intro-bild img{
	width:100%;
}


.infos p{
	/*text-indent:20%;*/
	position:relative;
	padding-bottom:5vw;
}
span.title{
	position:absolute;
	top:0;
	left:0;
	text-indent:0;
	color:white;
	font-size:var(--font-smaller);
	letter-spacing:0.02em;
	text-transform: uppercase;
}



a.download{
	border-top:2px solid white;
	border-bottom:2px solid white;
	text-align:center;
	display:inline-block;
	padding:0.2em 1.4em;
	padding-top:0.3em;
	transition:all 0.1s ease;
	color:white;
	font-size:var(--font-smaller);
	letter-spacing:0.03em;
}
a.download:hover{
	
	color:black;
	border-color:black;
}



#bildergallerie{
	margin-top:5vw;
	position: relative;
	height:56vw;
	padding-bottom:10vw;
}
#bildergallerie > div{
	position: absolute; 
	top: 0; 
	right: 0; 
	bottom: 0; 
}
#bildergallerie img{
	width:100%;
}




/* ---------------------------------
	
	ANIMATIONEN
	
-----------------------------------*/


@keyframes fadeIn {
	from {
		opacity:0;
	}
	to {
		opacity:1;
	}
}

@keyframes headerSlide{
	from {
		width:0vh;
		
	}
	to {
		width:100vh;
	}
}
@keyframes blackToWhite{
	from {
		color:black;
		
	}
	to {
		color:white;
	}
}




/* ---------------------------------
	
	RESPONSIVE
	
-----------------------------------*/





@media screen and (max-width: 1100px) {
	main{
		padding-right:60px;
	}
}

@media screen and (max-width: 800px) {
	.zweispaltig{
		flex-direction: column;
	}
	.linke-spalte{
		width:100%;
	}
	.rechte-spalte{
		width:100%;
	}
	span.title{
		display:block;
		width:100%;
		position:static;
		padding-bottom: 30px;
	}
	.infos p{
		text-indent:0;
	}
}


/* MOBILE */

@media screen and (max-width: 550px) {
	:root {
		--font-smaller:80%;
	}
	h2,span.title{
		letter-spacing:0.04em;
	}

	.intro{
		flex-direction:column;
		align-items: stretch;
		height:auto;
	}
	.intro-text{
		width:100%;
		padding:40px 0;
	}
	.intro-bild{
		width:100%;
	}
	main{
		padding-right:4vw;
		padding-left:calc(43px + 5vw);
	}
	header{
		font-size:26px;
		line-height:52px;
	}
	a.download{
		border-top-width:1px;
		border-bottom-width:1px;
	}
	table tr td,.link-list a{
		border-top-width:1px;
	}
	table tr:last-child td,.link-list a:last-child{
		border-bottom-width:1px;
	}
}