/* -----------------------------------------
    V 14
-------------------------------------------- */

:root {
  --gruen: #419A33;
  --gruen-dark: #3D9032;
  --gruen-hell: #82C17A;

  --gelb: #F4CA11;
  --gelb-dark: #EEC31C;
  --gelb-light: #F8EAB6;
  --gelb-transparent: rgba(248,234,182, 0.3);  
  --gelb-transparent-light: rgba(248,234,182, 0.15);      
  
  --blau: #5569E7;
  --blau-light: #CED4F6;
  --blau-bg: #EBECF7;
  --blau-dunkel: #4B5C9F; /*  #4254C4; */
    
  --pink: #D81F84;
    
  --textgrau: #575757;
    
  --spartan: 'Spartan', sans-serif;
 
  --logo-height: 75px; 
  --image-grid-columns: 3;
  --image-grid-gap: 2rem;
  --link-color: #419A33;
  
}

/* -----------------------------------------
    Better Place
-------------------------------------------- */

.better-place-section {
  padding: 4rem 0;
}

.better-place-header {
  margin-bottom: 2rem;
}
.better-place-header p {
  font-size: 19px;
}

.better-place-header * {
  margin: 0;
  padding: 0;
}


.iframe_better_place {
  padding: 0;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  box-sizing: border-box;

}

.better-place-text,
.better-place-header { 
  position: relative;
  padding: 1rem; 
}
.better-place-text figure {
    aspect-ratio: 595 / 839;
    opacity: 1;
    float: left;
    width: 200px;
    padding-right: 1rem;
    padding-bottom: 1rem;
    transform: rotate(-5deg) translateX(-20px);

}

.better-place-text h4 {
  margin-top: 1rem;
}

.better-place-text figure img {
    box-shadow: 2px 2px 10px;
    background-color: #FCE1C6;

}


/* -----------------------------------------
    Slide Cover
-------------------------------------------- */
     .slidecover * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.slidecover {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 6;
    overflow: hidden;
   background-color: black;
}

@media (max-width: 1580px) and (min-width: 801px) {
    .slidecover {
        /* border-top: 180px solid var(--blau-dunkel); */
         aspect-ratio: 16 / 8;
    }
}



.cover-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 2s ease-in;
}

.cover-slide.active {
    opacity: 1;
}

.cover-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.cover-slide-content {
    position: absolute;
    bottom: 10%;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    color: white;
    z-index: 10;
    width: 90%;
    max-width: 800px;
}

.cover-slide-content h1 {
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: bold;
    margin-bottom: 1rem;
    line-height: 1.2;
    color:white;
}

.cover-slide-content p {
    font-size: clamp(1rem, 2vw, 1.5rem);
    line-height: 1.5;
}



/* -----------------------------------------
     Portfolio
-------------------------------------------- */


.portfolio-wrapper {
  container-type: inline-size;
  container-name: size;
  padding: 1rem;
}

.portfoliobox {
  display: grid;
  gap: var(--image-grid-gap);
  grid-template-columns: repeat(var(--image-grid-columns), 1fr);
  grid-auto-rows: 1fr;
}
@media (max-width: 1000px) {
  .portfoliobox {
  --image-grid-columns: 2;
  }
}

@media (max-width: 500px) {
  .portfoliobox {
  --image-grid-columns: 1;
  }
}


.portfolio-text {
  font-size: 18px;
  text-transform: uppercase;
  padding: 1rem 0 0 0;
  line-height: 1.4em;
}
.portfolio-text a {
  text-decoration:none;
  color: var(--link-color);
  font-size: 16px;
  font-weight: 800 !important;
}

.portfolio-item {  
  width: 100%;
  background: white
}
.portfolio-item:hover { cursor: pointer; }
.portfolio-item:hover img {
  transform: scale(1.5);
  transition: transform 1s ease-in-out;  
}

.portfolio-image {
  aspect-ratio: 345/230;
  width: 100%;
  height: auto;
  object-fit: fill;
  overflow: hidden;
}
.portfolio-image img {
  aspect-ratio: 345/230;
  width: 100%;
  height: auto;
  object-fit: cover;
  overflow: hidden;
}


/* -------------------------------- */

.teaserline--head-byline {
  width: 80%;
  font-size: 18px;
  margin:1rem auto 2rem auto;
  text-align: center;
}


/* -----------------------------------------
    Bento Teaser
-------------------------------------------- */

.bento-grid {  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: repeat(1fr);
  gap: 30px 30px;
  grid-auto-flow: row;
   max-width: 1140px;
   margin:0 auto 5rem auto;
  grid-template-areas:
    "bento1 bento1 bento2 "
    "bento3 bento4 bento4"
    "bento5 bento5 bento6"
    "bento7 bento8 bento8";
    "bento9 bento10 bento10";
}

.wrapper {
  grid-template-columns:
    repeat(auto-fill, 10px)
    repeat(2, minmax(min-content, max-content));
}


.bentobox {
    background-color: rgba(248,234,182, 0.3);
    max-height: 400px;
    border-radius: 10px;
    font-size: 14px;
    box-shadow: 4px 4px  8px rgba(0,0,0,0.25);

}

.bento-content * {
    margin: 0.25rem 0;
}

.bento-content h3 {
  font-size: 26px;
}


.bentobox.bento-col {
   display: flex;
   flex-direction: column;
}
.bentobox.bento-row {
   display: flex;
   flex-direction: row;
}

.bentobox div.bento-wrap {   
   display: flex;
   align-items: center; /* Vertically centers the items */
   justify-content: left;
   padding:35px;
}

.bentobox img {
   object-fit: cover;
}
.bento-row img {
   max-width: 50%;
   border-radius: 10px 0 0 10px;
}

.bento-col img {
   max-height: 40%;
   border-radius: 10px 10px 0 0;
}

.bento2 { grid-area: bento2; }
.bento1 { grid-area: bento1; }
.bento3 { grid-area: bento3; }
.bento4 { grid-area: bento4; }
.bento5 { grid-area: bento5; }
.bento6 { grid-area: bento6; }
.bento7 { grid-area: bento7; }
.bento8 { grid-area: bento8; }

* {
   font-family: sans-serif;
}

.bento-grid a.dwl-button {
  background-color: #419A33;
  text-decoration:none;
  color: white;
  padding: 0.5em 2em;
  display: inline-block;
  margin: 0.5em 0 1.7em 0 ;
}


/* ----------------------------------------- */
.imgcaption {
  margin-top: 0.5rem;
  font-style: italic;
}

/* -----------------------------------------
    Webshop
-------------------------------------------- */
.webshop { 
  background-color: var(--gelb-transparent);
  padding: 3rem 0;
    text-align: center;
}
.webshop-logo {
    box-shadow: 2px 5px 12px rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(0, 0, 0, 0.08);
}

.webshop .portfolio-title { 
  font-size: 13px;
}

.webshop .intro {
  font-size: 16px;
  width: 720px;
  max-width: 80%;
  margin: 1rem auto 2rem auto;
}

.webshop .filter a.active {
  color: var(--pink) !important;
}


/* -----------------------------------------
  Terminbanner  
-------------------------------------------- */


.terminbanner {
  display: block;
  text-decoration: none;
  color:#419A33;
  background-color: pink;
  padding:0;
  margin-bottom: 2rem;
}

.terminbanner-wrapper {
  padding: 1rem;  
}

.terminbanner-date {
  font-size: 19px;
  font-weight: 600;
}

.terminbanner-head {
  font-size: 23px;
  padding-bottom: 0;
  margin-bottom: 0;
}

.terminbanner-link {
  font-size: 17px;
  color: white; 
  background-color: rgb(214, 31, 132);
  padding: 0.5rem 1rem;
  text-align: center;
  
  display: block;
  box-sizing: border-box;
}

 .terminbanner.terminbanner-mobile-top {
   display: none;
 }

@media (max-width: 800px) {
 
 .terminbanner {
   display: none;
 }
 
 .terminbanner.terminbanner-mobile-top {
   display: block;
 }
 
 
}


/* -----------------------------------------
    Ideenwettbewerb
-------------------------------------------- */


.ideenwettbewerb {
    font-size: 16px;
    padding-bottom: 3rem;
}

.ideenwettbewerb input,
.ideenwettbewerb textarea { font-size: 16px !important; }

.ideenwettbewerb .form-group,
.ideenwettbewerb .form-check-group {
    display: flex;
}

.ideenwettbewerb .form-group label,
.ideenwettbewerb .form-check-group label {
/*     border: 1px solid red; */
    width: 25%;
    text-align: right;
    box-sizing: border-box;
    padding-right: 1rem
}
.ideenwettbewerb .form-group input,
.ideenwettbewerb .form-group textarea,
.ideenwettbewerb .form-group .input-group {
    width: 75%;
    
}

.ideenwettbewerb .btn.newsletter-submit.greennature-button {
  margin-left: 25%;
  margin-top: 3rem;
}

.ideenwettbewerb fieldset {
  margin-top: 3rem;
}

.ideenwettbewerb fieldset legend {
  border-bottom: 1px dotted var(--gruen);;
  width: 100%;
  margin-bottom: 2rem;
  color:  var(--gruen);
  font-size: 18px;
  font-weight: 600;
  padding-bottom: 0.3rem;
}

.ideenwettbewerb .btn.btn-default {
  border: 1px solid green;
  background-color: green;
  padding: 5px;
  color: white;
}


/* -----------------------------------------
    Logobar
-------------------------------------------- */

 .infoline {display: none; padding-left: 20px; margin-top:-15px; margin-bottom: 1.5em; font-size: 15px;}
 .infoline span { text-transform: uppercase; color: var(--gruen);}

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

.logobar    { box-sizing: border-box; }
.logobar *  { box-sizing: border-box; }

.logobar img { 
   width: auto;
   height: var(--logo-height);
   box-sizing: border-box;
   vertical-align:top;
   margin-right: 5%;
}

.logobar-middle img {
  vertical-align:middle;
}

#logo_bn     {  height: calc(var(--logo-height) * 0.85)   }
#logo_bunv   {  height: calc(var(--logo-height) * 2.6)  }
#logo_naturgarten {  height: calc(var(--logo-height) * 1.3333)  }
#logo_gartengesellschaft {  height: calc(var(--logo-height) * 1.2)  }
#logo_wila {  height: calc(var(--logo-height) * 0.8)  }
#logo_tippingpoint {  height: calc(var(--logo-height) * 0.7)  }
/* #logo_heinzsielmannstiftung */

@media (max-width: 800px) {
   .logobar {
      text-align: center;
   }
   .logobar img { 
      margin-right: auto;
      margin-left: auto;
      margin-bottom: 3em;
      width: 90%;
      display: block;
      object-fit: contain;
      object-position: center;
      max-width: 100%;
   }
}

/* ------------------------- */



.k_navi .susy-item img { 
  max-height: 60px !important; 
  width: auto; 
  height: 100%;
}

.stunning-item-button.greennature-button {
  background-color: #D61F84 !important;
  font-size: 17px;
}

.bg_white           { background-color: #FFFFFF; } 
.bg_gray            { background-color: #EFEFEF; } 
.bg_yellow          { background-color: var(--gelb-transparent); }
.bg_yellow_light    { background-color: var(--gelb-transparent-light); }
.bg_blue            { background-color: var(--blau-bg); }


#yform-kontaktform-datenschutz {
    margin-bottom: 2em;
}

.has-error { color: red;}



.termin-archiv-wrapper h3 {
  font-size: 24px;
}

.termin-archiv-wrapper {
  padding-left: 80px;
  border-top: 1px dotted #ccc;
  padding-top: 2em;
  margin-bottom: 4em;
}


@media (max-width: 800px) {
  .termin-archiv-wrapper {
    padding: 1em !important;
  }  
}

/* -----------------------------------------
    Topikon
-------------------------------------------- */

.topikon a {
  display: inline-block;
  width:30px;
  width: 86px;
  float:right;
  background-color: lightgray;
  margin-right: 34px;
}

.topikon a:hover {
  background-color: var(--gruen);
}


.topikon img {
  height: 30px;
  width: auto;

}


/* -----------------------------------------
  Download PDF
-------------------------------------------- */

.dwl-wrapper {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  width:100%;
  margin-left: -10px;
  align-items: left;
  justify-content: left;
}

.dwl_item {
  box-sizing: border-box;
  display: inline-block;
  margin: 25px 10px 10px 10px;
  flex: 1 1 23%;
  max-width: 23%;
}



.dwl_intro p {
  font-size: 18px;	
}

.dwl_intro h2 {
  font-weight: 700;
  font-size: 28px;
  margin-bottom: 0;
  margin-top: 1.5em;
  padding:0;
}

.dwl_item_image {
  margin-bottom: 1em;
  max-width: 100%;
}

.dwl_item_image > img {
  max-width: 100%;
}

.dwl_item_descr h3 {
  font-weight: 500;
  font-size: 17px;
  
}

.dwl_item_descr p {
  font-size: 14px;
  display: inline-block;
  min-height: 120px;
}


.dwl_item_descr a.dwl-button {
  background-color: var(--gruen);
  color: white;
  padding: 0.5em 2em;
  display: inline-block;
  margin: 0.5em 0 1.7em 0 ;
}



@media (max-width: 800px) {

  .dwl {
    padding: 15px !important;
  }

  .dwl-wrapper * {
    box-sizing: border-box;
  }

  .dwl-wrapper {
    display: block;
    width:100%;
    overflow: hidden;
  }

  .dwl_item {
    flex: 1;
    width: 100%;
    max-width: 100%;
  }
 
  .dwl_item_descr h3 {
    font-size: 16px;
    font-weight: 600;
  }

}



/* -----------------------------------------
    Servicenavigation TOP
-------------------------------------------- */

.servicenavigation a {
    display: inline-block;
    margin-left: 0em;
    padding: 3px 11.7px;
    text-transform: uppercase; 
}

.top-navigation-wrapper a.social1000 { 
    font-size: 20px;
    padding:5px 15px 5px 15px;
    text-align: center;
    margin-left: 10px; 
    margin-top: 0px;
    line-height: 1em; 
    box-sizing: border-box;
    display: inline-block;
    transform: translateY(3px); 
    height:100% !important;
}

.top-navigation-wrapper a.social1000 i { 
    line-height: 1em; 
    margin: 0;
}

.top-navigation-wrapper a.social1000:hover {
    background-color: rgba(0, 0, 0, 0.333);    
}



---------------------------------




.greennature-small-title h3.bili-headline {
    margin-bottom: 1.5em;
}

@media (max-width: 800px) {

    .servicenavigation a {
        margin: 0 1em;
     }

  .servicenavigation {text-align: center;}


}

.top-navigation-wrapper{ 
    width: 100%;
    height: auto; 
    z-index: 98; 
	padding: 0; 
	font-size: 15px; 
	line-height: auto; 
}


.top-navigation-container {
    max-width: 100% !important;
    text-align:right;
    padding-right: 20px
}


.top-navigation-wrapper{ 
	background-color: var(--blau-dunkel); 
}

.top-navigation-wrapper{ color: #fff; }
.top-navigation-wrapper a{ color: #f2f2f2; }

.top-navigation-left{ float: left; margin: 0px 15px; }
.top-navigation-right{ float: right; margin: 0px 15px; }


a.go-nl { 
  background-color: #D61F84; 
  color: white !important;
  width: auto;
  text-align:center;
  margin-left:1em;
  padding: 7px 25px;
  }

a.go-service {
    width:117px;
    box-sizing: border-box;
    text-align: center;
}

a.go-search {
    font-weight: 600;
    padding-right: 1em;
    background-image: url('/img/ico-search.svg');
    background-size: auto 50%;
    background-repeat: no-repeat;
    background-position: right 14px center;
    
    background-color: #D61F84;
    color: white !important;
    width: auto;
    text-align: center;
    padding: 7px 45px 7px 25px;
    
}


/* -----------------------------------------
    COOKIE Alert
-------------------------------------------- */



.cookie {
  background: #5569E7;
  color: #ecf0f1;
  padding: 1rem 10%;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
  position: fixed;
  left:0;
  bottom:0;
  width: 100%;
  z-index: 10000;
  box-sizing: border-box;
}
@media (max-width: 32rem) {
  .cookie {
    text-align: center;
  }
}
.cookie .cookie__message {
  padding: 0.2rem 0;
  margin: 0;
  display: inline-block;
}
@media (max-width: 64rem) {
  .cookie .cookie__message {
    width: 100%;
  }
}
.cookie .cookie__accept,
.cookie .cookie__decline,
.cookie .cookie__link {
  padding: 0.2rem 0.8rem;
  border: 0;
  background: white;
  margin: 0 0.5rem;
  -webkit-transition: background 150ms ease;
  transition: background 150ms ease;
  text-decoration: none;
  cursor: pointer;
  display: inline-block;
}
.cookie .cookie__accept:focus,
.cookie .cookie__decline:focus,
.cookie .cookie__link:focus {
  outline: none;
}
@media (max-width: 64rem) {
  .cookie .cookie__accept,
  .cookie .cookie__decline,
  .cookie .cookie__link {
    margin: 0.5rem 1rem 0.5rem 0;
  }
}
@media (max-width: 32rem) {
  .cookie .cookie__accept,
  .cookie .cookie__decline,
  .cookie .cookie__link {
    width: 100%;
  }
}
.cookie .cookie__accept {
  background: #419A33;
  color: #ecf0f1;
}
.cookie .cookie__accept:hover, .cookie .cookie__accept:focus {
  background: #57aae1;
}
.cookie .cookie__accept:active {
  background: #68b2e4;
}
.cookie .cookie__decline {
  background: #D81F84;
  color: #ecf0f1;
}
.cookie .cookie__decline:hover, .cookie .cookie__decline:focus {
  background: #233140;
}
.cookie .cookie__decline:active {
  background: #1e2a36;
}
.cookie .cookie__link {
  color: orange;
  background: none;
  padding: 0.2rem 0;
  margin: 0;
}
@media (max-width: 64rem) {
  .cookie .cookie__link {
    margin: 0.5rem 0;
  }
}
.cookie .cookie__link:hover, .cookie .cookie__link:focus {
  text-decoration: underline;
}
@media (max-width: 32rem) {
  .cookie .cookie__link {
    width: 100%;
    text-align: center;
  }
}





/* -----------------------------------------
    Newsletter Form - Bar
-------------------------------------------- */

.datenschutz { 
    padding-top: 1em;
    color: gray;
    width: 600px;
    max-width:100%;
    box-sizing: border-box;
    margin: 0 auto;
    font-size: 15px;

}

.datenschutz a { color: var(--gruen); }

@media (max-width: 800px) {

  .newsletterbox  .newsletter-email {
    margin-top:-16px;
  }
  
  .datenschutz { 
    padding: 1em 0.75em;
  }
 
}



/* -----------------------------------------
    Social Ikon
-------------------------------------------- */

.social--icon {
    font-size: 22px;
}


/* -----------------------------------------
    Basecover
-------------------------------------------- */

.basecover {
    position: relative;
    margin-bottom: 60px;
}

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

@media (max-width: 800px) {
  .kontakt { margin-bottom: 2em; } 
}



/* -----------------------------------------
    Kontaktbar
-------------------------------------------- */

.konta { 
   position: absolute;
   right: 0;
   bottom: 36px;
   width: 40px;
   height:auto;
   z-index:100;

}

.konta a {
   position: relative;
   top: 0;
   left:0;
   display:block;
   width: 320px;
   background-color:rgb(66, 84, 196);
   background: rgba(101, 120, 235, 0.85);


   color: white !important;
   line-height:40px;
   height:40px;
   overflow: hidden;
   transition: 1s all ease-in-out;
   text-decoration: none !important;
   box-sizing: border-box;
   border: 0;
   padding:0;
   margin: 0 0  5px 0;
   text-align: left;
   border:0;
}

div.konta a span {
   margin-left:62px;
}

.konta a:hover {   transform: translatex(-160px); }

.konta  a  i {
   position: absolute;
   display: block;
   width: 40px;
   height: 40px !important;
   background-color: orange;
   vertical-align: middle;
   background-repeat: no-repeat;
   background-position: center;
   background-size: 100%;
   /*! background-color: #fbba00; */
   border:0;
}

@media (max-width: 800px) {


    .konta { display: none;}
    
    .konta  a  i {
       width: 33px;
       height: 33px !important;
    }

    .konta { 
       top: 90px;
       width: 33px;
       height:33px;
    }

    .konta a {
       width: 33px;
       line-height:33px;
       height:33px;
    }

    .konta a:hover {   transform: translatex(-66px); }

}



.konta > a.konta-newsletter > i {   
   background-image: url(/img/ico-flutschi-newsletter.svg);
}
.konta > a.konta-gartenpraemierung > i {
   background-image: url(/img/ico-flutschi-praemierung.svg);
}
.konta > a.konta-praemierte-paradiese > i {
   background-image: url(/img/ico-flutschi-paradiese.svg);
}



/* -----------------------------------------
    Backlink
-------------------------------------------- */

.back { 
    position: relative;
    text-align: center;
    padding: 5px;
    margin-top: -20px;
    margin-bottom: 1em;
}

a.back--link { 
    color: var(--gruen);
    text-align: center;
    padding: 5px;
    background-image: url(/img/icon-back.svg);
    background-position: left center;
    background-size: auto 24px;
    background-repeat: no-repeat;
    padding-left: 2em;
    display: inline-block;
}



/* -----------------------------------------
    Download
-------------------------------------------- */

.download { 

}

.download--header {
    padding: 0 15px;
}


.download--header h2 { 
    font-weight: 800; 
    margin-bottom: 6px; 
    text-transform: uppercase; 
    letter-spacing: 2px; 
    color: var(--gruen);
     font-size: 24px; 
}


/* -----------------------------------------
    Text
-------------------------------------------- */

section.text h1,
section.text h2,
section.text h3,
section.text h4,
section.text h5 { 
    font-weight: 800; 
    margin-bottom: 6px; 
    text-transform: uppercase; 
    letter-spacing: 2px; 
    color: var(--gruen);
}

section.text h1 {
    font-size: 24px; 
}

section.text h2 {
    font-size: 21px; 
}

section.text h3 {
    font-size: 18px; 
}

section.text h4 {

  font-size: 16px; 

}

section.text h4 {

  font-size: 16px; 

}

section.text h5 {

  font-size: 14px; 

}

.text--artikel { padding-right: 4em; box-sizing: border-box;}

@media (max-width: 800px) {
 .text--artikel { padding-right: 0; box-sizing: border-box;}
}

/* -----------------------------------------
    Font HEADLINE
-------------------------------------------- */

@font-face {
	font-family: 'GreatVibes';
	src: url('../fonts/Great_Vibes/GreatVibes-Regular.ttf');
    font-weight: 500;
    font-style: normal;
}




/* -----------------------------------------
    Conbox - Content 50/50
-------------------------------------------- */

.conbox .susy { 
   min-height:200px; 
}

.conbox__img { 
   position: relative;
   top:0;
   left:0;
   width: 100%;
   height: 100%;
   background-position: center center;
   background-size: cover;
   background-repeat: no-repeat;
   min-height:240px;
 }


.conbox__img.full_image { 
   background-position: right center;
   background-size: auto 100%;
 }

.conbox__right .conbox__img.full_image { 
   background-position: left center;
   background-size: auto 100%;
 }


@media (max-width: 800px) {

.conbox__right .conbox__img.full_image { 
   background-position: center;
   
 }

 
}

.conbox__text {
   padding: 60px 40px;
   box-sizing: border-box;
}

.conbox__text > div { max-width: 680px;}

.conbox__right .greennature-about-us-item {
    float: right;
}

@media (max-width: 800px) {

  .conbox__text { padding: 40px 10px;  }
  .conbox__text > div { max-width: 100%; } 
  .conbox__img  { height: 100vw; }

  .conbox__right .greennature-about-us-item {
    float: none;
  }

  
}


/* -----------------------------------------
    Teaserline
-------------------------------------------- */

.teaserline { 
    background-color: rgba(101, 120, 235, 0.10);
}


.teaser-row {
    max-width: 1344px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: left;
    gap:10px;
}

.teaser-row .columns {
  margin-bottom: 1.5rem;
}


.teaser-row .three.columns {
    width: calc(33% - 24px);
}

.teaser-row .four.columns {
    width: calc(25% - 24px);
}


@media (max-width: 1024px) {

    .teaser-row .columns {
      width: calc(50% - 24px);
    }
     
}

@media (max-width: 767px) {

    .teaser-row {
      gap:20px;
    }
    
    .teaser-row .columns {
      width: 100%;
    }
  
}


/* -----------------------------------------
    Image
-------------------------------------------- */

.centerimage {
    
    margin-bottom: 4em;
}

.headersection h2 {
    font-size: 24px;
    margin-bottom: 0;
    font-weight: 800;
    margin-top: 3rem;
}

.headersection p {
    margin-top: 0;
    font-size: 19px;
}

/* -----------------------------------------
    Testimonial
-------------------------------------------- */

.testimonial {
    background-color: var(--gelb);
}

.testimonial h3 {
    color: white !important;
}

.greennature-item-title-wrapper .greennature-flex-prev, 
.greennature-item-title-wrapper .greennature-flex-next { 
	color: white; 
}


/* -----------------------------------------
    IKON - Teaser - Liste
-------------------------------------------- */
.ikon-teaser-liste {
    background-color: var(--gelb-transparent-light); 
    padding-bottom: 15px;
}

/* -----------------------------------------
    Logowand
-------------------------------------------- */

.partner .susy-item span { 
    width: 100%;
    font-size: 18px;
    font-family: "Spartan", sans-serif;
}

.partner p { 
    width: 100%;
    font-size: 18px;
    font-family: "Spartan", sans-serif;
    margin-top:3em;
    margin-bottom: 0.5em;
}

.partner--bar {
    margin-bottom: 8px;
}

 
@media (min-width: 800px) {

    .partner-line { 

    }
    
    .partner-line img {
        height:90px;
        display: inline-block;
        width: auto;
        margin-right: 4em;
    }
    
    #lo1  { height:90px; }
    #lo2  {  
        height:55px;
        transform: translate(0, 7px);
    } 
    #lo3  { 
        height:90px;
        transform: translate(0, 21px); 
    }
    
    #lo4  { height:100px; }
    #lo5  {
        height:75px;
        transform: translate(0, -17px);    
    }
    
    #lo6  { 
        height:100px;
    }

    #lo7  { margin-right: 4em;  }
    #lo8  {     
        height:80px; 
        transform: translate(0, -12px);
    }
    
    #lo9  {        
        height:60px;  
    }
    #lo10  {  
        height:65px;  
        transform: translate(0, 5px);    
    }
    #lo11  {
        height:75px;  
        transform: translate(0, 5px);    
        margin-top: 0.75em

    }

    
}




@media (max-width: 800px) {

    .partner-line { 
      text-align: center;
    }
    
    .partner p { 
      width: 100%;
      text-align: center;
      margin-bottom: 0.5em;
      padding: 0 20px;
      box-sizing: border-box;
    }


    .partner-line img {
        height:70px;
        display: inline-block;
        width: auto;
        margin-right: 0;
        margin-bottom: 1em;
    }
    
    #lo1  { height:90px;  }
    #lo2  { height:55px;  } 
    #lo3  { height:90px;  }
    
    #lo4  { height:100px; }
    #lo5  { height:75px;  }
    
    #lo6  { height:100px; }

    #lo7  { height: 90px; }
    #lo8  { height:80px;  }
    
    #lo9  { height:60px;  }
    #lo10 { height:65px;  }
    #lo11 { height:75px;  }

 
}


/* -----------------------------------------
     Header
-------------------------------------------- */

.greennature-header-container { 
    max-width: 100% !important;
    position: relative; 
    z-index: 97; 
}

.greennature-logo-inner{ 
	max-width: 300px; 
	margin-left:20px
}

.greennature-logo { 
	margin-top: 0.5em; 
    margin-bottom: 1em; 
}

.greennature-logo { 

}

.greennature-navigation-wrapper, .greennature-logo-right-text { 
	margin-top: 50px; 
}

.greennature-navigation-wrapper .greennature-main-menu > li > a { 
	padding-bottom: 30px; 
}

@media (max-width: 1160px) {
 .greennature-logo-inner{ 
   max-width: 200px; 
   margin-left:20px
 }
 
  .greennature-navigation-wrapper, .greennature-logo-right-text { 
    margin-top: 0px; 
  } 

}

/* -----------------------------------------
    Header Logo leben.natur.vielfalt
-------------------------------------------- */

@media (min-width: 1400px) {

  .greennature-header-inner {
    background-image: url('/img/top-logo-foerderer-leben-natur.svg?ver=2');
    background-repeat: no-repeat;
    background-position: right 20px top;
    background-size: auto 116px;
  }
  .greennature-navigation-wrapper{ 
    
    margin-right: 310px
  }
 
  .greennature-fixed-header .greennature-navigation-wrapper { 
/*     margin: 0px 200px 0 15px;  */
    margin-right: 200px
  }


  .greennature-header-container { 
    max-width: 100% !important;
  }


}

.greennature-header-inner.greennature-fixed-header {
    background-size: auto 70px;
}


@media (max-width: 1315px) {
 
  .greennature-header-inner {
    background-position: right 20px top;
    background-size: auto 115px;
  }
  

  
 
}




/* -----------------------------------------
     Newsletter
-------------------------------------------- */

.newsletterbox .greennature-skin-newsletter {
    padding-top: 145px; 
    padding-bottom: 60px; 
    background: var(--gelb-transparent-light);
}


@media (max-width: 800px) {

  .newsletterbox .greennature-skin-newsletter {
    padding-top: 40px; 
    padding-bottom: 40px; 
    
}


 
}



/* -----------------------------------------
    Aktionbanner
-------------------------------------------- */

section.aktionsbanner {

}

.aktionsbanner .greennature-background-image {
    padding-top: 125px; 
    padding-bottom: 90px; 
    background-color: var(--gelb-transparent) !important;
}

h2.stunning-item-title { color: var(--gruen); }

.aktionsbanner .stunning-item-caption { 
    color: var(--gruen); 
    font-family: var(--spartan);
    
}

.aktionsbanner_image p { color: white; text-shadow: 2px 2px 12px #000000c7;}


section.aktionsbanner_image h2.stunning-item-title {
    color: white;
    text-shadow: 2px 2px 12px #000000c7;
}


@media (max-width: 800px) {

  .aktionsbanner .greennature-background-image {
    padding-top: 3em; 
    padding-bottom: 3em; 
  }

  h2.stunning-item-title { font-size: 2em !important; }
  .aktionsbanner p { font-size: 17px; }
 
}


/* -----------------------------------------
    Feature banner
-------------------------------------------- */

.featurebanner {
    color: white;    
}

.featurebanner--wrapper {

    background-color: var(--gelb); 
    padding-top: 85px; 
    padding-bottom: 62px; 
}


.greennature-skill-item-title   { color: white;   }
.greennature-skill-item-caption { color: white;   }



/* -----------------------------------------
    Button
-------------------------------------------- */


.msp-preset-btn-159 {
    background-color: var(--gruen);
    color: white;
}

/* -----------------------------
    SUSY-GRID System
   ----------------------------- */

/* Float or flex… */
.susy {  display: flex; }

/* Setup… */
.susy-item {
  --span: initial; /* avoid inheritance */
  --percentage: calc(var(--span) * 100%);
  width: var(--percentage, initial);
}

/* Items… */
.susy-1  {  --span: 1/12; }
.susy-2  {  --span: 2/12; }
.susy-3  {  --span: 3/12; }
.susy-4  {  --span: 4/12; }
.susy-5  {  --span: 5/12; }
.susy-6  {  --span: 6/12; }
.susy-7  {  --span: 7/12; }
.susy-8  {  --span: 8/12; }
.susy-9  {  --span: 9/12; }
.susy-10 {  --span: 10/12; }
.susy-11 {  --span: 11/12; }
.susy-12 {  --span: 12/12; }

@media (max-width: 800px) {
   .susy {  display: block; }
   .susy-item { width: 100%; }
}


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

.praemierte__thumbnail {
  width: 345px;
  height: 230px;
  object-fit: cover;
}

/* ---------- ENDE Susy-GRID */