@charset "UTF-8";
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.hidden {
  display: none !important;
}

#area_mystory {
  height: 100dvh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: url("../media/background/Venedig am 22.11.2023 um 13.15.31  004753.NEF_compressed.JPEG") no-repeat center center fixed;
  background-size: cover;
}
#area_mystory #details_story_area {
  margin: 10dvh auto 0 auto;
  background-color: rgba(255, 255, 255, 0.7);
  width: 95dvw;
  height: 85dvh;
  padding: 20px;
  overflow: auto;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  -moz-column-gap: 30px;
       column-gap: 30px;
  row-gap: 30px;
}

#article_full_area {
  grid-column: 1/4;
  display: flex;
  flex-direction: column;
  gap: 20px;
  background-color: white;
  /* Modal Styles */
}
#article_full_area #article_top_area {
  display: flex;
  height: 40dvh;
  width: 100%;
  gap: 20px;
}
#article_full_area #article_top_area #article_image {
  flex: 0 0 100%;
  position: relative;
  height: 100%;
}
#article_full_area #article_top_area #article_image img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 10px;
  display: block;
}
#article_full_area #article_top_area #article_image #image_caption {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  padding: 10px;
  font-size: 1.2rem;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  box-sizing: border-box;
}
#article_full_area #article_zitat_area {
  text-align: center;
}
#article_full_area #article_textarea {
  padding-left: 5px;
  padding-right: 5px;
}
#article_full_area #article_imagesarea {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
#article_full_area #article_imagesarea div {
  width: 100%;
  height: 40dvh;
}
#article_full_area #article_imagesarea div img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 8px;
  display: block;
}
#article_full_area #article_imagesarea div img:hover {
  cursor: pointer;
}
#article_full_area #image_modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.85);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}
#article_full_area #image_modal img {
  max-width: 90%;
  max-height: 90%;
  border-radius: 10px;
  box-shadow: 0 0 20px #000;
}
#article_full_area #close_modal {
  position: absolute;
  top: 30px;
  right: 50px;
  font-size: 3rem;
  color: white;
  cursor: pointer;
}
#article_full_area .hidden {
  display: none;
}
#article_full_area #article_verabschiedung_area {
  text-align: center;
}

/* ---- MEDIA QUERIES ---- */
/* Media Query: Tablet Portrait (z. B. iPad Pro 11") */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
  #article_full_area #article_imagesarea {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
  }
  #article_full_area #article_imagesarea div {
    height: 25dvh;
  }
}
@media only screen and (max-width: 932px) and (orientation: landscape) {
  #article_full_area #article_imagesarea {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
  }
  #article_full_area #article_imagesarea div {
    height: 35dvh;
  }
}
/* Media Query: Tablet Landscape (z. B. iPad Pro 11") */
@media only screen and (min-width: 933px) and (orientation: landscape) {
  #article_full_area #article_imagesarea {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 10px;
  }
  #article_full_area #article_imagesarea div {
    height: 30dvh;
  }
}
@media only screen and (min-width: 1024px) and (max-height: 1366px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 1.5) {
  #article_full_area #article_imagesarea {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 10px;
  }
  #article_full_area #article_imagesarea div {
    height: 20dvh;
  }
}
@media only screen and (min-width: 1024px) and (max-height: 1366px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 1.5) {
  #article_full_area #article_imagesarea {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 10px;
  }
  #article_full_area #article_imagesarea div {
    height: 30dvh;
  }
}
@media only screen and (min-width: 1400px) {
  #article_full_area #article_imagesarea {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 10px;
  }
  #article_full_area #article_imagesarea div {
    height: 30dvh;
  }
}/*# sourceMappingURL=sfr_website_story.css.map */