@charset "UTF-8";
/* CSS Document */


html {
  box-sizing: border-box;
}
*, ::before, ::after {
  box-sizing: inherit;
}
ul {
	padding: 0;
    margin:0;
	list-style: none;
    font-size: .9em;
}
.ausstattung ul {
	list-style: circle;
    padding: 0 0 0 1.2em;
}

.clear {
	clear: both;
	}

body {
  font-family: "Roboto", Helvetica, Arial, sans-serif;
  line-height: 1.8;
  font-weight: 400;
  color: #333; 
  height: 100%;	
  background-color: #fff;
}



/* typography
–––––––––––––––––––––––––––––––––––––––––––––––––– */
p {
	font-size: .9em;
}
h1, h2, h3, h4,
.head-im-text {
    font-family: 'Oswald', Helvitica, Arial, sans-serif;
	text-transform: uppercase;
 }

h1 { 
	font-size: 1.8em; 
    font-weight: 500;
    letter-spacing: .05em; 
    margin: 2em 0;
}

.liste h1 {
    border-bottom: 1px #000 solid;
}
.projekt_text h1 {
    margin: .5em 0;
}

h2 { 
    font-size: 1.3em;
    letter-spacing: .1em; 
    font-weight: 300;
    margin: 2em 0;
}


h3,
.head-im-text { 
	font-size: 1em;
    letter-spacing: .08em; 
    font-weight: 500;
}

h4 { 
	font-size: .75em;
    letter-spacing: .08em;
    font-weight: 400;
    margin: 0.5em 0 2em 0;
}

strong {
	font-weight: ;
}

.gruen {
    color: #86a504;
}
.light {
    font-weight: 300;
}
.line-bottom {
    border-bottom: 1px #000 solid;
}
.line-top {
    border-top: 1px #000 solid;
    margin-top: 2em;
    padding-top: 1em;
}

.year, .year-vita {
    font-family: 'Oswald', Helvitica, Arial, sans-serif;
    letter-spacing: .05em;
    padding-right: .8em;
}
.year {
    font-size: 1.8em;  
}
.year-vita {
    font-size: 1.2em;  
}

/* links
–––––––––––––––––––––––––––––––––––––––––––––––––– */
a {
  color: #333; 
  text-decoration: none;	
}
a:hover,
a:focus {
  color: #000;
letter-spacing: .11em;
 }




/* header images
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.headerimage-wrapper {
	position: relative;
	height: 300px;
	width: 100%;
}


#start_edenfeld{
	background-image: url('../images/objektundland.jpg');
}
#start{
	background-image: url('../images/start.jpg');
}
#projekte{
	background-image: url('../images/header_parks_lgs.jpg');
}
#referenzliste{
	background-image: url('../images/referenzen.jpg');
}
#buero{
	background-image: url('../images/vita.jpg');
}
#kontakt{
	background-image: url('../images/kontakt.jpg');
}
#sakral_altenbeken{
	background-image: url('../images/proj_sakral_altenbeken/header_altenbeken.jpg');
}
#stadtpl_steinhagen{
	background-image: url('../images/header_stadtplanung.jpg');
}
#parks_lgs{
	background-image: url('../images/header_parks_lgs2.jpg');
}
#bildungSpielen{
	background-image: url('../images/header_parks_lgs.jpg');
}
#start_edenfeld,
#start,
#projekte,
#referenzliste,
#buero,
#kontakt,
#sakral_altenbeken,
#stadtpl_steinhagen,
#parks_lgs,
#bildungSpielen{
  	background-repeat: no-repeat;
  	-webkit-background-size: cover;
  	-moz-background-size: cover;
  	-o-background-size: cover;
  	background-size: cover;
	background-position: center;
	height: 300px;
	width: 100%;
}



/* navigation
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.navMain,
.openbtn{
	width: 100%;
    background-color: #222;
    padding: .5em 0;
    margin-top: .8em;
    font-family: 'Oswald', Helvitica, Arial, sans-serif;
	font-weight: 500;
    font-size: .9em;
    text-transform: uppercase;
	letter-spacing: .1em; 
} 

.navMain ul {
	margin: 0 auto;
    display: flex;
    justify-content: space-between;
    padding: 0 1em;
    max-width: 1000px;
    
}

.navMain ul li a {
	color: #fff;
	transition: all ease 0.2s;
}
.navMain ul li a:hover,
.navMain ul li a:focus
{
  border-bottom: #fff solid 3px;
  letter-spacing: .11em;
}
#current {
    color: #999;
}

.openbtn, 
.closebtn {
	display: none;
}

/* --------------------------------nav mobile */
@media screen and (max-width: 800px){


    .navMain ul {
    display: block;
}
.openbtn {
	display:block;
    padding:0 1em;
    margin-top: .6em;
} 
.openbtn {
    cursor: pointer;
    color: #fff;
    font-size: 1.8em;
}
.overlay {
    /* Height & width depends on how you want to reveal the overlay (see JS below) */    
    height: 100%;
    width: 100%;
    display: none;
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    background-color: rgb(0,0,0); /* Black fallback color */
    background-color: rgba(0,0,0, 0.9); /* Black w/opacity */
    overflow-x: hidden; /* Disable horizontal scroll */
    transition: 0.5s; /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
}

/* Position the content inside the overlay */
.overlay-content {
    position: relative;
    top: 25%; /* 25% from the top */
    width: 100%; /* 100% width */
    text-align: center; /* Centered text/links */
    margin-top: 30px; /* 30px top margin to avoid conflict with the close button on smaller screens */
}
    

/* The navigation links inside the overlay */
.overlay a,
#current{
    padding: 8px;
    text-decoration: none;
    font-size: 20px;
    color: #818181;
    display: block; /* Display block instead of inline */
    transition: 0.3s; /* Transition effects on hover (color) */
}


.navMain ul li a:hover,
.navMain ul li a:focus
{
  border-bottom: 0px;
  letter-spacing: .11em;
}

/* Position the close button (top right corner) */
.overlay .closebtn {
    position: absolute;
    top: 20px;
    right: 45px;
    font-size: 60px;
}
}


/* navigation end
–––––––––––––––––––––––––––––––––––––––––––––––––– */



/* elements
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.logo {
	max-width: 40em;
    height: auto;
    padding-left: 1em;
    margin-top: 3em;
}
.space-between{
    height: 3em;
}

.space-between-black{
    height: 2.5em;
    background-color: #000;
    margin: .7em 0;
}
.projekte {
    margin: 4em 0 0 0;
}
.referenzen {
    font-size: .8em;
}

.referenzen a:hover,
.referenzen a:focus {
    letter-spacing: .05em
}

.projekt_slider img{
    max-width: 100%;
}
.projekt_menue li{
    font-family: 'Oswald', Helvitica, Arial, sans-serif;
    font-size: .9em;
    letter-spacing: .1em;
    font-weight: 300;
}

.einzelbox img {
   max-width: 100%;
   height: auto;
}
.projekt_text {
    padding: 2em 1.5em 2em 1.5em;
   
}

.rechts {
    float: right;
}

/* footer
–––––––––––––––––––––––––––––––––––––––––––––––––– */
footer {
	color: #333;
	font-weight: 500;
    font-family: 'Oswald', Helvitica, Arial, sans-serif;
	text-transform: uppercase;
	letter-spacing: .1em;
	background-color: #fff;
    margin-top: 4em;
    border-top: 2px #000 solid;
	
}
.footer-wrapper {
	padding: 0;
	width: 100%;
}

.footerlist_1 {
    font-size: .9em;
}

.footerlist_2 {
    font-size: .8em;

    margin: 3em 0;
}

footer ul li {
	list-style: none;
    display: inline;
}

footer ul li a {
	color: #333;
	transition: all ease 0.2s;
    margin: 0 0.5em 0 0;
}
footer ul li a:hover {
    color: #000;
    border-bottom: 3px #000 solid;
	
}

.copyright {
	width: 100%;
	padding: 0 2em;
}






/* Media Queries
––––––––––––––––––––––––––––––––––––––––––––––––––*/

@media screen and (min-width:460px) {

}
	

	
@media screen and (min-width:920px) {
	.projekt_text {
    padding-top: 0em;
}



}	
	
	
	
/* Raster 
––––––––––––––––––––––––––––––––––––––––––––––––––*/

.container {
	max-width: 800px;
	margin: 0 auto;
}
.container-middle {
	max-width: 1000px;
	margin: 0 auto;
}
.container-large {
	max-width: 1200px;
	margin: 0 auto;
}

.row {
	width:100%;
	float:left;
}

.columns { 
	float:left;
	padding-left:1.3em;
	padding-right:1.3em;
}
.columns_img { 
	float:left;
	padding-left:.5em;
	padding-right:.5em;
}

@media screen and (max-width:550px) {

/* 1 spaltiges Raster in der kleinen Layout-Version 
––––––––––––––––––––––––––––––––––––––––––––––––––*/
.small-1 {width:50%;}
.small-2 {width:100%;}

}

@media screen and (min-width:550px) and (max-width:909px) {

/* 3 spaltiges Raster in der mittleren Layout-Version 
––––––––––––––––––––––––––––––––––––––––––––––––––*/
.medium-1 {width:33.333333%;}
.medium-2 {width:50%;}
.medium-3 {width:100%;}

}

@media screen and (min-width:910px) {

/* 12-spaltiges Raster in der großen Layout-Version 
––––––––––––––––––––––––––––––––––––––––––––––––––*/
.large-1 {width:8.333333%;}
.large-2 {width:16.666666%;}
.large-3 {width:25%;}
.large-4 {width:33.333333%;}
.large-5 {width:41.666666%;}
.large-6 {width:50%;}
.large-7 {width:58.333333%;}
.large-8 {width:66.666666%;}
.large-9 {width:75%;}
.large-10 {width:83.333333%;}
.large-11 {width:91.666666%;}
.large-12 {width:100%;}
}