/* Bilder überlappen */


#parent
{
  position:absolute;
  top:30px;
  left:40px;
}

#child
{
  position:absolute;
  top:360px;
  left:80px;
  width:54%;
  overflow: hidden;
}


#child-icon
{
  position:absolute;
  top:480px;
  left:360px;
  width:34%;
  transform: rotate(2deg);
  overflow: hidden;
}

#parent-partner
{
  position:absolute;
  top:10px;
  left:40px;
}

#child-partner
{
  position:absolute;
  top:70px;
  left:100px;
  width:34%;
}

@media screen and (min-width:920px) {
	
#parent
{
  top:30px;
  left:40px;
}

#child
{
  top:160px;
  left:280px;
  width:54%;
  overflow: hidden;
}


#child-icon
{
  top:320px;
  left:360px;
  width:54%;
  transform: rotate(2deg);
  overflow: hidden;
}

#parent-partner
{
  top:10px;
  left:40px;
}

#child-partner
{
  top:70px;
  left:100px;
  width:54%;
}
	
}

/* ===== Contao Mosaic-Galerie (mit cols_3-Fix) ===== */

/* Basis aufräumen */
.ce_gallery.mosaicgallery ul,
.ce_gallery.mosaicgallery li,
.ce_gallery.mosaicgallery figure {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* WICHTIG: Theme-Klasse neutralisieren */
.ce_gallery.mosaicgallery ul.cols_3 {
  display: grid !important;
  grid-template-columns: repeat(6, 1fr) !important;
  grid-auto-rows: 7vw;            /* Höhe der Grid-Zeilen → nach Geschmack 6–9vw */
  gap: 16px;                      /* Abstand zwischen Kacheln */
  width: 100% !important;
}
.ce_gallery.mosaicgallery li,
.ce_gallery.mosaicgallery figure,
.ce_gallery.mosaicgallery .image_container {
  width: auto !important;         /* überschreibt evtl. feste Breiten aus dem Theme */
  height: 100%;
}

/* Bilder füllen ihre Kachel ohne weiße Ränder */
.ce_gallery.mosaicgallery img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- Anordnung der ersten 6 Bilder (wie im Screenshot) --- */
.ce_gallery.mosaicgallery li:nth-child(1) { grid-column: 1 / span 4; grid-row: 1 / span 4; }
.ce_gallery.mosaicgallery li:nth-child(2) { grid-column: 5 / span 2; grid-row: 1 / span 2; }
.ce_gallery.mosaicgallery li:nth-child(3) { grid-column: 5 / span 2; grid-row: 3 / span 2; }
.ce_gallery.mosaicgallery li:nth-child(4) { grid-column: 1 / span 2; grid-row: 5 / span 2; }
.ce_gallery.mosaicgallery li:nth-child(5) { grid-column: 3 / span 2; grid-row: 5 / span 2; }
.ce_gallery.mosaicgallery li:nth-child(6) { grid-column: 5 / span 2; grid-row: 5 / span 2; }

/* Ab dem 7. Bild: normal in 3 Spalten weiterlaufen */
.ce_gallery.mosaicgallery li:nth-child(n+7) {
  grid-column: span 2;   /* 2 von 6 Spalten = 3 Kacheln pro Reihe */
  grid-row: span 2;
}

/* --- Mobile: einspaltig untereinander --- */
@media (max-width: 767px) {
  .ce_gallery.mosaicgallery ul.cols_3 {
    grid-template-columns: 1fr !important;
    grid-auto-rows: auto;
    gap: 10px;
  }
  .ce_gallery.mosaicgallery li,
  .ce_gallery.mosaicgallery li:nth-child(-n+6) {
    grid-column: auto;
    grid-row: auto;
    height: auto;
  }
  .ce_gallery.mosaicgallery img {
    width: 100%;
    height: auto;
    object-fit: cover;
  }
}
