/* Warenkorb Anfang */
.cart-grid-container-1{
  grid-template-columns: 30% 25% 15% 10% 20%;
}

.cart-grid-item-1-6{
  grid-column: 1/6;
}

.cart-grid-container-2{
  grid-template-columns: 30% 25% 15% 10% 20%;
}
.cart-area{
  order:1;
}
.cart-link{
display: flex;
justify-content: center;
align-items: center;
order: 1;
}
.cart-link > a{
  font-size: 1rem;
}
.cart-icon {
  width: 1.25rem;
  height: 1.25rem;
  background-size: cover;
  margin-right: .5rem;
}

.cart-icon-white {
  background-image: url(https://static.larspilawski.de/pic/shop/cart-outline-white.svg);
}

.cart-icon-orange {
  background-image: url(https://static.larspilawski.de/pic/shop/cart-outline-orange.svg);
}

/* Button zum Kaufen*/
.button-buy {
	box-shadow:inset 0px 1px 0px 0px #fff6af;
	background:linear-gradient(to bottom, #ffec64 5%, #ffab23 100%);
	background-color:#ffec64;
	border-radius:11px;
	border:1px solid #ffaa22;
	display:inline-block;
	cursor:pointer;
	color:#000;
	font-family:Arial;
	font-size:1.5rem;
	font-weight:bold;
	padding:8px 10px;
	text-decoration:none;
  text-shadow:0px 1px 0px #ffee66;
}
.button-buy:hover {
	background:linear-gradient(to bottom, #ffab23 5%, #ffec64 100%);
	background-color:#ffab23;
}
.button-buy:active {
	position:relative;
	top:1px;
}

.button-buy > a{
  list-style-type: none;
	list-style-image: none;
}

@media (max-width: 320px){
  .button-buy{
    font-size: 1.5rem;
  }
}
/* Button zum Kaufen Ende*/

/* Warenkorb Ende */

/* Warenkorb Kauf Button Anfang */
.cart-grid-buy_buttons-1{
  grid-template-columns: 50% 50%;
}

@media (max-width: 768px){
  .cart-grid-buy_buttons-1{
    grid-template-columns: auto;
  }
}

.cart-grid-buy_buttons-2{
  grid-template-columns: 70% auto;
}

@media (max-width: 414px){
  .cart-grid-buy_buttons-2{
    grid-template-columns: auto;
  }
}
/* Warenkorb Kauf Button Ende */

/* Warenkorb Anfang */
@media (max-width: 768px){
  .cart-grid-container-1{
    grid-template-columns: 100%;
  }

  .cart-grid-item-1-6{
    grid-column: 1;
  }

  .cart-grid-container-2{
    grid-template-columns: auto 25% 25%;
  }

  .cart-grid-item{
    text-align: center;
  }

  .cart-grid-item-hide{
    display: none;
  }
}
/* Warenkorb Ende */

/* sidebar */
.content-area-sidebar{
	width: 19rem;
	position: fixed;
	z-index: 1;
	top: 120px;
	right: 20px;
}

.content-area-sidebar > a{
	display: inline-block;
	color: #ffffff;
	text-align: left;
	padding: .4rem;
	text-decoration: none;
	box-sizing: border-box;
	width: 100%;
}

/* Headline in der Sidebar */
.content-area-sidebar_hl{
	background-color: #018ccd;
}

.content-area-sidebar_hl:hover{
	background-color: #f1ae0c;
	color: #ffffff;
}

/* Unterpunkte in der Sidebar */
.content-area-sidebar_sm{
	background-color: #f1ae0c;
}

.content-area-sidebar_sm:hover{
	background-color: #018ccd;
	color: #ffffff;
}
/* sidebar + ads */
@media (max-width: 1679px) and (min-width: 1560px){
	.content-area-sidebar{
	width: 15rem;
	top: 120px;
	}
}

/* sidebar + ads */
@media (max-width: 1559px){
	.content-area-sidebar{
	display: none;
  justify-content: center;
  width: 100%;
  position: unset;
  margin-top: .3rem;
	}
}
/* sidebar Ende */

/* für Produkt Banner Anfang */
.product-banner-grid{
  margin-top: 1rem;
  display: grid;
  /* grid-template-columns: 33.3% 33.3% 33.3%; */
  grid-template-columns: 33.66% 33.66% auto;
}

.product-banner-grid-col{
  background-color: #f0f8ff;
  padding: 1.2rem;
}

.product-banner-grid-col > div{
  min-height: 8rem;
  margin-top:.5rem;
}

.product-banner-grid-col > h3{
  min-height: 3rem;
  margin-top:.5rem;
}

.product-banner-grid-col > button{
  margin-top:.5rem;
}

.product-category-1{
  display: block;
}
.product-category-2{
  display: block;
}
.product-category-3{
  display: block;
}
.product-category-4{
  display: block;
}
.product-category-5{
  display: block;
}

.product-banner-pic{
  min-height: 300px !important;
}

.product-banner-pic > a{
  display:block;
  height:0;
}

.product-banner-pic > a > img{
  width: 300px;
  height: 300px;
}

@media (max-width: 1024px){
  .product-banner-grid{
    margin-top: 1rem;
    display: grid;
    grid-template-columns: 50% 50%;
  }

  .product-banner-grid-col > div{
    max-width:300px;
    margin-left: auto;
    margin-right: auto;
  }

  .product-banner-grid-col > h3{
    display: block;
    max-width:300px;
    margin-left: auto;
    margin-right: auto;
  }

  .product-banner-grid-col > button{
    display: block;
    max-width:300px;
    margin-left: auto;
    margin-right: auto;
  }
}

@media (max-width: 768px){
  .product-banner-grid{
    margin-top: 1rem;
    display: grid;
    grid-template-columns: 100%;
  }
}
/* für Produkt Banner Ende */

/* Standard Grid */
.grid-col-3{
  margin-top: 1rem;
  display: grid;
  grid-template-columns: 33.3% 33.3% auto;
}

.grid-col-3-1{
  margin-top: 1rem;
  display: grid;
  grid-template-columns: 25% auto 25%;
}

.grid-col-item{
  background-color: #f0f8ff;
  padding: 1.2rem;
}

.grid-col-item > div{
  min-height: 6rem;
  margin-top:.8rem;
}

.grid-col-item > h3{
  min-height: 3rem;
  margin-top:.8rem;
}

@media (max-width: 768px){
  .grid-col-3,.grid-col-3-1{
    margin-top: 1rem;
    display: grid;
    grid-template-columns: 100%;
  }

  .grid-col-item > div{
    width:302px;
    margin-left: auto;
    margin-right: auto;
  }

  .grid-col-item > h3{
    display: block;
    width:302px;
    margin-left: auto;
    margin-right: auto;
  }
}

.question-faq > ol > li{
  list-style: none;
  color: #018ccd;
}

.question-faq > ol > li::before{
  content:url(https://static.larspilawski.de/pic/shop/help-circle-outline_25x25.svg);
  display: inline-block;
  width: 2.5rem;
  margin-left: -2.5rem;
  position: relative;
  top: .5rem;
}

/* 20 Gründe zur Zusammenarbeit */
.reasons-for-cooperation > ol{
  margin: 0;
  padding: 0;
}

.reasons-for-cooperation > ol > li{
  display: flex;
  justify-content: center;
  gap: 1rem;
  align-items: flex-start;
  padding: .5rem;
}

.reasons-for-cooperation > ol > li > p{
  padding: 0;
  text-align:justify;
  color: #018ccd;
}

.reasons-for-cooperation > ol > li > img{
  width: 1.5rem;
  height: 1.5rem;
}

/* Punkte Übersicht auf der Startseite */
.show_vip_list{
  list-style-type: none;
}

.show_vip_list > li:before{
  content: '✔';
  color: green;
  width: 1.5rem;
  margin-left: -1.5rem;
  display: inline-block;
}

/* Kauf Button auf der VIP Startseite */
.button-vip-aktiv {
	background-color:#018ccd;
	border-radius:11px;
	border:1px solid #018ccd;
	display:inline-block;
	cursor:pointer;
	color:#fff;
	font-family:Arial;
	font-size:1.5rem;
	font-weight:bold;
	padding:8px 10px;
  margin-top: .5rem;
  min-height: 3rem;
}
.button-vip-aktiv > a{
  color:#FFF;
  text-decoration: none;
}
.button-vip-aktiv:hover {
	background:linear-gradient(to bottom, #018ccd 5%, #ccd 100%);
	background-color:#ffab23;
}

.button-vip-inaktiv {
	box-shadow:inset 0px 1px 0px 0px #fff6af;
	background:linear-gradient(to bottom, #ffec64 5%, #ffab23 100%);
	background-color:#ffec64;
	border-radius:11px;
	border:1px solid #ffaa22;
	display:inline-block;
	cursor:pointer;
	color:#000;
	font-family:Arial;
	font-size:1.5rem;
	font-weight:bold;
	padding:8px 10px;
  text-shadow:0px 1px 0px #ffee66;
  margin-top: .5rem;
  min-height: 3rem;
}

.button-vip-inaktiv > a{
  color:#000;
  text-decoration: none;
}

.button-vip-inaktiv:hover {
	background:linear-gradient(to bottom, #ffab23 5%, #ffec64 100%);
	background-color:#ffab23;
}
.button-vip-inaktiv:active {
	position:relative;
	top:1px;
}
/* Kauf Button auf der VIP Startseite Ende */

/* Details und Summary Tags in der Hilfe Area Anfang */
.help-area > details > summary,.customer-products > details > summary{
  padding: 0.5rem 1rem;
  background-color: #018ccd;
  font: bold 1.25rem/2 sans-serif;
  border: none;
  border-radius: 4px;
  box-shadow: 0 -1px 1px 1px rgba(0,0,0,0.5);
  color:floralwhite;
  cursor: pointer;
  list-style: none;
  margin-top:.5rem;
}

.help-area > details > summary:hover,.customer-products > details > summary:hover{
  background-color: #000;
}

.help-area > details > summary::-webkit-details-marker,.customer-products > details > summary::-webkit-details-marker{
	display: none;
}

.help-area > details > summary:before,.customer-products > details > summary:before{
	content: "+";
  padding-right: 0.5rem;
}

.help-area > details > summary:after,.customer-products > details > summary:after{
  content: '(zum aufklappen klicken)';
  padding-left: 0.5rem;
  color: #006400;
}

.help-area > details[open] summary:before,.customer-products > details[open] summary:before{
  padding-right: 0.5rem;
  content: "-";
}

.help-area > details[open] summary:after,.customer-products > details[open] summary:after{
  content: '(zum zuklappen klicken)';
  padding-left: 0.5rem;
  color: #006400;
}

.help-area > details[open] summary,.customer-products > details[open] summary{
  font-style: italic;
  border-radius: 4px 4px 0 0;
}
/* Details und Summary Tags in der Hilfe Area Ende */

/* Radio Buttons */
.label-container {
display: block;
position: relative;
padding-left: 35px;
margin-bottom: 12px;
cursor: pointer;
font-size: 22px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}

/* Hide the browser's default radio button */
.label-container input {
position: absolute;
opacity: 0;
cursor: pointer;
}

/* Create a custom radio button */
.checkmark {
position: absolute;
top: 0;
left: 0;
height: 25px;
width: 25px;
background-color: #eee;
border-radius: 50%;
}

/* On mouse-over, add a grey background color */
.label-container:hover input ~ .checkmark {
background-color: #ccc;
}

/* When the radio button is checked, add a blue background */
.label-container input:checked ~ .checkmark {
background-color: #2196F3;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after {
content: "";
position: absolute;
display: none;
}

/* Show the indicator (dot/circle) when checked */
.label-container input:checked ~ .checkmark:after {
display: block;
}

/* Style the indicator (dot/circle) */
.label-container .checkmark:after {
top: 9px;
left: 9px;
width: 8px;
height: 8px;
border-radius: 50%;
background: white;
}
/* Radio Buttons Ende */

.loader-1>span {
  width: .5rem;
  height: .5rem;
  display: block;
  background: #fff;
  border-radius: 50%;
  position: relative;
  margin: 0 5px;
}

.loader-1 {
  display: flex;
  align-items: center;
  height: 0;
  /* justify-content: center; */
}

.dot-1 {
  animation: anim 1s linear 0s infinite;
}

.dot-2 {
  animation: anim 1s linear 0.25s infinite;
}

.dot-3 {
  animation: anim 1s linear 0.50s infinite;
}

.dot-4 {
  animation: anim 1s linear 0.75s infinite;
}

@keyframes anim {
  0% {
    top: 0;
  }

  50% {
    top: 15px;
  }

  100% {
    top: 0;
  }
}
progress[value] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: solid #000 1px;
  width: auto;
  height: 1rem;
}

/* Produkt Details */
.product-details-1{
  grid-template-columns: 20% auto 10%;
}

.product-details-2{
  grid-template-columns: 20% auto 10%;
}

/* VIP Suche und Produkt-Kategorien */
.vip-search,.product-categories{
  margin-top: .5rem;
}

.vip-search-input{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: .2rem;
  width: 100%;
}

.product-categories-buttons{
  display: flex;
  flex-direction: column;
  gap: .2rem;
  width: 100%;
}

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

  .vip-search-input{
    flex-direction: row;
    gap: .5rem;
  }

  .product-categories-buttons{
    flex-direction: row;
    gap: .5rem;
  }
}

@media (max-width: 768px){
  .product-details-1{
    grid-template-columns: 100%;
  }

  .product-details-2{
    grid-template-columns: auto 30%;
  }
}
/* Produkt Details Ende */

/* Diverse Trust Symbole */
.trust-symbol{
  margin-left: auto;
  margin-right: auto;
  display: block;
}

.trust-symbol-1{
  max-width: 568px;
}

.trust-symbol-2{
  max-width: 768px;
}

@media (max-width: 588px){
  .trust-symbol-1{
    width: 100%;
  }
}

@media (max-width: 788px){
  .trust-symbol-2{
    width: 100%;
  }
}
/* Diverse Trust Symbole Ende */

/* Rating System Start */
.rating-area{
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.rating-details{
  display: flex;
  align-items: center;
  justify-content: center;
  gap:.3rem;
  flex-direction: column;
}

.rating-item-head{
  display: flex;
  align-items: center;
  gap: .3rem;
  flex-direction: column-reverse;
}

.rating-video{
  width: 100%;
}

@media (min-width: 768px){
  .rating-item-head{
    flex-direction: row;
    justify-content: space-between;
  }

  /* .rating-video{
    max-height: 20rem;
  } */
}

@media(min-width:468px){
  .rating-video{
    max-height: 20rem;
    margin-left: auto;
    margin-right: auto;
    display:block;
    width: auto;
  }

  .rating-details{
    flex-direction: row;
  }

  .rating-detail-percent{
    width:5rem;
    text-align: right;
  }
}

/* Rating System End */