<html>
<head>

<style type="text/css">

html {
  scroll-behavior: smooth;
}

:root {

	--color_page:					#2A2F3A; /*#07090D;*/
	--color_page1:					#484C59;
	--color_page2:					#282c37;
	--color_background: 	#191e29;
    --color_pagecut:			#0C1018; /*#0B0E15;*/
	--color_pagecut_light:	#0C1018; /*#0B0E15;*/
		
	--color_text: 					#CDCDCD;
    --color_links: 					#48A1AF;
	--color_hover: 				#48A1AF;
	--color_line:						#CDCDCD;

	--color_accent: 				#B4BC31;   /* neon turquoise  */
    --color_accent_dark: 				#858B24;   /* neon turquoise  */
	    --color_accent_bright: 				#CCD357;   /* neon turquoise  */
	--color_accent1: 			#B4BC31;   /* Projekte: neon red */
	--color_accent2: 			#B4BC31;   /* Minds: neon green */
	--color_accent3: 			#B4BC31;  /* Skills: neon blue */
	--color_accent4: 			#B4BC31;  /* neon yellow */
		
	--pagewidth_max: 		1400px;	
}

body { 

	background: radial-gradient(var(--color_page1) 70%, var(--color_page2));
	background-size: 100% 100%;
	background-repeat:no-repeat;
	background-attachment:fixed; padding:0px;
			
	color:#000000;
	font-family: arial;
	font-size:11;
}

* { padding:0; margin:0; }
	
	p { margin-top: 1em; }
	
/* VERLINKTER TEXT */
	a: { text-decoration: none; color:var(--color_accent); }
	a:link { text-decoration: none; color:var(--color_accent); }
	a:visited { text-decoration: none; color:var(--color_accent); }
	a:hover { text-decoration: none; }	 


#link, #link_bottom {
	display: inline;
	/* font-family: roboto_condensed; */
	color: var(--color_accent);
	font-size: 1.06em;
	/*letter-spacing: 0.02em;*/
	font-weight: bold;
	text-decoration: underline;
	text-decoration-color: transparent; 
	transition: 0.6s;
}

#link_bottom { font-weight: normal; font-family: roboto_condensed; font-size: 0.9em; }

#link:hover, #link_bottom:hover  { text-decoration: underline; text-decoration-color: var(--color_line); transition: 0.4s; }



/* Eingebettete Schriftarten */

@font-face {
    font-family: 'roboto_condensed';
    src: url('fonts/RobotoCondensed-Regular-webfont.eot');
    src: url('fonts/RobotoCondensed-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/RobotoCondensed-Regular-webfont.woff2') format('woff2'),
         url('fonts/RobotoCondensed-Regular-webfont.woff') format('woff'),
         url('fonts/RobotoCondensed-Regular-webfont.ttf') format('truetype'),
         url('fonts/RobotoCondensed-Regular-webfont.svg#roboto_condensedregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'roboto_regular';
    src: url('fonts/Roboto-Regular-webfont.eot');
    src: url('fonts/Roboto-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/Roboto-Regular-webfont.woff2') format('woff2'),
         url('fonts/Roboto-Regular-webfont.woff') format('woff'),
         url('fonts/Roboto-Regular-webfont.ttf') format('truetype'),
         url('fonts/Roboto-Regular-webfont.svg#roboto_condensedregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'roboto_light';
    src: url('fonts/Roboto-Light-webfont.eot');
    src: url('fonts/Roboto-Light-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/Roboto-Light-webfont.woff2') format('woff2'),
         url('fonts/Roboto-Light-webfont.woff') format('woff'),
         url('fonts/Roboto-Light-webfont.ttf') format('truetype'),
         url('fonts/Roboto-Light-webfont.svg#roboto_condensedregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'roboto_light_italic';
    src: url('fonts/Roboto-LightItalic-webfont.eot');
    src: url('fonts/Roboto-LightItalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/Roboto-LightItalic-webfont.woff2') format('woff2'),
         url('fonts/Roboto-LightItalic-webfont.woff') format('woff'),
         url('fonts/Roboto-LightItalic-webfont.ttf') format('truetype'),
         url('fonts/Roboto-LightItalic-webfont.svg#roboto_condensedregular') format('svg');
}



/* Seitenpositionierung */
	#pageposition  { position: relative; margin-left: auto; margin-right: auto; width: 90%; max-width: var(--pagewidth_max);}
 	@media (max-width: 1279px) {	
		#pageposition  { position: relative; margin-left: auto; margin-right: auto; width: 100%; }
	}

/* iframe Untere Zeile Positionierung */
    #iframe_subline  { position: absolute; width:100%; height:250px; bottom:0; z-index:10;}

	
/* Hauptbereich mit Hintergrundgrafik */
    #mainarea  { position:absolute; display: inline-block; width:100%; left:0; top:40px; padding-top: -50px; margin-bottom: 100px; border-radius: 3em; z-index:3; background: var(--color_background); background-size: 100%;
	box-shadow: 0px 0px 5px 5px rgba(0,0,0,0.3); }
 	@media (max-width: 960px) {	
	#mainarea  { top:0px; padding-top: -50px; border-radius: 0em;}
	}
	
	
/* Bereich oben */

#pagecut_title { position:absolute; left:0; top:0; width: 360px; height: 82px; z-index:3;
 border-radius: 2em 0em 3em 0em; background-image: linear-gradient(170deg, var(--color_pagecut), var(--color_pagecut_light), var(--color_pagecut));  background-size: 100%; box-shadow: -2px -2px 2px 0.1px rgba(0,0,0,0.5) inset}


#pagecut_scrolldown_leftcorner { position:absolute; float: left; clear: both; left:0; top:0px; width: 3em; height: 3em; z-index:8;
 border-radius: 3em 0em 0em 0em; background:var(--color_pagecut); background-size: 100%; }
 
 #pagecut_scrolldown_left { position:sticky; float: left; left:0; top:0px; clear: both; width: 3em; height: 2em; z-index:8;
 background:var(--color_pagecut); background-size: 100%; }
 
 #pagecut_scrolldown_rightcorner { position:absolute; float:right; clear: both; right:0; top:0px; width: 3em; height: 3em; z-index:8;
 border-radius: 0em 3em 0em 0em; background:var(--color_pagecut); background-size: 100%; }
 
 #pagecut_scrolldown_right { position:sticky; float: right; right:0; top:0px; width: 3em; height: 2em; z-index:8;
 background:var(--color_pagecut); background-size: 100%; }
 
 
 	@media (max-width: 960px) {	
	 #pagecut_scrolldown_left  {  height: 1em;  }
	 #pagecut_scrolldown_right {  height: 1em; }
		 
	
	}


 
	#top_sticky { position: sticky; top: 0; z-index:12; }

	#top_title { position:absolute; left:0px; top:10px; width:330px; z-index:12;
	font-family: roboto_condensed; text-decoration: none; color:var(--color_accent); font-size:3em; text-align:right; }
	
	#top_subtitle { position:absolute; left:0px; top:50px; width:330px; z-index:12; 
	font-family: roboto_condensed; font-style: normal; text-decoration: none; color:var(--color_text); font-size:1.3em; letter-spacing: 0.03em; text-align:right; }
	
	
	#top_line  { position:absolute; left:250px; top:35px; width:23px; height:3px; z-index:5; border-bottom: solid 0px; border-color: var(--color_text);  }
	
	#pagecut_index_de { position: absolute; right:0; top:0; width: 460px; height: 58px; z-index:12;
	border-radius: 0em 2em 0em 3em; background-image: linear-gradient(10deg, var(--color_pagecut), var(--color_pagecut_light), var(--color_pagecut)); background-size: 100%; box-shadow: 2px -2px 2px 0.1px rgba(0,0,0,0.5) inset; }
	
     #index { position:absolute; right:30px; top:16px; width:510px; z-index:12; }	

     #index_link { position:relative; float:right; margin-left:24px; margin-right:0px; z-index:12;  
	font-family: roboto_condensed; font-style: normal; text-decoration: none; text-transform: uppercase; color:var(--color_text); font-size:1.8em; padding-left: 3px; padding-right: 3px; 
	background-image: linear-gradient(90deg, var(--color_text), var(--color_text), var(--color_text)); background-size: 0% 0px; background-position: center bottom; background-repeat: no-repeat;
	transition: 0.5s;
	}

    #index_link_active, #index_link:hover{ position:relative; float:right; margin-left:24px; margin-right:0px; z-index:12; 
	font-family: roboto_condensed; font-style: normal; text-decoration: none; text-transform: uppercase; color:var(--color_text); font-size:1.8em; padding-bottom: 3px; padding-left: 3px; padding-right: 3px;
	background-image: linear-gradient(90deg, var(--color_text), var(--color_text), var(--color_text)); background-size: 75% 2px; background-position: center bottom; background-repeat: no-repeat;
	transition: 0.3s; }
	
#index_link_active:hover::after, #index_link:hover::after {
	content: '';
	position: absolute;
	width: 120%;
	height: 40px;
	top: -60px;
	left: -10%;
	opacity: 0.7;
	display: inline;
	border-bottom: solid 4px var(--color_accent);
	filter: blur(0.5em);
	clip-path: polygon(-20% 10px, 120% 10px, 120% 100%, -20% 100%);
}
	
 #top_title:hover::after  {
    content: '';
	position: absolute;
    width: 90%;
    height: 40px;
    top: -52px;
    left: 10%;
    opacity: 1.0;
    display: inline;
    border-bottom: solid 2px var(--color_accent);
    filter: blur(0.4em);
    clip-path: polygon(-20% 10px, 120% 10px, 120% 100%, -20% 100%);
}
 
	
	#language_select { display: none; position:absolute; right:5px; top:-32px; width:100px; height: 30px; z-index:4;
	font-family: roboto_condensed; font-style: normal; text-decoration: none; color:var(--color_text); font-size:1.5em; text-align:center; }

	#language_select_line  { display: none; position:absolute; right:49px; top:22px; width:0px; height:10px; z-index:5; border-left: solid 2px; border-color: var(--color_text);  }



/* SCROLLER */

	#pagecut_scroller { position: fixed; right: calc(50% - 700px); bottom:165px; padding: 5px 0px 5px 5px; width: 12px; height: auto; z-index:12;
	border-radius: 1em 0em 0em 1em; background-image: linear-gradient(10deg, var(--color_pagecut), var(--color_pagecut_light), var(--color_pagecut)); background-size: 100%; box-shadow: 2px -2px 2px 0.1px rgba(0,0,0,0.5) inset; }
	#scroller_icon { display: inline-block; width: 20px; height: 20px; margin: 4px 0px 4px 3px; background-position: center; background-repeat: no-repeat; background-size: 85%; z-index:13; transition: 0.4s }
	#scroller_icon:hover { background-size: 100%; transform: translateX(5px) scale(1.2); transition: 0.2s }
 	
	#scroller_text { display: none; position: relative; left: 0; top: 0; font-family: roboto_condensed; font-style: normal; text-decoration: none; color:var(--color_text); font-size:1.3em; text-align:center; }
	#scroller_lookup { text-decoration: line-through solid 1.5px var(--color_accent); }
	
#scroller_icon:hover > #scroller_text {
	display: block;
	position: relative;
	left: 28px;
	top: 0;
	width: 20em;
	font-family: roboto_condensed;
	font-style: normal;
	text-decoration: none;
	color: var(--color_text);
	font-size: 1.3em;
	text-align: left;
}
	
	@media (max-width: 1750px) {	
		#scroller_icon:hover > #scroller_text { display: none; }
		}
	
	@media (max-width: 1572px) {	
	#pagecut_scroller { right: calc(5%); }
	}
	
	@media (max-width: 1279px) {	
	#pagecut_scroller { right: 0px; width: 30px; }
	}

	
	@media (max-width: 960px) {	
	#pagecut_scroller { position: absolute; right: 0; bottom:250px; padding: 5px 2.5% 5px 2.5%; width: 95%; height: 40px; text-align: center; z-index:12;
	border-radius: 0em 0em 0em 0em; background-image: none; box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.0) inset; }
	#scroller_icon { display: inline-block; width: 30px; height: 30px; margin: 0px 20px 0px 20px; background-position: center; background-repeat: no-repeat; background-size: contain; z-index:13; }
	
	#scroller_text { display: none; } 
	}


 	@media (max-width: 960px) {	
	
		#pagecut_title { position:absolute; left:0; top:0; width: 100%; height: 45px; z-index:3;
		border-radius: 0em 0em 0em 0em; background:var(--color_pagecut); background-size: 100%; box-shadow: -5px -5px 4px 0.1px rgba(0,0,0,0.0) inset; }
	
		#top_title { position:absolute; left:0px; top:2px; width:180px; z-index:10;
		font-family: roboto_condensed; text-decoration: none; color:var(--color_accent); font-size:1.8em; text-align:right; }
	
		#top_subtitle { position:absolute; left:0px; top:25px; width:180px; z-index:10; 
		font-family: roboto_condensed; font-style: normal; text-decoration: none; color:var(--color_text); font-size:1.2em; text-align:right; }
	
		#top_line  { position:absolute; left:250px; top:35px; width:23px; height:3px; z-index:5; border-bottom: solid 0px; border-color: var(--color_text);  }
		
		#pagecut_index_de { display: none;  }
	
		#index { display: none;  }	

		#index_link { display: none; }	
	
		#language_select {  display: none; position:absolute; right:70px; top:12px; width:100px; height: 30px; z-index:4;
		font-family: roboto_condensed; font-style: normal; text-decoration: none; color:var(--color_text); font-size:1.3em; text-align:center;  }

		#language_select_line  { display: none; position:absolute; right:49px; top:-12px; width:0px; height:12px; z-index:5; border-left: solid 2px; border-color: var(--color_text); }
				
	}
		
		
/* Dropdown Menu */

	#burgermenu {	position:absolute; right:10px; top:5px; z-index: 7; }
 	@media (min-width: 960px) {	#burgermenu { display: none; }	}
	
.dropbtn { display: none;}

.dropdown { width: 35px; height: 35px; background-image: url(graphics/menu_button1.svg); background-size: 100%; border: none; }

.dropdown-content { display: none; position: absolute; right: -12px; top: 35px; background-color: #0C1018E0; width: 100vw;  z-index: 10;}

.dropdown-content a { color: var(--color_text); padding: 20px 30px; display: block;
text-transform: uppercase; font-family: roboto_condensed; font-style: normal; text-decoration: none; color:var(--color_text); font-size:2.6em; text-align:right; }

.dropdown-content a:hover { }

.dropdown:hover .dropdown-content { display: block; }

.dropdown:hover .dropbtn { background: none; }



/* BEREICH UNTEN */

#pagecut_bottomleft { position: absolute; left:0; bottom:0; width: 450px; height: 85px; z-index:2;
border-radius: 0em 3em 0em 2em; background-image: linear-gradient(170deg, var(--color_pagecut), var(--color_pagecut_light), var(--color_pagecut)); background-size: 100%; 
box-shadow: -2px 2px 2px 0.1px rgba(0,0,0,0.5) inset; }

#pagecut_bottomright { position: absolute; right:0; bottom:0; width: 408px; height: 47px; z-index:2;
border-radius: 3em 0em 2em 0em; background-image: linear-gradient(170deg, var(--color_pagecut), var(--color_pagecut_light), var(--color_pagecut)); background-size: 100%; 
box-shadow: 2px 2px 2px 0.1px rgba(0,0,0,0.5) inset; }

 	@media (max-width: 960px) {	
	#pagecut_bottomleft { position: absolute; left:0; bottom:0; width: 100%; height: 260px;
	border-radius: 0em 0em 0em 0em; 
	box-shadow: -2px 2px 2px 0.1px rgba(0,0,0,0.0) inset; }

	#pagecut_bottomright { display: none; }
	}

	
		 
/* INTRO PAGE */

	#intro_background  { display: inline-block; clear: both; width:100%; height:830px; z-index:5; margin-top:-55px; margin-bottom: 0px;
	background-size: cover; background-repeat: no-repeat; background-position: center;
	animation: none;
	clip-path: polygon(0 -5%, 5% 0%, 100% 0%, 100% 100%, 0% 100% );	
    border-radius: 4em 2em 2em 2em; }


#intro_pagecut_title { position:absolute; left:0; top:0; width: 540px; height: 123px; z-index:3;
 border-radius: 2em 0em 3em 0em; background-image: linear-gradient(170deg, var(--color_pagecut), var(--color_pagecut_light), var(--color_pagecut));  background-size: 100%; box-shadow: -3px -3px 3px 0.2px rgba(0,0,0,0.5) inset }

	#intro_top_title { position:absolute; left:0px; top:15px; width:495px; z-index:12;
	font-family: roboto_condensed; text-decoration: none; color:var(--color_accent); font-size:4.5em; text-align:right; }
	
	#intro_top_subtitle { position:absolute; left:0px; top:75px; width:495px; z-index:12; 
	font-family: roboto_condensed; font-style: normal; text-decoration: none; color:var(--color_text); font-size:1.95em; letter-spacing: 0.03em; text-align:right; }

#intro_overlay { position: absolute; left: 0; top: 350px; width: 100%; height: 480px;
background-color: var(--color_pagecut); background-blend-mode: multiply; opacity: 0.9; border-radius: 0em 0em 2em 2em; }

	#intro_content { position: absolute; left: 0; top: 350px; width: 100%; height: 480px; }


#intro_icon_description { display: inline-block; width: auto; height: 103px; margin-right: 32px;
 font-family: roboto_condensed; font-style: normal; text-decoration: none; color:var(--color_accent); font-size:1.1em; letter-spacing: 0.03em; text-align:center; text-transform: uppercase; 
 background-image: linear-gradient(90deg, var(--color_text), var(--color_text), var(--color_text)); background-size: 0% 0px; background-position: center bottom; background-repeat: no-repeat;
	transition: 0.5s;
 }

#intro_icon_description:hover { background-image: linear-gradient(90deg, var(--color_text), var(--color_text), var(--color_text)); background-size: 75% 2px; background-position: center bottom; background-repeat: no-repeat; transition: 0.3s; }
	
#intro_icon { display: inline-block; width: 60px; height: 60px; margin-bottom: 15px; text-decoration: none; background-position: center bottom; background-repeat: no-repeat; background-size: 85%; transition: 0.5s; }

#intro_icon_description:hover #intro_icon { background-size: 100%; transition: 0.3s;}

#intro_project { position: absolute; right: -15px; top: 150px; width: 530px; height: 180px; box-shadow: 0px 0px 8px 8px rgba(0,0,0,0.3);  }
#intro_project_title { position: absolute;  right:0px; top:43px; width:45%; z-index:12; 
font-family: roboto_condensed; text-decoration: none; color:var(--color_accent); font-size:2.5em; text-align:left; text-transform: uppercase; }

 	@media (max-width: 960px) {	
	
		#intro_pagecut_title { position:absolute; left:0; top:0; width: 100%; height: 70px; z-index:3;
		border-radius: 0em 0em 0em 0em; background:var(--color_pagecut); background-size: 100%; box-shadow: -5px -5px 4px 0.1px rgba(0,0,0,0.0) inset; }
	
		#intro_top_title { position:absolute; left:0px; top:10px; width:220px; z-index:10;
		font-family: roboto_condensed; text-decoration: none; color:var(--color_accent); font-size:2.2em; text-align:right; }
	
		#intro_top_subtitle { position:absolute; left:0px; top:38px; width:220px; z-index:10; 
		font-family: roboto_condensed; font-style: normal; text-decoration: none; color:var(--color_text); font-size:1.3em; text-align:right; }
	
		#intro_background  { display: inline-block; clear: both; width:100%; height: 30hw; z-index:5; margin-top:0px; margin-bottom: 0px;
	background-size: contain; background-repeat: no-repeat; background-position: top right;
	animation: none;
	clip-path: polygon(0 -5%, 5% 0%, 100% 0%, 100% 100%, 0% 100% );	
    border-radius: 0em 0em 0em 0em; }
	
		#intro_content { position: static; display: inline-block; left: 0; top: 350px; width: 100%; height: 100hw; }
		
		#intro_project { position: static; display: inline-block; width: 395px; height: 452px; box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.0);  }
	}



/* TEASERFADER */

#element_teaserfader {display: inline-block; clear: both; width:100%; height:25vw; z-index:8; margin-left: 0em; margin-top:-6em; margin-bottom: 30px; }
	@media (max-width: 1279px) {	
	#element_teaserfader { visibility: hidden; height: 100px;}
	}
	
	#element_teaserfader figure {
	position: absolute; left: 0px; top: 0px; margin: 0px; height: 25vw; width:100%; z-index: 5; background-size: cover; background-repeat: no-repeat; background-position: center; 
	z-index: 2;
	animation: wechseln calc(5s * 3) infinite;
	border-radius: 4em 4em 0em 0em;
	}

	/*
	#element_teaserfader:hover figure { animation-play-state: paused;	}
	*/

	#element_teaserfader figure:last-of-type { position: absolute; }

	#element_teaserfader > figure figcaption {
	position: absolute; left: 0em; top: 0em;  width: 100%; height: 25vw; padding: calc(25vw - 80px) 15% 0vw 15%; box-sizing: border-box; z-index: 3;
	background-repeat: no-repeat; background-size: 100% auto; background-position: 0 20.8vw; background-color: var(--color_pagecut); background-blend-mode: overlay; opacity: 0.9;
	clip-path: polygon(0% calc(100% - 100px), 100% calc(100% - 100px), 100% 100%, 0% 100%);
	font-family: roboto_condensed; text-decoration: none; text-transform: uppercase; letter-spacing: 0.0em; color:var(--color_accent); font-size: 2.5em; }
	
#teaserfader_line { display: inline-block; float: left; clear: both; width: 20%; border-bottom: solid 2px; margin-left: -21.3%; margin-top: 1.3em; border-color: var(--color_text); }
#teaserfader_description { display: inline-block; float: left; clear: both; margin-top: -0.1em; 
   font-family: roboto_light; text-decoration: none; color:var(--color_text); text-transform: none; letter-spacing: 0.0em; font-size: 0.6em; line-height: 1.5em; }

@keyframes wechseln {
	0% 			{opacity: 0; z-index:2;  }
	20% 		{opacity: 1; z-index: 2; }
	40% 		{opacity: 1; z-index: 2; }
	60% 		{opacity: 0; z-index: 1;  }
	100% 	{opacity: 0; z-index: 1; }
}

	#element_teaserfader figure:nth-of-type(2) { animation-delay: 5s; opacity: 0; z-index: 1; }
	#element_teaserfader figure:nth-of-type(3) { animation-delay: 10s; opacity: 0; z-index: 1; }


/* ELEMENTS */

	#element_teaserpic  { display: inline-block; clear: both; width:100%; height:380px; min-height: 300px; z-index:5; margin-top:-5em; margin-bottom: 30px;
	background-size: cover; background-repeat: no-repeat; background-position: center;
	animation: teaserpic 12s;
	clip-path: polygon(0 -5%, 5% 0%, 95% 0%, 100% 5%, 100% 100%, 0% 100% );	
    border-radius: 4em 4em 0em 0em; }
	
	@keyframes teaserpic {
	0% { background-size: 115%; filter: blur(0.15em);  }
	100% { background-size: 100%; filter: blur(0.00em);  }
	}
	
@media (max-width: 960px) {	
		#element_teaserpic  { margin-top:0px; height: 250px; min-height: 250px; border-radius: 0em 0em 0em 0em; animation: none; clip-path: none;}
	}
	
	#pagecut_scrolldown_space  { position: sticky; top: 0px; width:100%; height:40px; z-index:7; background: var(--color_background);  }


#element_bottompic  { display: inline-block; clear: both; width:100%; z-index:2; margin-top:30px; margin-bottom: 0px;
background-size: cover; background-repeat: no-repeat; background-position: center; border-radius: 0em 0em 4em 4em; }



/* TITLE */
	
	#element_title { display: inline-block; clear: both; width: 75%; margin-left: 15%; margin-right: 10%; margin-top: 10px; 
	font-family: roboto_condensed; text-decoration: none; text-transform: uppercase; letter-spacing: 0.0em; color:var(--color_accent); font-size: 3.5em; }
   #element_titleline { display: inline-block; float: left; clear: both; width: calc(15% - 8px); border-bottom: solid 2px; margin-right: 85%; border-color: var(--color_text); }
	#element_titledescription {  display: inline-block;  clear: both;  width: 75%; margin-left: 15%; margin-right: 10%; margin-top: 0px; margin-bottom: 30px; 
	font-family: roboto_light; text-decoration: none; color:var(--color_text); text-transform: none; letter-spacing: 0.0em; font-size: 1.8em; line-height: 1.5em; }	
	
@media (max-width: 700px) {	
	#element_title { font-size: 2.5em; }
	#element_titledescription {  font-size: 1.6em; }
}

/* GALLERY */	

#element_gallery { display: inline-block; text-align: center; width: 100%; margin: 30px auto 30px auto; z-index: 4;}

	#image_landscape	 			{  display: inline-block; margin: 0.5%; width: calc(var(--pagewidth_max) * 0.74); height: calc(var(--pagewidth_max) * 0.75 * 0.74); background-repeat: no-repeat; background-size: cover; background-position: center; z-index: 3; }	
	#image_portrait	 				{ display: inline-block; margin: 0.5%; width: calc(var(--pagewidth_max) * 0.74);  height: calc(var(--pagewidth_max) * 1.33 * 0.74);  background-repeat: no-repeat; background-size: cover; background-position: center; z-index: 3; }	
	#image_portrait_small 			{ display: inline-block; margin: 0.5%; width: calc(var(--pagewidth_max) * 0.365);  height: calc(var(--pagewidth_max) * 1.33 * 0.365); background-repeat: no-repeat; background-size: cover; background-position: center; z-index: 3; }
	#image_landscape_small 			{ display: inline-block; margin: 0.5%; width: calc(var(--pagewidth_max) * 0.365); height: calc(var(--pagewidth_max) * 0.75 * 0.365); background-repeat: no-repeat; background-size: cover; background-position: center; z-index: 3; }

@media (max-width: 1061px) {		
	#image_landscape	 			{ margin: 2.5%; width: 90vw; height: 60vw; float: left; clear: both; }	
	#image_portrait	 				{ margin: 2.5%; width: 90vw; height: 135vw; float: left; clear: both; }	
	#image_portrait_small			{ margin: 2.5%; width: 90vw; height: 135vw; float: left; clear: both;  }
	#image_landscape_small 			{ margin: 2.5%; width: 90vw; height: 60vw; float: left; clear: both;  }
	}
	
	
	
/* TEXT ELEMENTS */

	#element_subtitle_r { display: inline-block; float: right; clear: both; width: 31%; margin-left: 4%; margin-right: 15%; margin-top: 50px;
	font-family: roboto_condensed; text-decoration: none; color:var(--color_accent); text-transform: uppercase; letter-spacing: 0.0em; font-size: 2.2em; line-height: 1.5em; }
@media (max-width: 960px) {	#element_subtitle_r { width: 90%; text-align: left; margin-left:15%; margin-right: 0px; float: left;} }

	#element_subtitle { display: inline-block; float: left; clear: both; width: 31%; margin-left: 15%; margin-top: 50px;
	font-family: roboto_condensed; text-decoration: none; color:var(--color_accent); text-transform: uppercase; letter-spacing: 0.0em; font-size: 2.2em; line-height: 1.5em; }
@media (max-width: 960px) {	#element_subtitle { width: 80%; text-align: left; margin-left:15%} }

    #element_description {  display: block;  position: relative; float: left; clear: both;  width: auto; margin-left: 15%; margin-right: 35%; margin-top: 50px; margin-bottom: 30px; 
	font-family: roboto_light; text-decoration: none; text-align: left; color:var(--color_text); text-transform: none; letter-spacing: 0.0em; font-size: 1.3em; line-height: 1.3em; }	

    #element_text_r {  display: block; position: relative; float: right; clear: right; width: 29.0%; margin: 30px 15% 50px 6%; background-color: none; z-index: 3;
	font-family: roboto_light; text-decoration: none; text-align: left; color:var(--color_text); text-transform: none; letter-spacing: 0.0em; font-size: 1.3em; line-height: 1.3em; }	
	
	#element_text_l {  display: block; position: relative; float: left; clear: left; width: 29.0%; margin: 30px 6% 50px 15%; background-color:none; z-index: 3;
	font-family: roboto_light; text-decoration: none; text-align: left; color:var(--color_text); text-transform: none; letter-spacing: 0.0em; font-size: 1.3em; line-height: 1.3em; }	
	
	#element_text_welcome {  display: block; position: relative; float: left; clear: left; width: 60.0%; margin: 30px 4% 50px 15%; background-color:none; z-index: 3;
	font-family: roboto_light_italic; text-decoration: none; text-align: left; color:var(--color_text); text-transform: none; letter-spacing: 0.01em; font-size: 1.8em; line-height: 1.4em; }	
	
	#element_text_subtitle { font-family: roboto_condensed; text-align: left; margin-bottom: 30px; text-decoration: none; color:var(--color_accent); text-transform: uppercase; letter-spacing: 0.0em; font-size: 1.5em; }
	
#element_text_subtitle_double {
	display: block;
	position: relative;
	float: left;
	clear: left;
	width: 70.0%;
	margin: 30px 4% 0px 15%;
	z-index: 3;
	font-family: roboto_condensed;
	text-align: left;
	color: var(--color_accent);
	text-transform: uppercase;
	font-size: 1.7em;
	line-height: 1.5em;
}
	
	
	 @media (max-width: 1023px) {	
 
	#element_text_subtitle_double { margin: 30px 2.5% 20px 2.5%; width: 95.0%; }
 
	}


	#element_img_r {  display: block; float: right; clear: right; width: 46%; height: auto; margin: 30px 0 30px 0; border-radius: 1em 0em 0em 1em; }	
	#element_img_l {  display: block; float: left; clear: left; width: 46%; height: auto; margin: 30px 0 30px 0; border-radius: 0em 1em 1em 0em; }	
	#element_img_r_nogap {  display: block; float: right; clear: right; width: 50%; height: auto; margin: 30px 0 30px 0; border-radius: 1em 0em 0em 1em; }	
	#element_img_l_nogap {  display: block; float: left; clear: left; width: 50%; height: auto; margin: 30px 0 30px 0; border-radius: 0em 1em 1em 0em; }
	#element_graphic_r {  display: block; float: right; clear: right; width: 36%; height: auto; margin: 30px 10% 30px 0; }	
	#element_graphic_l {  display: block; float: left; clear: left; width: 36%; height: auto; margin: 30px 0 30px 10%;  }	
	#element_graphic_r_nogap {  display: block; float: right; clear: right; width: 45%; height: auto; margin: 30px 5% 30px 0; }	
	#element_graphic_l_nogap {  display: block; float: left; clear: left; width: 45%; height: auto; margin: 30px 0 30px 5%;  }	
	
	
	
	#spacer_img { display: block; width:46%; height: 2vw; }

	#text_marker { display: inline; color: var(--color_accent); font-weight: bold; }
	#element_text_r:hover #text_marker {  }
	#element_text_l:hover #text_marker {  }

@media (max-width: 1023px) {	
    #element_description {  margin-right: 15%; margin-left: 15%; text-align: justify;}
	#element_text_r, #element_text_l, #element_text_welcome{  clear: both; width: 70%; margin: 30px 15% 30px 15%; }	
	
	#element_img_r, #element_graphic_r {  display: block; float: right; clear: both; width: 70%; height: auto; margin: 30px 15% 30px 15%; border-radius: 0em; }	
	#element_img_l, #element_graphic_l  {  display: block; float: left; clear: both; width: 70%;  height: auto;  margin: 30px 15% 30px 15%; border-radius: 0em; }	
	#element_img_r_nogap, #element_graphic_r_nogap {  display: block; float: right; clear: both; width: 70%; height: auto; margin: 15px 15% 15px 15%; border-radius: 0em; }	
	#element_img_l_nogap, #element_graphic_l_nogap {  display: block; float: left; clear: both; width: 70%;  height: auto;  margin: 15px 15% 15px 15%;	border-radius: 0em; }	
	
	#spacer_img { display: none; }
}

@media (max-width: 599px) {	
    #element_description {  margin-right: 2.5%; margin-left: 2.5%; text-align: justify;}
	
		#element_graphic_r_nogap,  #element_graphic_l_nogap, #element_graphic_r,  #element_graphic_l, 	#element_img_r,  #element_img_l, #element_img_r_nogap, #element_img_l_nogap { clear: both; width: 100%; height: auto; margin: 20px 0; border-radius: 0em; }	
		
		#element_text_l, #element_text_r { clear: both; width: 95%; height: auto; margin: 7px 2.5%; text-align: justify; font-size: 1.15em; border-radius: 0em; }	
	
	#spacer_img { display: none; }
}


#element_centergraphic { display: inline-block; clear: both; width: 70%; height: 80vh; margin: 0px 15% 0px 15%; z-index: 4;
	background-size: contain; background-repeat: no-repeat; background-position: center;  }
@media (max-width: 599px) {	
#element_centergraphic { width: 95%; height: 90vh; margin: 0px 2.5% 0px 2.5%; }
	}


/* CENTERED TEXT ON DARK WITH FLOATING BACKGROUND */

#element_centerdark { display:inline-block; position: relative; width:80%; margin-top: 50px; margin-bottom: 50px; text-align: center;  padding: 50px 10% 30px 10%; 
	background-color: var(--color_pagecut);
	font-family: roboto_light; text-align: center; text-decoration: none; color:var(--color_text); text-transform: none; letter-spacing: 0.0em; font-size: 1.3em; line-height: 1.3em;  } 

#element_centerdark_background {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 2;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	background-attachment: fixed;
	mix-blend-mode: luminosity;
	filter: grayscale(1) brightness(0.25) invert(0);
	opacity: 1;
}

#element_centerdark_title { position: relative; margin-top: 0px; margin-bottom: 30px; z-index:5; padding: 0 5vw 0 5vw; 
	font-family: roboto_condensed; text-decoration: none; color:var(--color_accent); text-transform: uppercase; letter-spacing: 0.0em; font-size: 1.8em; line-height: 1.5em;	}	
#element_centerdark_description { position: relative; margin-top: 0px; margin-bottom: 30px; padding: 0 8vw 0 8vw; z-index:5;
	font-family: roboto_light; text-decoration: none; color:var(--color_text); text-transform: none; letter-spacing: 0.0em; font-size: 1.0em; line-height: 1.5em;	}	

#element_centerdark_icon {  
	width: 160px;
	height: 160px;
	background-size: contain;
	background-repeat: no-repeat;
	background-image: url(graphics/icon_cv.png);
	z-index: 5;
	position: relative;
	margin: 0 auto;
}



@media (max-width: 599px) {	
#element_centerdark_title { font-size: 1.8em; line-height: 1.5em; padding: 0 2vw 0 2vw; }
}


/* LIST */

#element_list {
	display: inline-block;
	margin-top: 50px;
	margin-bottom: 50px;
	padding: 30px 5% 50px 5%;
	background-color: var(--color_pagecut);
	font-family: roboto_light;
	text-align: center;
	color: var(--color_text);
	font-size: 1.4em;
	line-height: 1.5em;
	clear: both;
	width: 90%;
}
				
	#element_list_title { position: relative; margin-top: 0px; margin-bottom: 10px; z-index: 7;
	font-family: roboto_condensed; text-align: center; text-decoration: none; color:var(--color_accent); text-transform: uppercase; letter-spacing: 0.0em; font-size: 1.8em; line-height: 1.5em;	}	
				
	#element_list_double { display: inline-block; position: relative; width: 45%; min-width: 350px; max-width: 450px; margin-left: 0px; margin-right: 0px; z-index: 5;
	font-family: roboto_condensed; text-align: center; text-decoration: none; color:var(--color_text); text-transform: none; vertical-align: top; letter-spacing: 0.0em; font-size: 1.2em; line-height: 1.4em; }	
	
	#list_arrow { display: inline-block; width: 1em; height: 1em; margin-right: 0.5em; margin-bottom: -0.1em; background-image: url(graphics/forward.svg); background-size: contain; background-repeat: no-repeat; }


/* ICONS AND TEXT */

    #element_icontext {  display: inline-block; text-align: center;  width: 96%; margin-top: 50px; margin-bottom: 50px; padding: 50px 2% 0px 2%; background-color: var(--color_pagecut); }	
	#element_icontext_frame { display: inline-block; width: 280px; text-align: center; vertical-align: top; margin: 20px 25px 35px 25px; }	
	#element_icontext_title { display:inline-block; width: 100%; margin-top: 0px; margin-bottom: 40px;
		font-family: roboto_condensed; text-align: center; text-decoration: none; color:var(--color_accent); text-transform: uppercase; letter-spacing: 0.0em; font-size: 2.5em; line-height: 1.5em; }	
	#element_icontext_subtitle { position: relative; margin-top: 0px; margin-bottom: 30px; padding: 0 8vw 0 8vw; z-index:5;
	font-family: roboto_light; text-decoration: none; color:var(--color_text); text-transform: none; letter-spacing: 0.0em; font-size: 1.3em; line-height: 1.3em;	}	
	
	#element_icontext_icon { display:inline-block; width: 200px; height:200px; border-radius: 1em; background-size: cover; background-repeat: no-repeat; background-position: center;  }
	#element_icontext_icontitle { display:inline-block; width: 100%; margin-top: 0.618em;
		font-family: roboto_condensed; text-align: center; color:var(--color_accent); text-transform: uppercase; letter-spacing: 0.0em; font-size: 1.6em; line-height: 1.5em;}
	#element_icontext_description { display:inline-block; width: 100%; margin-top: 10px; margin-bottom: 30px;
		font-family: roboto_light; text-decoration: none; color:var(--color_text); text-transform: none; letter-spacing: 0.0em; font-size: 1.3em; line-height: 1.3em; }	
	
	#element_icontext_arrow_r { display: inline-block; width: 40px; height: 150px; text-align: center; vertical-align: top; margin: 50px -25px 35px -10px;
		background-color: var(--color_line); clip-path: polygon(0% 0%, 5% 0%, 100% 50%, 5% 100%, 0% 100%, 80% 50%)  }
	#element_icontext_arrow_l { display: inline-block; width: 40px; height: 150px; text-align: center; vertical-align: top; margin: 50px -10px 35px -25px;
		background-color: var(--color_line); clip-path: polygon(100% 0%, 95% 0%, 0% 50%, 95% 100%, 100% 100%, 20% 50%)  }
			
	@media (max-width: 1079px) { #element_icontext_arrow_r, #element_icontext_arrow_l { display: none }	}
	
	@media (max-width: 700px) { 
	#element_icontext_arrow_r { display: inline-block; width: 60%; height: 40px; margin: 30px 20% 30px 20%; clip-path: polygon(0% 0%, 50% 80%, 100% 0%, 100% 5%, 50% 100%, 0% 5%); }
	#element_icontext_arrow_l { display: inline-block; width: 60%; height: 40px; margin: 30px 20% 30px 20%; clip-path: polygon(0% 95%, 50% 0%, 100% 95%, 95% 100%, 50% 20%, 0% 100%)  }
	#element_icontext_description { font-size: 1.15em; }
	#element_icontext_frame { margin: 15px 25px 15px 25px; }
			}


/* FULLPIC */

	#element_fullpic { display: inline-block; clear: both; width:100%; height:auto; z-index:5; margin-top: 50px; margin-bottom: 50px; }

	#element_fullpic_aligned { display: block; clear: both; width: 70%; height:auto; z-index:5; margin: 50px auto; }

	#element_fullpic_slide  { display: inline-block; clear: both; width:100%; height:400px; z-index:2; margin-top: 50px; margin-bottom: 50px;
	background-size: 1400px; background-repeat: no-repeat; background-position: center; background-attachment: fixed; }

	@media (max-width: 799px) { 

		#element_fullpic_slide  { display: inline-block; clear: both; width:100%; height:250px; z-index:2; margin-top: 50px; margin-bottom: 50px;
		background-size: cover; background-repeat: no-repeat; background-position: center; background-attachment: scroll; }
		
		#element_fullpic_aligned { display: inline-block; clear: both; width: 100%; height:auto; z-index:5; margin: 50px 0; }
		}	



/* QUOTES */

    #element_quote {  display: block; margin-top: 50px; margin-bottom: 50px; padding: 30px 15% 40px 15%; clear: both; background-color: var(--color_pagecut);
	font-family: roboto_condensed; text-align: center; text-decoration: none; color:var(--color_accent); text-transform: uppercase; letter-spacing: 0.0em; font-size: 1.8em; line-height: 1.6em;	}
				
	#element_quote_author { margin: 20px 5% 20px 5%; 
	font-family: roboto_light; text-align: center; text-decoration: none; color:var(--color_text); text-transform: none; letter-spacing: 0.0em; font-size: 0.7em; line-height: 1.5em; }



/* PROJECT INFO */

    #element_projectinfo {  display: inline-block;  width: 75%; margin-top: 50px; margin-bottom: 50px; padding: 5px 10% 40px 15%; z-index: 4; background-color: var(--color_pagecut);
	font-family: roboto_light; text-align: left; text-decoration: none; color:var(--color_text); text-transform: none; letter-spacing: 0.0em; font-size: 1.3em; line-height: 1.3em; }	

	#element_projectinfo_icon { display:inline-block; float:left; margin: 25px 50px 25px -100px; width: 200px; height: 230px; z-index: 5;
	background-size: contain; background-repeat: no-repeat; background-position: center top;	opacity: 0.5; }
			
	#element_projectinfo_logo { display:inline-block; float:right; width: 200px; height: 45px; margin-left: 30px; margin-bottom: 30px; z-index: 5;
	background-size: contain; background-repeat: no-repeat; background-position: center;	 }
				
		@media (max-width: 960px) {	
		#element_projectinfo { width: 90%; padding: 5px 5% 40px 5%; text-align: center;  }
		#element_projectinfo_icon { margin: 30px auto 10px auto; width: 60%; max-width: 200px; clear: both; float: none; background-position: center;	 }
		#element_projectinfo_logo { margin: 20px auto 40px auto; width: 60%; max-width: 200px; clear: both; float: none;}
		}

	#projectinfo_block { display: inline-block; width: 75%; }
	#projectinfo_toolframe { display:inline-block; width: 180px; text-align: center; vertical-align: top; margin: 20px 0px 15px 0px; z-index: 6; }
	#projectinfo_toolicon { display:inline-block; width: 70px; height:50px; background-size: contain; background-repeat: no-repeat; background-position: center; }
	#projectinfo_tooltitle { display:inline-block; width: 100%; margin-top: 10px; text-align: center;
	font-family: roboto_condensed; color:var(--color_accent); text-transform: uppercase; letter-spacing: 0.0em; font-size: 1.1em; line-height: 1.5em;}
	#projectinfo_tooldescripton { display:inline-block; width: 100%; margin-top: 0px; text-align: center;
	font-family: roboto_light; text-decoration: none; color:var(--color_text); text-transform: none; letter-spacing: 0.0em; font-size: 1.0em; line-height: 1.5em;  }


		@media (max-width: 960px) {	
		#projectinfo_block { display: inline-block; width: 100%; }
		}
		

/* CHAPTERPIC */

#chapterpic { display: inline-block; width: 100%; height: 600px; margin-top: 50px; margin-bottom: 50px; background-position: center; background-size: 1400px; background-repeat: no-repeat; background-attachment: fixed; }

#chapterpic_background {
	display: inline-block;
	margin-top: 250px;
	width: 100%;
	background-color: var(--color_pagecut);
	opacity: 0.8;
	padding: 1em 0;
}

#chapterpic_title {
	width: 80%;
	font-family: roboto_condensed;
	text-align: center;
	text-decoration: none;
	color: var(--color_accent);
	text-transform: uppercase;
	letter-spacing: 0.0em;
	font-size: 3.5em;
	line-height: 1.2em;
	display: block;
	margin: 0 auto;
}

	@media (max-width: 700px) { 
	#chapterpic_title { font-size: 2.5em; }
	}
	

/* APPVIEW */

	#element_appview { display:inline-block; width: 95%; margin: 100px 2.5% 80px 2.5%; text-align: center; }
	#element_appview_frame { display: inline-block; width: 332px; height: calc(332px * 16/9); z-index:4; margin: -100px -45px -100px -45px; }
	#element_appview_img { position: relative; margin: 20%; width:60%; height:60%; z-index:4;  
	background-repeat: no-repeat; background-size: contain; box-shadow: 0px 0px 15px 2px rgba(0,0,0,0.33); background-position: center; transition: 0.6s;  }
	#element_appview_img:hover { margin: 0%; width:100%; height:100%; box-shadow: 0px 0px 25px 4px rgba(0,0,0,0.50); transition: 1.0s; z-index:5; }
	
	@media (max-width: 599px) {
	#element_appview { display:inline-block; width: 100%; margin: 100px 0% 80px 0%; text-align: center; }
	#element_appview_frame { display: inline-block; width: 80vw; height: calc(80vw * 16/9); z-index:4; margin: 30px 10vw 30px 10vw; }
	#element_appview_img { position: relative; margin: 0%; width:100%; height:100%; z-index:4;  
	background-repeat: no-repeat; background-size: contain; box-shadow: 0px 0px 15px 2px rgba(0,0,0,0.33); background-position: center; transition: none;  }
	#element_appview_img:hover { margin: 0%; width:100%; height:100%; box-shadow: 0px 0px 15px 2px rgba(0,0,0,0.33); transition: none; z-index:5; }
	}

/* SLIDESHOW */

	#element_slideshow { width: width: calc(var(--pagewidth_max) * 0.75); height: calc(var(--pagewidth_max) * 0.75 * 0.75); max-width: 960px; max-height:640px; clear: both; margin: 50px auto 50px auto; overflow: hidden; }
	#element_slideshow_picture { position:relative; left: 0px; top: 0px; width: width: calc(var(--pagewidth_max) * 0.75); height: calc(var(--pagewidth_max) * 0.75 * 0.75); max-width: 960px; max-height:640px; background-position:center; background-repeat:none; background-size:cover; z-index:5; }
	#element_slideshow_description {position: absolute; bottom:0px; width:100%; height:30px; padding-top: 10px; background-color: var(--color_pagecut); opacity: 0.8;
	font-family: roboto_light; text-align: center; text-decoration: none; color:var(--color_text); text-transform: none; letter-spacing: 0.0em; font-size: 1.4em; line-height: 1.5em; }	
		
	#element_slideshow_back {position:absolute; left:0px; top:0%; width:40px; height: calc(var(--pagewidth_max) * 0.75 * 0.75); max-height:640px; z-index:6;
	background-position:center; background-repeat:no-repeat; background-size:contain; background-image:url(graphics/slideshow_arrow.svg); opacity: 0.3; transition:0.6s; }
	#element_slideshow_back:hover { opacity: 1.0; transition:0.6s; }
	
	#element_slideshow_next {position:absolute; right:0px; top:0%; width:40px; height: calc(var(--pagewidth_max) * 0.75 * 0.75); max-height:640px; z-index:6;
	background-position:center; background-repeat:no-repeat; background-size:contain; background-image:url(graphics/slideshow_arrow.svg); transform:rotate(180deg); opacity: 0.3; transition:0.6s; }
		#element_slideshow_next:hover { opacity: 1.0; transition:0.6s; }
		
		@media (max-width: 1023px) { 
		#element_slideshow { display: inline-block; text-align: center; width: 100%; margin: 30px auto 30px auto; z-index: 4;
		position:none; left: 0px; top: 0px; width: none; height: auto; max-width: none; max-height: none;}

	#element_slideshow_picture {  display: inline-block; margin: 0.5%; width: 90vw; height: calc(90vw * 0.75); background-repeat: no-repeat; background-size: cover; background-position: center; z-index: 3; }	
	#element_slideshow_next { display: none; }
	#element_slideshow_back { display: none; }
		}


/* VIDEO */

    #element_video {  display: inline-block;  float: left;  width: 60%; margin-top: 30px; margin-bottom: 30px; padding: 30px 20% 40px 20%; background-color: var(--color_pagecut);
	font-family: roboto_light; text-align: center; text-decoration: none; color:var(--color_text); text-transform: none; letter-spacing: 0.0em; font-size: 1.4em; line-height: 1.5em; }	
				
	#element_video_title { margin-top: 0px; margin-bottom: 10px; 
	font-family: roboto_condensed; text-align: center; text-decoration: none; color:var(--color_accent); text-transform: uppercase; letter-spacing: 0.0em; font-size: 1.8em; line-height: 1.5em;	}	

	#element_video_screen { display: inline-block; width: 64vw; height: 36vw; margin: 10px 20px 10px 20px; }	

#element_video_l {
	display: block;
	float: left;
	clear: left;
	width: 25%;
	height: auto;
	margin: 30px 10% 50px 15%;
	border-radius: 1em;
}

#badge_linkedin { display: inline-block; margin-left: -3px; margin-right: 2px; width: 22px; height: 22px; vertical-align: text-top; z-index:6;
background-size: cover; background-repeat: no-repeat; background-position: center; background-image: url(testbilder/004.png) }


/* PROJECT GALLERY */

#project_gallery  { clear: both; width: 98%; text-align: center; margin: 80px auto 50px auto; }

#project1_frame  { display: inline-block; position: relative; width: 530px; height: 180px; margin: 14px; border-radius: 1em; background-color: var(--color_pagecut); z-index:3; }
#project1_image  { position: absolute; left:0px; top:0px; width: 250px; height: 180px; border-radius: 1em 0em 0em 1em;
background-repeat: no-repeat; background-size: 130%; background-position: center; transition: 2.3s; }
#project1_frame:hover #project1_image  { position: absolute; left:0px; top:0px; width: 250px; height: 180px; 
background-repeat: no-repeat; background-size: 100%; background-position: center; transition: 1.3s;}
#project1_infobackground  { position: absolute; left:250px; top:0px; width: 280px; height: 180px; z-index:4;
background-repeat: no-repeat; background-size: 60%; background-position: center; mix-blend-mode:lighten; opacity: 0.2; }
#project1_title  { position: absolute; left:280px; top: 10px; width:240px; z-index:5;
font-family: roboto_condensed; text-align: left; text-decoration: none; color: var(--color_accent1); text-transform: uppercase; font-size: 2.0em; line-height: 1.5em; }
#project1_line  { position:absolute; left:250px; top:38px; width:23px; height:3px; z-index:5; border-bottom: solid 2px; border-color: var(--color_text);  }
#project1_description  { position: absolute; left:280px; top: 42px; width:240px; z-index:5;
font-family: roboto_light; text-align: left; text-decoration: none; color:var(--color_text); font-size: 1.3em; line-height: 1.3em; }
#project1_info  { position: absolute; left:280px; bottom: 8px; width:240px; z-index:5;
font-family: roboto_light; text-align: right; text-decoration: none; color:var(--color_text); font-size: 1.3em; line-height: 1.3em; }


 @media (max-width: 720px) {	
 
#project_gallery  { clear: both; width: 95%; margin: 80px 2.5% 50px 2.5%; }
#project1_frame  { display: inline-block; position: relative; width: 100%; height: 452px; margin: 20px 0 20px 0; background-color: var(--color_pagecut); z-index:3; }
#project1_image  { position: absolute; left:0px; top:0px; width: 100%; height: 272px; border-radius: 1em 1em 0em 0em;
background-repeat: no-repeat; background-size: cover; background-position: center; transition: none; }
#project1_frame:hover #project1_image  { position: absolute; left:0px; top:0px; width: 100%; height: 272px; 
background-repeat: no-repeat; background-size: cover; background-position: center; transition: 0.0s;}
#project1_infobackground  { position: absolute; left:0px; top:277px; width: 100%; height: 170px; z-index:4;
background-repeat: no-repeat; background-size: contain; background-position: center; mix-blend-mode:lighten; opacity: 0.2; }
#project1_title  { position: absolute; left:30px; top: 282px; width:240px; z-index:5;
font-family: roboto_condensed; text-align: left; text-decoration: none; color: var(--color_accent1); text-transform: uppercase; font-size: 2.0em; line-height: 1.5em; }
#project1_line  { position:absolute; left:0px; top:310px; width:23px; height:3px; z-index:5; border-bottom: solid 2px; border-color: var(--color_text);  }
#project1_description  { position: absolute; left:30px; top: 314px; width:240px; z-index:5;
font-family: roboto_light; text-align: left; text-decoration: none; color:var(--color_text); font-size: 1.4em; line-height: 1.4em; }
#project1_info  { position: absolute; left:0px; bottom: 15px; width:96%; z-index:5;
font-family: roboto_light; text-align: right; text-decoration: none; color:var(--color_text); font-size: 1.4em; line-height: 1.4em; }
 
 }
 

	#normaltext { font-family: roboto_light; text-decoration: none; text-align: justify; color:#c6c6c6; font-size: 1.2em; line-height: 1.5em;
	float: left; width: 45%; margin: 2.5% 2.5% 50px 2.5%; }
	
	@media (max-width: 1000px) {	
	#normaltext { font-family: roboto_light; text-decoration: none; text-align: justify; color:#c6c6c6; font-size: 1.3em; line-height: 1.5em;
	float: left; width: 95%; margin: 2.5% 2.5% 50px 2.5%; } 
	}
	
	#bottomline { font-family: roboto_light; text-decoration: none; color:#c6c6c6; font-size: 1.0em;
	position: absolute; bottom: -50px; width: 95%; margin-left: 2.5%; margin-right: 2.5%; margin-bottom: 0px; text-align: right;}
	
	
	#text_caption { font-family: roboto_condensed; text-decoration: none; color:var(--color_accent); text-align: left; font-size: 1.4em; }	

	#accent { color:var(--color_accent); }

	#element_line1_l { display: inline-block; float: left; clear: left; width: calc(50% - 3px); height: 40px; margin-top: 30px; margin-bottom: 0px;
									border-top: solid 6px; border-right: solid 6px; border-color: var(--color_pagecut); border-radius: 0 40px 0 0;  }
	#element_line1_r { display: inline-block; float: right; clear: right; width: calc(50% - 3px); height: 40px; margin-top: 0px; margin-bottom: -40px;
									border-bottom: solid 6px; border-left: solid 6px; border-color: var(--color_pagecut); border-radius: 0 40px 0;  }

/* Platzhalter oben - zwischen Titel und erstem Element */
	#spacer_top { height:100px; width: 100%; clear: both; float: left;}	
	@media (max-width: 750px) {
	#spacer_top { height:60px; width: 100%; clear: both; float: left;}	
	}
	
/* Platzhalter zwischen Inhaltselementen */
	#spacer_content { height:30px; width: 100%; clear: both; }	
		@media (max-width: 1000px) {
				#spacer_content { height:10px; width: 100%; clear: both; }	
		}

/* Platzhalter nach Inhalt und unten */		
	#spacer_bottom { position: absolute; bottom: -50px; width: 100%;}	
		
/* Platzhalter unten */
	#spacer_contentend { display: inline-block; clear: both; width:100%; height:150px; z-index:1; }	
		 @media (max-width: 960px) {	
		#spacer_contentend { height:400px; }	
		 }
	
	
	    #iframe_360view  { display: inline; width:100%; height:800px; margin-top: 50px; margin-bottom: 50px; }
	
	
/* iframe Unten Positionierung */

    #iframe_bottom  { position: absolute; bottom: 0px; left: 0; width:100%; height:110px; margin-top: 50px; z-index:10;}

	#bottom_left1 { font-family: roboto_condensed; text-align: left; text-decoration: none; text-transform: uppercase; letter-spacing: 0.05em; color:#c6c6c6; font-size: 1.0em; line-height:1.8em;
		position: absolute; left: 25px; bottom: 15px; width: 200px; z-index: 5;}
		
	#bottom_left2 { font-family: roboto_condensed; text-align: left; text-decoration: none; text-transform: uppercase; letter-spacing: 0.05em; color:#c6c6c6; font-size: 1.0em; line-height:1.8em;
		position: absolute; left: 215px; bottom: 15px; width: 300px; z-index: 5;}

	#bottom_right { font-family: roboto_light; text-decoration: none; text-transform: uppercase; letter-spacing: 0.05em; color:#c6c6c6; font-size: 1.1em; line-height:1.8em; text-align: right;
		position: absolute; right: 25px; bottom: 13px; width: 400px; z-index: 5; }
	 
	 @media (max-width: 960px) {	
    #iframe_bottom  { position: absolute; bottom: -40px; left: 0; width:100%; height:260px; margin-top: 50px; z-index:2;}

	#bottom_left1 { font-family: roboto_condensed; text-align: center; text-decoration: none; text-transform: uppercase; letter-spacing: 0.05em; color:#c6c6c6; font-size: 1.2em; line-height:1.8em;
		position: absolute; left: 0px; top: 15px; width: 100%; height: auto; clear: both; z-index: 5;}
		
	#bottom_left2  { font-family: roboto_condensed; text-align: center; text-decoration: none; text-transform: uppercase; letter-spacing: 0.05em; color:#c6c6c6; font-size: 1.2em; line-height:1.8em;
		position: absolute; left: 0px; top: 100px; width: 100%;  height: auto;clear: both; z-index: 5;}

	#bottom_right  { font-family: roboto_condensed; text-align: center; text-decoration: none; text-transform: uppercase; letter-spacing: 0.05em; color:#c6c6c6; font-size: 1.2em; line-height:1.8em;
		position: absolute; left: 0px; top: 215px; width: 100%;  height: auto;clear: both; z-index: 5;}
	 }

	
	
/* SKILLS */

	#skillarea		{ display:inline-block; position: relative; width:70%; margin-top: 50px; margin-bottom: 0px; text-align: center;  padding: 30px 15% 70px 15%;
	background-color: var(--color_pagecut); background-attachment: fixed; }
	
	#skill 				{ position: relative; margin: 30px; width: 240px; height: 60px; float: left;}
	#skill_logo 	{ position: absolute; left: -17px; top: 0px; width: auto; height: 65px; z-index:5;}
	#skill_line		{ position:absolute; right:175px; top:36px; width:18px; height:3px; z-index:5; border-bottom: solid 2px; border-color: var(--color_text);   }
	#skill_name { position: absolute; left: 30%; top: 15px; width: 80%;
							font-family: roboto_condensed; text-transform: uppercase; text-decoration: none; color:var(--color_accent3); font-size: 1.7em; text-align: left; z-index: 5; }
	#skill_level 	{ position: absolute; left: 30%; top: 40px; width: 80%;
							font-family: roboto_condensed; text-transform: uppercase; text-decoration: none; color:var(--color_text); font-size: 1.2em; text-align: left; z-index: 5; }
	#skill_bar 	{ position: absolute; left: 30%; top: 68px; width: 80%; text-align: left; z-index: 5; }
	#skill_dot 	{ float: left; margin-right: 5px; width: auto; height: 15px; z-index: 5; }


/* CV */

	#cv_area		{ display: block; position: relative; float: right; clear: right; width: 50.0%; height: auto; margin: -80px 0% 50px 0%; padding-bottom: 80px; z-index: 10; background-color: none; }

	#cv_cut		{ position: absolute; right: 0px; top: 0px; width: calc(50% - 3px); height: 100%; z-index: 7;
								border-left: solid 6px; border-bottom: solid 5px; border-radius: 0 0 0 150px; border-color: var(--color_pagecut); }

	#cv_arrow				{ position: absolute; left: calc(50% - 10px); top: -20px; width: 20px; height: 30px; z-index: 8; background: var(--color_line); clip-path: polygon(50% 15%, 85% 85%, 15% 85% );	}
	#cv_arrow_back	{ visibility: hidden; position: absolute; left: calc(50% - 10px); top: -20px; width: 20px; height: 30px; z-index: 7; background: var(--color_background); clip-path: polygon(50% 0%, 100% 100%, 0% 100% );	}

@media (max-width: 1023px) {
	#cv_area		{ width: 48.5%; margin: 30px 25.75% 0px 25.75%; padding-bottom: 100px; }
	#cv_cut		{ left: calc(50% - 3px); width: 0; border-radius: 0 0 0 0px; }
	#cv_arrow	{ position: absolute; left: calc(50% - 10px); top: -20px; width: 20px; height: 30px; }
	#cv_arrow_back	{ position: absolute; left: calc(50% - 10px); top: -20px; }
			}	
	
	#cvR				{ position:relative; left: 50%; top: 0px; width: 240px; height: 65px; margin-left: -10px; margin-top: 16px; margin-bottom: 16px; }
	#cvR_circle 	{ position:absolute; left: 0px; top: 10px; width: 10px; height: 10px; z-index:8; border-radius: 10px; padding: 3px;  border: solid 2px; border-color: var(--color_line); background-color: var(--color_background); transition: 0.3s; }
	#cvR:hover #cvR_circle { background-color: var(--color_accent); background-clip: content-box; transition: 0.3s;  }
	#cvR_line		{ position:absolute; left:22px; top:16px; width:24px; height:3px; z-index:8; border-bottom: solid 2px; border-color: var(--color_text);   }
	#cvR_year 	{ position: absolute; left: 50px; top: 0px; width: 80%; 
							font-family: roboto_light; text-decoration: none; color:var(--color_text); font-size: 1.4em; text-align: left; z-index: 8; }
	#cvR_title	{ position: absolute; left: 50px; top: 18px; width: 80%; 
							font-family: roboto_condensed; text-transform: uppercase; text-decoration: none; color:var(--color_accent); font-size: 1.7em; text-align: left; z-index: 8; }
	#cvR_info 	{ position: absolute; left: 50px; top: 46px; width: 80%; 
							font-family: roboto_light; text-decoration: none; color:var(--color_text); font-size: 1.4em; text-align: left; z-index: 8; }
							
	#cvL				{ position:relative; left: calc(50% - 230px); top: 0px; width: 240px; height: 65px; margin-top: 16px; margin-bottom: 16px;}
	#cvL_circle 	{ position:absolute; right: 0px; top: 10px; width: 10px; height: 10px; z-index:8; border-radius: 10px; padding: 3px; border: solid 2px; border-color: var(--color_line); background-color: var(--color_background); transition: 0.3s; }
	#cvL:hover #cvL_circle { background-color: var(--color_accent); background-clip: content-box; transition: 0.3s; }
	#cvL_line		{ position:absolute; right:22px; top:16px; width:24px; height:3px; z-index:8; border-bottom: solid 2px; border-color: var(--color_text);   }
	#cvL_year 	{ position: absolute; right: 50px; top: 0px; width: 80%; 
							font-family: roboto_light; text-decoration: none; color:var(--color_text); font-size: 1.4em; text-align: right; z-index: 8; }
	#cvL_title	{ position: absolute; right: 50px; top: 18px; width: 80%; 
							font-family: roboto_condensed; text-transform: uppercase; text-decoration: none; color:var(--color_accent); font-size: 1.7em; text-align: right; z-index: 8; }
	#cvL_info 	{ position: absolute; right: 50px; top: 46px; width: 80%; 
							font-family: roboto_light; text-decoration: none; color:var(--color_text); font-size: 1.4em; text-align: right; z-index: 8; }


@media (max-width: 520px) {
	#cvL				{ left: calc(50% - 190px);width: 200px; height: 65px; }
	#cvR				{ width: 200px; height: 65px; }
	#cvL_title, #cvR_title	{ 	font-size: 1.5em; }
	#cvL_info, #cvR_info 	{ top: 40px; font-size: 1.2em; }
}

/* CONTACT */	
	
	#contactarea		{ display: inline-block; position: relative; width: 70%; margin: -163px 20% 20px 0%; padding: 230px 0px 0px 0px; text-align: left; clear: both; z-index: 9;
background-position: left top; background-size: contain; background-repeat: no-repeat; background-color: var(--color_pagecut);
clip-path: polygon(0% 220px, 50% 220px, 65% 0px, 80% 220px, 100% 220px, 100% 100%, 0% 100%);
	}
	@media (max-width: 999px) {
	#contactarea		{ clip-path: polygon(0% 220px, 50% 220px, 65% 0px, 80% 220px, 100% 220px, 100% 100%, 0% 100%); width: 100%; margin: -163px 0% 0px 0%; }
	}		
	
	#contact 					{ position: relative; margin: 60px 0 60px 0; width: 300px; height: 60px; }
	#contact_logo 		{ position: absolute; left: 260px; top: -8px; width: auto; height: 60px; z-index:5;}
	#contact_line1		{ position:absolute; left:0; top:30px; width:250px; height:3px; z-index:3; 
	
		background-image: linear-gradient(90deg, var(--color_text), var(--color_text), var(--color_text)); background-size: 0% 2px; background-position: right bottom; background-repeat: no-repeat;
	transition: 0.8s;
	
	
	/*border-bottom: solid 2px; border-color: var(--color_text); filter: opacity(0.0); transition: 0.8s; */ }
	#contact:hover #contact_line1 { background-size: 100% 2px; /*filter: opacity(1.0); */ transition: 0.5s; }
	#contact_line2		{ position:absolute; left:330px; top:30px; width:18px; height:3px; z-index:3; border-bottom: solid 2px; border-color: var(--color_text);   }
	#contact_title 		{ position: absolute; left: 355px; top: 8px; width: 80%; 
										font-family: roboto_condensed; text-transform: uppercase; text-decoration: none; color:var(--color_accent4); font-size: 1.7em; text-align: left;	}
	#contact_subtitle { position: absolute; left: 355px; top: 33px; width: 80%; 
										font-family: roboto_condensed; text-transform: uppercase; text-decoration: none; color:var(--color_text); font-size: 1.2em; text-align: left; }
		
	
	@media (max-width: 699px) {
	#contactarea		{ clip-path: polygon(0% 220px, 60% 220px, 75% 0px, 90% 220px, 100% 220px, 100% 100%, 0% 100%); width: 100%; margin: -163px 0% 0px 0%; }
	
	#contact 					{ position: relative; margin: 60px 0 60px calc(50% - 150px); width: 300px; height: 60px; }
	#contact_logo 		{ position: absolute; left: 0px; top: -8px; width: auto; height: 60px; z-index:5;}
	#contact_line1		{ position:absolute; left:0; top:30px; width:250px; height:3px; z-index:3; border-bottom: solid 2px; border-color: var(--color_text); filter: opacity(0.0); transition: 0.8s;  }
	#contact:hover #contact_line1 { filter: opacity(1.0);  transition: 0.5s; }
	#contact_line2		{ position:absolute; left:70px; top:30px; width:18px; height:3px; z-index:3; border-bottom: solid 2px; border-color: var(--color_text);   }
	#contact_title 		{ position: absolute; left: 95px; top: 8px; width: 80%; 
										font-family: roboto_condensed; text-transform: uppercase; text-decoration: none; color:var(--color_accent4); font-size: 1.7em; text-align: left;	}
	#contact_subtitle { position: absolute; left: 95px; top: 33px; width: 80%; 
										font-family: roboto_condensed; text-transform: uppercase; text-decoration: none; color:var(--color_text); font-size: 1.2em; text-align: left; }
	
	#contact_line1		{ display: none; }
	}		
	


/* NAVIGATION BUTTONS */

#nav_back { display: inline-block; clear: both; width: 38px; margin-bottom:20px; margin-left: 3vw; height:30px; z-index: 9; background-position: right; background-repeat: no-repeat; background-size: contain; background-image: url(graphics/back.svg); transition: 0.4s; }
#nav_back:hover { background-position: left; transition: 0.4s; }

#nav_back_bottom { display: inline-block; clear:left; float: left; width: 38px; margin-top: 0px; margin-right: 15px; height:30px; z-index: 9; 
										background-position: center right; background-repeat: no-repeat; background-size: 80%; background-image: url(graphics/back.svg); transition: 0.6s; }
#nav_back_bottom_title:hover > #nav_back_bottom { background-position: left; transition: 0.4s; }
#nav_back_bottom_title { display: block; float: left; margin-top: 150px; width:35%; height: 60px; margin-left: 2.5%; z-index: 9; 
font-family: roboto_condensed; text-transform: uppercase; text-decoration: none; color:var(--color_accent4); font-size: 1.7em; text-align: left;	}

#nav_next_bottom { display: inline-block; clear:right; float: right; width: 38px; margin-top: 0px; margin-left: 15px; height:30px; z-index: 9; 
										background-position: center left; background-repeat: no-repeat; background-size: 80%; background-image: url(graphics/forward.svg); transition: 0.6s; }
#nav_next_bottom_title:hover > #nav_next_bottom { background-position: right; transition: 0.4s; }
#nav_next_bottom_title { display: block; float: right; margin-top: 150px; width:35%; height: 60px; margin-right: 2.5%; z-index: 9; 
font-family: roboto_condensed; text-transform: uppercase; text-decoration: none; color:var(--color_accent4); font-size: 1.7em; text-align: right;	}


#nav_up { display: inline-block; width: 25%; margin-top: 50px; height:38px; z-index: 9; background-position: center bottom; background-repeat: no-repeat; background-size: 30px 30px; background-image: url(graphics/up.svg); transition: 0.6s; }
#nav_up:hover { background-position: center top; transition: 0.4s; }
		
	@media (min-width: 720px) { #nav_up { margin-top: 142px; } }


#nav_lastproject_arrow, #nav_nextproject_arrow { display: inline-block; width: 32px; height: 180px; margin: 14px; background-image: url(graphics/back.svg); background-position: center right; background-repeat: no-repeat; background-size: 80%; transition: 0.6s; }
#nav_nextproject_arrow { background-image: url(graphics/forward.svg); background-position: center left; }

#nav_lastproject:hover > #nav_lastproject_arrow { background-position: center left; transition: 0.4s; }
#nav_nextproject:hover > #nav_nextproject_arrow { background-position: center right; transition: 0.4s; }

#nav_lastproject { display: inline-block; float: left; }
#nav_nextproject { display: inline-block; float: right; }

	@media (max-width: 1425px) { 
#nav_lastproject { float: none; margin-right: 64px; }
#nav_nextproject { float: none; margin-left: 64px; }
	}
	
	@media (max-width: 720px) { 
#nav_lastproject { float: none; margin: 0; width: 100%; }
#nav_nextproject { float: none; margin: 0; width: 100%; }
#nav_lastproject_arrow  { display: none; }
#nav_nextproject_arrow  { display: none; }

#nav_back_bottom_title, #nav_next_bottom_title { font-size: 1.5em;  }
#nav_back_bottom, #nav_next_bottom { margin-top: -4px; }
	}

#nav_projects_overview {
	display: inline-block;
	width: 40px;
	height: 40px;
	text-align: center;
	transition: 0.6s;
	line-height: 0.5em;
	margin-top: 50px;
	clear: both;
}

#nav_projects_overview_box {
	display: inline-block;
	width: 15px;
	height: 7px;
	margin: 2px 0px;
	border-radius: 2px;
	background-color: var(--color_accent);
	transition: 0.6s;
}

#nav_projects_overview_box:hover  { transform: scale(1.2); transition: 0.4s;}
#nav_projects_overview:hover  { transform: scale(1.2); transition: 0.4s;}




/* Deaktivieren in mobiler Ansicht */
	#hide_mobile { display: inline; }
	@media (max-width: 960px) {
	#hide_mobile { display: none; }
	}

/* Ausblenden in mobiler Ansicht */
	#invisible_mobile { visibility: visible }
	@media (max-width: 799px) {
	#invisible_mobile { visibility: hidden; }
	}
	
/* Einblenden in mobiler Ansicht */
	#visible_mobile { display: none; width:0%; height: 0%; }
	@media (max-width: 600px) {
	#visible_mobile { display: inline; }
	}
	
/* Eingerückter Text */
	#tab  { text-decoration: none; margin-left:35px;}
	
	#center { text-align: center; }

	#piclifter { margin-top: -200px; }
	@media (max-width: 1023px) {
			#piclifter { margin-top: 15px; }
	}
	
/* Einfache Auflistung */
	#list { margin-left:17px; line-height:2em; }
	
/* Abstand zwischen Infoart und Information, z.B. Tel:    0815 */
	#infotab { width:80px; display:block; float:left; font-weight:bold; }


	
</style>

</head>
</html>