﻿.orderBox {
  width: 60%;
  min-height: 100vh;
}
.orderBox .inner {
  padding-top: 6em;
  width: 96%;
}
.orderBox .inner h2.orderform {
  margin-top: 0;
  margin-bottom: 0;
}
.orderBox .productBoxesCat {
  width: 48%;
  margin-bottom: 2em;
}
.orderBox .productBoxesCat .productBox {
  width: 100%;
  height: auto;
}
.orderBox .productBoxesCat .productBox #ProductDetails .mehr {
  color: #82c828;
  display: inline-block;
  float: right;
  margin-top: -2.2em;
  margin-right: 0.2em;
  cursor: pointer;
}
.orderBox .productBoxesCat .productBox #ProductDetails ul {
  /*display: none*/
}
.orderBox .productBoxesCat .productBox #ProductDetails ul.display-it {
  display: block !important;
}
.orderBox .productBoxesCat .productBox #ProductDetails ul li:first-of-type {
  width: 74%;
}
.orderBox .productBoxesCat .productBox .product-inner {
  width: 50%;
  padding: 2em 0em 2em 0em;
  text-align: left;
  background-color: #ffffff;
  min-height: 0;
}
.orderBox .productBoxesCat .productBox .product-inner h2 {
  font-size: 1.8em;
  color: #333333;
  letter-spacing: 0.04em;
  margin-bottom: 1.6em;
}
.orderBox .productBoxesCat .productBox .product-inner .price {
  display: none;
}
.orderBox .productBoxesCat .productBox .product-inner .button {
  display: none;
}
.orderBox .productBoxesCat .productBox .product-inner ul {
  font-size: 0.84em;
  width: 160%;
}
.orderBox .productBoxesCat .productBox .product-inner ul li:before {
  transform: scale(0.8);
}
.orderBox .productBoxesCat .productBox .product-inner.float-right {
  float: left !important;
  clear: left;
}
.orderBox .productBoxesCat .productBox .productImg {
  float: right !important;
}
.orderBox .productBoxesCat .productBox .productImg img {
  width: 98%;
  margin-top: -4.4em;
}
.orderBox .productBoxesCat .productImg {
  pointer-events: none !important;
}
.orderBox .inner-right {
  width: calc(52% - 2em);
  border-left: 1px solid #82c828;
  float: right;
  padding-left: 2em;
  margin-right: 2em;
}
.orderBox .inner-right .options-cat {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.64);
  padding: 7.2em 14em 2em 4em;
  z-index: 99;
  overflow-y: scroll;
}
.orderBox .inner-right .options-cat .close-x {
  float: right;
  color: #82c828;
  font-size: 1.6em;
  margin-top: -1em;
  transform: scale(1.4, 1);
}
.orderBox .inner-right .options-cat .inner {
  width: calc(100% - 12em);
  padding: 5em 6em 4em 6em;
  background-color: #ffffff;
  border-radius: 1.4em;
}
.orderBox .inner-right .options-cat .inner h3,
.orderBox .inner-right .options-cat .inner h4 {
  margin-bottom: 1em;
}
.orderBox .inner-right .options-cat .inner p {
  margin-bottom: 0.6em;
  line-height: 1.32em;
}
.orderBox .inner-right .options-cat .inner p:last-child {
  margin-bottom: 0;
}
.orderBox .inner-right .options-cat .inner table {
  width: 100%;
  margin-top: 1.2em;
  font-size: 1.12em;
}
.orderBox .inner-right .options-cat .inner table td {
  padding: 1.4em;
}
.orderBox .inner-right .options-cat .inner table td label {
  margin-left: 1em;
}
.orderBox .inner-right .options {
  padding: 0em 0em 0em 2em;
  color: #82c828;
}
.orderBox .inner-right .options input[type=checkbox],
.orderBox .inner-right .options input[type=radio] {
  transform: scale(1.34);
  margin-left: 0.8em;
  margin-right: 0.8em;
  float: right;
  margin-top: calc(25% / 3);
}
.orderBox .inner-right .options img {
  width: 4.2em;
  height: auto;
  margin-left: -1em;
  margin-bottom: 1px;
  vertical-align: middle;
}
.orderBox .inner-right .options span.price {
  display: block;
  margin-left: 1.2em;
  font-size: 0.68em;
  float: right;
  color: rgba(0, 0, 0, 0.7);
}
.orderBox .inner-right .options:first-child {
  padding-top: 0.2em;
}
.orderBox .inner-right .button {
  margin-left: 2em;
}
.orderBox .inner-right table {
  width: 100%;
  margin-top: 0.82em;
  margin-bottom: 1.2em;
  font-size: 1.12em;
}
.orderBox .inner-right table td {
  padding: 0;
}
.orderBox .inner-right .optionsTable {
  border: none;
}
.orderBox .inner-right .optionsTable label {
  width: 88%;
  display: inline-block;
  position: relative;
  font-size: 0.96em;
}
.orderBox .inner-right .optionsTable label span.price {
  margin-top: 2.32em;
}
.orderBox .inner-right .optionsTable th {
  display: none;
}
.orderBox .inner-right .optionsTable td {
  border-right: none;
  border-bottom: none;
  border-left: none;
  min-width: 100%;
}
.orderBox .inner-right .optionsTable td.first {
  width: 3.2em;
  /* ergibt sich aus orderBox .inner-right .options img --> width + margin-left */
  min-width: 0;
}
.orderBox .inner-right .optionsTable td.listAndButton {
  text-align: right;
  padding-top: 1.04em;
  width: 10% !important;
  overflow: visible;
}
.orderBox .inner-right .optionsTable td.last {
  display: none;
}
.orderBox .inner-right .optionsTable .buttonGV {
  padding: 0.12em 0.4em;
}
.orderBox .placeholder2 {
  width: 12em;
  height: auto;
  margin-left: -2em;
}
.orderBox .fixed-buttons {
  width: calc(32% - 6.6em);
  /* gleiche width wie wkwrapper */
  height: 8em;
  position: fixed;
  right: calc(12% - 6.6em);
  /* gleich wie wkwrapper */
  bottom: 1.8em;
  margin-bottom: 4.4em;
  z-index: 9;
}
.orderBox .fixed-buttons .infoLabel {
  font-size: 0.8em;
  color: red;
  display: inline-block;
  margin-left: 0.4em;
}
.orderBox .fixed-buttons .footnote {
  margin-top: 0;
  text-align: right;
}
@media only screen and (max-width: 768px) {
  .orderBox {
    width: 100%;
  }
  .orderBox .inner {
    width: 100%;
    padding-top: 0;
  }
  .orderBox .inner h2.orderform {
    margin-top: 0.4em;
  }
  .orderBox .productBoxesCat {
    width: 100%;
    margin-bottom: 2em;
    padding-top: 1em;
  }
  .orderBox .productBoxesCat .productBox #ProductDetails ul.display-it {
    max-width: 100%;
  }
  .orderBox .productBoxesCat .productBox .product-inner {
    width: 60%;
    padding: 0em 0em 1em 0em;
  }
  .orderBox .productBoxesCat .productBox .product-inner ul {
    font-size: 1em;
  }
  .orderBox .productBoxesCat .productBox .product-inner ul li:before {
    transform: scale(0.6);
  }
  .orderBox .productBoxesCat .productBox .product-inner.float-right {
    float: left !important;
    clear: left;
  }
  .orderBox .productBoxesCat .productBox .productImg {
    float: right !important;
  }
  .orderBox .productBoxesCat .productBox .productImg img {
    width: 90%;
    margin-top: -2em;
  }
  .orderBox .productBoxesCat .productImg {
    pointer-events: none !important;
  }
  .orderBox .inner-right {
    width: calc(100% + 2em);
    border-left: none;
    float: left;
    padding-left: 1em;
    margin-right: 0em;
    margin-left: -2em;
  }
  .orderBox .inner-right .options-cat {
    padding: 2em 3em 2em 3em;
  }
  .orderBox .inner-right .options-cat .inner {
    width: 100%;
    padding: 2.8em;
  }
  .orderBox .inner-right .options-cat .inner table td {
    padding-left: 0.2em;
  }
  .orderBox .inner-right .options:first-child {
    padding-top: 1.2em;
  }
  .orderBox .placeholder2 {
    display: none;
  }
  .orderBox .fixed-buttons {
    width: 100%;
    height: 5em;
    position: absolute;
    left: 0em;
    /*top:; set by JS*/
    border-bottom: 1px solid #82c828;
    background-color: #EFEFEF;
    padding-top: 1em;
    padding-left: 2.2em;
    padding-right: 2em;
  }
  .orderBox .fixed-buttons .button {
    margin: 0.1em;
  }
  .orderBox .fixed-buttons .infoLabel {
    font-size: 0.8em;
    color: red;
    display: inline-block;
    margin-left: 0.4em;
  }
  .orderBox .fixed-buttons .footnote {
    margin-top: -2.82em;
  }
}
@media only screen and (min-width: 769px) and (max-width: 1280px) {
  .orderBox .inner {
    padding-top: 2em;
    width: 90%;
    margin-left: calc(2.2em + 2em) !important;
  }
  .orderBox .inner h2.orderform {
    margin-top: 0;
    margin-bottom: 0;
  }
  .orderBox .productBoxesCat {
    width: 50%;
    margin-bottom: 2em;
  }
  .orderBox .productBoxesCat .productBox {
    width: 100%;
    height: auto;
  }
  .orderBox .productBoxesCat .productBox #ProductDetails .mehr {
    margin-top: -1.2em;
  }
  .orderBox .productBoxesCat .productBox .product-inner {
    width: 50%;
    padding: 2em 0em 2em 0em;
    text-align: left;
    background-color: #ffffff;
    min-height: 0;
  }
  .orderBox .productBoxesCat .productBox .product-inner ul {
    font-size: 1em;
  }
  .orderBox .productBoxesCat .productBox .product-inner ul li:before {
    transform: scale(0.8);
  }
  .orderBox .productBoxesCat .productBox .product-inner.float-right {
    float: left !important;
    clear: left;
  }
  .orderBox .productBoxesCat .productBox .productImg {
    float: right !important;
  }
  .orderBox .productBoxesCat .productBox .productImg img {
    width: 98%;
    margin-top: -0.8em;
  }
  .orderBox .inner-right {
    width: calc(50% - 2em);
    margin-right: 0em;
  }
  .orderBox .inner-right .options input[type=checkbox],
  .orderBox .inner-right .options input[type=radio] {
    margin-top: 1.6em;
  }
  .orderBox .inner-right .optionsTable label {
    width: 80%;
  }
  .orderBox .fixed-buttons {
    width: calc(32% - 6.6em);
    /* gleiche width wie wkwrapper */
    position: absolute;
    height: 12em;
    right: calc(12% - 6.6em);
    /* gleich wie wkwrapper */
    bottom: auto;
  }
}
@media only screen and (max-width: 768px) {
  .orderBox .inner-right .optionsTable label {
    width: 80%;
  }
}
/* Warenkorb */
.wkwrapper {
  width: calc(32% - 6.6em);
  background-color: white;
  position: fixed;
  right: calc(12% - 6.8em);
  padding-top: 6.2em;
  z-index: 3;
}
.warenkorb {
  padding: 1.8em 2em 1em 2em;
  margin-bottom: 2em;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 0.5em;
  box-shadow: 0px 0px 8px 8px rgba(0, 0, 0, 0.1);
  background-color: white;
  position: relative;
}
.warenkorb svg {
  float: right;
  margin-top: -0.12em;
}
.warenkorb .wk-info {
  display: block;
  color: #82c828;
  font-size: 0.84em;
  padding-bottom: 0.6em;
  margin-bottom: 0.68em;
  border-bottom: 1px dashed #82c828;
}
.warenkorb .wk-info i {
  margin-left: 1em;
}
.warenkorb .wk-region {
  font-size: 0.78em;
}
.warenkorb .wk-result {
  width: 100%;
  margin-top: 0.6em;
  padding-top: 0.42em;
  padding-bottom: 0.32em;
  border-top: 1px solid #82c828;
  border-bottom: 4px double #82c828;
  display: block;
}
.warenkorb .wk-result-add {
  width: 100%;
  font-size: 0.8em;
  margin-top: 0.8em;
  padding-top: 0.8em;
  padding-bottom: 0.1em;
  border-bottom: 1px solid #82c828;
  display: block;
}
.warenkorb .anzahl-select {
  width: 2em;
  padding: 0.2em 0.2em 0.2em 0.4em;
}
.warenkorb .anzahl-disabled {
  -moz-appearance: none;
  /* Firefox */
  -webkit-appearance: none;
  /* Safari and Chrome */
  appearance: none;
}
.warenkorb p {
  line-height: 1.8em;
}
.warenkorb .footnote {
  line-height: normal;
  margin-top: 3.2em;
  color: rgba(0, 0, 0, 0.64);
}
.inputarea {
  width: 98% !important;
}
.inputarea .wkwrapper {
  width: auto;
  position: relative;
  padding-top: 2em;
  z-index: 3;
}
.inputarea .warenkorb {
  font-size: 0.9em;
  padding: 1em 0em 2em 0em;
  margin-bottom: 0;
  border: none;
  box-shadow: none;
  background-color: white;
}
.inputarea .warenkorb h5 {
  font-size: 1.4em;
  margin-bottom: 0.2em;
}
.inputarea .warenkorb p:first-child {
  margin-bottom: 0.4em;
  color: #82c828;
}
.inputarea .warenkorb p {
  width: 60%;
}
.inputarea .warenkorb svg {
  display: none;
}
.inputarea .warenkorb .wk-result {
  width: 100%;
  margin-top: 0.46em;
  padding-top: 0.32em;
  padding-bottom: 0.1em;
  border-top: 1px solid #82c828;
  border-bottom: 4px double #82c828;
  display: block;
}
.inputarea .warenkorb .wk-result-add {
  width: 100%;
  font-size: 0.8em;
  margin-top: 0.8em;
  padding-top: 0.32em;
  padding-bottom: 0.1em;
  border-bottom: 1px solid #82c828;
  display: block;
}
.inputarea .warenkorb .footnote {
  margin-top: 1.8em;
}
@media only screen and (max-width: 768px) {
  .wkwrapper {
    width: 90%;
    padding-top: 1px;
    position: relative;
    margin-bottom: 2em;
    left: 5%;
  }
  .warenkorb {
    padding: 3.4em 2em 0.8em 2em;
    margin-bottom: 2em;
    border: none;
    border-radius: 0;
    box-shadow: none;
    background-color: rgba(230, 230, 230, 0.6);
  }
  .warenkorb p {
    line-height: 1.36em;
  }
  .warenkorb .footnote {
    margin-top: 1.2em;
  }
  .inputarea {
    width: 100% !important;
  }
  .inputarea .wkwrapper {
    display: none;
  }
  .inputarea .warenkorb {
    display: none;
  }
}
@media only screen and (min-width: 769px) and (max-width: 1280px) {
  .wkwrapper {
    width: 75vw;
    left: calc(10.2em - 4em);
    right: auto;
    position: relative;
  }
  .warenkorb {
    width: 50%;
    padding: 1.8em 2.8em 2em 2.8em;
  }
}
/* Warenkorb Ende */