/******************
    User custom CSS
    ---------------

    In this file you can add your own custom CSS
    It will be loaded last, so you can override any other property.
    Also, it will never be updated. So if you inheritate a core template and just add here some CSS, you'll still benefit of all the updates
*/

@charset "utf-8";
html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  font-size: 100%; /* 10px weil man mit rem arbeitet*/
}
p { hyphens: auto; }
.wrapper {
  width: 90vw; /*90 view width */
  height: 90vh;
  margin: 5vh auto 5vh auto; /* zentrieren */
  display: grid;
  grid-template-columns: 33% 33% 33%;
  grid-template-rows: auto;
  grid-gap: 0.625rem;/* 1rem */
  grid-template-areas:
    "produkt1 produkt2 produkt3"
    "grafik1 text1 text1"
    "grafik2 text2 text2"
    "grafik3 text3 text3"
    "grafik4 text4 text4"
    "grafik5 text5 text5"
}
.grid-box {
  padding: 6px;
  border: solid 1px #000;
}
.wrapper .grid-box /*alle grid boxen ansprechen*/ {
  background: #eeeeee;
  transition: all 250ms;
    /*font-size: 1.25rem;*//* 2rem */
  color: #3b3b3b;
  font-family: sans-serif;
  box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); /*  box-shadow: 0 0.1rem 0.3rem rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);*/
    
  animation: fadein 0.75s ease-out normal backwards;
}
.wrapper .gridbox h1 {
  font-size: 2.5rem; /* 4rem*/
}
.wrapper .grid-box:hover {
  z-index: 2;
  position: relative;
  box-shadow: 0 0.3125rem 1.75rem rgba(0, 0, 0, 0.15), 0 0.625rem 0.625rem rgba(0, 0, 0, 0.15);/* box-shadow: 0 0.5rem 2.8rem rgba(0, 0, 0, 0.15), 0 1rem 1rem rgba(0, 0, 0, 0.15);*/
  transform: translate(0, -0.0.0rem) scale(1.1);/*transform: translate(0, -0.0.0rem) scale(1.1);*/
}
.wrapper .element1 {
  grid-area: produkt1;
  animation-delay: 100ms;
  display: inline-block;
}
.wrapper .element2 {
  grid-area: produkt2;
  animation-delay: 0ms;
}
.wrapper .element3 {
  grid-area: produkt3;
  animation-delay: 200ms;
}
.wrapper .element4 {
  grid-area: grafik1;
  animation-delay: 250ms;
  
}
.wrapper .element5 {
  grid-area: text1;
  animation-delay: 300ms;
  
}
.wrapper .element6 {
  grid-area: grafik2;
  animation-delay: 300ms;
}
.wrapper .element7 {
  grid-area: text2;
  animation-delay: 250ms;
}
.wrapper .element8 {
  grid-area: grafik3;
  animation-delay: 350ms;
}
.wrapper .element9 {
  grid-area: text3;
  animation-delay: 400ms;
}
.wrapper .element10 {
  grid-area: grafik4;
  animation-delay: 400ms;
}
.wrapper .element11 {
  grid-area: text4;
  animation-delay: 350ms;
}
.wrapper .element12 {
  grid-area: grafik5;
  animation-delay: 450ms;
}
.wrapper .element13 {
  grid-area: text5;
  animation-delay: 425ms;
}
@keyframes fadein {
  0% {
    transform: scale(0);
  }
  80% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}
.produkt__image_sehrgut {
  display: block;
  width: 80%;
  margin: 1.25rem auto 0rem auto;/*margin: 2rem auto 0rem auto;*/
  /*margin-left: -4%;
	margin-right: -4%;
	margin-top: -4%;
	margin-bottom: 30px;*/
  max-width: 200px;
}
.produkt__image_gut {
  display: block;
  width: 80%;
  margin: 0.78125rem auto 0rem auto; /*1.25rem*/
  /*margin-left: -4%;
	margin-right: -4%;
	margin-top: -4%;
	margin-bottom: 30px;*/
  max-width: 100px;
}
.produkt_gut{ font-size:0.9375rem !important;/*1.rem*/}

.produkt_gut h1 {  
    font-size: 1.25rem;/*2rem*/
  
  text-align: center;
}

h1 {
  color: #3b3b3b;
  text-align: center;
}
.produkt-text {
  text-align: center;
  color: #3b3b3b;
}
.sterne-gelb {
  color: #FFA500;
  font-size: 1.56rem;
  text-align: center;
    line-height: 0.5rem;/*0.75REm*/
}
.sterne-caption{color:#000; font-size:0.6875rem; /*1.1rem*/}
.sterne-grau {
  color: #2C303A;
}
#zentriert{  display: flex;
  align-items: center;
  justify-content: center;}


.btn {
     background-color: #010C4E; 
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 1rem;
    margin: 4px 15%;
    cursor: pointer;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
    border-radius: 5px;
}
.btn:hover {
    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
}

@media screen and (max-width: 400px){
.wrapper {font-size:0.5rem;
    grid-gap: 0.15rem; margin:0.3rem;padding:0;
    
    }
    .sterne-gelb {font-size:1rem;}
    .btn{font-size: 0.75rem; padding:0.15rem;margin:0;}
    .wrapper h1 {font-size:1rem;}

}
@media screen and (max-width: 800px){
.wrapper{font-size:0.75rem}
    .wrapper h1 {font-size:1.3rem;}
     .btn{font-size: 1rem; 
         padding:0.4rem;margin:0 0.1rem 0 0.1rem;}
    .sterne-gelb {font-size:1.3rem;}
    
    }
    

@media screen and (min-width: 1200px){ 
.wrapper{font-size:1.25rem;} 
}