
.content-wrapper {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
}
/* 
      .texte {
          width: 100%;
          text-align: center;
          padding: 20px;
          background-color: #f0f0f0; 
      }
	  
      .texte h1 {
          margin-bottom: 10px;
      }
*/
      .gallery-container {
          width: 100%;
          max-width: 1200px; /* Optional: set a max-width if desired */
      }
      .gallery {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); 
          gap: 10px;
  background-color: rgba(255,255,255,0.01) /* Original: #f0f0f0; /* Hintergrund zwischen den Bildern inklusive Transparenz (Letzte Zahl = Opazität) */ 
      }
      .gallery-item {
          /* aspect-ratio: 1 / 1; */ /* Bei unterschiedlichen Formaten sinnvoll 1 / 1 oder 4 / 3  */ 
          overflow: hidden;
      }
      .gallery img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          cursor: pointer;
      }
      .modal {
          display: none;
          position: fixed;
          z-index: 1;
          padding-top: 50px;
          left: 0;
          top: 0;
          width: 100%;
          height: 100%;
          overflow: auto;
          background-color: rgba(0,0,0,0.9);
      }
      .modal-content {
          margin: auto;
          display: block;
          width: auto;
          max-width: 80%;
          max-height: 80vh;
      }
      .close, .prev, .next {
          color: #f1f1f1;
          font-size: 40px;
          font-weight: bold;
          cursor: pointer;
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          padding: 16px;
          user-select: none;
      }
      .close {
          top: 15px;
          right: 35px;
          font-size: 40px;
          transform: none;
      }
      .prev {
          left: 0;
      }
      .next {
          right: 0;
      }
