div {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  -o-flex-direction: column;
  flex-direction: column;
}

body,
html {
  margin: 0;
  padding: 0;
  scroll-behavior: smooth;
}

p,
a {
  font-family: "Titillium Web";
  text-decoration: none;
}

.Screen {
  width: 100vw;
  height: auto;
  min-height: 100vh;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  -o-flex-direction: column;
  flex-direction: column;
}

.Landing_Section {
  width: 100%;
  height: 100vh;
}

.LS_Content {
  width: 100%;
  height: 85%;
  -webkit-flex-direction: row;
  -moz-flex-direction: row;
  -ms-flex-direction: row;
  -o-flex-direction: row;
  flex-direction: row;
  justify-content: space-between;
  -ms-align-items: center;
  align-items: center;
  overflow-x: hidden;
}

.LS_CL {
  width: 55%;
  height: 100%;
  background-color: #00071a;
  justify-content: center;
  padding-left: 5%;
}

.LS_CR {
  width: 40%;
  height: 100%;
}

.LS_CR img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scaleX(-1);
}

.LS_CL_Headings {
  width: 80%;
  height: auto;
}

.LS_CL_Headings h2 {
  font-family: "Titillium Web";
  font-size: clamp(1em, 1.5vw, 1.5em);
  font-weight: 200;
  color: #d56d12;
  margin: 0;
}

.LS_CL_Headings h3 {
  font-family: "Manrope";
  font-size: clamp(2em, 3.3vw, 4em);
  font-weight: 400;
  color: white;
  margin: 0;
  margin-top: 1vh;
  margin-bottom: 3vh;
}

.LS_CL_Headings p {
  font-family: "Manrope";
  font-size: clamp(1em, 1.2vw, 1.5em);
  font-weight: 300;
  color: grey;
  margin: 0;
  width: 90%;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3; /* zeigt nur 3 Zeilen an */
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.5;
  max-height: 4.5em; /* Höhe der 3 Zeilen */
  transition: 0.5s ease;
}

.LS_CL_Headings.expanded p {
  -webkit-line-clamp: unset; /* entfernt die Begrenzung der Zeilen */
  max-height: 50vh; /* entfernt die maximale Höhe */
}

.LS_CL_Read_More_BTN {
  padding: 2%;
  background-color: white;
  width: 30%;
  margin-top: 5vh;
  align-items: center;
  justify-content: center;
}

.LS_CL_Read_More_BTN p {
  color: #00071a;
  width: 100%;
  text-align: center;
}

/*
 Media Querie for Landing_Section
*/

@media (max-width: 600px) {
  .LS_Content {
    flex-direction: column-reverse;
    height: auto;
  }

  .LS_CL_Read_More_BTN {
    margin-top: 3vh;
    width: 50%;
  }

  .LS_CL,
  .LS_CR {
    width: 100%;
    height: auto;
    
  }

  .LS_CL{
    height: fit-content;
    padding-top: 5vh;
    padding-bottom: 5vh;
  }

}

.Opening_Section {
  width: 90%;
  height: auto;
  padding-top: 15vh;
  padding-bottom: 15vh;
  padding-left: 5%;
  padding-right: 5%;
  flex-direction: row;
}

.OS_L {
  width: 20%;
  padding-top: 1vh;
  height: fit-content;
}

.OS_L_Desription {
  text-transform: uppercase;
  font-weight: 300;
  font-family: "Titillium Web";
  font-size: clamp(1em, 1.5vw, 2em);
  color: #d56d12;
}

.OS_R {
  width: 75%;
  height: 100%;
  padding-left: 2.5%;
  padding-right: 2.5%;
}

.OS_R_Text {
  font-size: clamp(1em, 1.8vw, 2em);
  font-weight: 300;
  font-family: "Poppins";
  color: #303030;
  letter-spacing: -0.5px;
}

.OS_R_Link {
  font-family: "Titillium Web";
  font-weight: 300;
  color: #d56d12;
  font-size: clamp(1em, 1.33vw, 1.5em);
  border-bottom: 1px solid #d56d12;
  width: fit-content;
  transition: 0.3s ease;
}

.OS_R_Link:hover {
  color: darkblue;
  border-bottom: 1px solid darkblue;
}

.Product_Section {
  width: 100vw;
  height: 300vh;
  background-color: #00071a;
  position: relative;
}

/*
 Media Querie for Opening_Section
*/
@media (max-width: 500px) {
  .Opening_Section {
    flex-direction: column;
  }
  .OS_L {
    width: 100%;
    padding-left: 2.5%;
  }

  .Product_Section {
    width: 100vw;
    height: auto;
    background-color: #00071a;
    position: relative;
  }
}

.PS {
  flex-direction: row;
  width: 100%;
  min-height: 100vh;
  display: flex; /* Sicherstellen, dass Flexbox verwendet wird */
  position: sticky;
  top: 0; /* Füge diesen Wert hinzu, um sicherzustellen, dass das Element oben kleben bleibt */
  z-index: 1; /* Optional: Stelle sicher, dass das Element oben angezeigt wird */
  background-color: #00071a;
}

.PS:nth-child(2) {
  z-index: 2;
  /* flex-direction: row-reverse; */
}

.PS:nth-child(3) {
  z-index: 3;
}

.PS_L,
.PS_R {
  width: 50%;
  height: 100%;
  display: flex; /* Sicherstellen, dass Flexbox verwendet wird */
  justify-content: center;
}

.PS_R {
  width: 40%;
  padding-left: 5%;
  padding-right: 5%;
}

.PS_L img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.PS_Subheading {
  font-family: "Manrope";
  color: #d56d12;
  font-size: clamp(1em, 1.2vw, 1.5em);
  margin-bottom: 0;
}

.PS_Heading {
  font-family: "Manrope";
  font-size: clamp(1em, 3.5vw, 3.5em);
  font-weight: 500;
  color: white;
  margin-top: 1vh;
  margin-bottom: 3vh;
}

.PS_Text {
  font-family: "Titillium WEb";
  color: lightgray;
  font-weight: 200;
  font-size: clamp(1em, 1.5vw, 1.5em);
  margin: 0;
  width: 100%;
}

.PS_Action_Button {
  display: flex;
  text-decoration: none;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: fit-content;
  margin-top: 4vh;
  font-size: clamp(1em, 1vw, 1.5em);
  font-weight: 300;
  font-family: "Poppins";
  background-color: #d56d12;
  color: white;
  padding-top: 1.2vh;
  padding-bottom: 1.2vh;
  padding-left: 2vw;
  padding-right: 2vw;
  transition: 0.3s ease;
}

.PS_Action_Button:hover {
  background-color: royalblue;
  cursor: pointer;
}

.Projects_Section {
  width: 100vw;
  height: auto;
  background-color: white;
  align-items: center;
  padding-bottom: 5vh;
}

.PJS_Head {
  width: 90%;
  height: auto;
  margin-top: 5vh;
  padding-left: 5%;
  padding-right: 5%;
}

.PJS_Head p {
  font-size: clamp(1em, 3vw, 4em);
  font-family: "Manrope";
  font-weight: 500;
  text-align: center;
}

.PJS_Objects_Holder {
  width: 90%;
  padding-left: 5%;
  padding-right: 5%;
  height: auto;
  min-height: 20vh;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  padding-top: 2.5vh;
  padding-bottom: 2.5vh;
}

.PJS_Object_Item {
  width: 21vw;
  height: 21vw;
  margin-bottom: 2vw;
  background-color: white;
  border: 1px solid lightgray;
  background-size: cover;
  background-position: center;
  align-items: flex-end;
  justify-content: center;
  position: relative;
  display: flex;
}

.PJS_Object_Item:hover .PJS_Darkener {
  opacity: 0;
  cursor: pointer;
}

.PJS_Darkener {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 2;
  background-color: black;
  opacity: 0.6;
  transition: 0.3s ease;
}

.PJS_Object_Item p {
  width: 80%;
  text-align: end;
  padding: 0.5rem;
  font-family: "Poppins";
  font-weight: 700;
  font-size: clamp(1em, 1.2vw, 1.5em);
  color: white;
  z-index: 3;
  text-transform: uppercase;
}

/*
 Media Querie for Product_Section
*/

@media (max-width: 800px) {
  .PJS_Object_Item {
    width: 42vw;
    height: 42vw;
    margin-bottom: 2vw;
    background-color: white;
    border: 1px solid lightgray;
    background-size: cover;
    background-position: center;
    align-items: center;
    justify-content: flex-end;
    position: relative;
    display: flex;
  }
}

@media (max-width: 600px) {
  .PS_R {
    width: 90%;
    justify-content: flex-start;
    padding-left: 5%;
    padding-right: 5%;
    height: auto;
  }

  .PS_L {
    width: 100%;
    padding-left: 0;
    padding-right: 0;
  }

  .PS {
    flex-direction: column;
    height: auto;
    min-height: 30vh;
    padding-top: 1vh;
    padding-bottom: 20vh;
  }

  .PS_Text {
    width: 100%;
    font-size: clamp(0.9em, 1.33vw, 1.5em);
  }

  .PS_Heading{
    margin-bottom: 1vh;
  }

  .PS_L img {
    max-height: 30vh;
  }
}

.Testimonials_Section {
  width: 90vw;
  padding-left: 5%;
  padding-right: 5%;
  height: auto;
  background-color: #00071a;
  box-shadow: 0px 0px 10px 0px black;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  justify-content: space-between;
  padding-top: 5vh;
  padding-bottom: 5vh;
  z-index: 2;
  flex-wrap: wrap;
}

.TM_Item {
  width: 42.5%;
  height: 35vh;
  align-items: center;
  justify-content: center;
  padding-right: 5%;
  min-width: 20rem;
}

.TM_User_Line {
  width: 100%;
  height: auto;
  flex-direction: row;
  align-items: center;
  padding-bottom: 2vh;
}

.User_Image {
  width: 2.5vw;
  height: 2.5vw;
  border-radius: 50vw;
  align-items: center;
  justify-content: center;
  margin-right: 1vw;
  background-color: grey;
}

.User_Image svg {
  width: 60%;
  height: 60%;
  fill: lightgray;
}

.TM_User_Name {
  font-size: clamp(1em, 1.5vw, 2em);
  margin: 0;
  color: white;
}

.TM_Message_Text {
  font-family: "Manrope";
  font-size: clamp(1em, 1.2vw, 2em);
  color: lightgray;
  margin: 0;
}

.TM_User_Data {
  width: 60%;
  height: auto;
  flex-direction: row;
}

.TM_Stars_Row {
  width: auto;
  height: auto;
  flex-direction: row;
}

.TM_Star {
  width: 2.5vw;
  height: 2.5vw;
  margin-left: 2.5px;
  margin-right: 2.5px;
}

.TM_Star svg {
  width: 80%;
  height: 80%;
  fill: #f3a600;
}

.Module_Section {
  width: 100%;
  height: auto;
  padding-top: 5vh;
  padding-bottom: 5vh;
}

.MS_Head {
  width: 95%;
  height: auto;
  padding-left: 5%;
}

.MS_Head p {
  font-family: "Manrope";
  font-size: clamp(1em, 2.5vw, 3em);
  color: #151515;
  font-weight: 300;
}

.MS_Content {
  width: 95%;
  height: fit-content;
  position: relative;
  position: relative;
  margin-bottom: 5%;
  padding-left: 5%;
}

.Module_Container {
  width: 100%;
  flex-direction: row;
  flex-wrap: wrap;
  padding-bottom: 5vh;
}

.Module_Item {
  width: 16.5vw;
  min-width: 19rem;
  height: auto;
  flex-direction: column;
  border-radius: 15px;
  box-shadow: 0px 0px 5px 0px grey;
  margin-right: 1vw;
  margin-top: 1vw;
  overflow: hidden;
}

.MI_Head {
  width: 100%;
  height: 25vh;
}

.MI_Body {
  width: 90%;
  height: auto;
  padding-left: 5%;
  padding-right: 5%;
}

.MI_Head img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.MI_Product_Title {
  font-family: "Manrope";
  font-weight: 600;
  font-size: clamp(1em, 1.25vw, 1.5em);
  color: black;
  margin-bottom: 1vh;
  line-height: 1.5;
  height: 3em;
}

.MI_Description {
  font-family: "Titillium Web";
  font-weight: 400;
  font-size: clamp(0.8em, 0.8vw, 1em);
  color: #454545;
  margin-top: 1vh;

  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.5;
  max-height: 7.5em;
  height: 7.5em;
}

.MI_Footer {
  width: 90%;
  padding-left: 5%;
  padding-right: 5%;
  padding-bottom: 2.5vh;
  padding-top: 1vh;
  flex-direction: row;
  justify-content: space-between;
}

.MI_More_BTN {
  width: 99%;
  height: 5vh;
  background-color: #606060;
  align-items: center;
  justify-content: center;
  transition: 0.3s ease;
  display: flex;
}

.MI_Add_BTN {
  width: 30%;
  height: 5vh;
  background-color: orangered;
  align-items: center;
  justify-content: center;
  opacity: 0.8;
  transition: 0.3s ease;
  display: none;
}

.MI_Add_BTN:hover {
  opacity: 1;
  background-color: green;
  cursor: pointer;
}

.MI_More_BTN:hover {
  background-color: royalblue;
  cursor: pointer;
}

.MI_Add_BTN svg {
  width: 50%;
  height: 50%;
  fill: white;
}

.MI_More_BTN p {
  color: white;
  font-family: "Titillium Web";
  font-weight: 300;
  font-size: clamp(0.8em, 0.9vw, 1em);
}

.FAQ_Section {
  width: 95%;
  padding-left: 5%;
  height: auto;
  padding-top: 5vh;
  padding-bottom: 10vh;
  flex-direction: row;
}

.Landing_Footer {
  width: 100%;
  height: 30vh;
  background-color: #00071a;
}

.FAQ_Description {
  width: 20%;
  height: fit-content;
}

.FAQ_Description p {
  text-transform: uppercase;
  font-weight: 300;
  font-family: "Titillium Web";
  font-size: clamp(1em, 1.5vw, 2em);
  color: #d56d12;
  margin: 0;
}

.FAQ_Value {
  width: 70%;
  height: 100%;
  margin-left: 2.5%;
  margin-right: 2.5%;
  border-top: 1px solid grey;
}

.FAQ_Item {
  width: 100%;
  height: fit-content;
  border-bottom: 1px solid grey;
}

.FAQ_Question_Line {
  width: 100%;
  height: fit-content;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.FAQ_Question {
  font-size: clamp(1em, 1.5vw, 2em);
  font-weight: 300;
  font-family: "Poppins";
  color: #303030;
  letter-spacing: -0.5px;
  width: 90%;
}

.FAQ_Open_Icon {
  width: 3vw;
  height: 3vw;
  align-items: center;
  justify-content: center;
}

.FAQ_Open_Icon:hover svg {
  fill: royalblue;
  cursor: pointer;
}

.FAQ_Open_Icon svg {
  width: 60%;
  height: 60%;
  transform: rotate(90deg);
  fill: grey;
  transition: 0.3s ease;
}

.FAQ_Answer_Line {
  width: 100%;
  max-height: 0;
  overflow: hidden;
  transition: 0.5s ease-in-out;
}

.FAQ_Answer {
  padding-bottom: 2vh;
}

.FAQ_Answer {
  font-family: "Titillium Web";
  font-weight: 300;
  font-size: clamp(1em, 1vw, 1.5em);
}

.Contact_Section {
  width: 90%;
  height: 80vh;
  margin-top: 10vh;
  margin-bottom: 20vh;
  margin-left: 5%;
  margin-right: 5%;
  border-radius: 15px;
  box-shadow: 0px 0px 3px 0px grey;
  flex-direction: row;
  overflow: hidden;
}

.CNT_L {
  width: 40%;
  height: 90%;
  padding-left: 5%;
  padding-top: 5%;
  padding-bottom: 5%;
  padding-right: 5%;
  justify-content: space-between;
}

.CNT_Head {
  font-size: clamp(1em, 2vw, 3em);
  font-weight: 600;
  font-family: "Manrope";
  margin-bottom: 0;
}

.CNT_SubHead {
  font-size: clamp(1em, 1vw, 2em);
  font-weight: 300;
  font-family: "Manrope";
  color: grey;
  margin-top: 1vh;
}

.CNT_Form {
  width: 100%;
  height: 40vh;
  margin-bottom: 5vh;
}

.CNT_Footer {
  width: 90%;
  height: 7vh;
  background-color: #00071a;
  margin-bottom: 5vh;
  align-items: center;
  justify-content: center;
  transition: 0.3s ease;
}

.CNT_Footer:hover {
  cursor: pointer;
  background-color: orangered;
}

.CNT_Footer p {
  font-size: clamp(1em, 1vw, 2em);
  font-weight: 300;
  font-family: "Manrope";
  color: white;
  margin-top: 1vh;
  margin-bottom: 1vh;
}

.CNT_R {
  width: 50%;
  height: 100%;
  box-shadow: 0px 0px 3px 0px grey;
}

.CNT_R img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.CNT_Input {
  width: 90%;
  height: 6vh;
  margin-bottom: 0.5vh;
  border: 0;
  border-bottom: 1px solid black;
  font-size: clamp(1em, 1vw, 1.5em);
  font-family: "Manrope";
  font-weight: 300;
}

input:focus {
  outline: none;
}

.Textarea {
  min-height: 7.5vh;
  margin-top: 2.5vh;
}

.CNT_Form {
  margin-top: 2vh;
}

.Loader_Holder {
  display: none; /* Anfangs unsichtbar */
  width: 100vw;
  height: 100vh;
  position: fixed;
  background-color: rgb(0, 0, 0, 0.4);
  z-index: 5;
  top: 0;
  left: 0;
}

/* Popup Hintergrund */
.loader-popup {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 30vw;
  height: 20vw;
  background-color: white;
  border-radius: 5vw;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  justify-content: center;
  align-items: center;
  transition: 0.3s ease;
  z-index: 3;
}

/* Popup Hintergrund */
.failure-popup {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 30vw;
  height: 20vw;
  background-color: white;
  border-radius: 5vw;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  justify-content: center;
  align-items: center;
  transition: 0.3s ease;
  z-index: 3;
}

/* Popup Hintergrund */
.success-popup {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 30vw;
  height: 20vw;
  background-color: white;
  border-radius: 5vw;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  justify-content: center;
  align-items: center;
  transition: 0.3s ease;
  z-index: 3;
}

/* Loader-Symbol (drehender Kreis) */
.loader {
  width: 40px;
  height: 40px;
  border: 4px solid rgba(0, 0, 0, 0.1);
  border-top: 4px solid #3498db;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

.Icon {
  width: 5vw;
  height: 5vw;
  align-items: center;
  justify-content: center;
}

.Loader_Holder p {
  font-size: clamp(1em, 2vw, 2.5em);
}

#success-popup svg {
  fill: green;
}

#failure-popup svg {
  fill: red;
}

.Icon svg {
  width: 100%;
  height: 100%;
}

/* Dreh-Animation */
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@media (max-width: 800px) {
  .Testimonials_Section {
    justify-content: center;
  }

  .TM_User_Data {
    align-items: center;
  }

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

  .User_Image {
    width: 3vh;
    height: 3vh;
    margin-right: 1.5vh;
  }

  .TM_Star {
    width: 4vh;
    height: 4vh;
  }

  .loader-popup {
    width: 80%;
    height: 30%;
  }

  .failure-popup,
  .success-popup {
    box-shadow: 0px 0px 0px 0px transparent;
    width: 60%;
    height: auto;
  }

  .Loader_Holder p {
    font-size: clamp(1em, 2vw, 2.5em);
  }

  .Icon {
    width: 10vh;
    height: 10vh;
  }
  .Contact_Section {
    flex-direction: column-reverse;
    height: auto;
    width: 85%;
  }

  .CNT_L {
    width: 90%;
  }

  .CNT_R {
    width: 100%;
  }

  .CNT_Form {
    height: auto;
    align-items: center;
  }

  .CNT_Footer {
    width: 95%;
  }

  .Module_Container {
    flex-direction: column;
    align-items: center;
  }

  .Module_Item {
    margin-bottom: 2vh;
  }

  .MS_Head p {
    width: 90%;
    text-align: center;
    font-size: clamp(1em, 3vh, 3em);
  }
  .MS_Content{
    padding-left: 0;
  }

  .LS_CL_Headings.expanded p {
    max-height: 150vh;
  }
}