/* 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: 'Asap';
    src: url('../../fonts/Asap-Medium.woff2') format('woff2'),
        url('../../fonts/Asap-Medium.woff') format('woff');
    font-weight: 500;    font-style: normal;}
@font-face {    font-family: 'Asap';
    src: url('../../fonts/Asap-Regular.woff2') format('woff2'),
        url('../../fonts/Asap-Regular.woff') format('woff');
    font-weight: normal;    font-style: normal;}
@font-face {    font-family: 'Asap';    
	src: url('../../fonts/Asap-SemiBold.woff2') format('woff2'),        
		url('../../fonts/Asap-SemiBold.woff') format('woff');
    font-weight: 600;    font-style: normal;}
@font-face {    font-family: 'Asap';
    src: url('../../fonts/Asap-Bold.woff2') format('woff2'),
        url('../../fonts/Asap-Bold.woff') format('woff');
    font-weight: bold;    font-style: normal;}
@font-face {    font-family: 'Asap';
    src: url('../../fonts/Asap-Light.woff2') format('woff2'),
        url('../../fonts/Asap-Light.woff') format('woff');
    font-weight: 300;    font-style: normal;}



html{width: 100%;  overflow-x: hidden !important;height: auto;}
body{font-family: 'Asap'; font-size:15px; font-weight: 400; color: #3e3e3e;  width: 100%; font-variant-ligatures: none;}
*{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;}

h1{font-size: 1.4em; margin-bottom: 30px;}
h2{font-size: 1.3em; margin-bottom: 30px;}
h1 span, h2 span{font-size: 0.7em; background: url(../../images/h-line.png) no-repeat center left; padding-left: 60px;}
h3{font-size: 1.2em; margin-bottom: 30px; background: url(../../images/h-line.png) no-repeat center left; padding-left: 60px;}
h4{font-size: 1.1em; margin: 10px 0 20px 0;}
h5{font-size: 1.2em; font-weight: 400;}
h5 span{background: url(../../images/h-line.png) no-repeat center left; padding-left: 60px; color: #82c635; font-weight: 700;}

section{width: 100%;padding: 15px 0; display: inline-block;}
section.white{background: #fff;}
section.green{background: #82c635; color: #fff;}
section.grey{background: #f8f8f8;}

header .logo img{width: 90%; height: auto; max-width: 320px;}
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;}


/* MENÜ */
/* 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: #82c635;    position: relative;    display: flex;    justify-content: center;    align-items: center;
    margin-right: 10px;}
.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: #82c635;	text-transform: uppercase;}

.navigation {    flex: none;    position: absolute;    top: 80px;     right: 20px;    width: 40%;    background: #82c635;    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: #82c635;    background: #fff;    padding: 12px;    width: 100%;}
.navigation ul li a.active {    color: #82c635;    background: #fff;    padding: 12px;    width: 100%;}

header p a{ color: #3e3e3e; text-decoration: none;}

main{padding-top: 100px;}

main p{margin-bottom: 20px;}
main p a{color: #3e3e3e; text-decoration: none;}
main p a:hover{color: #82c635; }

main figure.mainimage{width: 100%; height: auto; display: inline-block; position: relative;}
main figure.mainimage::after{content:""; top: 0; bottom: 0; right: 0; background:url("../../images/main_bg_image.png") no-repeat bottom right;width: 80%; height: auto; display: block; position: absolute; background-size: contain;}
main figure.mainimage img{width: 90%; height: auto; margin: 20px 0; position: relative; z-index: 10;}
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.gal img{width: 100%; height: auto;}

figure.header-image{width: 100%; height: 400px; display: block; clear: both; position: relative;}
figure.header-image::after{content: ""; height: 20px; width: 25%; display: block; bottom: -10px; left: 0; position: absolute; background: #82c635;}

main .verlinkung{padding: 20px 0;}
main .verlinkung a{padding: 20px 0;text-decoration: none; color: #3e3e3e; }
main .verlinkung a:hover{color: #82c635;}

main .projekte [class*="col-"]{padding-left: 0; padding-right: 0;}
main .projekte figure{width: 100%; height: 300px; position: relative; display: block; padding: 20px;}
main .projekte figure::before {  content: "";  display: block;  position: absolute;  top: 0;  left: 0;  width: 100%;  height: 100%;	background-color: rgba(0, 0, 0, 0.5);}
main .projekte figure:hover::before {  background-color: rgba(0, 0, 0, 0.0);}
main .projekte figure > div{display: inline-block; width: 80%; height: auto; position: absolute; left: 20px; bottom: 10px;}
main .projekte figure > div > h4{display: inline-block; width: 100%; height: auto; margin-bottom: 10px; font-size: 1.2em; font-weight: 500; color: #fff;}
main .projekte figure > div > span{width: 100%; height: auto; display: inline-block;  color: #fff; }
main .projekte figure > a{position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1000; text-indent: 200%; white-space: nowrap; font-size: 0; opacity: 0; font-weight: 300;}

main .gallery.statik figure{width: 100%; height: auto; display: inline-block;}
main .gallery.statik figure img{width: 100%; height: auto;}

main .reference strong.full, main .reference-details strong.full{font-size:1.05em; padding-bottom: 10px; display: inline-block; width: 100%;}
main ul{margin: -10px 0 15px 15px;}

footer{position: relative;}
footer::before{content: ""; height: 20px; width: 25%; display: block; top: -10px; right: 0; position: absolute; background: #82c635;}
footer .fullimage{background:url(../../images/footer_image.jpg) no-repeat top center; background-size: cover; width: 100%; height: 400px; display: block;}

footer strong{font-weight: 600;}
footer nav.footnav{width: 100%; height: auto; display: inline-block;}
footer nav.footnav ul{width: 100%; height: auto; display: inline-block; list-style: none;}
footer nav.footnav ul li{float: left; text-align: center; padding: 5px 2%;}
footer nav.footnav ul li a{text-decoration: none; color: #3e3e3e; }
footer nav.footnav ul li a:hover, footer nav.footnav ul li a.active{color: #82c635;}
footer .contact p{width: 100%; min-height: 25px; margin-bottom: 10px;}
footer .contact p span{width: 25px; min-height: 25px; display: block; float: left;  /*margin: 0 10px 10px 0;*/ margin-right: 10px;}
footer .contact p a{color: #3e3e3e; text-decoration: none;}
footer .contact p a:hover{color: #82c635; }

footer section.green{display: block; height: 50px;}
footer section.green img{margin-top: -68px;}

/* REFERENZEN */ 

main .projekte [class*="col-"] { padding-left: 10px; padding-right: 10px; }

.reference-item {
  position: relative;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.reference-item:hover {
  transform: scale(1.05);
  border: 2px solid #82c635;
}

.reference-item.active {
  transform: scale(1.05);
  border: 2px solid #82c635;
}

/* leichte Abdunklung bei aktivem Item (falls du ein Overlay nutzt) */
main .projekte .reference-item.active figure::before { background-color: rgba(0, 0, 0, 0.1); }

/* Detailbereiche standardmäßig versteckt; scroll-margin für Anker/Auto-Scroll */
.reference-details {
  display: none;
  scroll-margin-top: 80px; /* an deine Headerhöhe anpassen */
}

.reference-details .container {
  padding: 50px 0;
  border: 1px solid #82c635;
  margin-top: 10px;
  position: relative;
}

/* Close-Button */
.close-button {
  position: absolute;
  top: 0px;
  right: 0px;
  background: #82c635;
  color: white;
  border: none;
  padding: 5px 10px;
  cursor: pointer;
  font-size: 1.1em;
}
.close-button:hover { background: #528a13; }

/* MOBILE-Optimierungen */
@media (max-width: 768px) {
  /* Figuren etwas kompakter, damit der Sprung nach unten kürzer ist */
  .reference-item figure {
    min-height: 150px; /* ggf. anpassen */
	  margin-bottom: 10px;
  }
}
.details-placeholder { display: none; }


/* Galerie */
.gallery {display: flex; flex-wrap: wrap;}
main .projekte .gallery figure::before {display: none;}
.gallery img {width: 25%; 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;}

@media (max-width: 768px) {
	.mobil-clear{clear: both;}
	.mobil-display{display: none;}
	.mobile_menu_button {    position: absolute;    top: 10px;    right: 10px;}
	main figure.image-back, main figure.image-front{max-width: 195px; min-height: 180px; }
	main .projekte .gallery figure{width: 45%; float: left; margin-right:2%; margin-bottom: 10px; height: auto;}
	
	footer nav.footnav{padding: 20px 0 60px 0;}
}
@media (max-width: 470px) {
	.menu-text{display: none;}
	header .logo img{max-width: 65%;}
	.navigation{width: 70%;}
}