/* Container für die Zeilen */
.containerAnimation {
  display: flex;
  flex-direction: column;
}

/* Unterschiedliche Hintergrundfarben für jede Zeile */
#row1, #row5 {
  display: grid;
  grid-template-columns: 20% 60% 20%;
  background-color:  rgb(0, 34, 48);
}

@media (max-width: 1200px) {
  #row1, #row5 {
    display: grid;
    grid-template-columns: 10% 80% 10%;
    background-color:  rgb(0, 34, 48);
  }
}

#row2 {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: lightblue;
}

#counter4{
  display: none;
}

#row2V{
  height: 1px;
}
@media (max-width: 1200px) {
  #row2, #row2V{
      display: none;
  }
}

#row2a{
  display: grid;
  grid-template-rows: 150px auto 200px auto 150px auto;
}

.textLine{
  background-color: black;
}

.pic-containerMobile {
  position: relative;
  width: 100vw; /* Nimmt die gesamte Breite des Viewports ein */
  height: auto; /* Die Höhe passt sich automatisch an */
  overflow: hidden; /* Verhindert, dass Inhalte aus dem Container hinausragen */
}

.pic-containerMobile img {
  width: 100%; /* Bild nimmt die gesamte Breite des Containers ein */
  height: auto; /* Die Höhe passt sich proportional zur Breite an */
  object-fit: cover; /* Optional: Passt das Bild an, ohne das Seitenverhältnis zu verzerren */
}

/* Schwarzer transparenter Übergang von oben */
.overlay-top {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 50%;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.99), rgba(0, 0, 0, 0)); /* Transparenter Verlauf nach unten */
}

/* Schwarzer transparenter Übergang von unten */
.overlay-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.99), rgba(0, 0, 0, 0)); /* Transparenter Verlauf nach oben */
}


@media (min-width: 1200px) { 
  #row2a{
      display: none;
  }
}

#row3, #row4a {
  height: auto;
  text-align: center;
  background-color: rgb(0, 34, 48);
  position: relative;
  display: grid;
  grid-template-rows: auto auto;
}

#row4 {
  height: 100vh; /* Volle Bildschirmhöhe */
  display: flex;
  flex-direction: column;
  background-color: rgb(0, 34, 48);
}

.row4Top, .row4Bottom {
  height: 20%; /* 20% der Bildschirmhöhe für top und bottom */
  background-color: rgb(0, 34, 48);
}

.row4Bottom{
  height: 10%; /* 20% der Bildschirmhöhe für top und bottom */
  background-color: rgb(0, 34, 48);
}
#titleMobile{
  background-color: black;
  width: 100%;
}

.fixed-container4 {
  height: 70%; /* Der Mittelteil nimmt 60% der Höhe ein */
  display: flex;
  align-items: center;
  justify-content: center;
}

.fixed-container4 {
  background-color: black;
  width: 100vw;

  display: grid;
  grid-template-rows: 80% 20%; /* Definiert 2 Zeilen */
}

.floor1 {
  width: 100vw;
  display: grid;
  grid-template-columns: 12.5% 25% 25% 25% 12.5%; /* Leerzeichen statt Kommas verwenden */
}

@media (min-width: 1200px) { 
  #row4a{
      display: none;
  }
  #row4a{
    width: 100vw;
  }
}

@media (max-width: 1199px) {
  #row4{
    display: none;
  }

}

@media (max-width: 1800px) { 
  .floor1 {
    width: 100vw;
    display: grid;
    grid-template-columns: 1% 33% 32% 33% 1%; /* Leerzeichen statt Kommas verwenden */
  }
}

.fourColumn {
  display: grid;
  grid-template-rows: auto auto; /* Definiert 2 Zeilen innerhalb jeder Spalte */
  justify-items: center; /* Horizontale Zentrierung */
  align-items: center;   /* Vertikale Zentrierung */
}

.fourColumn img {
  max-height: 275px;    /* Maximalhöhe des Bildes */
  max-width: 100%;      /* Maximale Breite auf den Container bezogen */
  object-fit: contain;  /* Bild bleibt proportional im Container */
  border-radius: 15px;  /* Abgerundete Ecken, Wert kann angepasst werden */
  mask-image: linear-gradient(to bottom, black 70%, transparent);
}


.floor2 {
  grid-column: 1 / -1; /* Diese Zeile nimmt die gesamte Breite des Containers ein */
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100px; /* Beispielhöhe, kann angepasst werden */
}

#row5 {
  height: auto; /* Volle Bildschirmhöhe */
  display: flex;
  flex-direction: column;
  background-color: rgb(0, 34, 48);
}

/* Styling für den Zähler */
#counter {
  position: absolute;
  bottom: 20px;
  font-size: 2em;
  background-color: white;
  padding: 10px;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

/* Container, der fixiert wird, aber normal scrollen soll, wenn er nicht aktiv ist */
.fixed-container {
  display: grid;
  grid-template-columns: 70% 30%;
  width: 100%;
  height: 100%;
  position: relative;
  text-align: center;
  background-color: black;
}

/* Der pic-container wird mit JavaScript das Hintergrundbild erhalten */
.pic-container {
  display: grid;
  grid-template-columns: 70% 30%;
  width: 100%;
  height: 100%;
  position: relative;
  background-size: cover; /* Bild wird an den Container angepasst */
  background-position: center; /* Bild wird mittig ausgerichtet */
}

/* Linker und rechter Bereich */
.pic-containerLeft,
.pic-containerRight {
  height: 100%;
}

/* Styling für den Text oder das Bild */
.text-container {
  color: black;
}

#row1, #row5 {
  display: grid;
  grid-template-columns: 20% 60% 20%;
  background-color:  rgb(0, 34, 48);
}

@media (max-width: 1200px) {
  #row1, #row5 {
    display: grid;
    grid-template-columns: 10% 80% 10%;
    background-color:  rgb(0, 34, 48);
  }
}