@font-face {
font-family: 'Alkes';
src: url('Fonts/Alkes/Alkes-Regular.eot');
src: local('Alkes'), local('Alkes-Regular'),
	url('Fonts/Alkes/Alkes-Regular.eot?#iefix') format('embedded-opentype'),
	url('Fonts/Alkes/Alkes-Regular.woff2') format('woff2'),
	url('Fonts/Alkes/Alkes-Regular.woff') format('woff'),
	url('Fonts/Alkes/Alkes-Regular.ttf') format('truetype');
font-weight: normal;
font-style: normal; }

@font-face {
font-family: 'Alkes';
src: url('Fonts/Alkes/Alkes-Light.eot');
src: local('Alkes Light'), local('Alkes-Light'),
		url('Fonts/Alkes/Alkes-Light.eot?#iefix') format('embedded-opentype'),
		url('Fonts/Alkes/Alkes-Light.woff2') format('woff2'),
		url('Fonts/Alkes/Alkes-Light.woff') format('woff'),
		url('Fonts/Alkes/Alkes-Light.ttf') format('truetype');
font-weight: 300;
font-style: normal; }

@font-face {
	font-family: 'Alkes';
	src: url('Fonts/Alkes/Alkes-Semibold.eot');
	src: local('Alkes Semibold'), local('Alkes-Semibold'),
		url('Fonts/Alkes/Alkes-Semibold.eot?#iefix') format('embedded-opentype'),
		url('Fonts/Alkes/Alkes-Semibold.woff2') format('woff2'),
		url('Fonts/Alkes/Alkes-Semibold.woff') format('woff'),
		url('Fonts/Alkes/Alkes-Semibold.ttf') format('truetype');
	font-weight: 600;
	font-style: normal;
}



	*, *:before, *:after {
	  -webkit-box-sizing: border-box;
	  -moz-box-sizing: border-box;
	  box-sizing: border-box;
	}

body { width: 100%; margin: 0; padding: 0; font-family: "Alkes"; font-size: 1.3rem; color: white; box-sizing: content-box; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; background: url("../../files_extra/abu_background.jpg") no-repeat fixed center; background-size: cover; }


#header { width: 100%; margin-top: 0px; }
#header_fixed { position: fixed; top: 0px; width: 100%; height: 140px; z-index: 20; background: rgba(255, 237, 0, 0.2); }
#wrapper_header_fixed { position: relative; width: 90%; margin: 0 auto; }
#header_left { float: left; margin-left: 5%; }
#header_right { float: right; margin-right: 5%; margin-top: 4rem; }

#logo { display: inline-block; margin-top: 20px; margin-left: -12px; }
#logo.logo_gr img { height: 220px; width: auto; }
#logo.logo img { height: 220px; width: auto; }
#logo_mobile { display: none; }

#navigation_top_right { display: inline-block; }
#navigation_top_right div#wrap_the_lis { display: inline-block; }
#navigation_top_right li.level-1 { position: relative; display: inline-block; margin-top: 2px; list-style: none; padding-right: 25px; }
#navigation_top_right li.level-1:last-of-type { padding-right: 0px; }

#navigation_top_right a { font-size: 1.3rem; letter-spacing: 0.2px; color: white; text-decoration: none; } 
#navigation_top_right .level-1 a:hover { color: orangered} 
#navigation_top_right li.level-1.current a, #navigation_top_right li.level-1.parent a { color: orangered; } 
.nav { font-family: "bebas-neue-pro", sans-serif;
	font-weight: 400;
	font-style: normal; }





#wrapper_hamburger_navi_top { display: none; position: absolute; top: 0px; right: 4%; z-index: 21; }

.hamburger { position: absolute; top: 2.1rem; right: 0; height: 50px; width: 50px; background: url("../../files_extra/navi/closed.png") center; background-size: contain; background-repeat: no-repeat; cursor: pointer; cursor: grabpointer; z-index: 22; }
.hamburger_x { position: absolute; top: 2.1rem; right: 0; height: 50px; width: 50px; background: url("../../files_extra/navi/open.png") center; background-size: contain; background-repeat: no-repeat; cursor: pointer; cursor: grabpointer; z-index: 22; }


/* Hamburger overlay */
#wrapper_hamburger_navi_top_overlay { display: none; position: absolute; top: 0px; right: 0; z-index: 20;  width: 100%; }
#navi_top_hamburger { display: none; 
  background: rgba(255, 60, 0, 0.8);
  padding-top: 7rem;
  padding-bottom: 3rem;
  text-align: center;
  }
  
  
  
.social_wrapper { display: inline-block; }
.social { margin-left: 15px; }
.social div#social_insta { display: inline-block; width: 25px; height: 25px; margin-left: 5px; background: url("../../files_extra/social_media/instagram_weiss.png") no-repeat center; background-size: contain; vertical-align: text-bottom;}
.social div#social_vimeo { display: inline-block; width: 25px; height: 25px; margin-left: 5px; background: url("../../files_extra/social_media/vimeo_weiss.png") no-repeat center; background-size: contain; vertical-align: text-bottom;}
  
  
  
  
#content_wrapper { margin-top: 8rem; margin-bottom: 8rem; font-family: 'Alkes'; font-weight: normal; font-style: normal; font-size: 1.2rem; }

input:focus, select:focus, textarea:focus, button:focus, a:focus { outline: none; }



#content.start { width: 70%; margin: 0 auto; padding-top: 14rem; hyphens: none; }
#content.content { width: 90%; margin: 0 auto; padding-top: 11rem; }

.wrappy { padding: 0 0 2rem 0; }

.ueberschrift, .volle_breite, .galerie_wrapper, .controls, .container { width: 90%; margin: 0 auto; }
.container .volle_breite { width: 100%; }
.halbe_breite { width: 50%; }

.zweispaltig { width: 48%; margin-right: 4%; float: left; }
.zweispaltig.rechts { margin-right: 0; float: right; }

.text a:any-link { color: orangered; text-decoration: underline; }
#content.start .text a:any-link { color: #f9f580; text-decoration: none; cursor: pointer; cursor: grabpointer; }
#content.start .text a:any-link:hover { color: orangered; text-decoration: none; cursor: pointer; cursor: grabpointer; }
.textinfo.text a:any-link { color: white; text-decoration: underline; }

img, .volle_breite img  { width: 100%; border-radius: 18px; }
#logo.logo_gr img, #logo.logo img,#logo_mobile.logo img { border-radius: 0; }

.quer { -webkit-aspect-ratio: 3/2; aspect-ratio: 3/2; }
.quadrat { -webkit-aspect-ratio: 1/1; aspect-ratio: 1/1; }
.hoch { -webkit-aspect-ratio: 2/3; aspect-ratio: 2/3; }

.teaser { position: relative; height: 400px; width: auto; border-radius: 18px; overflow: hidden; float: left; margin-right: 15px; margin-bottom: 25px; }

.teaser .teaser_img { position: absolute; width: 100%; z-index: 0; transition: 1.6s; }
.teaser .teaser_text { display: none; position: absolute; width: 100%; height: 100%; z-index: 1; text-align: center; margin: auto; padding: 0.4rem; font-family: "bebas-neue-pro", sans-serif; font-weight: 500; font-style: normal; font-size: 3rem; color: white; text-shadow: 0px 0px 6px orangered; }

#content div.teaser:hover .teaser_img { opacity: 0.4; filter: grayscale(100%) ; }
#content div.teaser:hover .teaser_text { display: flex; flex-direction: column; justify-content: center; }


.container_projekt { display: none; position: fixed; bottom: 0;
	left: 0; z-index: 100; width: 100%; height: 100%; overflow: scroll; }

.projekt_bg { position: fixed; top: 0;
left: 0; z-index: 101; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.92); }

.wrap_the_projekt { position: relative; top: 3rem; left: 0; width: 85%; margin: 0 auto; z-index: 102; padding-bottom: 4rem; }

.close_button { float: right; padding-bottom: 2rem; }
.close_button span.close { font-family: "Alkes"; font-weight: normal; font-style: normal; font-size: 1rem; vertical-align: baseline; margin-right: 5px; }
.close_button span { font-family: "bebas-neue-pro", sans-serif; font-weight: 500; font-style: normal; font-size: 2.4rem; vertical-align: bottom;}

.box_top { }

div.container_projekt div.projekttyp { display: inline; font-size: 1rem; }
div.container_projekt div.projekttyp li { display: inline; list-style: none; }
div.container_projekt div.projekttyp li::before { content: " / "; }
div.container_projekt div.projekttyp li:first-of-type::before { content: ""; }

.textinfo { float: left; width: 60%; }
.detailinfo { float: right; width: 30%; padding-left: 5%; border-left: 1px solid white;}

.video.video { width: 100%; height: auto; border-radius: 18px; }
.TextformatterVideoEmbed { border-radius: 18px; }

.projekt_img img { height: 300px; width: auto; float: left; margin-right: 15px; margin-bottom: 25px; }

.box_bottom .projekt_img.mobile { display: none; }


.galerie .bild { display: inline-block; padding-right: 10px; }
.galerie .bild img { height: 200px; width: auto; border-radius: 18px; }


b, strong { font-family: 'Alkes'; font-weight: 600; font-style: normal; }  

h1 { margin-block-start: 0; font-family: "bebas-neue-pro", sans-serif; font-weight: 400; font-style: normal; font-size: 3.2rem; margin-left: -3px;}
h2 { margin-block-start: 0; font-family: 'Alkes'; font-weight: 400; font-style: normal; font-size: 3rem; }
h3 { margin-block-start: 0; font-family: 'Alkes'; font-weight: normal; font-style: normal; font-size: 1.5rem; }
h4 { margin-block-start: 0; font-family: "bebas-neue-pro", sans-serif; font-weight: 400; font-style: normal; font-size: 2.1rem; text-decoration: underline; }
h5 { font-family: 'Alkes'; font-weight: 600; font-style: normal; font-size: 1.4rem; }


.clear { clear: both; }



/* Filterbuttons etc. */
.content .controls button { background: orangered; border: 1px solid orangered; border-radius: 0; margin-right: 0.8rem; margin-bottom: 0.5rem; cursor: pointer; font-family: "bebas-neue-pro", sans-serif; font-weight: 400; font-style: normal; font-size: 1.2rem; color: white; }
.content .controls button:hover { background: rgba(255, 237, 0, 1); border: 1px solid rgba(255, 237, 0, 1); }
.content .controls button.mixitup-control-active { cursor: auto; background: rgba(255, 237, 0, 1); border: 1px solid rgba(255, 237, 0, 1); color: black; }

.content .controls button.ani { transition: 1.6s; }

.content .controls { margin-block-start: 1em; margin-block-end: 2rem; border: 0; }




  
  
#footer { position: fixed; z-index: 20; bottom: 0; width: 100%; padding: 2rem 0 1rem 0; background: orangered; color: white; font-size: 1.3rem; letter-spacing: 0.2px;}
#wrapper_bottom { width: 90%; margin: 0 auto; position: relative; }
#wrapper_bottom_inner { padding-bottom: 1rem; }

#infos_bottom_left { float: left; font-family: "bebas-neue-pro", sans-serif; font-weight: 400; font-style: normal; }
  
#navigation_bottom_right { float: right; display: inline-block; }
#navigation_bottom_right div { display: inline-block; margin-left: 1.5rem; }
  
#footer li { list-style: none; } 
#footer .nav { font-size: 1.3rem; letter-spacing: 0.2px;}
#footer a { color: white; text-decoration: none; } 
#footer .nav a:hover { color: rgba(255, 237, 0, 1);  }  








/* große Ausgabegeräte */
@media screen and (min-width: 1480px) { 
  .wrap_the_projekt { width: 70%; }	
  }
  
/* sehr große Ausgabegeräte */
@media screen and (min-width: 1760px) { 
  .wrap_the_projekt { width: 60%; }
  }
  
 
/* kleiner werdende Ausgabegeräte */
@media screen and (max-width: 1280px) { 
	#header_fixed { height: 120px; }
	#logo.logo_gr img { height: 180px; }
	#logo.logo img { height: 180px; }
	#header_right { margin-top: 3.5rem; }
	 
	#content.content { padding-top: 7.5rem; }
	.teaser { height: 300px; }
	.teaser .teaser_text { font-size: 2.2rem; }

	.content .controls button { margin-right: 0.2rem; font-size: 1.1rem; hyphens: none; }
	.projekt_img img { height: 240px; }
  }
  
  
@media screen and (max-width: 880px) { 
	.teaser .teaser_text { display: flex; flex-direction: column; justify-content: center; color: white; }

	#content div.teaser:hover .teaser_text { display: flex; flex-direction: column; justify-content: center; }
	
	.box_top .projekt_img a img { display: none; }
	.box_top .projekt_img a:first-of-type img { display: block; height: auto; width: 100%; float: none; margin-right: 0; margin-bottom: 25px; }
	.box_bottom .projekt_img.mobile { display: block; }
	.box_bottom .projekt_img a img { display: block; height: auto; width: 100%; float: none; margin-right: 0; margin-bottom: 25px; }
	
	.textinfo { float: none; width: 100%; }
	.detailinfo { float: none; width: 100%; padding-left: 0; border-left: 0px; border-top: 1px solid white; hyphens: none; }
	
	.halbe_breite { width: 100%; }
	}  
  
  
@media screen and (max-width: 780px) { 
	#navigation_top_right { display: none; } 
	#wrapper_hamburger_navi_top { display: inline-block; }
	#wrapper_hamburger_navi_top_overlay { display: inline-block; }
	
	#navi_top_hamburger li { display: block; margin-top: 0.9rem; list-style: none; padding-left: 30px; font-size: 2rem; } 
	#navi_top_hamburger li:first-of-type { margin-top: 2rem; }
	#navi_top_hamburger a { text-decoration: none; color: white; }
	#navi_top_hamburger a:hover { color: rgba(255, 237, 0, 1); padding-bottom: 2px; cursor: grabpointer; }
	li.dropdown:hover .dropdown-content { display: none; }
	
	.social_wrapper { position: absolute; top: 2.7rem; right: 3rem; width: 120px; }
	.social div#social_insta, .social div#social_vimeo { width: 32px; height: 32px; margin-left: 5px; }
	
	#content_wrapper { margin-bottom: 6rem; }
	
	#footer { padding: 2rem 0 1rem 0; }
	}  
	
@media screen and (max-width: 680px) { 
	#logo.logo_gr img { height: 180px; }
	#logo.logo  { display: none; }
	#logo_mobile.logo { display: inline-block; margin-top: 20px;
		margin-left: -4px; }
	#logo_mobile.logo img { height: 80px; width: auto; }
	#content.start { width: 80%; padding-top: 10rem; hyphens: none; }
	#content.content { 	padding-top: 1rem; }
	.zweispaltig { width: 100%; margin-right: 0; float: none; }
	.zweispaltig.rechts { float: none; padding-top: 2rem; }
	.galerie .bild { display: inline-block; padding-right: 0; }
	.galerie .bild img { height: auto; width: 100%; }
	.wrap_the_projekt { top: 2rem; }
	#footer { position: relative; font-size: 1.2rem; }
	#footer .nav { font-size: 1.2rem; }
	}  	
	
@media screen and (max-width: 660px) { 
	.teaser { position: relative; height: auto; width: 100%; }
	.teaser .teaser_text { font-size: 2.6rem; }
	}  		
	
@media screen and (max-width: 480px) { 
	body, #content_wrapper { font-size: 1.1rem; }
	#header_fixed { height: 80px; }
	#logo { margin-top: 20px; margin-left: -4px; }
	#logo.logo_gr img { height: 120px; }
	#logo_mobile.logo { margin-top: 10px; }
	#logo_mobile.logo img { height: 60px; width: auto; }
	.social_wrapper { top: 1.68rem; right: 2.6rem; width: 100px; }
	.hamburger { top: 1.3rem; height: 40px; width: 40px; }
	.social div#social_insta, .social div#social_vimeo { width: 28px; height: 28px; margin-left: 4px; }
	
	#content.start { width: 90%; padding-top: 4rem; }
	#content.content { 	padding-top: 0rem; }
	#content_wrapper { hyphens: auto; margin-bottom: 3rem;}
	.content .controls button.control { margin-right: 0.1rem; margin-bottom: 0.3rem; padding: 0 0.3rem 0 0.3rem; }
	div.container_projekt div.projekttyp { font-size: 0.8rem; hyphens: none; }
	
	h1 { font-size: 3.2rem; margin-left: -2px;}
	h2 { font-size: 2.6rem; }
	h3 { font-size: 1.4rem; }
	h4 { margin-block-end: 1rem; font-size: 1.9rem; }
	h5 { font-size: 1.3rem; }
	
	#footer { padding: 1rem 0 0.2rem 0; }
	#footer, #footer .nav { font-size: 1rem; }
	#navigation_bottom_right div { margin-left: 1rem; }
	}