/* CSS Document */

html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,address,cite,code,del,dfn,em,img,ins,q,small,strong,sub,sup,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{border:0;margin:0;padding:0}article,aside,figure,figure img,figcaption,hgroup,footer,header,nav,section,video,object{display:block}a img{border:0}figure,figure img{padding: 0; margin: 0;}
@font-face {    font-family: 'Raleway';
    src: url('../../fonts/Raleway-Regular.eot');
    src: url('../../fonts/Raleway-Regular.eot?#iefix') format('embedded-opentype'),
        url('../../fonts/Raleway-Regular.woff2') format('woff2'),
        url('../../fonts/Raleway-Regular.woff') format('woff'),
        url('../../fonts/Raleway-Regular.ttf') format('truetype'),
        url('../../fonts/Raleway-Regular.svg#Raleway-Regular') format('svg');
    font-weight: normal;    font-style: normal;}
@font-face {    font-family: 'PT Serif';
    src: url('../../fonts/PTSerif-Regular.eot');
    src: url('../../fonts/PTSerif-Regular.eot?#iefix') format('embedded-opentype'),
        url('../../fonts/PTSerif-Regular.woff2') format('woff2'),
        url('../../fonts/PTSerif-Regular.woff') format('woff'),
        url('../../fonts/PTSerif-Regular.ttf') format('truetype'),
        url('../../fonts/PTSerif-Regular.svg#PTSerif-Regular') format('svg');
    font-weight: normal;    font-style: normal;}
@font-face {    font-family: 'Raleway';
    src: url('../../fonts/Raleway-SemiBold.eot');
    src: url('../../fonts/Raleway-SemiBold.eot?#iefix') format('embedded-opentype'),
        url('../../fonts/Raleway-SemiBold.woff2') format('woff2'),
        url('../../fonts/Raleway-SemiBold.woff') format('woff'),
        url('../../fonts/Raleway-SemiBold.ttf') format('truetype'),
        url('../../fonts/Raleway-SemiBold.svg#Raleway-SemiBold') format('svg');
    font-weight: 600;    font-style: normal;}
@font-face {    font-family: 'Raleway';
    src: url('../../fonts/Raleway-Bold.eot');
    src: url('../../fonts/Raleway-Bold.eot?#iefix') format('embedded-opentype'),
        url('../../fonts/Raleway-Bold.woff2') format('woff2'),
        url('../../fonts/Raleway-Bold.woff') format('woff'),
        url('../../fonts/Raleway-Bold.ttf') format('truetype'),
        url('../../fonts/Raleway-Bold.svg#Raleway-Bold') format('svg');
    font-weight: bold;    font-style: normal;}
@font-face {    font-family: 'Raleway';
    src: url('../../fonts/Raleway-Medium.eot');
    src: url('../../fonts/Raleway-Medium.eot?#iefix') format('embedded-opentype'),
        url('../../fonts/Raleway-Medium.woff2') format('woff2'),
        url('../../fonts/Raleway-Medium.woff') format('woff'),
        url('../../fonts/Raleway-Medium.ttf') format('truetype'),
        url('../../fonts/Raleway-Medium.svg#Raleway-Medium') format('svg');
    font-weight: 500;    font-style: normal;}


html{width: 100%;  overflow-x: hidden !important;height: auto;}
body{font-family: 'Raleway'; font-size:17px; font-weight: 400; color: #343434;  width: 100%; font-variant-ligatures: none; background:url(../../images/background.jpg) #fff fixed center center; background-size: cover;}
*{box-sizing: border-box;}
.text-center{text-align: center;}
.text-right{text-align: right;}
.text-left{text-align: left;}
.display{display: none;}
.space{width: 100%; height: 100px; display: block;}
.clear{width: 100%; clear: both;}
p{line-height: 1.5em;}
header, main, footer{position: relative; width: 100%;}

h1{color: #001d55; position: relative; font-family: 'PT Serif'; font-size: 1.5em; font-weight: 600; margin-bottom: 20px;}
h1::before{content: ""; position: absolute; left: -40px; top: 15px; background: url(../../images/h1_before.png) no-repeat; width: 34px; height: 5px; display: block; }
h2{color: #001d55; margin-bottom: 20px; font-size: 1.3em;}
h2.mar-top{margin-top: 50px;}
h3{color: #001d55; margin-bottom: 20px; font-size: 1.15em;}
.contact h3{color: #fff;}

header section.white{background: #fff;}

header::after{content:""; position: absolute; background:url(../../images/welle_weiss_header.svg) no-repeat top center; background-size: cover; width: 100%; height: 200px; display: inline-block; bottom: 0; left: 0; right: 0;}
header .logo img{width: 90%; height: auto; max-width: 320px;}
header .header-image{height: 600px; width: 100%; display: block; clear: both; background-repeat: no-repeat; background-size:cover; background-position: center calc(100% - 50px);}
header p{font-size: 1.1em; padding-top: 30px;}
header p span{width: 36px; height: 36px; display: inline-block; float: left; margin-right: 10px; margin-top: -5px;}
header p span img{width: 100%; height: auto;}
header p a{ color: #3e3e3e; text-decoration: none;}

/* SLIDER */
header .header-slider{position: relative;}
header .header-slider.flexslider{  margin: 0;  border: 0;  background: transparent;}
header .header-slider .slides{  margin: 0;  padding: 0;  list-style: none;}
header .header-slider .slides > li{  margin: 0;}
header .header-slider .header-image{  display: block;}

header .header-slider .flex-control-nav{  position: absolute;  top: 50%;  right: 30px;  transform: translateY(-50%);  z-index: 10;  display: flex;  flex-direction: column;  gap: 12px;}
header .header-slider .flex-control-nav li{  margin: 0;}
header .header-slider .flex-control-nav li a{  width: 40px;  height: 40px;  display: block;  border-radius: 50%;  border: 4px solid #fff;  background: transparent;  text-indent: -9999px;  box-shadow: none;  cursor: pointer;  transition: background-color 0.3s ease;}
header .header-slider .flex-control-nav li a:hover{  background-color: rgba(0,29,85,0.25);}
header .header-slider .flex-control-nav li a.flex-active{  background-color: rgba(0,29,85,0.5);  border-color: #fff;}

header .header-slider .flex-control-nav{  left: auto !important;  right: 30px !important;  width: auto !important;}

/* MENÜ */

.mobile_menu_button{display: none;}
.navigation{width: 100%;}
.navigation ul {    list-style: none;    padding: 0;    margin: 0;	width: 100%;	display: block; padding-top: 30px;}
.navigation ul li {width: 20%; float: left; text-transform: uppercase;}
.navigation ul li a {    color: #001d55;    text-decoration: none;    font-weight: 600;	width: 100%;	display: inline-block; text-align: center; position: relative; padding-top: 45px; padding-bottom: 20px;}
.navigation ul li:hover a, .navigation ul li a.active {color: #001d55;}
.navigation ul li:hover a::before, .navigation ul li a.active::before{content: ""; position: absolute; background: url(../../images/nav_menu_before.png) no-repeat top center; width: 100%; height: 36px; display: block; top: 0;}
.navigation ul li:hover a::after, .navigation ul li a.active::after{content: ""; position: absolute; background: url(../../images/nav_menu_after.png) no-repeat bottom center; width: 100%; height: 2px; display: block; bottom: 0;}



main{padding: 0 0 100px 0;}

main p{margin-bottom: 20px;}
main p a{color: #001d55; text-decoration: none;}
main p a:hover{color: #001d55; }
main p.text-blue{color: #001d55; font-size: 1.3em; font-weight: 500;}

main span.contact{font-weight: 600; display: inline-block; width: 100px; height: 30px; float: left;}

main section.fullbg{width: 100%; height: auto; display: inline-block; padding: 200px 0; position: relative; margin-bottom: 50px;}
main section.fullbg::before{content:""; position: absolute; background:url(../../images/welle_blau_oben.svg) no-repeat top center; background-size: cover; width: 100%; height: 400px; top: -130px; left: 0px; right: 0px; display: block;}
main section.fullbg::after{content:""; position: absolute; background:url(../../images/welle_blau_unten.svg) no-repeat bottom center; background-size: cover; width: 100%; height: 400px; bottom: -200px; left: 0px; right: 0px; display: block; z-index: 1}

main section.main-content{background: url(../../images/content-main-netz.jpg) #fff no-repeat top right; background-size: contain; padding: 0 0 200px 0;}
main section.info{position: relative; z-index: 50;}
main section .white-box{position: relative; background: #fff; padding: 40px 30px;}
main section .white-box::before{content:""; position: absolute; width: 30px; height: 80%; display: block; background:#001d55; top: 10%; bottom: 10%; left: -30px;}

main section ul{list-style: circle; margin: 0 0 15px 15px;}
main section ul li{margin-bottom: 7px;}

main figure{width: 100%; height: auto;}
main figure img{width: 100%; height: auto;}
main figure.mainimage{width: 100%; height: auto; display: inline-block; position: relative;}
main figure.mainimage::after{content:""; position: absolute; width: 30px; height: 80%; display: block; background:#001d55; top: 10%; bottom: 10%; right: -30px;}
main figure.mainimage img{width: 100%; height: auto; margin: 20px 0; position: relative; z-index: 10; border-radius: 30px;}
main figure.image-back, main figure.image-front{max-width: 195px; max-height: 280px; display: block; float: left; width: 50%; min-height: 100%;}
main figure.image-back{ background:url(../../../upload/inhalt/startseite/aktuelles01.jpg) no-repeat center center; background-size: cover;}
main figure.image-front{border: 3px solid #fff; background:url(../../../upload/inhalt/startseite/wbg-ww_wohnprojekt_berliner-strasse02.jpg) no-repeat center center; background-size: cover;}
main figure.aktuelles{max-width: 300px; max-height: 280px; display: block; float: left; width: 100%; min-height: 100%;background:url(../../../upload/inhalt/startseite/aktuelles01.jpg) no-repeat center center; background-size: cover;}
main figure.gal{float: left; width: 23%; height: auto; display: inline-block; margin: 0 2% 10px 0;}
main figure.gal30{float: left; width: 31%; height: auto; display: inline-block; margin: 0 2% 10px 0;}
main figure.gal img{width: 100%; height: auto;}
main section.info figure{margin-bottom: 20px;}

/* Galerie */
.gallery {display: flex; flex-wrap: wrap;}
main .projekte .gallery figure::before {display: none;}
.gallery img {width: 100%; height: auto; cursor: pointer; border-radius: 15px; transition: transform 0.3s ease; border: 2px solid #f7f7f7;}
.gallery img:hover {transform: scale(1.1); border-top-left-radius: 0; border-bottom-right-radius: 0}

.lightbox {display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); justify-content: center; align-items: center; z-index: 1000; flex-direction: column; }
.lightbox.active {display: flex;}
.lightbox img {max-width: 80%; max-height: 70%; border-radius: 10px; }
.lightbox .caption { color: #fff; margin-top: 20px; font-size: 1rem; text-align: center; max-width: 80%;}
.lightbox .close {position: absolute; top: 20px; right: 20px; font-size: 1.5rem; color: #fff; cursor: pointer; background: rgba(255, 255, 255, 0.2); padding: 5px 10px; border-radius: 5px; transition: background 0.3s ease;}
.lightbox .close:hover {background: rgba(255, 255, 255, 0.5);}
.lightbox .arrow {position: absolute; top: 50%; transform: translateY(-50%); font-size: 2rem; color: #fff; cursor: pointer; background: rgba(255, 255, 255, 0.2); padding: 5px 15px; border-radius: 5px; transition: background 0.3s ease;}
.lightbox .arrow:hover {background: rgba(255, 255, 255, 0.5);}
.lightbox .arrow.left {left: 20px;}
.lightbox .arrow.right {right: 20px;}


footer{position: relative;  color: #fff; background: #001d55; background-size: cover;}

footer strong{font-weight: 600;}
footer nav.footnav{width: 100%; height: auto; display: inline-block; margin-top: 100px; position: relative; z-index: 10;}
footer nav.footnav ul{width: 100%; height: auto; display: inline-block; list-style: none;}
footer nav.footnav ul li{float: none; text-align: left; margin-bottom: 10px;}
footer nav.footnav ul li a{text-decoration: none; color: #fff; }
footer nav.footnav ul li a:hover, footer nav.footnav ul li a.active{color: #fff; font-weight: 700;}
footer .contact{z-index: 800;}
footer .contact p{width: 100%; min-height: 25px; margin-bottom: 10px;}
footer .contact p span{width: 25px; min-height: 80px; display: block; float: left;  /*margin: 0 10px 10px 0;*/ margin-right: 20px;}
footer .contact p a{color: #3e3e3e; text-decoration: none;}
footer .contact p a:hover{color: #001d55; }

footer::before{content:""; position: absolute; background:url(../../images/welle_blau_oben.svg) no-repeat top center; background-size: cover; width: 100%; height: 400px; top: -130px; left: 0px; right: 0px; display: block;}

footer figure.fish{background:url(../../images/footer_karpfen.png) no-repeat top center; background-size: contain; width: 100%; display: inline-block; height: 163px; margin-top: 300px;position: relative; z-index: 20;}

footer .bluewave{width: 100%; position: relative;  color: #fff; background:url(../../images/welle_blau_footer.svg) #001d55 no-repeat top center; background-size: cover; min-height: 24px; margin-top: -100px;  z-index: 10;}
footer .bluewave .text-copy{text-align: right; padding: 45px 0 30px 0;}

/* MOBIL */
@media (max-width: 1290px) {
h1{padding-left: 40px;}
h1::before{left: 0px; top: 15px; }
	main section.main-content{padding: 0 10px 200px 10px;}
	footer nav.footnav{padding-left: 25px;}
	footer .contact p span{min-height: 120px;}
	
}

@media (max-width: 960px) {
	header .header-image{height: 500px; width: 100%; display: block; clear: both; background-position: center -200px;}
	header .header-slider .flex-control-nav li a{  width: 20px;  height: 20px}
}

@media (max-width: 820px) {
	.mobil{display: none;}	
	header section.white .col-30{width: 30%; float: left;}
	header section.white .col-70{width: 70%; float: left;}
	
/* Hamburger-Button */
.mobile_menu_button {    display: flex;    align-items: center;    background: none;    border: none;    cursor: pointer;    padding: 10px;}
.menu-icon {    width: 40px;    height: 40px;    border-radius: 50%;    background: #001d55;    position: relative;    display: flex;    justify-content: center;    align-items: center;
    margin-right: 10px; margin-top: 20px;}
.menu-icon div {    width: 22px;    height: 3px;    background: #fff; margin: 4px 0;   transition: 0.4s ease;}
.menu-icon .bar1, .menu-icon .bar2, .menu-icon .bar3 {    display: block;    position: absolute;    background: #fff;}

.menu-icon .bar1 {    top: 8px;}
.menu-icon .bar2 {    top: 15px; }
.menu-icon .bar3 {    top: 22px; }

.menu-open .menu-icon .bar1 {    transform: rotate(-45deg) translate(-5px, 5px); }
.menu-open .menu-icon .bar2 {    opacity: 0;}
.menu-open .menu-icon .bar3 {    transform: rotate(45deg) translate(-5px, -5px); }

.menu-text {    font-size: 18px;    font-weight: 500;    color: #001d55;	text-transform: uppercase; padding-top: 20px;}

.navigation {    flex: none;    position: absolute;    top: 80px;     right: 20px;    width: 40%;    background: #001d55;    padding: 20px;    z-index: 999;    transform: translateY(-70%); 
    transition: transform 0.3s ease;     opacity: 0; pointer-events: none; }
.navigation.menu-open{    transform: translateY(0); opacity: 1; pointer-events: auto;}
.navigation ul {    list-style: none;    padding: 0;    margin: 0;	width: 100%;	display: block;}
.navigation ul li {  	width: 100%; 	display: inline-block;}
.navigation ul li a {    color: #fff;    text-decoration: none;    font-weight: 700;	width: 100%;	display: inline-block;	padding: 12px;}
.navigation ul li:hover a {    color: #001d55;    background: #fff;    padding: 12px;    width: 100%;}
.navigation ul li a.active {    color: #001d55;    background: #fff;    padding: 12px;    width: 100%;}
	
	.navigation ul li:hover a::before, .navigation ul li a.active::before, .navigation ul li:hover a::after, .navigation ul li a.active::after{display: none;}
	
	header .header-image{height: 400px; width: 100%; display: block; clear: both; background-position: center -200px;}
	main section.main-content{background-image: none;}
	
	footer .bluewave{width: 100%; position: relative;  color: #fff; background: #5ea5d4; background-image: none; height: auto; margin-top: 0px;  z-index: 10; display: inline-block;}
footer .bluewave .text-copy{text-align: left; padding: 7px 0 7px 25px;}
	
	footer .contact{padding: 30px 0 0 25px;}
	
	main figure.mainimage::after, main section .white-box::before{display: none;}
}

@media (max-width: 768px) {
	header section.white .col-30{width: 50%; float: left; flex: none;}
	header section.white .col-70{width: 50%; float: left; flex: none;}
	header .header-image{height: 350px; width: 100%; display: block; clear: both; background-position: center -150px;}
	header .header-slider .flex-control-nav{top: 45%; }
}

@media (max-width: 615px) {
	header .header-image{height: 350px; width: 100%; display: block; clear: both; background-position: center -100px;}
	h1{padding-left: 0;}
	h1::before{display: none; }
}
@media (max-width: 445px) {
	.navigation {     width: 70%; }
}