/* HEADER */

/* Hero-Bild mit anpassenden Bildern */
.gallery-container {
  position: relative;
  width: 100%;
  max-width: 800px;
  max-height: 300px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(50px, 1fr));
  gap: 1rem;
  padding: 1rem;
  box-sizing: border-box;
  overflow: hidden;
    background-color: #ffffff;  /* Weißer Hintergrund */
    border: 0.5vmax solid #74B637; /* Grüner Rahmen */
    box-sizing: border-box;     /* Border innerhalb der Größe */
}

.gallery-container::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  transform: scale(1.1);    
  z-index: 0;

}

.gallery-container img {
  display: block;
  width: 100%;            
  height: 200px;           
  object-fit: cover;       
  box-shadow: 0 4px 8px rgba(0,0,0,0.55);
  position: relative;
  z-index: 1;
}

/* Kleine Bildschirme: max. 2 Bilder pro Reihe */
@media (max-width: 600px) {
  .gallery-container {
    grid-template-columns: repeat(2, 1fr);
    max-height: 600px;    /* Container-Höhe anpassen */
  }
}

/* LOGO Referenzen über Gallery */
.logo-wrapper-referenzen {
    position: absolute;
    bottom: -5%;           /* leicht über dem unteren Rand der Gallery */
    left: 50%;
    transform: translateX(-50%);
    width: 12%;            /* etwas kleiner */
    max-width: 100px;
    z-index: 9;           /* über den Bildern */
}

.logo-wrapper-referenzen .logo-referenzen {
    width: 100%;
    height: auto;
    display: block;
}

/* SPEZIAL für APHRODITE-Seite */

.aphrodite {
  position: relative;
  width: 100%;
  max-width: 800px;
  max-height: 300px;         /* maximale Höhe */
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(50px, 1fr));
  gap: 1rem;
  padding: 1rem;
  box-sizing: border-box;
  overflow: hidden;
  background-color: #ffffff;  /* Weißer Hintergrund */
  border: 0.5vmax solid #74B637; /* Grüner Rahmen */
  box-sizing: border-box;     /* Border innerhalb der Größe */
}

.aphrodite::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  filter: blur(12px) brightness(0.7);
  transform: scale(1.1);     /* verhindert harte Ränder durch Blur */
  z-index: 0;
  background-image: var(--bg-img);
}

.aphrodite img {
  display: block;
  width: 100%;             /* passt sich der Spaltenbreite an */
  height: max 200px;           /* feste Höhe, z.B. 200px oder max 300px */
  object-fit: cover;       /* füllt den Platz, überschüssiges wird beschnitten */
  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
  position: relative;
  z-index: 1;
}

ul.referenzen_aphrodite {
    list-style: none;
    padding-left: 0;
    margin-left: 0;
}

/* INHALT */

ul.referenzen {
    list-style: none;
    padding-left: 0;
    margin-left: 0;
}

.referenzen li {
    line-height: 1.2;     /* enger Abstand innerhalb eines <li> */
    margin-bottom: 0; /* mehr Abstand zwischen den Listeneinträgen */
    font-size: clamp(12px, 5vw, 16px);
}

/* Kleine Bildschirme */
@media (max-width: 600px) {
  .referenzen li {
    line-height: 1.2;     /* enger Abstand innerhalb eines <li> */
    margin-bottom: 0.75em; /* mehr Abstand zwischen den Listeneinträgen */
    font-size: clamp(12px, 5vw, 16px);
  }
}

/* Kleine Bildschirme */
@media (max-width: 600px) {
ul.referenzen {
    list-style: none;
    padding-left: 0;
    margin-left: 0;
  }
}

p.referenzen  {
    font-size: clamp(12px, 5vw, 18px);
    margin-bottom: 1rem; /* Leerzeile zwischen den Sätzen */
    line-height: 1.4;      /* Zeilenabstand innerhalb des Absatzes */
}

/* Umbruch - nicht auf großen Displays */
.Umbruch_r {
    display: inline;    /* normaler Text */
}

/* Umbruch auf kleinen Displays erzwingen */
@media (max-width: 480px) {
    .Umbruch_r {
        display: block;  /* erzeugt einen Zeilenumbruch nur auf kleinen Displays */
        font-size: 0.85em;    /* Text nach dem Umbruch ist außerdem kleiner */
    }
}