/* Basis-Styles für die TYPO3-Galerie */
.ce-image .ce-gallery {
    width: 100%;
  }
  
  .ce-image  .ce-gallery .ce-outer {
    overflow: hidden; /* Verhindert unerwünschtes Überlaufen */
    position: relative;
    float: inherit;
    right: inherit;
  }
  
  .ce-image .ce-gallery .ce-inner {
    display: flex;
    flex-direction: column;
    gap: 20px; /* Abstand zwischen den einzelnen Reihen */
    position: relative;
    float: inherit;
    right: inherit;
  }
  
  .ce-image .ce-gallery .ce-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: left; /* Zentriert die Spalten, wenn eine Reihe nicht vollständig gefüllt ist */
    gap: 10px; /* Abstand zwischen den Spalten */
    margin:0;
  }
  
  /* Jede Spalte soll standardmäßig maximal 300px breit sein */
  .ce-image .ce-gallery .ce-column {
    flex: 1 1 300px;  /* Basisbreite 300px, flexible Vergrößerung und Verkleinerung */
    max-width: 300px;
  }
  
  /* Bilder optimal skalieren */
  .ce-image .ce-gallery .ce-column figure.image {
    margin: 0;
    padding: 0;
  }
  
  .ce-image .ce-gallery .ce-column figure.image img {
    width: 100%;
    height: auto;
    display: block;
  }

  .ce-image .ce-left .ce-gallery, .ce-column {
    float: inherit;
}
  
  /* Responsive Einstellungen: Auf kleinen Bildschirmen sollen die Bilder untereinander angezeigt werden */
  @media (max-width: 767px) {
    .ce-image .ce-gallery .ce-row {
      flex-direction: column;
      gap: 15px;
    }
    
    .ce-image .ce-gallery .ce-column {
      flex: 1 1 100%;
      max-width: 100%;
    }
  }