body,
html {
  margin: 0;
  padding: 0;
}

p,
h1,
h2,
h3,
h4,
h5,
a,
li,
input {
  font-family: "Arimo";
  text-decoration: none;
}

div {
  display: flex;
  flex-direction: column;
}

.Screen {
  width: 100vw;
  height: auto;
  min-height: 100vh;
  align-items: center;
}

.Section_Project {
  width: 90vw;
  max-width: 1300px;
}
.Image_Preview_Carousel {
  height: 80vh;
}

.Image_Preview_Holder {
  width: 100%;
  max-height: 75vh;
  overflow: hidden;
  height: auto;
  margin-bottom: 2.5vh;
  position: relative; /* Für die Positionierung der Bilder */
}

.Image_Preview_Holder img {
  position: absolute; /* Bilder übereinander stapeln */
  top: 0;
  left: 0;
  width: 100%; /* Füllt den gesamten verfügbaren Platz */
  height: 100%;
  object-fit: contain;
  object-position: center;
  opacity: 0; /* Unsichtbar standardmäßig */
  transition: opacity 1s ease-in-out; /* Weicher Übergang */
}

.Image_Preview_Holder img.active {
  opacity: 1; /* Aktives Bild sichtbar */
}

/* Steuerknöpfe */
.carousel-controls {
  position: absolute;
  bottom: 5vh; /* Abstand vom unteren Rand */
  left: 50%;
  transform: translateX(-50%);
  display: flex; /* Standardmäßig unsichtbar */
  flex-direction: row;
  opacity: 0;
  transition: 0.3s ease;
}

.carousel-controls button {
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
  margin: 0 10px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  font-size: 1.2em;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50vw;
  width: 4vw;
  height: 4vw;
}

.carousel-controls button svg{
  width: 80%;
  height: 80%;
  fill: white;
}

.carousel-controls button:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

/* Anzeigen der Steuerknöpfe bei Hover */
.Image_Preview_Holder:hover .carousel-controls {
  opacity: 1;
}

.Information_Box {
  width: 100%;
  flex-direction: row;
  justify-content: space-between;
  height: auto;
  margin-bottom: 10vh;
  margin-top: 2.5vh;
}

.IB_L,
.IB_R {
  width: 48%;
  height: 100%;
}

.Project_Header_Name {
  font-size: clamp(1em, 2vw, 3em);
  font-weight: 400;
  font-family: "arimo";
  margin-bottom: 1vh;
  margin-top: 0;
}

.Project_Header_Text {
  font-size: clamp(1em, 1vw, 1.5em);
  font-weight: 300;
  font-family: "arimo";
  color: #606060;
  margin-top: 1vh;
}

.Back_BTN {
  width: auto;
  height: auto;
  align-items: center;
  justify-content: center;
  width: fit-content;
  display: flex;
  border: 0;
}

.Back_BTN p {
  font-size: clamp(1em, 1vw, 1.5em);
  font-weight: 300;
  font-family: "arimo";
  padding: 0vh;
  margin: 0;
  padding-top: 1vh;
  padding-bottom: 1vh;
  color: black;
}

.Information_Line {
  width: 100%;
  border-bottom: 1px solid black;
  flex-direction: row;
}

.Information_Label {
  min-width: 30%;
  height: auto;
  font-weight: 600;
}

.Information_Value {
  width: 70%;
  height: auto;
}

.Information_Label,
.Information_Value {
  font-size: clamp(1em, 1vw, 1.5em);
  font-weight: 300;
  font-family: "arimo";
}

@media (max-width: 900px) {
  .S1_TB {
    width: 90vw;
    height: auto;
    padding-left: 5%;
    margin-bottom: 1.5vh;
  }

  .S1_TB_PN {
    margin-top: 0;
    font-size: clamp(1em, 3vh, 4em);
    width: 100%;
  }

  .S1_TB_Date {
    font-size: clamp(1em, 2vh, 3.5em);
  }

  .S1_Preview_Image {
    width: 90vw;
    height: 50vh;
    position: static;
    top: 0;
    left: 5vw;
    z-index: 2;
    margin-left: 5vw;
  }

  .S1_Landing {
    width: 100vw;
    height: auto;
  }

  .S2 {
    flex-direction: column;
    align-items: center;
    height: auto;
    min-height: unset;
  }

  .S2_L {
    width: 95%;
    border-bottom: 1px solid grey;
    border-right: 0px;
    margin-bottom: 2.5vh;
    padding-bottom: 2.5vh;
  }

  .S2_R {
    width: 95%;
    height: auto;
  }

  .S3_Impression_Item {
    flex-direction: column-reverse;
    margin-bottom: 0;
    align-items: center;
  }

  .S3_Impression_Item:nth-child(2n) {
    flex-direction: column-reverse;
  }

  .S3_Textbox {
    width: 95%;
    padding-right: 5vw;
    margin-top: 1vh;
    margin-bottom: 1vh;
    text-align: center;
  }

  .S3_Image {
    width: 95%;
  }

  .S3_Text {
    margin-top: 1vh;
    margin-bottom: 1vh;
  }

  .S3 {
    margin-bottom: 10vh;
  }

  .Image_Preview_Carousel {
    height: 25vh;
  }

  .Information_Box {
    flex-direction: column-reverse;
  }

  .IB_L,
  .IB_R {
    width: 100%;
    margin-bottom: 5vh;
  }


  .Information_Label {
    min-width: 45%;
  }
}


@media (min-width: 1800px) {
  .Screen {
    max-width: 1600px; /* Setze hier deine gewünschte maximale Breite */
    margin: 0 auto; /* Zentriert das Container-Element */
  }

  .Section_Project{
    width: 95%;
  }

}