/*------------------------------------------
  Galerie
-------------------------------------------- */

.gallery { padding:5rem 0 }
.gallery-images {
	display:flex;
	flex-wrap:wrap;
	gap:1rem;
}
.gallery-image {
	display:block;
	max-width:250px;
	position:relative;
	overflow:hidden;
}
.gallery-image img {
	display:block;
	width:250px;
	height:250px;
	object-fit:cover;
}
.gallery-caption {
	display:block;
	line-height:1.5;
	position:absolute;
	padding:0.5rem 1rem;
	left:0;
	bottom:0;
	right:0;
	color:white;
	background-color:rgba(61,144,50,0.7);
	transform:translateY(calc(100% - 2.0rem));
	transition:all 0.4s ease;
}
.gallery-image:hover .gallery-caption {
	transform:translateY(0);
}

/* --- simpleLightbox --- */
.sl-overlay {
	background:black;
}
.sl-wrapper .sl-image .sl-caption {
	background-color:rgba(0,0,0,0.5);
}
.sl-wrapper .sl-counter,
.sl-wrapper .sl-navigation button {
	color:white;
}

.inline-gallery {
	display:inline-block;
}




/* -----------------------------------------
 Social Mobile
-------------------------------------------- */
.mobile-social-box > a.social1000 {
display: inline-block !important;
width:14.0%;
border: 0 !important;
text-align: center;
}
.mobile-social {
background: #8492ef;
}

/* -----------------------------------------
     Konatkt
-------------------------------------------- */

.kontakt--titel { 
    color: var(--gruen);

}

h2.kontakt--headline {
    margin: 0 15px 1rem;
    font-size: 28px;
    font-weight:700;
    text-transform: uppercase;
    color: var(--gruen);
    
}





/* -----------------------------------------
    Zitat
-------------------------------------------- */

.quote { 
   background-color: #333333; 
   color: white;
   padding: 6em;
   text-align: center;
}

.quote-citate { 
   font-size: 60px;
   font-weight:300;
   line-height: 1.4em;
    padding-bottom: 0.5em;
   font-family: 'Bilbo', serif;
}




.quote-name { 

   font-size: 24px;
   font-weight:300;   
   padding-top: 0em;
}

@media (max-width: 800px) {

    .quote { 
       padding: 2em;
    }


    .quote-citate { 
       font-size: 40px;
       padding-bottom:0;
       line-height: 1.6em;
    }

    .quote-name { 
       font-size: 20px;


}


 
}


/* -----------------------------------------
    Baseheadline
-------------------------------------------- */
h3.baseheadline { 
    font-size: 23px;
    font-weight: 800;
    margin-bottom: 2em;
    letter-spacing: 1px;
    padding-left: 0.75em;
    color: var(--gruen);
}

/* -----------------------------------------
    Para-Wrapper
-------------------------------------------- */


.para {}
.para--textwrapper {

    text-align: center;

    padding: 2em;
    
}
.para--headline {  
    color: white; 
    font-size: 28px; 
    font-weight: bold; 
    text-transform: uppercase;
    background-color: rgba(50, 0, 0, 0.50);
    border-radius: 8px;
    width: auto;
    display:inline-block;
    padding: 0.75em 2em;
    margin:0;
}
.para--byline {    
    color: white; font-size: 24px; font-weight: 300; 
    background-color: rgba(50, 0, 0, 0.50);
    border-radius: 8px;
    width: auto;
    display:inline-block;
    padding: 0.25em 2em;
    margin:1em 0 0;
}


/* -----------------------------------------
    Introtext
-------------------------------------------- */

.introtext {
    padding: 4em 0;
    background-color: var(--gelb-transparent-light );
}



.introtext .container { max-width: 720px; text-align: center;}
.introtext--header {padding-bottom: 1.5em; color: rgb(20,20,20)}
.introtext--headline { 

    font-weight: 700; 
    font-size:32px;
    margin-bottom:0;
    color: var(--gruen);
}

.introtext--byline {
    font-size: 22px; 
    font-weight: 300; 
    font-family: var(--spartan);
    color: var(--gruen);
}

.introtext p {
    font-size: 16px;
}


@media (max-width: 800px) {

    .introtext {        
        padding: 3em 1.5em;    
    }
    .introtext--headline { 
        font-size:26px;
    }
    .introtext--byline {
        font-size: 18px; 
    }

    .introtext p {
        font-size: 15px;
    }

 
}


/* -----------------------------------------
    Modulhinweis
-------------------------------------------- */

body {
    font-size: 14px;
}

.modinfo {
    padding: 1em 2em;
    background-color: black;
    color: red; 
}

.greennature-page-title-wrapper { 
    padding: 85px 0px 80px; 
    position: relative; 
    z-index: 89; 
    line-height: 1; 
    text-align: center;
	background-image: url('/img/page-title-background-3.jpg'); 
    background-repeat: no-repeat; 
    background-position: center top; 
    background-size: cover; 
}

.greennature-portfolio-description h4 {
	margin-bottom: 0;
	padding-bottom: 0;
	font-size: 20px;
}

li.active-path > a { color: orange !important; }


/* -----------------------------------------
    Filter
-------------------------------------------- */


.filter ul {
	margin: 0 auto 40px;
	display: table;
    text-align: center;
    width: 100%;
}

.filter li {
	display: inline-block !important;
	list-style: none;
	margin: 0 20px;
}

.filter li:first-child {
	margin-left: 0;
}
.filter li:last-child {
	margin-right: 0;
}

.filter a {
	padding-bottom: 10px;
	text-transform: uppercase;
	color: var(--gruen);
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 0px;
}

.filter a.active {
	color: var(--gruen-hell) !important;
}


/* -----------------------------------------
    Platzhaler
-------------------------------------------- */

.platzhalter {
    background-color: orange; padding: 40px 120px;
    color: white;
    font-size: 24px;
    text-align: center;
    font-weight: 300;
    border: 10px dotted white;
    margin: 1rem; 
}


/* -----------------------------------------
    Prämierte Gärten
-------------------------------------------- */

.gardens {
	padding:2rem 0 1rem 0;
}



/* -----------------------------------------
 Ankermenü
-------------------------------------------- */

.ankermenu { 
/*     background-color: red; */
 /* padding-top: 4em; */
 padding-bottom: 0px;

}
.ankermenu a:after {
    content: ' ';
    display: inline-block;
    width: 20px;
    height:20px;
    margin-left: 4px;
    margin-bottom: -05px;
    background-image: url('/img/ico-arrow-downward.png');
    background-repeat: no-repeat;
    background-size: 100%;
    
}
.ankermenu .container {     
 border-bottom: 1px dotted  silver !important;
}