/* Landingpage Homepage */
.landingpage {
  padding: 1rem 2rem 0;
  height: auto;
  border-bottom: 2px solid var(--text-color-lm);
  margin: 0 2rem;

  div {
    margin: 0rem 0rem 2rem;
  }
}

.image-container-title-section {
  height: 30vh;
  width: 100%;
  display: flex;
  justify-content: right;

  img {
    height: 100%;
    width: 50%;
    -o-object-fit: cover;
    object-fit: cover;
  }
}

.services-overview {
  margin: 2rem 0;
  list-style: url("../illustrations/graphics/List-Style_Services-lm.svg");
  padding: 0 5.5rem;
  overflow: hidden;

  /* li::marker {
        width: 10px;
    } */
}

/* ---- Main ---- */
.section {
  margin: 0 2rem;
  padding: 0 0rem 2rem;

  .left {
    transform: translateX(10px);
  }

  .right {
    transform: translateX(-10px);
  }
}

.immo-teaser > h2,
.feedback > h2 {
  padding: 2rem 2rem 1.5rem;
}

/* Title Section */
.title-section {
  padding: 1rem 2rem 0;
  height: auto;
  border-bottom: 2px solid var(--text-color-dm);
  margin: 0 2rem;

  div {
    margin: 0rem 0rem 2rem;
  }
}

/* Immo Teaser Section */
.immo-teaser {
  border-bottom: 2px solid var(--text-color-lm);
  margin: 0 2rem;

  .immo-teaser-slider {
    display: flex;
    align-items: center;
    width: 100%;
    height: 50vh;

    .slider {
      position: relative;
      width: 100%;
      height: 100%;
      margin: auto;
      overflow: hidden;

      .slide {
        display: none;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;

        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }

      .slide.displaySlide {
        display: block;
        animation: fade 1.5s;
      }
    }
  }
}

@keyframes fade {
  from {
    opacity: 0.4;
  }
  to {
    opacity: 1;
  }
}

@-webkit-keyframes fade {
  from {
    opacity: 0.5;
  }
  to {
    opacity: 1;
  }
}

@keyframes fade {
  from {
    opacity: 0.5;
  }
  to {
    opacity: 1;
  }
}

/* Feedback Section */
.feedback-container {
  display: flex;
  align-items: center;
  width: 100%;
  justify-content: center;

  .arrow-lm {
    width: 30px;
  }

  .feedback-text-container {
    border: 2px solid var(--text-color-lm);
    padding: 1.5rem;
    height: auto;
    width: 100%;
    max-width: 600px;
    position: relative;

    /* Alle Feedback-Divs standardmäßig verstecken */
    > div {
      display: none;
    }

    /* Nur das aktuelle Feedback anzeigen */
    > div.displaySlide {
      display: block;
    }

    .quotation {
      -webkit-hyphens: auto;
      -ms-hyphens: auto;
      hyphens: auto;
    }
  }

  h3 {
    margin-bottom: 1rem;
  }
}

/* Default section */
.default-section {
  padding: 0 2rem 2rem;
  /* margin: 0 2rem; */
}

.container {
  border-bottom: 2px solid var(--text-color-lm);
  padding: 2rem 2rem;

  h2 {
    padding-bottom: 1rem;
  }

  p {
    padding-bottom: 1rem;
  }

  .accordion {
    margin-bottom: 1rem;
  }

  i {
    /* color: var(--background-color-dm); */
    padding-left: 10px;
  }

  ul > li {
    list-style: none;
  }
}

.container:last-child {
  border-bottom: none;
}

/* Dark Mode */
@media (prefers-color-scheme: dark) {
  body.dark-mode main {
    background-color: var(--background-color-dm);
  }

  body.dark-mode .landingpage {
    border-bottom: 2px solid var(--text-color-dm);
  }

  body.dark-mode .services-overview {
    list-style: url("../illustrations/graphics/List-Style_Services-dm.svg");
    /* list-style-image: url("../illustrations/graphics/List-Style_Services-dm.svg"); */
  }

  body.dark-mode .title-section {
    border-bottom: 2px solid var(--text-color-lm);
  }

  body.dark-mode .immo-teaser {
    border-bottom: 2px solid var(--text-color-dm);
  }

  body.dark-mode .container {
    border-bottom: 2px solid var(--text-color-dm);
  }

  body.dark-mode .container:last-child {
    border-bottom: none;
  }

  body.dark-mode .feedback-container > .feedback-text-container {
    border: 2px solid var(--background-color-lm);
  }

  /* .dot {
        background-color: var(--background-color-lm);
    } */

  /* .dot:nth-child(2) {
        background-color: var(--highlight-color);
    }

    .dot:hover {
        background-color: var(--highlight-color);
    } */
}

/* Responsiveness */

@media (min-width: 479px) {
  .section {
    padding: 0 2rem 2rem;
  }
}

@media (max-width: 600px) {
  .container {
    padding: 2rem 0rem;
  }

  .title-section {
    padding: 1rem 0rem 0;
  }

  .section {
    padding: 0 0rem 2rem;
  }
}

@media (max-width: 479px) {
  .immo-teaser-slider {
    .slider {
      height: 20vh;
    }
  }

  .image-container-title-section > img {
    width: 100%;
  }
}

@media (min-width: 480px) {
  .image-container-title-section > img {
    width: 100%;
  }

  .immo-teaser-slider {
    .slider {
      height: 40vh;
    }
  }

  /* .feedback-text-container {
        min-height: 20vh;
    } */
}

@media (min-width: 768px) {
  .landingpage {
    padding: 1rem 4rem 0;
  }

  .section {
    /* margin: 0 2rem; */
    padding: 0 6rem 2rem;
  }

  .image-container-title-section > img {
    width: 70%;
  }

  .immo-teaser-slider {
    .slider {
      /* height: 40vh; */
      width: 80%;
    }
  }
}

@media (min-width: 1024px) {
  /* .section {
    margin: 0 6rem;
    padding: 0 10rem 2rem;
  } */

  .feedback {
    padding: 0 6rem 6rem;
  }
}

@media (min-width: 1200px) {
  .section {
    padding: 0 12rem 2rem;
  }
}

/* Overwritings */
.feedback {
  padding-bottom: 5rem;
}

/* ---------- To Do's ---------- */
/* 
- Image slider height wird nicht angepasst
- same for Feedback section
- 
*/