:root {
  --wh-img-width: 252px;
  --wh-m-left: 0px;
  --wh-m-right: 0px;
  --wh-m-topbot: 0px;
  --wh-txt-pad: 0px;
  --wh-border-left: none;
  --wh-border-right: none;
  --wh-border-distance: 2px;
  --wh-txt-bg: #ffffff;
}

/* Tablet */
@media (min-width: 545px) and (max-width: 1024px) {
  :root {
    --wh-m-left: 0px !important;
    --wh-txt-pad: 0px !important;
    --wh-m-topbot: 0px !important;
    --wh-img-width: 25% !important;
  }
}

/* Handy */
@media (max-width: 544px) {
  :root {
    --wh-m-left: 0px !important;
    --wh-txt-pad: 0px !important;
    --wh-m-topbot: 0px !important;
    --wh-img-width: 0px !important;
  }
}

/* Bildbereich links */
.bildbereich {
  position: fixed;
  top: 0;
  left: 0;
  width: var(--wh-img-width);
  height: 100vh;
  z-index: 1;
  box-sizing: border-box;
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  margin: var(--wh-m-topbot) var(--wh-m-right) var(--wh-m-topbot) var(--wh-m-left);
  padding-left: var(--wh-border-distance);
  padding-right: var(--wh-border-distance);
  border-left: var(--wh-border-left);
  border-right: var(--wh-border-right);
  border-top: none;
  border-bottom: none;
}

.bildbereich img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  box-sizing: border-box;
}

/* Seiteninhalt nach rechts verschieben */
body.page-template-page-whbildimage #page,
body.woocommerce #page,
body.archive.post-type-archive-product #page,
body.tax-product_cat #page,
body.tax-product_tag #page {
  position: relative;
  left: calc(var(--wh-img-width) + var(--wh-m-left) + var(--wh-m-right) + 2 * var(--wh-border-distance));
  width: calc(100% - (var(--wh-img-width) + var(--wh-m-left) + var(--wh-m-right) + 2 * var(--wh-border-distance)));
  padding: var(--wh-txt-pad);
}

body.wh-fixedimage-all #page {
  position: relative;
  left: calc(var(--wh-img-width) + var(--wh-m-left) + var(--wh-m-right) + 2 * var(--wh-border-distance));
  width: calc(100% - (var(--wh-img-width) + var(--wh-m-left) + var(--wh-m-right) + 2 * var(--wh-border-distance)));
  padding: var(--wh-txt-pad);
}

