:root{
  --wbs-text: #F8F3A3;
  --wbs-dark: #1D1E1B;
}

.wbs-glass{
  color: var(--wbs-text);
}

html, body {
  height: 100%;
  margin: 0;
  overflow-x: hidden;
}


body {
  background: url("img/weed_hintergrundbild.jpg") no-repeat center center;
  background-size: cover;      /* füllt den ganzen Screen */
  background-attachment: fixed; /* optional: bleibt beim scrollen */
  position: relative;
}

.wbs-logo-wrap{
  display: inline-flex;
  margin-left: 50px;
  background-color: #1F2225;
  padding: 40px 30px;
  background: rgba(31,34,37,0.85);

   /* Banner-Form */
  clip-path: polygon(
    0 0, 100% 0, 100% 100%,
    50% 85%,
    0 100%
  );
}

.wbs-logo-img{
  height: 200px;
  width: auto;
  display: block;
  margin-bottom: 50%;
  
}


/***===================================================== SOCIAL MEDIA RECHTE SEITE =====================================================***/

.wbs-right{
  top: 90px;       /* anpassen */
  right: 70px;     /* anpassen */
  width: 380px;
}

.wbs-right-text{
  color: #d8d2a2;
  font-size: 14px;
  line-height: 1.35;
  margin: 0 0 14px 0;
}

.wbs-links{
  display: flex;
  flex-direction: column;
  gap: 60px;
}

/* Pill Button */
.wbs-pill{
  position: relative;
  display: flex;
  align-items: center;

  width: 330px;
  height: 58px;

  background: #efe8a7;
  border-radius: 999px;
  text-decoration: none;

  padding-left: 76px; /* Platz für Icon-Kreis */
  box-shadow: 0 10px 22px rgba(0,0,0,0.35);
}

.wbs-label{
  color: #1a1a1a;
  font-size: 30px;
  font-weight: 500;
}

/* Icon-Kreis links */
.wbs-icon{

  position: absolute;
  left: -18px;

  width: 66px;
  height: 66px;
  border-radius: 50%;

  display: grid;
  place-items: center;

  box-shadow: 0 10px 18px rgba(0,0,0,0.35);

}

.wbs-icon i{
  color: #fff;
  font-size: 30px;
  line-height: 1;
}

/* Farben */
.wbs-icon.telegram{ background: #2aabee; }
.wbs-icon.whatsapp{ background: #25d366; }
.wbs-icon.signal{ background: #3a76f0; }
.wbs-icon.viber{ background: #665cac; }

/* optional Hover */
.wbs-pill:hover{
  transform: translateY(-1px);
  filter: brightness(0.98);
  transition: 0.15s ease;
}

/***===================================================== SOCIAL MEDIA RECHTE SEITE =====================================================***/


/***===================================================== Infokasten =====================================================***/

.wbs-glass{
  background: rgba(31,34,37,0.78);
  border: 1px solid rgba(255,255,255,0.08);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
/***===================================================== Infokasten =====================================================***/





/*================== Footer Start =====================*/
.wbs-footer{
  background: #221E1F;
  width: 100%;
  
}

.wbs-footer-logo{
  height: 40px;
  width: auto;
  display: block;
  filter: brightness(0) invert(1);
}

.wbs-footer-text{
  color: var(--wbs-text, #F8F3A3);
}

.wbs-footer-ico{
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  text-decoration: none;
  box-shadow: 0 10px 22px rgba(0,0,0,.25);
}

.wbs-footer-ico i{
  font-size: 18px;
  line-height: 1;
}

/* Farben wie im Look */
.wbs-footer-ico.telegram{ background:#229ED9; }
.wbs-footer-ico.whatsapp{ background:#25D366; }
.wbs-footer-ico.signal{ background:#3A76F0; }
.wbs-footer-ico.viber{ background:#665CAC; }
.wbs-footer-ico:hover{ transform: translateY(-1px); }

/*================== Footer End =====================*/



  /* Smartphone Start */

  @media (max-width: 575px) {

  .wbs-footer-logo{
  display: none;
}

.wbs-infokasten-abstand-mobile {

  margin-bottom: 30px;


}

.abstand_social_media {

  margin-left: 25px;
}
  

  }

   /* Smartphone End */


   /* Tablet Start */ 

   @media (min-width: 576px) and (max-width: 767px) {

    .wbs-infokasten-abstand-mobile {

      margin-bottom: 30px;

    }

    .abstand_social_media {

  margin-left: 25px;
}


   }


   /* Tablet End */ 




   /* Laptop Start */

   @media (min-width: 768px) and (max-width: 991.99px) {

    .wbs-infokasten-abstand-mobile {

      margin-bottom: 30px;

    }

   }

   /* Laptop Start */




   /* Bigscreen Start */

   @media (min-width: 992px) and (max-width: 1199px) {

    

   }

  


   @media (min-width: 1200px) {

    }
    
   

   
   /* Bigscreen End */

/* ---------- custom scrollbar ---------- */

/* Scrollbar (Chrome/Edge/Safari) */
::-webkit-scrollbar{
  width: 18px;
}

::-webkit-scrollbar-track{
  background: var(--wbs-dark)
}

::-webkit-scrollbar-thumb{
  background: var(--wbs-text);
}