/*Architecture Section*/
.timeline-container-architecture,
.timeline-container-architecture-zero,
.timeline-image-architecture-first,
.timeline-container-architecture-right-text,
.timeline-container-architecture-third-text,
.timeline-container-architecture-fourth-text,
.timeline-container-architecture-fifth-text,
.timeline-image-architecture-second,
.timeline-image-architecture-third,
.timeline-image-architecture-fourth,
.timeline-image-architecture-fifth {
  transition: transform 0.5s ease, opacity 0.5s ease;
}

.timeline-container-architecture,
.timeline-container-architecture-zero,
.timeline-image-architecture-first,
.timeline-container-architecture-right-text,
.timeline-image-architecture-second,
.timeline-container-architecture-third-text,
.timeline-image-architecture-fifth {
    transform: translateY(-10px);
    box-shadow: 0 15px 20px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}



.timeline-wrapper-architecture {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: scroll;
  overflow-y: hidden !important;
  scroll-snap-type: x mandatory;
  height: 100vh;
  scroll-behavior: smooth;
  white-space: nowrap;
  margin-top: -5.8vh;
  transform: scale(0.89) translateX(-9.5vw);
  min-width: 120vw;
}

.timeline-container-architecture,
.timeline-container-architecture-zero,
.timeline-image-architecture-first,
.timeline-container-architecture-right-text,
.timeline-image-architecture-second,
.timeline-container-architecture-third-text,
.timeline-image-architecture-third,
.timeline-container-architecture-fourth-text,
.timeline-image-architecture-fourth,
.timeline-container-architecture-fifth-text,
.timeline-image-architecture-fifth {
  flex: 0 0 auto;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
}

.timeline-image-architecture-first {
  background: url('../assets/Architecture/Cubes/small/Cubes_Stov_21_09_2019_088_extended_web_small.jpg') no-repeat center center;
  background-size: cover;
  background-color: #2e546f;
  display: flex;
  justify-content: flex-end;
  margin: 0;
  padding: 0;
  min-width: 115vw;
  min-height: 100vh;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
}

@media (min-width: 1400px) {
  .timeline-image-architecture-first {
    background: url('../assets/Architecture/Cubes/small/Cubes_Stov_21_09_2019_088_extended_web_small.jpg') no-repeat center center;
    background-size: cover;
    background-color: #2e546f;
    display: flex;
    justify-content: flex-end;
    margin: 0;
    padding: 0;
    min-width: 115vw;
    min-height: 100vh;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
  }
}

@media (max-width: 480px) {
  .timeline-image-architecture-first {
    background: url('../assets/Architecture/Cubes/small/Stov_01_cut_test.jpg') no-repeat center bottom;
    background-size: cover;
    margin-top: 1.5vh;
    min-height: 100vh;
    min-width: 115vw;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}




.first-mouse-container {
  width: calc(12vw + 10vh); 
  height: 100%;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  right: 0;
}

.timeline-container-architecture {
  min-width: 130vw;
  min-height: 102vh;
  background-color: #2e546f;
  display: flex;
  justify-content: center;
  align-items: left;
  text-align: left;
  box-sizing: border-box;
  padding: calc(3vw + 10px) calc(6vw + 10px);
  font-size: calc(0.5vw + 0.5vh);
  overflow: hidden;
}

@media (max-width: 768px){
  .timeline-container-architecture{
    min-width: 150vw
  }
}


.timeline-image-architecture-second {
  background: url('../assets/Architecture/Cubes/small/CUBES_01_extended_web_small.jpg') no-repeat center center;
  background-size: cover;
  display: flex;
  padding: 0;
  min-width: 85vw;
  min-height: 100vh;
  margin: 0 auto;
  overflow: hidden;
  box-shadow: var(--custom-box-shadow);
}

@media (max-width: 1200px) {
  .timeline-image-architecture-second {
    background-position: top center;
  }
}

@media (max-width: 768px) {
  .timeline-image-architecture-second {
    background-position: top center;
  }
}


@media (max-width: 480px) {
  .timeline-image-architecture-second {
    background: url('../assets/Architecture/Cubes/small/CUBES_01_extended_web_small.jpg') no-repeat center center;
    margin-top: 1.5vh;
    background-size: cover;
    min-height: 100vh;
    min-width: 270vw;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}







.timeline-content-architecture {
  color: #FFFFFF;
  max-width: 90vw;
  font-size: calc(2vw + 1.5vh);
  line-height: 1.4;
  word-wrap: break-word;
  font-weight: normal;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  box-sizing: border-box;
}

.timeline-content-architecture-left {
  color: #FFFFFF;
  max-width: 90vw;
  font-size: calc(1.5vw + 1.5vh);
  line-height: 1.4;
  word-wrap: break-word;
  font-weight: normal;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: left;
  box-sizing: border-box;
  margin-bottom: 2.5rem;
}

.timeline-content-architecture-black {
  color: #4B4B4A;
  max-width: 90vw;
  font-size: calc(2vw + 1.5vh);
  line-height: 1.4;
  word-wrap: break-word;
  font-weight: normal;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  box-sizing: border-box;
}

.timeline-content-architecture-center {
  color: #FFFFFF;
  max-width: 90vw;
  font-size: calc(1.5vw + 1.5vh);
  line-height: 1.4;
  word-wrap: break-word;
  font-weight: normal;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}


.timeline-content-architecture h4 {
  text-align: right;
  margin: 0;
}

.timeline-content-architecture-left h4{
  text-align: left;
  margin: 0;
  line-height: 1.4 !important;
}



 @media (max-width: 768px){
  .timeline-content-architecture h4 {
    text-align: right;
    margin-bottom: 2vh;
    font-size: 18px;
  }
 }

 @media (max-width: 480px){
  .timeline-content-architecture h4 {
    text-align: right;
    margin-bottom: 2.5vh;
    font-size: 20px;
  }
 }


  @media (max-width: 768px){
  .timeline-content-architecture-left h4 {
    text-align: left;
    margin-bottom: 2vh;
    font-size: 18px;
  }
 }

 @media (max-width: 480px){
  .timeline-content-architecture-left h4 {
    text-align: left;
    margin-bottom: 2.5vh;
    font-size: 20px;
  }
 }

.timeline-content-architecture p {
  text-align: right;
  margin-top: 3vh;
  margin-right: 0;
  line-height: 1.6;
  font-size: calc(1vw + 0.5vh);
  word-wrap: break-word;
}

.timeline-content-architecture-left p {
  text-align: left;
  margin-top: 4vh;
  margin-right: 0;
  line-height: 1.6;
  font-size: calc(01vw + 0.5vh);
  word-wrap: break-word;
}

.left-minor{
  margin-top: 1vh !important;
}



@media (max-width:768px) {
  .timeline-content-architecture p {
    text-align: right; /* Text rechtsbündig */
    margin: 0;
    padding: 0; /* Optional: Kein zusätzliches Padding */
    line-height: 1.6; /* Angenehme Lesbarkeit */
    font-size: calc(2vw + 0.5vh); /* Dynamische Schriftgröße */
    word-wrap: break-word; /* Lange Wörter umbrechen */
    overflow-wrap: break-word; /* Kompatibilität mit älteren Browsern */
    white-space: normal; /* Zeilenumbruch bei Überlauf erzwingen */
    max-width: 100%; /* Text bleibt innerhalb des Containers */
    text-overflow: ellipsis; /* Optional: Drei Punkte bei abgeschnittenem Text */
  }
}

@media (max-width: 480px) {
  .timeline-content-architecture p {
    text-align: right; /* Text rechtsbündig */
    margin: 0;
    padding: 0; /* Optional: Kein zusätzliches Padding */
    line-height: 1.6; /* Angenehme Lesbarkeit */
    font-size: calc(3vw + 0.5vh); /* Dynamische Schriftgröße */
    word-wrap: break-word; /* Lange Wörter umbrechen */
    overflow-wrap: break-word; /* Kompatibilität mit älteren Browsern */
    white-space: normal; /* Zeilenumbruch bei Überlauf erzwingen */
    max-width: 100%; /* Text bleibt innerhalb des Containers */
    text-overflow: ellipsis; /* Optional: Drei Punkte bei abgeschnittenem Text */
  }
}



@media (max-width:768px) {
  .timeline-content-architecture-left p {
    text-align: left; /* Text rechtsbündig */
    margin: 0;
    padding: 0; /* Optional: Kein zusätzliches Padding */
    line-height: 1.6; /* Angenehme Lesbarkeit */
    font-size: calc(2vw + 0.5vh); /* Dynamische Schriftgröße */
    word-wrap: break-word; /* Lange Wörter umbrechen */
    overflow-wrap: break-word; /* Kompatibilität mit älteren Browsern */
    white-space: normal; /* Zeilenumbruch bei Überlauf erzwingen */
    max-width: 100%; /* Text bleibt innerhalb des Containers */
    text-overflow: ellipsis; /* Optional: Drei Punkte bei abgeschnittenem Text */
  }
}

@media (max-width: 480px) {
  .timeline-content-architecture-left p {
    text-align: left; /* Text rechtsbündig */
    margin: 0;
    padding: 0; /* Optional: Kein zusätzliches Padding */
    line-height: 1.6; /* Angenehme Lesbarkeit */
    font-size: calc(3vw + 0.5vh); /* Dynamische Schriftgröße */
    word-wrap: break-word; /* Lange Wörter umbrechen */
    overflow-wrap: break-word; /* Kompatibilität mit älteren Browsern */
    white-space: normal; /* Zeilenumbruch bei Überlauf erzwingen */
    max-width: 100%; /* Text bleibt innerhalb des Containers */
    text-overflow: ellipsis; /* Optional: Drei Punkte bei abgeschnittenem Text */
  }
}

@media (max-width: 768px){
  .timeline-container-architecture-first-text{
    min-width: 120vw
  }
}

.timeline-container-architecture-first-text {
  min-width: 25vw;
  background-color: #4B4B4A; /* Hintergrundfarbe */
  display: block; /* Block-Layout für die natürliche Darstellung */
  font-size: calc(1vw + 1vh); /* Dynamische Schriftgröße */
  padding: 1vw; /* Innenabstand */
  text-align: center; /* Zentriert Text nur horizontal */
  box-sizing: border-box; /* Padding wird in die Breite einbezogen */
  overflow: auto; /* Scrollbar, falls der Text zu lang ist */
  box-shadow: none;
  border: none;
  display: none;
}

@media (max-width: 480px) {
  .timeline-container-architecture-first-text{
    min-width: 100vw !important;
    background-color: #2e546f;
  }
}

.timeline-content-architecture-right .block-text {
  text-align: justify; /* Verteilt den Text als Block */
  line-height: 1.8; /* Angenehmer Abstand zwischen Zeilen */
  font-size: calc(1vw + 0.5vh); /* Dynamische Schriftgröße */
  max-width: 90%; /* Begrenzung der Breite für kleinere Bildschirme */
  margin: 0 auto; /* Zentriert den Block im Container */
  padding: 1em; /* Innenabstand */
  color: #4B4B4A; /* Textfarbe */
  word-break: break-word; /* Bricht Wörter, die zu lang für den Block sind */
}






.timeline-content-architecture img {
  max-width: 100%;    /* Image scales based on container width */
  max-height: 100%;   /* Image scales based on container height */
  object-fit: contain; /* Ensures image maintains aspect ratio */
}



/*Pförtner Section*/
.timeline-container-architecture-zero {
  min-width: 130vw;
  background-color: #4b79a1;
  display: flex;
  justify-content: center;
  align-items: left;
  text-align: left;
  box-sizing: border-box;
  padding: calc(3vw + 10px) calc(6vw + 10px);
  font-size: calc(0.5vw + 0.5vh);
  overflow: hidden;
}

@media (max-width: 480px) {
  .timeline-container-architecture-zero {
    font-size: 14px;
    padding: 20px;
  }
}

@media (max-width: 768px){
  .timeline-container-architecture-zero{
    min-width: 130vw;
  }
}




.timeline-container-architecture-third-text {
  min-width: 25vw;
  min-height: 102vh;
  background-color: #4B4B4A;
  display: flex;
  font-size: calc(1vw + 1vh);
  padding: 1vw;
  justify-content: center;
  align-items: center;
  text-align: center;
  box-sizing: border-box;
  word-wrap: break-word;
  overflow: hidden;
  box-shadow: none;
  border: none;
}

@media (max-width: 768px){
  .timeline-container-architecture-third-text{
    min-width: 100vw;
  }
}

@media (max-width: 480px){
  .third-text-p{
    font-size: 18px;
    padding: 2vw;
  }
}




.number-buttons {
  display: inline-block; /* Makes the buttons sit next to each other */
  width: auto;
  margin: 10px 10px; /* Adds some spacing between the buttons */
  padding: 15px;
  color: #fff;
  border: 1px solid white;
  font-family: 'Abnes', sans-serif;
  text-transform: uppercase;
  text-align: center;
  font-size: 14px; /* Adjust the font size for the buttons */
  background-color: transparent;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.5s ease;
  outline: none;
  z-index: 14;
}

/* Hover effect for buttons */
.number-buttons:hover {
  color: #001F3F;
  background-color: #fff;
  transition: all 0.5s ease;
  scale: 1.1;
}

.numbered-text {
  display: flex;
  align-items: center;
  justify-content: center;
}

.numbers {
  display: flex; 
  justify-content: center;
  flex-direction: column;
}

.timeline-image-architecture-third {
  background: url('../assets/Architecture/Cubes/small/CUBES_02_extended_web_small.jpg') no-repeat center center;
  background-size: cover;
  background-color: #fff;
  display: flex;
  justify-content: center;
  margin: 0;
  padding: 0;
  min-width: 90vw;
  min-height: 100vh;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
  transition: background-image 1s ease-in-out;
  transition: opacity 1s ease-in-out;
  opacity: 1;
}

@media (max-width: 480px) {
  .timeline-image-architecture-third {
    background: url('../assets/Architecture/Cubes/small/CUBES_02_extended_web_small.jpg') no-repeat center center;
    background-size: cover;
    background-color: #fff;
    display: flex;
    justify-content: center;
    margin: 0;
    padding: 0;
    min-width: 320vw !important;
    min-height: 100vh;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
    transition: background-image 1s ease-in-out;
    transition: opacity 1s ease-in-out;
    opacity: 1;
  }
}


/* Default background images for larger screens */
.timeline-image-architecture-third {
  background: url('../assets/Architecture/Cubes/small/CUBES_02_extended_web_small.jpg') no-repeat center left;
  background-size: cover;
  background-color: #2e546f;
  display: flex;
  justify-content: center;
  margin: 0;
  padding: 0;
  min-width: 90vw;
  min-height: 100vh;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
  transition: background-image 1s ease-in-out, opacity 1s ease-in-out;
  opacity: 1;
}




/*Pförtner Section*/
.timeline-container-architecture-fourth {
  min-width: 130vw;
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: left;
  text-align: left;
  box-sizing: border-box;
  padding: calc(3vw + 10px) calc(6vw + 10px);
  font-size: calc(0.5vw + 0.5vh);
  overflow: hidden;
}

@media (max-width: 480px) {
  .timeline-container-architecture-fourth {
    font-size: 14px;
    padding: 20px;
  }
}

.timeline-content-black{
  color: #4B4B4A !important;
}

@media (max-width: 768px){
  .timeline-container-architecture-fourth{
    min-width: 130vw;
  }
}

.timeline-image-architecture-fourth {
  background: url('../assets/Architecture/Cubes/small/Cubes_Stov_21_09_2019_011_bearbeitet_small_web.jpg') no-repeat center center;
  background-size: cover;
  display: flex;
  padding: 0;
  min-width: 30vw;
  min-height: 100vh;
  margin: 0 auto;
  overflow: hidden;
}

@media (max-width: 1200px) {
  .timeline-image-architecture-fourth {
    background-position: top center;
  }
}

@media (max-width: 768px) {
  .timeline-image-architecture-fourth {
    background-position: center center;
  }
}

@media (max-width: 480px) {
  .timeline-image-architecture-fourth {
    background: url('../assets/Architecture/Cubes/small/Cubes_Stov_21_09_2019_011_bearbeitet_small_web_cut_test.jpg') no-repeat center center;
    background-size: cover;
    min-height: 100vh;
    min-width: 115vw;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}


.timeline-container-architecture-fifth-text {
  min-width: 30vw;
  background-color: var(--brown);
  display: flex;
  font-size: calc(1vw + 1vh);
  padding: calc(3vw + 20px) calc(3vw + 20px);
  justify-content: center;
  align-items: center;
  text-align: center;
  box-sizing: border-box;
  word-wrap: break-word;
  overflow: hidden;
}


@media (max-width: 768px){
  .timeline-container-architecture-fifth-text{
    min-width: 60vw;
  }
}

@media (max-width: 480px){
  .timeline-content-architecture-center p{
    min-width: 120vw !important;
  }
}




.timeline-image-architecture-fifth {
  background: url('../assets/Architecture/Cubes/small/Cubes_Stov_21_09_2019_006_cropped_extended_web_small.jpg') no-repeat center center;
  background-size: cover;
  display: flex;
  padding: 0;
  min-width: 100vw;
  min-height: 102vh;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
}

@media (max-width: 1200px) {
  .timeline-image-architecture-fifth {
    background-position: top center;
  }
}

@media (max-width: 768px) {
  .timeline-image-architecture-fifth {
    background-position: center center;
  }
}

@media (max-width: 480px) {
  .timeline-image-architecture-fifth {
    background: url('../assets/Architecture/Cubes/small/Cubes_Stov_21_09_2019_006_bearbeitet_small_web_cut_test.jpg') no-repeat center center;
    background-size: cover;
    min-height: 100vh;
    min-width: 100vw;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}




#first-blur-container {
  position: absolute;
  right: 0; /* Platziert das Element an der rechten Seite des übergeordneten Containers */
  top: 0; /* Platziert das Element an der oberen Kante */
  width: 20vw; /* Stellt sicher, dass der Container 20vw breit ist */
  height: 102%; /* Nimmt die gesamte Höhe des übergeordneten Containers ein */
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
}


.timeline-image-architecture-sixth {
  background: url('../assets/Architecture/Cubes/small/Cubes_Stov_21_09_2019_021_extended_web_small.jpg') no-repeat center center;
  background-size: cover;
  display: flex;
  padding: 0;
  min-width: 100vw;
  min-height: 100vh;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
}
@media (max-width: 1200px) {
  .timeline-image-architecture-sixth {
    background-position: center center;
  }
}

/* Further zoom for medium screens (e.g., tablets) */
@media (max-width: 768px) {
  .timeline-image-architecture-sixth {
    background-position: center center;
  }
}


@media (max-width: 480px) {
  .timeline-image-architecture-sixth {
    background: url('../assets/Architecture/Cubes/small/Cubes_Stov_21_09_2019_021_extended_web_small.jpg') no-repeat center center;
    background-size: cover;
    min-height: 102vh;
    min-width: 280vw;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

#second-blur-container {
  position: absolute;
  left: 0; /* Verschiebt den Container weiter nach links */
  top: 0;
  width: 8vw; /* Breite des Containers */
  height: 100%; /* Nimmt die gesamte Höhe des übergeordneten Containers ein */
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
}