body {
  margin: 0;
  padding: 0;
  font-family: Arial, Helvetica, sans-serif;
  color: #1079bf;
  background-color: #e5eff7;
 
}
div {
  margin: 0;
  padding: 0;
}

#background {
  width: 1024px;
  height: 810px;
  overflow: hidden;
  position: relative;
  background-image: url("../images/2023/Wunschbaum-ohne-Hintergr.png");
  /*z-index: 1;*/
  background-position: center, center, center;
}

.wish_container {
  position: relative;
}

#background img {
  /*width: 820px;
	height: 810px;
	background-image: url("../images/background.jpg");*/
}

#menu {
  margin-top: 22px;
  margin-right: 31px;
  color: #ffffff;
  display: flex;
  justify-content: end;
  list-style: none;
  position: absolute;
  right: 0;
}
#menu > li {
  margin-right: 10px;
  font-size: 16px;
}

.infobox {
  position: absolute;
  width: 600px;
  height: 590px;
  background-color: #1079bf;
  border: 1px solid #ffffff;
  left: 105px;
  top: 60px;
  z-index: 1002;
  padding: 10px;
}
.infobox .infocontent {
  padding-left: 5px;
  padding-right: 5px;
  margin-top: 0px;
  height: 570px;
  overflow-y: auto;
  color: #ffffff;
  font-size: 14px;
}
li {
  font-size: 14px;
}

div[id*="wish"] {
  width: 50px;
  height: 50px;
  /*background-image: url("../images/stern-test.png");*/
  position: absolute;
  z-index: 1;
  cursor: pointer;
}

.statusOpen {
  background-image: url("../images/2023/stern-rot.png");
}
.statusPartial {
  background-image: url("../images/2023/stern-orange.png");
}
.statusClosed {
  background-image: url("../images/2023/stern-gruen.png");
}

.wish {
  width: 380px;
  height: 262px;
  background-repeat: no-repeat;
  color: #ffffff;
  font-size: 12px;
  position: absolute;
  display: none;
  z-index: 1000;
}
.wish.show {
  display: block;
}

.wishleft {
  background-image: url("../images/sprechblase-links2.png");
}
.wishright {
  background-image: url("../images/sprechblase-rechts2.png");
}
.wish h1 {
  font-size: 18px;
  margin-bottom: 0px;
  line-height: 24px;
}
.wish .description {
  margin-top: 5px;
  margin-bottom: 5px;
  margin-right: 10px;
}
.wish .amount {
  /*margin-left: 10px;
	margin-right: 10px;*/
  font-weight: bold;
}
.wish .progessbar {
  position: absolute;
  /*margin-left: 10px;
	margin-right: 10px;*/
  width: 350px;
  height: 10px;
}
.wish .progessbaropen {
  position: absolute;
  width: 350px;
  height: 10px;
  width: 100%;
  background-color: #ffffff;
}
.wish .progessbardone {
  position: absolute;
  width: 350px;
  height: 10px;
  background-color: #ff7c00;
}

.wish .donate {
  float: right;
  margin-right: 19px;
  padding-top: 36px;
}
.wish .donate_form_div {
  float: right;
  margin-right: 19px;
  margin-top: -20px;
}
.wish .donationInfoText {
  font-size: 12px;
}
.wish .donationInfo {
  border-top: 1px solid #ffffff;
  padding-top: 5px;
  margin-right: 10px;
}

.wish a {
  text-decoration: none;
  color: #ffffff;
}
.wish .speechbubblecontent {
  padding-left: 7px;
  margin: 3px;
  height: 218px;
}

.bottom {
  width: 100%;
  position: absolute;
  bottom: 50px;
}

.donate_form {
  padding-top: 5px;
  /*border-top: 1px solid #FFFFFF;*/
}

.donate_form select {
  padding: 3px 5px;
}
.donate_form .donateButton {
  border: none;
  color: #ffffff;
  background-color: #ff7c00;
  line-height: 24px;
  height: 24px;
  cursor: pointer;
}

a.donateLink {
  line-height: 24px;
  height: 24px;
}

a.donateLink img {
  float: right;
  margin-left: 5px;
}

#layerdiv {
  width: 100%;
  height: 100%;
  min-height: 810px;
  display: none;
  background: rgba(0, 0, 0, 0.8);
  position: absolute;
  z-index: 2;
}

.close {
  display: block;
  position: absolute;
  right: -15px;
  top: -15px;
  width: 30px;
  height: 30px;
  background: url(../images/close.png) no-repeat;
  cursor: pointer;
}
#MessageBox {
  width: 380px;
  height: 280px;
  background: url(../images/infobox-big.png) no-repeat;
  position: absolute;
  z-index: 1000;
  top: 50%;
  left: 50%;
  margin-top: -140px;
  margin-left: -190px;
  color: #ffffff;
  text-align: center;
}
#MessageBox h1 {
  font-size: 18px;
}
#MessageBox p {
  padding-left: 10px;
  padding-right: 10px;
  /*margin-right: 20px;*/
}
#MessageBox .content {
}
#background a:link,
#background a:visited,
#background a:focus,
#background a:hover,
#background a:active {
  color: #FFFFFF;
  text-decoration: none;
}

#menu a:link,
#menu a:visited,
#menu a:focus,
#menu a:hover,
#menu a:active {
  color: #1079bf;
}
#rechte_vorbehalten {
  color: #000000;
  /* font-weight: bold; */
  position: absolute;
  z-index: 1000;
  /* background-color: #FF33CC; */
  width: 350px;
  font-size: 15px;
  bottom: 5px;
  margin-left: 300px;
}
#erfuellte_wuensche {
  position: absolute;
  
  width: 250px;
  bottom: 40px;
  right: 0px;
  font-size: 23px;
  font-weight: bold;
  color: #1079bf;
}
#wishlist {
  cursor: pointer;
}
.infoframe {
  /*max-height: 200px;*/
  height: 475px;
  overflow-y: auto;
  overflow-x: hidden;
}

.wpwl-container {
  width: 340px;
  margin-left: 20px;
}

.wish_status {
  position: absolute;
  bottom: 10px;
  right: 21px;
  display: flex;
  font-weight: bold;
}
.close-bar {
  display: none;
  justify-content: center;
  padding-top: 40px;
}

.d-mobile-block {
  display: flex;
  justify-content: center;
  /*background-image: url("../images/2023/Winterlandschaft.png");*/
  background-image: url("../images/2023/wunschbaum-background-1960.png");
  background-repeat: no-repeat;
  background-position: top center;
}

@media screen and (max-width: 1600px){
  .d-mobile-block {
    background-image: url("../images/2023/wunschbaum-background-1600.png");
  }
}

@media screen and (max-width: 1042px){
  .d-mobile-block {
    background-image: url("../images/2023/Winterlandschaft.png");
  }
}

@media screen and (max-width: 810px){
  .d-mobile-block {
    /*background-image: url("../images/2023/Winterlandschaft-mobile.png");*/
  }
  body {
    margin-top: 0;
  }
  
}

/* @media screen and (max-width: 1024px){
  .wish_container {
    left: -20px;
    position: relative;
  }
}

@media screen and (max-width: 950px){ 
  .wish_container {
    left: -45px;
    position: relative;
  }
}

@media screen and (max-width: 850px){ 
  .wish_container {
    left: -60px;
    position: relative;
  }
} */

@media only screen and (max-width: 810px) {
  .d-mobile-block {
    /* display: block !important; */
    display: flex;
    justify-content: center;
  }
  .wish_container {
    left: 0;
  }

  .menu-toggle {
    display: flex !important;
  }
  .desktop,
  #rechte_vorbehalten {
    display: none;
  }
  .mobile {
    display: block;
  }
  #background {
    max-width: 420px;
    max-height: 810px;
    background-image: url("../images/2023/Wunschbaum-o-Hintergr-mobile-v.png");
    background-repeat: no-repeat;
    background-size: cover;
  }

  #menu {
    display: none;
    left: 0;
    line-height: 28px;
    background-color: rgb(55, 119, 186);
    width: 100%;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 0px;
    top: 40px; 
    height: 100%;
    z-index: 1001;
    text-align: center;
    margin-top: 0px;
    position: absolute;
    top: 0;
  }

  #menu li {
    font-size: 20px;
    margin-bottom: 26px;
  }
  #menu li a {
    color: white !important;
  }
  .infobox {
    width: 85%;
    height: auto;
    left: 25px;
    background-color: white;
  }
  .infobox .infocontent {
    color: black;
  }
 
  .close-bar {
    display: flex;
  }

  div[id*="speechbubble"] {
    top: 100px !important;
    width: 89%;
    left: 20px !important;
    background: none;
    background-color: rgb(55, 119, 186);
  }
  div[id*="wish"] {
    width: 50px;
    height: 50px;
  }
  #wish1 {
    left: 76px !important;
    top: 650px !important;
  }

  #wish2 {
    left: 38px !important;
    top: 598px !important;
  }
  #wish3 {
    left: 71px !important;
    top: 513px !important;
  }
  #wish4 {
    left: 152px !important;
    top: 518px !important;
  }
  #wish5 {
    left: 129px !important;
    top: 582px !important;
  }
  #wish6 {
    left: 164px !important;
    top: 630px !important;
  }
  #wish7 {
    left: 187px !important;
    top: 673px !important;
  }
  #wish8 {
    left: 254px !important;
    top: 548px !important;
  }
  #wish9 {
    left: 243px !important;
    top: 615px !important;
  }
  #wish10 {
    left: 304px !important;
    top: 498px !important;
  }
  #wish11 {
    left: 336px !important;
    top: 586px !important;
  }
  #wish12 {
    left: 309px !important;
    top: 655px !important;
  }
}

.wish_status .open,
.wish_status .partly_fulfilled {
  margin-right: 24px;
}

.wish_status .open::before {
  content: "";
  width: 15px;
  height: 15px;
  display: block;
  position: absolute;
  left: -18px;
  top: 0px;
  border: 1px solid white;
  background-color: rgb(164, 37, 32);
}

.wish_status .partly_fulfilled:before {
  content: "";
  width: 15px;
  height: 15px;
  display: block;
  position: absolute;
  left: 47px;
  top: 0px;
  border: 1px solid white;
  background-color: rgb(241, 188, 64);
}

.wish_status .fulfilled::before {
  content: "";
  width: 15px;
  height: 15px;
  display: block;
  position: absolute;
  left: 147px;
  top: 0px;
  border: 1px solid white;
  background-color: rgb(127, 174, 64);
}

.menu-toggle {
  width: 30px;
  height: 20px;
  display: none;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
  position: absolute;
  left: 15px;
  top: 15px;
}

.menu-toggle .bar {
  width: 100%;
  height: 3px;
  background-color: #1079bf;
  border-radius: 2px;
  transition: 0.4s;
}

.close-button {
  width: 30px;
  height: 30px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  cursor: pointer;
}

.close-button .bar {
  width: 100%;
  height: 3px;
  background-color: rgb(238, 131, 50);
  border-radius: 2px;
  transition: 0.4s;
}

.close-button .bar:nth-child(1) {
  transform: rotate(-45deg) translate(-3px, 0px);
}

.close-button .bar:nth-child(2) {
  transform: rotate(45deg) translate(-1px, 0px);
}

#MessageBox .wpwl-form {
  margin: 0 auto 0 auto;
}