/*Referenzen*/

#references {
  height: 4080px;
  text-align: center;
}


#references h1 {
  margin-top: 50px;
  font-size: 45px;
  margin-bottom: 50px;
}

/** === RONDELL === **/

.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* Erstellt drei Spalten mit gleicher Breite */
  grid-template-rows: repeat(3, 1fr); /* Erstellt drei Zeilen mit gleicher Höhe */
  gap: 10px; /* Setzt den Abstand zwischen den Elementen */
  width: 1800px; /* Maximale Breite des Grids, kann angepasst werden */
  margin: auto; /* Zentriert das Grid horizontal */
  margin-bottom: 100px;
  height: 1000px;
}

.gallery__item {
  display: block; /* a-Elemente als Block, um die volle Zelle zu füllen */
  width: 100%; /* Breite auf 100% der Zelle setzen */
  height: 100%; /* Höhe auf 100% der Zelle setzen */
  border-radius: 15px;
  transition: .3s ease;

}

.gallery__item:hover {
  transform: scale(0.97);
  cursor: zoom-in;
}

.gallery__item img {
  width: 593.32px;
  height: 439.67px;
  object-fit: cover; /* Bild anpassen und zuschneiden, um das Seitenverhältnis zu erhalten */
  border-radius: 15px; /* Stellen Sie sicher, dass das Bild auch abgerundete Ecken hat */
  transition: opacity 0.3s ease; /* Korrektur für die Transition von opacity */
  transition: all 0.3s cubic-bezier(.25,.8,.25,1);
  box-shadow: 0 4px 6px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.2);
}

.gallery__item img:hover {
    box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}


/*ACHTUNG DER TATSÄCHLICHE STYLE IST OBEN*/
#references .buttonMore {
padding-left: 140px;
padding-right: 140px;
padding-top: 20px;
padding-bottom: 20px;
}




@media screen and (max-width: 1900px) {

  #references {
    height: 2580px;
    text-align: center;
  }



  .gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Erstellt drei Spalten mit gleicher Breite */
    grid-template-rows: repeat(3, 1fr); /* Erstellt drei Zeilen mit gleicher Höhe */
    gap: 10px; /* Setzt den Abstand zwischen den Elementen */
    width: 1400px; /* Maximale Breite des Grids, kann angepasst werden */
    margin: auto; /* Zentriert das Grid horizontal */
    margin-bottom: 100px;
  }

  .gallery__item img {
          width: 460px;
          height: 340.86px;
      }

}


@media screen and (max-width: 1430px) {


  #references {
    height: 2350px;
    text-align: center;
  }



  .gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Erstellt drei Spalten mit gleicher Breite */
    grid-template-rows: repeat(3, 1fr); /* Erstellt drei Zeilen mit gleicher Höhe */
    gap: 10px; /* Setzt den Abstand zwischen den Elementen */
    width: 1200px; /* Maximale Breite des Grids, kann angepasst werden */
    margin: auto; /* Zentriert das Grid horizontal */
    margin-bottom: 100px;
  }

  .gallery__item img {
        width: 393.32px;
        height: 291.45px;
    }
}


@media screen and (max-width: 1260px) {

  #references {
    height: 3780px;
    text-align: center;
  }


  .gallery {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Erstellt drei Spalten mit gleicher Breite */
    grid-template-rows: repeat(5, 1fr); /* Erstellt drei Zeilen mit gleicher Höhe */
    gap: 10px; /* Setzt den Abstand zwischen den Elementen */
    width: 1000px; /* Maximale Breite des Grids, kann angepasst werden */
    margin: auto; /* Zentriert das Grid horizontal */
    margin-bottom: 100px;
  }

  .gallery__item img {
        width: 495px;
        height: 366.8px;
    }
}



@media screen and (max-width: 1060px) {

  #references {
    height: 3200px;
    text-align: center;
  }


  .gallery {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Erstellt drei Spalten mit gleicher Breite */
    grid-template-rows: repeat(5, 1fr); /* Erstellt drei Zeilen mit gleicher Höhe */
    gap: 10px; /* Setzt den Abstand zwischen den Elementen */
    width: 800px; /* Maximale Breite des Grids, kann angepasst werden */
    margin: auto; /* Zentriert das Grid horizontal */
    margin-bottom: 100px;
  }

  .gallery__item img {
          width: 395px;
          height: 297.7px;
      }

}


@media screen and (max-width: 830px) {



  #references {
    height: 2200px;
    text-align: center;
  }

  .gallery {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Erstellt drei Spalten mit gleicher Breite */
    grid-template-rows: repeat(5, 1fr); /* Erstellt drei Zeilen mit gleicher Höhe */
    gap: 10px; /* Setzt den Abstand zwischen den Elementen */
    width: 600px; /* Maximale Breite des Grids, kann angepasst werden */
    margin: auto; /* Zentriert das Grid horizontal */
    margin-bottom: 100px;
  }

  .gallery__item img {
          width: 286.15px;
          height: 212.04px;
      }

}


@media screen and (max-width: 660px) {

  #references {
    height: 3550px;
    text-align: center;
  }


  .gallery {
    display: grid;
    grid-template-columns: repeat(1, 1fr); /* Erstellt drei Spalten mit gleicher Breite */
    grid-template-rows: repeat(9, 1fr); /* Erstellt drei Zeilen mit gleicher Höhe */
    gap: 10px; /* Setzt den Abstand zwischen den Elementen */
    width: 400px; /* Maximale Breite des Grids, kann angepasst werden */
    margin: auto; /* Zentriert das Grid horizontal */
    margin-bottom: 100px;
  }

  .gallery__item img {
      width: 388px;
      height: 287.51px;
  }

}



@media screen and (max-width: 460px) {

  #references {
    height: 3200px;
    text-align: center;
  }


  .gallery {
    display: grid;
    grid-template-columns: repeat(1, 1fr); /* Erstellt drei Spalten mit gleicher Breite */
    grid-template-rows: repeat(9, 1fr); /* Erstellt drei Zeilen mit gleicher Höhe */
    gap: 10px; /* Setzt den Abstand zwischen den Elementen */
    width: 350px; /* Maximale Breite des Grids, kann angepasst werden */
    margin: auto; /* Zentriert das Grid horizontal */
    margin-bottom: 100px;
  }


  .gallery__item img {
        width: 339.5px;
        height: 251.58px;
    }

}