:root {
  --artContHightActual: 100vH;
}

figure {
  margin: 0;
  overflow: hidden;
}

.artSlide {
  position: fixed;
  top: 0;
  height: 100%;
  width: 100%;
  visibility: hidden;
  overflow: hidden;
}
.artSlide__outer, .artSlide__inner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.artSlide__content {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  height: 100vH;
  width: 100%;
  top: 0;
}
.artSlide__container {
  position: relative;
  max-width: 1400px;
  width: 100vW;
  height: var(--artContHightActual);
  margin: 0;
  display: grid;
  grid-template-columns: repeat(16, 1fr);
  grid-template-rows: repeat(16, 1fr);
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  padding: 10vH 1rem;
}
.artSlide__heading {
  grid-area: 1/1/2/14;
  --width: 200;
  display: block;
  text-align: left;
  font-size: 2rem;
  font-weight: bold;
  font-variation-settings: "wdth" var(--width);
  margin: 0;
  padding: 0;
  z-index: 999;
  align-self: end;
}
.artSlide__img-cont {
  grid-area: 1/2/10/12;
  border-radius: var(--BorderRadius);
}
.artSlide__img-cont img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.artSlide__description1 {
  grid-area: 10/2/11/16;
  font-size: clamp(0.6rem, 4vw, 0.6rem);
  margin: 0;
  padding: 10px 0 10px 0;
  text-align: left;
  line-height: 1rem;
}
.artSlide__description2 {
  grid-area: 11/2/12/16;
  font-size: clamp(0.6rem, 4vw, 0.6rem);
  margin: 0;
  padding: 10px 0 10px 0;
  text-align: left;
  line-height: 1rem;
}

.artPrice {
  position: fixed;
  top: 50%;
  left: 80px;
  width: 20px;
  height: 160px;
  display: flex;
  flex-direction: row;
  justify-items: center;
  align-items: center;
  z-index: 3;
}
.artPrice .artPriceText {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  font-size: 1.2rem;
  font-weight: normal;
  text-align: left;
  width: 20px;
  height: 160px;
  writing-mode: vertical-lr;
  text-orientation: sideways;
  rotate: 180deg;
  color: var(--ColorWhite);
  z-index: 3;
}
.artPrice .artPriceText span {
  display: flex;
  flex-direction: row;
  text-align: float;
  justify-self: flex-end;
  font-size: 1.2rem;
  font-weight: normal;
  color: var(--ColorWhite);
}

.artOverlay {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2;
  overflow-x: hidden;
}
.artOverlay__content {
  display: grid;
  grid-template-columns: repeat(16, 1fr);
  grid-template-rows: repeat(16, 1fr);
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  max-width: 1400px;
  width: 100%;
  height: calc(100% - 80px);
  padding: 1vH 0 0 0;
  margin: 0;
}
.artOverlay__img-cont {
  grid-area: 12/2/16/16;
  position: relative;
  overflow: hidden;
  margin: 0;
  border-radius: var(--BorderRadius);
}
.artOverlay__img-cont img {
  position: absolute;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: 50% 50%;
     object-position: 50% 50%;
}
.artOverlay__count {
  grid-area: 1/14/2/16;
  font-size: clamp(1rem, 4vw, 15rem);
  margin: 0;
  padding: 0;
  text-align: right;
  align-self: baseline;
  border-bottom: 5px white solid;
  display: none;
}

.artGallery {
  position: fixed;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  z-index: 10;
  opacity: 0;
}
.artGallery::before {
  content: "";
  position: fixed;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  background-color: red;
  opacity: 0.3;
}
.artGallery.show {
  opacity: 1;
}

/* ----- START MEDIA QUERYS !!! -----*/
/* ----- ORDER_1: CSS Code wenn Dark Mode aktiv ----- */
/* ----- ORDER_2: STYLE FOR LANDSCAPE ORIENTATION ----- */
/* -------------- W I D T H -------------------*/
/* ----- ORDER_11: STYLE FOR TO LESS WIDTH ----- */
/* ----- ORDER_5: STYLE FOR TO LESS WIDTH: FOOTER MID TO LINE ----- */
/* ----- ORDER_3: STYLE FOR IPAD Landscape ----- */
/* ----- ORDER_11: STYLE FOR BUTTONS ON TOP ----- */
/* ----- ORDER_4: STYLE FOR PC-DISPLAYS (this is NOT mobile) ----- */
@media only screen and (min-width: 1080px) {
  .artOverlay__content,
  .artSlide__container {
    margin-top: 80px;
  }
  .artSlide__img-cont {
    margin-top: 0;
    grid-area: 1/2/14/7;
  }
  .artSlide__heading {
    grid-area: 1/8/3/14;
    --width: 200;
    display: block;
    text-align: left;
    font-size: 2rem;
    font-weight: bold;
    font-variation-settings: "wdth" var(--width);
    margin: 0;
    padding: 0;
    z-index: 999;
    align-self: end;
  }
  .artSlide__description1 {
    grid-area: 4/8/6/14;
    font-size: clamp(0.8rem, 4vw, 0.8rem);
  }
  .artSlide__description2 {
    grid-area: 6/8/8/14;
    font-size: clamp(0.8rem, 4vw, 0.8rem);
  }
  .artOverlay__img-cont {
    grid-area: 10/8/15/16;
  }
  .artOverlay__count {
    grid-area: 1/14/2/16;
    font-size: clamp(1rem, 4vw, 4rem);
    display: none;
  }
}
/* ----- ORDER_new: STYLE FOR IPAD QUER (Alle) ----- */
@media only screen and (min-width: 1024px) and (max-height: 1024px) and (orientation: landscape) {
  .artOverlay__content,
  .artSlide__container {
    margin-top: 80px;
  }
  .artSlide__img-cont {
    grid-area: 1/2/14/7;
  }
  .artSlide__heading {
    grid-area: 1/8/2/14;
    font-size: 1.4rem;
    font-weight: bold;
  }
  .artSlide__description1 {
    grid-area: 3/8/5/14;
    font-size: clamp(0.8rem, 4vw, 0.8rem);
  }
  .artSlide__description2 {
    grid-area: 6/8/8/14;
    font-size: clamp(0.8rem, 4vw, 0.8rem);
  }
  .artPrice {
    top: 40%;
    left: 30px;
  }
  .artOverlay__img-cont {
    grid-area: 9/6/15/15;
  }
  .artOverlay__count {
    display: none;
  }
}
/* ----- ORDER_new: STYLE FOR IPAD HOCKHANT (Alle) ----- */
@media only screen and (min-width: 768px) and (max-height: 1366px) and (orientation: portrait) {
  :root {
    --artContHightActual: 100vH;
  }
  .artOverlay__content,
  .artSlide__container {
    margin-top: 80px;
  }
  .artSlide__img-cont {
    grid-area: 3/2/10/8;
  }
  .artSlide__heading {
    grid-area: 1/5/2/14;
    font-size: 1.4rem;
    font-weight: bold;
  }
  .artSlide__description1 {
    grid-area: 3/9/5/14;
    font-size: clamp(0.8rem, 4vw, 0.8rem);
  }
  .artSlide__description2 {
    grid-area: 6/9/8/14;
    font-size: clamp(0.8rem, 4vw, 0.8rem);
  }
  .artPrice {
    top: 40%;
    left: 30px;
  }
  .artOverlay__img-cont {
    grid-area: 10/2/15/16;
  }
  .artOverlay__count {
    display: none;
  }
}
/* -------------- H E I G H T -------------------*/
/* ----- ORDER_9: STYLE FOR PORTRAIT ORIENTATION ----- */
/* ----- ORDER_6: STYLE FOR TO LESS HIGHT ----- */
/* ----- ORDER_7: STYLE FOR TO LESS HIGHT ----- */
/* ----- ORDER_8: STYLE FOR SMALL MOBILES ----- */
/* ----- ORDER_new: STYLE FOR PORTRAIT ORIENTATION / Iphone (bis 14ProMax) ----- */
@media only screen and (orientation: portrait) and (max-height: 950px) {
  :root {
    --artContHightActual: calc(100vH - 70px);
  }
  .artOverlay__content,
  .artSlide__container {
    margin: 0vH 0 0 0;
  }
  .artSlide__img-cont {
    margin-top: 0;
    grid-area: 3/3/12/15;
  }
  .artSlide__heading {
    grid-area: 1/1/2/14;
    font-size: 1rem;
  }
  .artSlide__description1 {
    grid-area: 13/3/16/16;
    font-size: 0.6rem;
  }
  .artSlide__description2 {
    grid-area: 16/3/16/16;
    font-size: 0.6rem;
  }
  .artPrice {
    top: 40%;
    left: 10px;
  }
  .artOverlay__img-cont {
    display: none;
  }
  .artOverlay__count {
    display: none;
  }
}
/* ----- ORDER_new: STYLE FOR PORTRAIT ORIENTATION / Iphone (bis 14ProMax) ----- */
@media only screen and (orientation: landscape) and (max-width: 950px) {
  .artOverlay__content,
  .artSlide__container {
    padding: 5vH 1rem 0 1rem;
    margin: 0 0 0 0;
  }
  .artSlide__img-cont {
    display: none;
  }
  .artSlide__heading {
    grid-area: 1/1/2/14;
    font-size: 1rem;
  }
  .artSlide__description1 {
    grid-area: 13/2/16/8;
    font-size: 0.6rem;
  }
  .artSlide__description2 {
    grid-area: 13/9/16/15;
    font-size: 0.6rem;
  }
  .artPrice {
    top: 28%;
    left: 15px;
  }
  .artOverlay__img-cont {
    grid-area: 4/2/13/14;
  }
  .artOverlay__count {
    display: none;
  }
}/*# sourceMappingURL=art.css.map */