@charset "utf-8";

/************************************************************************************
 *	HTML/Body - Layout & Allgemein													*
 ***********************************************************************************/

body{
	font-family: Roboto-kt,Helvetica,Arial,sans-serif;
	font-size: 18px;
	font-weight: 300;
}

p{
	-moz-hyphens: auto;
	-o-hyphens: auto;
	-webkit-hyphens: auto;
	-ms-hyphens: auto;
	hyphens: auto; 
	word-wrap: break-word;
}


/************************************************************************************
 *	BEGA-Spalte																		*
 ***********************************************************************************/
 
body > main{
	position: absolute;
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
	background: #fff;
	overflow: hidden;
}

body > main > div.bega{
	position: absolute;
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 60%;
	background: #fff;
}

body > main > div.bega > div{
	position: absolute;
	top: 10%;
	left: 10%;
	right: 10%;
	line-height: 24px;
}


/************************************************************************************
 *	Seiten-Positionierung & Timeline												*
 ***********************************************************************************/

body > main > .page{
	position: absolute;
	top: 0px;
	bottom: 0px;
	width: 100%;
	background: #000;
	color: #fff;
}

body > main > #page-1{left: 40%;}
body > main > #page-2{left: 100%;}
body > main > #page-3{left: 200%;}
body > main > #page-4{left: 300%;}
body > main > #page-5{left: 400%;}
body > main > #page-6{left: 500%;}

body > main > .page .timeline{
	position: absolute;
	box-sizing: border-box;
	top: 50%;
	left: 0%;
	right: 0px;
	margin-top: -1px;
	height: 2px;
	background: #fff;
}

body > main > #page-1 .timeline{left: 50px;}
body > main > .page:not(#page-1) .timeline{padding-left: 30px;}

body > main > .page > .timeline > article > header > br + p,
body > main > .page > .timeline > article > main > p,
body > main > .page > .timeline > article > main > div > p:first-child{
	margin-top: 0px;
}


/************************************************************************************
 *	Artikel-Positionierung															*
 ***********************************************************************************/

body > main > .page > .timeline > article{
	box-sizing: border-box;
	position: absolute;
	height: 4px;
}

body > main > .page > .timeline > article > main{
	line-height: 24px;
}


/* Gestrichelte Linie nach Center-Artikeln */

body > main > .page > .timeline > article.center{
	min-width: 300px;
}

body > main > .page > .timeline > article.center::after{
	content: ' ';
	display: block;
	position: absolute;
	top: 0px;
	left: 0px;
	right: 0px;
	border-bottom: 2px dashed #000;
}


/* Artikel allgemein */

body > main > .page > .timeline > article.center > header{
	position: absolute;
	font-size: 26px;
	top: -120px;
}

body > main > .page > .timeline > article.center > main{
	position: absolute;
	top: 20px;
}

body > main > .page > .timeline > article.top,
body > main > .page > .timeline > article.bottom{
	height: 470px;
	border-left: 2px solid #fff;
	padding-left: 30px;	
}

body > main > .page > .timeline > article.top{
	top: -470px;
}

body > main > .page > .timeline > article.top > header,
body > main > .page > .timeline > article.bottom > header{
	font-size: 20px;
}

body > main > .page > .timeline > article.top > main,
body > main > .page > .timeline > article.bottom > main{
	position: relative;
	margin-top: 10px;
}

body > main > .page > .timeline > article > main > img + div.right{position: absolute; top: 0px;}
body > main > .page > .timeline > article > main > img + div.bottom{position: absolute; left: 0px;}



/* Seiten-Artikel */

/* Seite 1 */

/* Artikel 1.1 */

body > main > .page > .timeline > #article-1-1{
	left: 0px;
	width: 460px;
}


/* Article 1.2 */

body > main > .page > .timeline > #article-1-2{
	left: 490px;
	width: 300px;
}

body > main > .page > .timeline > #article-1-2 > header{
	height: 49px;
}


/* Article 1.3 */

body > main > .page > .timeline > #article-1-3{
	left: 520px;
	width: 500px;
}


/* Seite 2 */

/* Artikel 2.1 */

body > main > .page > .timeline > #article-2-1{
	left: 30px;
	width: 500px;
}

body > main > .page > .timeline > #article-2-1 > main > img + div{
	position: absolute;
	top: 0px;
	left: 250px;
	width: 220px;
}

/* Artikel 2.2 */

body > main > .page > .timeline > #article-2-2{
	left: 60px;
	width: 340px;
}

/* Artikel 2.3 */

body > main > .page > .timeline > #article-2-3{
	padding-top: 186px;
	left: 450px;
	width: 400px;
}

body > main > .page > .timeline > #article-2-3 > main > img + div{
	left: 250px;
	width: 200px;
}

/* Artikel 2.4 */

body > main > .page > .timeline > #article-2-4{
	left: 850px;
	width: 300px;
}

/* Artikel 2.5 */

body > main > .page > .timeline > #article-2-5{
	left: 1310px;
	width: 300px;
}

/* Artikel 2.6 */

body > main > .page > .timeline > #article-2-6{
	padding-top: 165px;
	left: 1440px;
	width: 300px;
}


/* Seite 3 */

/* Artikel 3.1 */

body > main > .page > .timeline > #article-3-1{
	width: 200px;
}

/* Artikel 3.2 */

body > main > .page > .timeline > #article-3-2{
	padding-top: 187px;
	left: 360px;
}

body > main > .page > .timeline > #article-3-2 > main > img + div{
	left: 247px;
	width: 236px;
}

/* Artikel 3.3 */

body > main > .page > .timeline > #article-3-3{
	left: 520px;
}

body > main > .page > .timeline > #article-3-3 > header{
	width: 230px;
}

body > main > .page > .timeline > #article-3-3 > main{
	width: 230px;
}

body > main > .page > .timeline > #article-3-3 > main > img + div{
	left: 250px;
	width: 340px;
}

/* Artikel 3.4 */

body > main > .page > .timeline > #article-3-4{
	padding-top: 187px;
	left: 960px;
}

/* Artikel 3.5 */

body > main > .page > .timeline > #article-3-5{
	padding-top: 187px;	
	left: 1300px;
}

body > main > .page > .timeline > #article-3-5 > main > img + div{
	width: 500px;
}

/* Artikel 3.6 */

body > main > .page > .timeline > #article-3-6{
	left: 1400px;
}

body > main > .page > .timeline > #article-3-6 > main > img + div{
	left: 247px;
	width: 200px;
}


/* Seite 4 */

/* Artikel 4.1 */

body > main > .page > .timeline > #article-4-1{
	width: 300px;
}

/* Artikel 4.2 */

body > main > .page > .timeline > #article-4-2{
	left: 360px;
}

body > main > .page > .timeline > #article-4-2 > header{
	width: 230px;
}

body > main > .page > .timeline > #article-4-2 > main{
	width: 230px;
}

/* Artikel 4.3 */

body > main > .page > .timeline > #article-4-3{
	left: 420px;
	padding-top: 165px;
}

/* Artikel 4.4 */

body > main > .page > .timeline > #article-4-4{
	left: 740px;
	width: 300px;
}

/* Artikel 4.5 */

body > main > .page > .timeline > #article-4-5{
	left: 1100px;
	padding-top: 173px;
	width: 300px;
}

body > main > .page > .timeline > #article-4-5 > header{
	width: 230px;
}

body > main > .page > .timeline > #article-4-5 > main{
	width: 230px;
}

/* Artikel 4.6 */

body > main > .page > .timeline > #article-4-6{
	left: 1160px;
}

body > main > .page > .timeline > #article-4-6 > main > img + div{
	left: 247px;
	width: 180px;
}

/* Artikel 4.7 */

body > main > .page > .timeline > #article-4-7{
	left: 1430px;
	padding-top: 167px;
}

body > main > .page > .timeline > #article-4-7 > main > img + div{
	width: 450px;
}


/* Seite 5 */

/* Artikel 5.1 */

body > main > .page > .timeline > #article-5-1{
	width: 300px;
}

/* Artikel 5.2 */

body > main > .page > .timeline > #article-5-2{
	left: 360px;
}

body > main > .page > .timeline > #article-5-2 > header{
	width: 230px;
}

body > main > .page > .timeline > #article-5-2 > main{
	width: 230px;
}

/* Artikel 5.3 */

body > main > .page > .timeline > #article-5-3{
	left: 520px;
	padding-top: 165px;
}

body > main > .page > .timeline > #article-5-3 > main > img + div{
	left: 360px;
	width: 300px;
}

/* Artikel 5.4 */

body > main > .page > .timeline > #article-5-4{
	left: 850px;
}

/* Artikel 5.5 */

body > main > .page > .timeline > #article-5-5{
	left: 1250px;
	width: 510px;
}


/* Seite 6 */

/* Artikel 6.1 */

body > main > .page > .timeline > #article-6-1{
	left: 30px;
	padding-top: 165px;
}

body > main > .page > .timeline > #article-6-1 > main > img + div{
	left: 269px;
	width: 220px;
}

/* Artikel 6.2 */

body > main > .page > .timeline > #article-6-2{
	left: 320px;
}

body > main > .page > .timeline > #article-6-2 > header{
	width: 230px;
}

body > main > .page > .timeline > #article-6-2 > main{
	width: 230px;
}

body > main > .page > .timeline > #article-6-2 > main > img + div{
	width: 200px;
	left: 247px;
}

/* Artikel 6.3 */

body > main > .page > .timeline > #article-6-3{
	left: 680px;
	padding-top: 157px;
}

/* Artikel 6.4 */

body > main > .page > .timeline > #article-6-4{
	left: 945px;
}

body > main > .page > .timeline > #article-6-4 > main > img + div{
	width: 360px;
	left: 247px;
}

/* Artikel 6.5 */

body > main > .page > .timeline > #article-6-5{
	padding-top: 155px;
	left: 1175px;
}

body > main > .page > .timeline > #article-6-5 > main > img + div{
	width: 280px;
	left: 269px;
}


/* Abschluß der Timeline */

body > main > .page:last-child > .timeline{
	right: 100px;
}

body > main > .page:last-child > .timeline::before{
	content: ' ';
	display: block;
	position: absolute;
	top: 0px;
	right: 0px;
	width: 140px;
	border-bottom: 4px dashed #000;
}

body > main > .page:last-child > .timeline::after{
	content: ' ';
	display: block;
	position: absolute;
	top: -8px;
	right: -30px;
	width: 0; 
	height: 0; 
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent;
	border-left: 30px solid #fff;
}


/************************************************************************************
 *	Fortschrittsbalken																*
 ***********************************************************************************/
 
.progress-line{
	box-sizing: border-box;
	display: block;
	position: absolute;
	bottom: 50px;
	height: 2px;
	left: 3%;
	width: 0'%';
	background: silver;
}

.hidden{
	display: none;
}