::-webkit-scrollbar {
  width: 4px;
}

::-webkit-scrollbar-track {
  background: #85858500;
}

::-webkit-scrollbar-thumb {
  background: #b1b1b1ab;
  border-radius: 20px;
}

* {
  margin: 0;
  
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
}




.wrapper {
  --main-color: #5e7056;
  --main-bg: rgb(248, 248, 248);

  font-family: Lato, sans-serif;
  display: grid;
  grid-auto-columns: 1fr;
  grid-template-areas:
  "header header header header"
  "main main main main"
  "footer footer footer footer";
  max-width: 1400px;
  margin: 0 auto;
}
/*header*/ 
.header {
  grid-area: header;
  

}
  .top-bar {
      background-color: var(--main-color);
      padding: 5px 0;
      color: var(--main-bg);
  }
      .usp-list {
          list-style: none;
          display: flex;
          justify-content: space-around;
          gap: .8em;
          padding: 0 7px;
          text-align: center;
          
          
      }
          .usp-list > li {
              display: flex;
              align-items: center;
          }
          .usp-list > li::before {
              content: "\2714";
              color: rgb(255, 221, 70);
              margin: 0 .3em;                
          }
  .header-img {
      background: url(https://static.haga-welt.de/ebay-haga-welt/img/haga-ebay-header-img.jpg);
      background-size: cover;
      background-repeat: no-repeat;
      background-position: 60% 20%;
      height: 300px;
      display: flex;
      flex-direction: column;
      align-items: left;
      justify-content: center;
    
  }
      .logo-area {
          background: #fff;
          width: clamp(300px, 20%, 450px); 
          padding: 15px;
          margin-left: 15px;
          border-radius: 5px;
          box-sizing: border-box;
          


      }
          .logo > img {
              margin-bottom: 15px;
              width: 100%;
          }
          .shop-btn {
              margin-bottom: 0;
          }
          .shop-btn > a {
              
              text-decoration: none;
              padding: 9px 15px;
              color: #fdfdfd;
              background-color: var(--main-color);
              border: 3px solid var(--main-color);
              border-radius: 5px;
              font-weight: bold;
              display: block;
              width: 100%;
              text-align: center;
              font-size: 1.1rem;
          }
          .shop-btn > a:hover {
              
              text-decoration: none;
              padding: 9px 15px;
              color: #fff;
              background-color: var(--main-color);
              border: 3px solid var(--main-color);
              
          }
      
      /* Navigation */
      .bg-navi {
          background-color: #000;
          color: #fff;
          text-transform: uppercase;
          font-weight: bold;
      }
      
          .bg-navi .navi {
              padding: 10px 0 0 0;
          }
      
          
      .btn-navi {
          display: flex;
          justify-content: space-between;
          flex-wrap: wrap;
          z-index: 10;

      }
      .btn-navi .btn-menu {
          cursor: pointer;
          padding: 10px 15px;
      }
      
      .btn-navi i {
          font-size: 24px;
          padding-right: 10px;
      }

      

      .btn-navi .btn-close-menu i {
          padding-right: 0;
          padding-left: 10px;
      }
      
      .btn-navi span {
          position: relative;
          top: -3px;
          font-weight: 700;
      }
      
      .btn-navi .home {
          display: none;
      }
      
      .btn-navi .shopnavi {
          display: none;
          background-color: #fff;
          border: 3px solid #000;
      }
      
      .btn-navi:hover .shopnavi {
          display: block;
          flex: 1 0 895px;
          justify-self: end;
          position: relative;
          z-index: 30;
      }

      

      .btn-navi .btn-close-menu {
          color: #fff;
          display:none; 
          padding: 10px 15px;
          cursor: pointer; 
      }
          .btn-navi:hover .btn-close-menu {
              display: none;
          }  
          .btn-navi:hover .btn-close-menu .shopnavi {
              display: none;
          }
            
      .btn-navi .shopnavi ul {
          padding: 0;

      }
      
      
      .btn-navi .shopnavi li {
          list-style: none;
          padding: 7px 15px;
          color: #000;
                      
      }

      

      .btn-navi .shopnavi .ebay-categories {
          padding-top: 25px;
      }
      
          .btn-navi .shopnavi li i {
              display: none;
          }
      
              .btn-navi .shopnavi a {
                  font-size: 14px;
                  color: #000;
                  text-decoration: none;
                  padding-left: 5px;
                  margin-left: 15px;
                  border-left: 3px solid var(--main-color);
              }
              
              
              





              
      
      .btn-navi .shopnavi li:hover {
          background-color: var(--main-color);
          transition: all .5s ease;
          -moz-transition: all .5s ease;
          -o-transition: all .5s ease;
          -webkit-transition: all .5s ease;
          color: #fff;
      }
      
          .btn-navi .shopnavi li:hover a {
              color: #FFFFFF;
          }

          
      
      .btn-navi .shopnavi ul.dropdown {
          margin: 10px -15px -7px -15px;
          padding-bottom: 10px;
      }
      
          .btn-navi .shopnavi ul.dropdown li {
              padding-left: 25px;
              color: #000;
          }
      
          .btn-navi .shopnavi ul.dropdown a:before {
              content: "\f105";
              font-family: FontAwesome;
              font-style: normal;
              font-weight: normal;
              text-decoration: inherit;
              color: #000000;
              padding-right: 10px;
              
          }
      
      .btn-navi .shopnavi li:hover ul.dropdown {
          background-color: var(--main-color);
      }
      
          .btn-navi .shopnavi li:hover ul.dropdown a {
              color: #000000;
          }
      
      .btn-navi .shopnavi ul.dropdown li:hover a {
          color: #FFFFFF;
          
      }
      
          .btn-navi .shopnavi ul.dropdown li:hover a:before {
              color: #FFFFFF;
          }



.sidebar {
  display: none;
  
}


/* Main Content */
.main-content {
  grid-area: main;
  background-color: var(--main-bg);
  padding: 10px;
}
  .content {
      display: grid;
  grid-auto-columns: 1fr;
  grid-template-areas:
  "name name"
  "img-gallery img-gallery"
  "buybox buybox"
  "article article";
  gap: .5em;
  
  }
      /* Galerie */
      .img-gallery {
          grid-area: img-gallery;
          height: min-content;

      }

      .galerie .btn-checkbox {
          display: none;
      }
      
      .bild-gross-position {
          display: none;
          height: 350px;
          overflow: hidden;
      }
      
          .bild-gross-position a {
              cursor: zoom-in;
              display: block;
              height: 350px;
              overflow: hidden;
              text-align: center;
          }
      
          .bild-gross-position img {
              display: inline-block;
              max-height: 100%;
              max-width: 100%;
              height: 100%;
          }
      
      .thumbs {
          grid-area: thumbs;
          margin-top: 25px;
          text-align: center;
      }
      
      .galerie label {
          cursor: pointer;
          display: inline-block;
          margin: 0 7px 7px 0;
          overflow: hidden;
          width: 75px;
          height: 75px;
      }
      
          .galerie label img {
              display: inline-block;
              height: auto;
              margin: auto;
              max-height: 75px;
              max-width: 75px;
          }
      
      .thumbs label img[src=""] {
          display: none;
          
      }
      
      #bild-1:checked ~ .bild-gross #bild-gross-1,
      #bild-2:checked ~ .bild-gross #bild-gross-2,
      #bild-3:checked ~ .bild-gross #bild-gross-3,
      #bild-4:checked ~ .bild-gross #bild-gross-4,
      #bild-5:checked ~ .bild-gross #bild-gross-5,
      #bild-6:checked ~ .bild-gross #bild-gross-6 {
          display: block;
      }
      
      .lightbox {
          background: rgba(0, 0, 0, 0.7);
          height: 100%;
          left: 0;
          opacity: 0;
          overflow: hidden;
          visibility: hidden;
          width: 100%;
          z-index: 999;
      }
      
          .lightbox .lightbox-popup {
              -moz-transition: transform .5s ease;
              -o-transition: transform .5s ease;
              -webkit-transition: transform .5s ease;
              transition: transform .5s ease;
          }
      
          .lightbox:target {
              opacity: 1;
              position: fixed;
              top: 0;
              visibility: visible;
          }
      
      .lightbox-popup {
          -ms-transform: scale(0);
          -webkit-transform: scale(0);
          background-color: #FFFFFF;
          bottom: 0;
          left: 0;
          margin: 0 auto;
          max-height: 0;
          max-width: 0;
          position: absolute;
          right: 0;
          top: 10%;
          transform: scale(0);
      }
      
      .lightbox:target .lightbox-popup {
          -ms-transform: scale(1);
          -webkit-transform: scale(1);
          max-height: 400px;
          max-width: 400px;
          transform: scale(1);
      }
      
      .lightbox-popup img {
          bottom: 0;
          height: auto;
          left: 0;
          margin: auto;
          max-height: 95%;
          max-width: 95%;
          position: absolute;
          right: 0;
          top: 0;
          width: auto;
      }
      
      .lightbox a.btn-close {
          background-color: #FFFFFF;
          display: block;
          height: 20px;
          position: absolute;
          right: 0;
          top: 0;
          width: 20px;
          text-decoration: none;
          font-size: 20px;
          color: #000000;
          cursor: pointer;
          padding: 10px;
          height: 40px;
          width: 40px;
          padding: 20px;
          padding-left: 14px;
          padding-top: 12px;
      }
      
          .lightbox a.btn-close:before {
              content: "\f00d";
              font-family: FontAwesome;
              font-style: normal;
              font-weight: normal;
              text-decoration: inherit;
          }
      
      .zoom {
          grid-area: zoom;
          padding: 10px 0;
          text-align: center;
          color: #8C8C8C;
      }
      
          .zoom i {
              padding-right: 10px;
          }
      /* Galerie Ende */
      
      /* Artikelname */
      .article-name {
          grid-area: name;
          background-color: var(--main-bg);
          padding: 20px 20px;
          
      }

      /* Buy Box */
      .buy-box {
          grid-area: buybox;
          padding: 20px;
          background-color: var(--main-bg);
          display: flex;
          flex-direction: row;
          align-items: flex-start;
          justify-content: center;
          flex-wrap: wrap;
      }
          .details {
              align-self: flex-start;
              display: flex;
              flex-direction: column;
              align-items: flex-start;
              width: 100%;

          }

          .details div {
              margin-bottom: .7em; 
          }
              
          .bullets {
              border: 1px solid #858585;
              border-radius: 3px;
              background-color: #e7e7e7;
              padding: 1.2em 2em;
              width: min(350px, 90%);

              margin: 1em auto;

          }
              .bullets ul {
                  list-style: none;
                  padding-inline-start: 20px;
              }

                  .bullets ul li::before {
                      content: "\2714";
                      color: var(--main-color);
                      margin: 0 .3em;
                  }

      /* Artikeldaten */
      .article {
          grid-area: article;
          background-color: var(--main-bg);
          padding: 20px;
          
      }
      .article > div > p,
      .article p {
          font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif !important;
          font-size: 16px !important;
          line-height: 1.2;
          margin-top: .6em;
          margin-bottom: .6em;
      }

      /* .article > div > p strong,
      .article p strong {
          font-size: 18px !important;
          margin-top: 1em;
      } */

      .article  div li,
      .article li {
          font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif !important;
          font-size: 16px !important;
          line-height: 1.2;
          margin-top: .2em;
          margin-bottom: .2em;
      }

      .article h2,
      .article h3,
      .article h4 {
          font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif !important;
          margin-top: 1em;
          margin-bottom: 0.5em;
      }

      .article h2 {
          font-size: 22px;
      }

      .article h3 {
          font-size: 20px;
      }

  .cross-selling {
      grid-area: cross;
      width: 100%;
      padding: 20px;
      display: none;
  }
      .product-gallery {
          margin: 0 auto;
          padding-top: 1em;
      }

.footer {
  grid-area: footer;
  width: 100%;

  
}
  .footer-flex {
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: 15px;
      flex-wrap: wrap;
  }

  .footer-top .top-bar {
      background-color: var(--main-color);

  }
      .footer-top .usp-list {
          justify-content: space-around;
           
      }
      

  .footer-main {
      padding: 10px 15px;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: space-between;
      background-color: #e4e4e4;

  }

  .footer-main h3 {
      margin-bottom: 1em;
  }

  .footer-main > div {
      margin-bottom: 1.5em;
      padding-bottom: .8em;
      
  }
          .shipping-label > img {
              height: 35px;
          }
          #gls-icon {
              height: 25px !important;
          }
      
          
          .payment-logos > img {
          height: 25px;
          }
              #mastercard,
              #amex,
              #bank {
                  height: 30px;
              }
      
      .footer-logo {
          align-self: center;
          margin: 0 auto;
      }
      
          .footer-logo > img {
              height: 100px;
          }
  .footer-bottom {
      font-size: 12px;
      text-align: right;
      padding-right: 15px;
  }

@media screen and (min-width: 895px) {
  .wrapper {
      grid-template-areas:
      "header header header header"
      "sidebar main main main"
      "footer footer footer footer";
  }

  .shop-btn > a {
              
      text-decoration: none;
      padding: 9px 15px;
      color: var(--main-color);
      background-color: #fdfdfd;
      border: 3px solid var(--main-color);
      border-radius: 5px;
      font-weight: bold;
      display: block;
      width: 100%;
      text-align: center;
      font-size: 1.1rem;
  }
  .shop-btn > a:hover {
      
      text-decoration: none;
      padding: 9px 15px;
      color: #fff;
      background-color: var(--main-color);
      border: 3px solid var(--main-color);
      
  }

  
  .bg-navi .navi {
      padding: 0 0 0 15px;
      height: 50px;
  }

  .btn-navi .btn-menu {
      display: none;
  }

  .btn-navi .home {
      display: inline-block;
      font-size: 20px;
      padding: 13px 0;
  }

      .btn-navi .home a {
          color: #000000;
          text-decoration: none;
      }
  
      .btn-navi:hover .btn-close-menu {
          display: none;
      }     

  .btn-navi .shopnavi {
      display: inline-block;
      position: relative;
      top: 0;
      width: 100%;
      background-color: #000;
      border: none;
  }

  .btn-navi:hover .shopnavi {
      display: inline-block;
      border: none;
  }

  .btn-navi .shopnavi ul {
      margin: 0;
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      justify-content: flex-start;

  }

  .btn-navi .shopnavi li {
      /* display: inline-block; */
      padding: 10px 15px;
  }
  .btn-navi .shopnavi li:first-child {
      display: none;
  }

  .btn-navi .shopnavi li:nth-child(n+7) {
      display: none;
  }


      .btn-navi .shopnavi li i {
          display: inline-block;
          padding: 0 0 0 10px;
          font-size: 20px;
      }

      .btn-navi .shopnavi li:hover {
          background-color: var(--main-color);
          transition: all .5s ease;
          -moz-transition: all .5s ease;
          -o-transition: all .5s ease;
          -webkit-transition: all .5s ease;
      }

          .btn-navi .shopnavi a {
              color: #fff;
              padding: unset;
              margin: unset;
              border: none;
          }
          .btn-navi .shopnavi li:hover a {
              color: #FFFFFF;
          }

  .btn-navi .shopnavi a {
      font-size: 17px;
  }

  .btn-navi .shopnavi ul.dropdown {
      display: none;
  }

  .btn-navi .shopnavi li:hover ul.dropdown {
      display: block;
      background-color: #B0D227;
      position: absolute;
      z-index: 3;
      margin: 16px 0 0 -20px;
      padding-bottom: 0;
  }

      .btn-navi .shopnavi li:hover ul.dropdown li {
          display: block;
      }

  .btn-navi .shopnavi ul.dropdown li {
      padding: 10px 15px;
  }

  .btn-navi .shopnavi ul.dropdown a:before {
      content: "";
      padding-right: 0;
  }

/*  SIDEBAR  */
  .sidebar {
      display: block;
      padding: 20px 0;
      
      
  }

  .sidebar-navi ul {
      list-style: none;
      max-height: 1400px;
      overflow-y: scroll;
  }

  .sidebar-navi ul li {
      margin-top: 10px; 
      padding: 5px 0;
  }

  .sidebar-navi #haga-categories {
      font-size: 18px;
      font-weight: bold;
      margin: unset;
      padding: unset;
      margin-left: 1em;
      padding-bottom: .5em;
  }
  
  .sidebar-navi ul li a {
      padding-left: 15px;
      text-decoration: none;
      margin-left: 10px; 
      padding: 5px 5px;
      border-left: 3px solid var(--main-color);
      color: #000;
      
  }

  .sidebar-navi ul li:not(#haga-categories):hover a {
      color: #fff;
  }

  .sidebar-navi ul li:not(#haga-categories):hover {
      background-color: var(--main-color);
      color: #fff;
      font-weight: bold;
      border-radius: 5px 0 0 5px;
      
  }

  /* Main-Content */
  .main-content {
      padding: 20px;
  }
  .content {
      display: grid;
      grid-auto-columns: 1fr;
      grid-template-areas:
      "img-gallery img-gallery name name"
      "img-gallery img-gallery buybox buybox"
      "img-gallery img-gallery buybox buybox"
      "img-gallery img-gallery buybox buybox"
      "img-gallery img-gallery buybox buybox"
      "img-gallery img-gallery buybox buybox"
      "img-gallery img-gallery buybox buybox"
      "img-gallery img-gallery buybox buybox"
      "img-gallery img-gallery buybox buybox"
      "img-gallery img-gallery buybox buybox"
      "img-gallery img-gallery buybox buybox"
      "img-gallery img-gallery buybox buybox"
      "img-gallery img-gallery buybox buybox"
      "img-gallery img-gallery buybox buybox"
      "img-gallery img-gallery buybox buybox"
      "article article article article"
      "cross cross cross cross";
      gap: .5em;
  }

      /* Galerie */
      .bild-gross-position {
          height: fit-content;
      }
  
          .bild-gross-position a {
              height: auto;
          }
  
      .galerie label:last-child {
          margin-right: 0;
      }
  
      .lightbox-popup {
          left: 50%;
          top: 15%;
          margin: 0 auto 0 -400px;
      }
  
      .lightbox:target .lightbox-popup {
          max-height: 600px;
          max-width: 800px;
      }
  
      .lightbox a.btn-close {
          right: -55px;
      }
      /* Galerie Ende */

      .article-name {
          padding: 0 20px; 
      }
  

  /* Footer */

  .payments {
      max-width: 250px;
  }

  .footer-logo {
      align-self: center;
      margin: unset;
  }
}