/*.leaflet-tile {
  filter: grayscale(100%) brightness(1.05) contrast(1.05);
}*/

.projekt-locator { gap: 12px; }
.projekt-locator__filters { display:flex; gap:8px; margin-bottom:20px !important; position: relative;}
.projekt-locator__filters input, .projekt-locator__filters select {
  flex:1; padding:8px; border:1px solid #ddd; border-radius:6px;
}

.pl-category-radios{
    position: absolute;
    width: calc(100% - 0px);
    background: var(--almostWhite) !important;
    padding: 20px;
    border-radius: 0px 0px 20px 20px;
    top: 100%;
    z-index: 999999999;
}

.projekt-locator__grid { display:flex; flex-wrap:wrap; flex-direction: row; gap:12px; }
.projekt-locator__grid > div{
  width: 100%;
}

.projekt-locator__grid > div:nth-child(2) button {
  border-radius: 10px;
  padding: 10px 30px;
  background: var(--almostWhite) !important;
  cursor: pointer;
  width: 100% !important;
}

.projekt-locator__grid > div:nth-child(2) button.pl-toggle-button span {
  position: relative;
  padding-left: 50px;
  top: 3px;
}

.projekt-locator__grid > div:nth-child(2) button.pl-toggle-button span:before {
  content: "";
  width: 40px;
  height: 40px;
  position: absolute;
  top: 50%;
  left: 0px;
  transform: translateY(-50%);
  background: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8cGF0aCBkPSJNMTQgMThIMTBWMTZIMTRWMThaTTE4IDEzSDZWMTFIMThWMTNaTTIxIDhIM1Y2SDIxVjhaIiBmaWxsPSJibGFjayIvPgo8L3N2Zz4=");
  background-size: contain !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}


.projekt-locator__map { height: 720px; border:1px solid #eee; border-radius:8px; overflow:hidden; }
.projekt-locator__list { max-height:720px; overflow:auto; border:1px solid #eee; border-radius:8px; }

.pl-item { padding:10px; border-bottom:1px solid #f0f0f0; cursor:pointer; }
.pl-item:hover { background:#fafafa; }
.pl-item__title { margin:0; font-weight:600; }
.pl-item__meta { font-size:12px; color:#666; }

.pl-offcanvas {
  position: fixed; top: 0; left: 0px;top: 0px;width: 100%;height:100%;opacity:0;visibility:hidden;
  background: rgba(68, 71, 65, 0.50);backdrop-filter: blur(10px); z-index: 999999999; padding: 16px;
}
.pl-offcanvas.open {opacity:1 !important;visibility:visible !important;transition: 0.25s all linear;}
.pl-offcanvas__close {
  position:absolute; top:20px; right:20px; border:none; background:transparent; font-size:24px; cursor:pointer;
}
.pl-offcanvas__content { margin-top:32px; font-size:16px; }

.wrapperContent_popup{
  max-width: calc(900px + 25vw);
  margin: auto !important;
  position: relative;
  border-radius: 20px;
  overflow: auto;
  height: calc(100vh - 50px);
  max-width: 1400px;
  padding-bottom: 100px;
  top: 5%;
  -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
  width: 90% !important;
}

.wrapperContent_popup::-webkit-scrollbar {
  display: none;
}

#pl-offcanvas-content{
  background: #E9ECE3 !important;
  border-radius: 20px !important;
}


#pl-offcanvas-content .project-categories{
  margin-bottom: 30px !important;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.headerbild{
  border-radius: 20px !important;
}

.content_popup{
  padding-bottom: 40px !important;

}

.project-categories{
  padding-top: 60px;
  padding-left: 40px;
  padding-right: 40px; 
}

.content_popup .status{
  margin-left: 40px !important;
}

.content_popup .projektTitle,.content_popup .location,.content_popup .excerpt_projekt,.content_popup .zitat,.content_popup .kennzahlen,.content_popup .foerderung,.forderung_logosBildergalerie{
 padding-left: 40px;
 padding-right: 40px; 
}

.content_popup .website{
  margin-left: 40px !important;
  width: calc(100% - 80px) !important;
}

.back-to-map{
  background: var(--secondary1) !important;
  width: 100%;
  min-height: 150px;
  margin-top: 30px !important;
  border-radius: 20px;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.back-to-map:hover{
  color: var(--primary2) !important;
}

.wrapperContent_popup .projektTitle{
  font-weight: 700 !important;
}

.wrapperContent_popup .status{
  position: relative;
  margin-top: 20px !important;
  margin-bottom: 50px !important;
  display: table;
  padding-left: 25px;
}

.wrapperContent_popup .status.betrieb:before{
  content:"";

  position: absolute;
  background: var(--secondary1) !important;
  border-radius: 50%;
}

.wrapperContent_popup .status.bau:before{
  content:"";

  position: absolute;
  background: var(--secondary2) !important;
  border-radius: 50%;
}

.wrapperContent_popup .status.planung:before{
  content:"";

  position: absolute;
  background: var(--secondary3) !important;
  border-radius: 50%;
}

.wrapperContent_popup .status:before{
  left: 0px;
  top: 10px;
  height: 15px;
  width: 15px;
  top: 50%;
  transform: translateY(-50%);
}

.wrapperContent_popup .excerpt_projekt{
  color: var(--darkGrey) !important;
  font-weight: 500 !important;
  display: block !important;
  margin-bottom: 50px !important;
}

.wrapperContent_popup .foerderung{
  color: var(--darkGrey) !important;
  font-weight: 500 !important;
  display: block !important;
  margin-bottom: 50px !important;
}

.wrapperContent_popup .foerderung strong{
  color: rgba(68,71,65,0.5) !important;
  font-weight: 500 !important;
  margin-bottom: 10px !important;
  display: table !important;
}

.wrapperContent_popup .kennzahlen{
  color: rgba(68, 71, 65, 0.5) !important;
  font-weight: 500 !important;
  margin-bottom: 50px !important;
}

.wrapperContent_popup .kennzahlen .zahl{
  font-weight: 700 !important;
  border-radius: 10px;
  background: var(--almostWhite) !important;
  padding: 20px;
}

.wrapperContent_popup .kennzahlen .description{
  font-weight: 500 !important;
}

.wrapperContent_popup .kennzahlen .flexBoxes{
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  margin-top: 20px !important;
  color: var(--darkGrey) !important;
}

.wrapperContent_popup .kennzahlen .flexBoxes > div{
  width: calc(50% - 15px);
  border-radius: 10px;
  background: var(--middleGrey) !important;
  padding: 10px;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 15px;
  align-content: flex-start;
}

.wrapperContent_popup .kennzahlen .flexBoxes > div > div:nth-child(1){
  width: 100% !important;
  min-height: 100px !important;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wrapperContent_popup .kennzahlen .flexBoxes > div > div:nth-child(2){
  width: calc(100% - 0px) !important;
  text-align: center !important;
}

.wrapperContent_popup .zitat{
  font-weight: 700 !important;
}

.wrapperContent_popup .zitat em{
  font-style: normal !important;
  color: var(--darkGrey) !important;
  margin-top: 15px !important;
  display: table;
}

.wrapperContent_popup .website{
  border-radius: 10px;
  background: var(--middleGrey) !important;
  padding: 20px;
  width: 100%;
  margin-top: 45px !important;
  display: flex !important;
  justify-content: center;
  align-items: center;
  min-height: 150px;
}

.wrapperContent_popup .website:hover{
  color: var(--primary2) !important;
}

.wrapperContent_popup .website span{
  position: relative;
  padding-left: 100px;
}

.wrapperContent_popup .website span:before{
  content: "";
  width: 80px;
  height: 80px;
  position: absolute;
  background: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjMiIGhlaWdodD0iNjMiIHZpZXdCb3g9IjAgMCA2MyA2MyIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8cGF0aCBkPSJNNjAuODA5OSAzMS41QzYwLjgwOTkgMTQuOTMxNiA0Ny41MzI4IDEuNSAzMS4xNTUgMS41QzE0Ljc3NjggMS41IDEuNSAxNC45MzE2IDEuNSAzMS41QzEuNSA0OC4wNjg0IDE0Ljc3NjggNjEuNSAzMS4xNTUgNjEuNSIgc3Ryb2tlPSIjMDIyRTc1IiBzdHJva2Utd2lkdGg9IjMiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIvPgogIDxwYXRoIGQ9Ik0zNC4xMjAxIDEuNjQ3OTVDMzQuMTIwMSAxLjY0Nzk1IDQzLjAxNjUgMTMuNDk5OCA0My4wMTY1IDMxLjQ5OTYiIHN0cm9rZT0iIzAyMkU3NSIgc3Ryb2tlLXdpZHRoPSIzIiBzdHJva2UtbGluZWNhcD0icm91bmQiLz4KICA8cGF0aCBkPSJNMjguMTg5NCA2MS4zNTE2QzI4LjE4OTQgNjEuMzUxNiAxOS4yOTMgNDkuNDk5NSAxOS4yOTMgMzEuNDk5NkMxOS4yOTMgMTMuNDk5OCAyOC4xODk0IDEuNjQ3OTUgMjguMTg5NCAxLjY0Nzk1IiBzdHJva2U9IiMwMjJFNzUiIHN0cm9rZS13aWR0aD0iMyIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+CiAgPHBhdGggZD0iTTMuMzY3MTkgNDJIMzEuMTU1IiBzdHJva2U9IiMwMjJFNzUiIHN0cm9rZS13aWR0aD0iMyIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+CiAgPHBhdGggZD0iTTMuMzY3MTkgMjFINTguOTQyOCIgc3Ryb2tlPSIjMDIyRTc1IiBzdHJva2Utd2lkdGg9IjMiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIvPgogIDxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNNjAuNDUwNSA0OS4yNTIxQzYxLjkxNDggNTAuMTYzMyA2MS44MjQ3IDUyLjM4MTIgNjAuMzE2NSA1Mi41NTQ0TDUyLjcwNTIgNTMuNDI3TDQ5LjI5MTMgNjAuMzYzOEM0OC42MTUgNjEuNzM4NCA0Ni41MjQgNjEuMDY1NyA0Ni4xNzgyIDU5LjM2Mkw0Mi40NTU3IDQxLjAxMzlDNDIuMTYzNiAzOS41NzM4IDQzLjQ0MyAzOC42Njc3IDQ0LjY4MDQgMzkuNDM4TDYwLjQ1MDUgNDkuMjUyMVoiIHN0cm9rZT0iIzAyMkU3NSIgc3Ryb2tlLXdpZHRoPSIzIi8+Cjwvc3ZnPg==");
  background-size: contain !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  left: 0px;
  top: 50%;
  transform: translateY(-50%);
}

.pl-item__categories{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.pl-toggle-button.opened{
  border-radius: 10px 10px 0px 0px !important;
}

#plToggleClose{
  border-radius: 10px;
  padding: 15px 30px;
  background: var(--middleGrey) !important;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: auto;
  margin-top: 40px !important;
}

.pl-category-radios .optionen{
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  gap: 20px;
}

.pl-category-radios .optionen > label{
  width: 100%;
  position: relative; 
}

.pl-category-radios .optionen > label input{
  opacity: 0;
  position: absolute;
}

.pl-category-radios .optionen > label:nth-child(1) span{
  padding-left: 30px;
  position: relative;
}

.pl-category-radios .optionen > label:nth-child(1) span:before{
  content: "";
  position: absolute;
  height: 22px;
  width: 22px;
  border-radius: 5px;
  left: 0px;
  top: 50%;
  transform: translateY(-50%);
  border: 1px solid var(--primary2) !important;
  background: var(--darkGrey) !important;
}

.pl-category-radios .category-content{
  padding-left: 30px;
}

.pl-category-radios .optionen > label .color-indicator{
  position: absolute;
  height: 22px;
  width: 22px;
  border-radius: 5px;
  left: 0px;
  top: 50%;
  transform: translateY(-50%);
}

.forderung_logosBildergalerie{
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.forderung_logosBildergalerie img{
  width: calc(100px + 10vw);
  max-width: 200px;
}

.projekt-locator__grid > div:nth-child(2){
  position: relative !important;
  overflow: hidden;
  border-radius: 10px;
}

.projekt-locator__grid > div:nth-child(2):before{
  content: "";
  height: 100px;
  width: calc(100% - 1px) !important;
  position: absolute;
  left: 1px;
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(233, 236, 227, 0.00) 0%, #DADFD2 78.37%);
  bottom: 1px;
  z-index: 10;
}

.projekt-locator__grid > div:nth-child(2):after{
  content: "";
  width: 40px;
  height: 30px;
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  background: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjciIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAyNyAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8cGF0aCBkPSJNMC45MzcwMTIgMS4xNzEzM0wxMy40MzcgMTEuMTcxM0wyNS45MzcgMS4xNzEzMyIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLXdpZHRoPSIzIi8+Cjwvc3ZnPg==");
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  z-index: 10;
}

/*TOGGLE BUTTON FILTER*/

@media (min-width: 1299px) {
  .projekt-locator__grid{
    flex-wrap: nowrap !important;
    gap: 20px !important
  }

  .projekt-locator__grid > div:nth-child(1) {
    width: 70% !important;
  }

  .projekt-locator__grid > div:nth-child(2) {
    width: 30% !important;
  }

  .pl-category-radios{
    position: absolute;
    width: 100% !important;
  }

  .projekt-locator__map {
    height: 100vh !important;
    max-height: 80vh !important;
  }
  .projekt-locator__list {
    height: 100vh !important;
    max-height: 80vh !important;}
}

@media (max-width: 999px){
  .wrapperContent_popup .kennzahlen .flexBoxes > div{
    width: calc(50% - 15px) !important;
  }
}

@media (max-width: 767px){
  .wrapperContent_popup .kennzahlen .flexBoxes > div{
    width: calc(100% - 0px) !important;
  }

  #pl-offcanvas-content .project-categories{
    padding-top: 40px !important;
  }

  .wrapperContent_popup .status {
    margin-bottom: 20px !important;
  }

  .wrapperContent_popup .excerpt_projekt{
    margin-bottom: 30px !important;
  }
}