.placeit-header {}

.placeit-main {}

.placeit-main article {
  padding-left: 139px;
  padding-bottom: 60px;
}

h1.page-title {}

.region > article {
  display: grid;
  grid-template-columns:  340px auto;
  grid-template-areas: "produkte-titel produkte-titel produkte-titel"
                       "produkte-bild produkte-body produkte-body"
                       "produkte-bild produkte-control produkte-control"
                       "produkte-order produkte-order produkte-order"
                       "produkte-buy produkte-buy produkte-buy";
}

article .field--name-field-ueberschrift {
  grid-area: produkte-titel;
  margin-bottom: 20px;
  padding: 10px;
  background-color: var(--color-products-op);
}

h1.page-title .field--name-title {
  display: none;
}

.node__content,form {
  display: contents;
}

.block-page-title-block h1 {}

h1.page-title .field--name-title, article .field--name-field-ueberschrift {
  font-family: var(--font-medium);
  font-size: 17pt;
}

article .field--name-field-preis {
  font-family: var(--font-semibold);
  font-size: 13pt;
  margin-right:10%;
  position: fixed;
  background-color: unset;
  z-index:9;
  right:0;
  animation-duration: 1s;
}

@keyframes moveprice {
  from {margin-top: 0px; margin-right: 10%; background-color: unset;}
  to {margin-top: 20px; margin-right:0%; background-color: var(--color-products)}
}
@keyframes movepriceback {
  from {margin-top: 20px; margin-right: 0%; background-color: var(--color-products)}
  to {margin-top: 0px; margin-right: 10%; background-color: unset;}
}

article .field--name-field-produktbild {
  grid-area: produkte-bild;
  margin-right: 20px;
}

article.media {
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 30px;
  padding-right: 30px;
}

.field--name-field-produktbeschreibung {
  grid-area: produkte-body;
  padding: 10px;
  padding-bottom: 30px;
  font-family: var(--font-text);
  font-size: var(--font-size-text-normal);
}

article .field--name-price, .field--name-field-preis {
  padding: 7px;
  background-color: var(--color-products-op);
}

article .field--name-field-preis .placeit-showprice-text {
  font-size: 10pt;
}

.field--name-field-produktbeschreibung li::marker {
}

.field--name-field-produktbeschreibung li {
/*  font-family: var(--font-light); */
/*  font-size: 12pt; */
  font-size: var(--font-size-text-small);
  line-height: 15pt;
  margin-left: 20px;
}


/* img animation - see placeit-produkte.js for more */

.field--name-field-produktbild {
  position: relative;
  overflow: hidden;
  min-height: 330px;
}

.field--name-field-produktbild > .field__item {
  position: absolute;
  transform: translateX(100%);
}

.field--name-field-produktbild > .field__item img {
  font-size: 0pt;
}

article button.placeit-buy-options {
    height: fit-content;
    width: fit-content;
    border: unset;
    padding: 10px;
    cursor: pointer;

    font-family: var(--font-medium);
    font-size: 14pt;
    color: var(--color-text);
    text-decoration: unset;
    border-radius: 22px;
    padding-top: 16px;
    padding-bottom: 16px;
    padding-left: 20px;
    padding-right: 20px;
    margin: 0;
    line-height: 0;
    background-color: var(--color-products-op);
}

@media (min-width: 0px) and (max-width: 640px) {
  .placeit-body {
    max-width: 640px;
  }
  .placeit-main .region > article {
    padding-top: 10px;
    grid-template-columns: 75% 25%;
    grid-template-areas: "produkte-titel produkte-titel"
                         "produkte-bild produkte-bild"
                         "produkte-body produkte-body"
                         "produkte-control produkte-control"
			 "produkte-order produkte-order"
			 "produkte-buy produkte-buy";
  }
  article .field--name-field-produktbild {
    margin-left: 10px;
    margin-right: 10px;
    min-height: 300px;
    max-width: 88%;
  }
  article .field--name-field-placeit-produktbeschreibun article, article .field--name-field-produktbeschreibung {
    max-width: 88%;
  }
  .placeit-main article {
    padding-left: 30px;
    padding-top: 20px;
    max-width: 100%;
  }
  .block-page-title-block h1 {
    display: none;
  }
  article .field--name-field-ueberschrift {
    margin-left: -30px;
    padding-left: 40px;
  }
  article .field--name-field-preis {
    margin-right: -20px;
    margin-top: 5px;
    padding-right: 30px;
    text-align: right;
  }
  article .field--name-field-preis .placeit-showprice-text,  {
    font-size: 10pt;
  }
  article .field--name-field-preis .placeit-showprice {
    font-size: 9pt;
    font-weight: 900;
  }
  article .placeit-order-iframe {
    padding-top: 10px;
    max-width: unset;
  }
  article .field--name-field-preis {
    margin-top: 5px;
  }
  @keyframes moveprice {
    from {margin-top: 0px; background-color: unset;}
    to {margin-top: -20px; background-color: var(--color-products)}
  }
  @keyframes movepriceback {
    from {margin-top: -20px; background-color: var(--color-products)}
    to {margin-top: 0px; background-color: unset;}
  }
}