body, content-text { background: #000;
background: radial-gradient(circle, rgba(0, 0, 0, 1) 72%, rgba(105, 130, 105, 1) 100%); color: #000; font-family: "Nunito", sans-serif;
  font-optical-sizing: auto; font-size: 20px;
  }



.like a { text-decoration: none; }

.blog-footer { text-align: right; display: flex; }

html {
    overflow-y:scroll;
}

address { font-style: unset; display: inline; }

        a, a:hover, a:visited { color: white; }

        h2,h1,h3, p { text-align: center; }

       #logo { margin:0 auto; text-align: center; max-width: 500px; width:100%; height: auto; display: flex; position: relative; } 

       #topnavigation { font-weight: bold; margin:0 auto; margin-top: var(--marginlow); text-align: center; }

       #topnavigation a { color: #000; text-decoration: none; }
       #topnavigation a:hover { text-decoration: underline; }

 .preis-alt { text-decoration: line-through; font-size: smaller; }
 .preis-angebot { font-size: larger; color: #820; }
#preis-hinweis { font-size: small; color: #333 }
       #header { background: #A0E8AF;
background: linear-gradient(348deg,rgba(160, 232, 175, 1) 0%, rgba(126, 168, 128, 1) 100%, rgba(160, 232, 175, 1) 100%); border-radius: 10px; margin-bottom: var(--marginlow); padding: var(--marginlow);}


       #overlay { position: fixed;
  display: block;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.9);
  z-index: 2;
   }


#mobile-navigation { position: absolute;
  width: 100%;
  height: 100%;
  
  left: 0;
  right: 0;
  
  background-color: rgba(0,0,0,0.9);
  z-index: 2;
  display: none;
   }

.mobile-navigation-button {
    padding: 3%;
    padding-top: 4%;
    padding-bottom: 4%;
    user-select: none;
    font-weight: bold;
    left:0;
    right:0;
}

.mobile-navigation-button:hover {
    background-color: rgba(0,0,0,1.0);;
}

  #overlay-off { 
  display: none;
   }

#overlay-text {

    position: absolute;
  top: 50%;
  left: 50%;
  font-size: 50px;
  color: white;
  transform: translate(-50%,-50%);
  -ms-transform: translate(-50%,-50%);
  font-family: "Nunito", sans-serif;
  font-optical-sizing: auto;
}

@media screen and (max-width: 1100px) {

#empfehlung {
    font-size: 80%;
}


    #overlay-text {

   
  font-size: 20px;

}
}


.comment, .like { }

.like {  }

.comment_label { width: 265px; margin: 0 auto; display: block; font-size: medium; font-weight: bold; text-align: center;}

.comments { text-align: center; }

.comment {  }

.comment_stamp { font-size: smaller; font-weight:bold; }
.comment_text { font-size: large; font-style: italic; }

.blog-inhalt, .comment_area { padding: 2% 10% 0 10%; }

.blog-inhalt p { text-align: unset; }
.comment_form {  width: 80%; background-color: #A0E8AF; border-radius:5px; -moz-border-radius:5px; text-align:center; border-style:solid;border:none; font-family: "Nunito", sans-serif;
  font-optical-sizing: auto; font-size: large; margin: 0 auto; }

.demo-icon {
      font-family: "fontello";
      font-style: normal;
      font-weight: normal;
      speak: never;
     
      display: inline-block;
      text-decoration: inherit;
      width: 1em;
      margin-right: .2em;
      text-align: center;
      /* opacity: .8; */
     
      /* For safety - reset parent styles, that can break glyph codes*/
      font-variant: normal;
      text-transform: none;
     
      /* fix buttons height, for twitter bootstrap */
      line-height: 1em;
     
      /* Animation center compensation - margins should be symmetric */
      /* remove if not needed */
      margin-left: .2em;
     
      /* You can be more comfortable with increased icons size */
      /* font-size: 120%; */
     
      /* Font smoothing. That was taken from TWBS */
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
     
      /* Uncomment for 3D effect */
      /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
    }


#wrapper {
    width: 80%;
    margin: 0 auto;
    position: relative;
}

.content {
font-family: "Nunito", sans-serif;
  font-optical-sizing: auto;
    margin: 0 auto;
    padding: 0;
    display: flex;
    
    

}
table { margin-left: auto;
  margin-right: auto; font-size: 1.3vw; width: 80%; border: none; }


td { padding: 1.3%;  overflow: hidden;}

tr:nth-child(even) {
            background-color: #A0E8AF;
        }

#logo-overlay {  position:absolute; z-index:10; background-color:transparent; position:absolute; width:100%; height:100%; }

.boundleft { text-align: left; }
.boundright { text-align: right; }
.centered { text-align: center; }


#footer {  background-color: #07311C; display: flex; font-size: medium; color: #fff; border-radius: 10px; margin-top: var(--marginlow); font-weight: bold;flex-direction: row; }

.brands { font-style:italic; font-weight: bold; font-size: larger; }

.footer-box { flex: 25%; margin: var(--marginlow); padding: var(--marginlow); }

.mainbanner, #brands { background: #7c8a80;
background: linear-gradient(152deg, rgba(124, 138, 128, 1) 0%, rgba(134, 186, 161, 1) 68%);  
    border-radius: 10px; margin-bottom: var(--marginlow); }

.mainbanner {  height: 400px; position: relative;}

#mainbanner1-img,#mainbanner2-img, #smallbanner1-img, #smallbanner2-img { width:100%; height:100%; object-fit:cover; border-radius: 10px; }

#empfehlung-img { min-width: 1200px; width:100%; height:100%; object-fit:cover; border-radius: 10px; }

#banner1-info, #banner2-info { position: absolute; background-color:#ffcf56ff; opacity: 0.9; padding: 1.3%; margin:0 auto; text-align: left; border-radius: 10px; overflow:hidden; top: 10%; bottom: auto;
  right: 15%; left: 15%; pointer-events: none; }



#banner3-info, #banner4-info { position: absolute; background-color:#ffcf56ff; opacity: 0.9; padding: 0.6%;  border-radius: 10px; overflow:hidden; margin-top: 20px; width: 300px; pointer-events: none; }


.empfehlung-info { position: absolute; background-color:#ffcf56ff; opacity: 0.9; padding: 0.6%;  border-radius: 10px; overflow:hidden; width: 40%; pointer-events: none; }

#banner3-info { left: 1.3%; }
#banner4-info { right: 1.3%; }

#banner3-info h1, #banner4-info h1 { font-size: 30px; }

#brands { text-align: center; padding-top: var(--marginlow); }

.banner {   background-color: #86baa1ff; border-radius: 10px; height: 300px;  }

#empfehlung { background-color: transparent !important; border-radius: 10px; width:100%; overflow:hidden; }

.marginbottom { margin-bottom: var(--marginlow); }

#copyright { margin: 0 auto; text-align: center; color: #333; font-size: small; }

.flex33 { flex: 33% }
.flex50 { flex: 50% }
.flex100 { flex: 100% }

.preis-gross { font-size: 150%; font-weight:bold; color: #820; }

#searchInput, #searchInput2, #searchInput3 { width: 80%; background-color: #A0E8AF; border-radius:5px; -moz-border-radius:5px; text-align:center; border-style:solid;border:none; font-family: "Nunito", sans-serif;
  font-optical-sizing: auto; height: 6vh; font-size: large;}

#blog {  }

.kontakt { background-color: #86baa1ff; padding: var(--marginlow); border-radius: 10px; margin-top: var(--marginlow);  }

.blog-eintrag, .sortiment-bereich { background-color: #86baa1ff; padding: var(--marginlow); border-radius: 10px; margin-bottom: var(--marginlow); }

.blog-datum { top: 0; left: 0; font-size: small; text-align: left; }

.blog-nummer { font-size: large; font-weight: bold; }

.blog-bild-rund { max-width: 300px; width: 50%; aspect-ratio: 1/1; border-radius: 50%; object-fit: cover; margin: var(--marginlow); }

.brand-logo-rund { width: 70px; height: 70px; border-radius: 70px; object-fit: cover; margin: var(--marginlow); opacity: 0.9; }


.interact {

    display: flex;
    margin-left:auto;
    font-size: 150%;
}

summary {
  display: flex;
   align-items: center;
   cursor: pointer;
   -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10 and IE 11 */
  user-select: none; /* Standard syntax */
  
}

summary::after {
  content: '';
  width: 18px;
  height: 10px;
  background: url('/inc/pictures/arrow.svg') no-repeat;
  background-size: cover;
  position: absolute;
  
  transition: 0.2s;
}

details[open] > summary::after {
  transform: rotate(180deg);
}




summary::-webkit-details-marker {
  display: none;
}


#impressum, #jugendschutz, #anfahrt, #oeffnungszeiten, #datenschutz, #seeds,#grow, #vaporizer, .blog-h1, .blog-h2, .blog-topic, .blog-datum { margin:0 auto; text-align: center;}

#empfehlung_table td { padding: 0; }
#empfehlung_table { width:100%; }

@media screen and (max-width: 800px) {
 

.comment_stamp { font-size: small; }





#wrapper { width:95%; }
:root {
          --marginlow: 3%;
        }
  #footer {
    flex-direction: column;
  }
  .footer-box { font-size: large; }
.brand-logo-rund { width: 50px; height:50px; border-radius: 50px; }
h2,h1,h3 { font-size: xx-large; }

.blog-h2 { font-size: smaller; }

table {  font-size: 2.3vw; width: 100%; }

.content {
    flex-direction: column;
  }

.banner { margin-bottom: var(--marginlow); }

.marginright { margin-right: 0%; }

  .boundleft, .boundright { text-align: center; }

}

@media screen and (min-width: 800px) {

    :root {
          --marginlow: 1%;
        }
.banner { width: 100%; margin-bottom: var(--marginlow); }
.marginright { margin-right: var(--marginlow); }


}


@media screen and (max-width: 800px) {
    #overlay-text { font-size: 14px; }
    body { font-size: 14px; }
    h1, h2, h3 { font-size: 16px; }

    
    #wrapper { margin:0; auto; width: 100%; }
    
html {
    overflow-y:auto;
}

}