/* Die über den Anker-Tag erzeugten Bildlinks bekommen eine kleine Schriftgröße, die Farbe Weiß und die Links werden nicht unterstrichen. */
a {
    text-decoration: none;
}

video {
  margin-left:40px;
}
/* Bei großem Bildschirm werden die Videos mittig plaziert. */

.image-container {
  display: flex;
  flex-direction: column;
  gap: 20px; /* Abstand zwischen den Bildern */
}

figure {
  display: flex;
  align-items: flex-start;
  gap: 15px; /* Abstand zwischen Bild und Text */
}

/* Standardstil für Caporales-Bilder */
figure img {
    width: 100%; /* Nimmt die volle Breite des Containers ein */
    height: auto; /* Beibehaltung des Seitenverhältnisses */
}

.image-wrapper {
  max-width: 50%; /* Bildcontainer flexible bis max. % des body */
  /*flex: 0 0 50%;  feste Breite des Bild-Containers */
  height: auto;
  background-color: aqua;
  overflow: hidden; /* Um das Bild im Container zu halten */
}
/* Bildumschlag bekommt 50% der Bildschirmbreite. */

.image-wrapper img {
  max-width: 100%; /* Bild passt sich der Containerbreite an. */
  height: 43px; /* Proportionale Höhe */
  object-fit: contain !important;
}




/* Stile für die Suche und Filter */
.search-filter-container {
    display: flex;
    align-items: flex-start; /* Korrigierte Flexbox-Eigenschaft */
    justify-content: flex-start; /* Korrigierte Flexbox-Eigenschaft */
    margin-bottom: 1em;
}

.filter-container,
.search-container,
.search-tags-container,
.sort-container {
    margin-right: 1em;
}

.filter-container select {
    width: 10em;
}

.search-container input[type="text"],
.search-tags-container input[type="text"] {
    width: 15em;
}

/* Hier sind die Eigenschaften der Galerie definiert. */
.event-tags {
    font-size: 9px; /* Ändere die Schriftgröße der Tags nach Bedarf */
    text-align: center;
}

.event-title {
    font-size: 12px; /* Ändere die Schriftgröße der Titel nach Bedarf */
}

.gallery-scroll {
    display: grid; /* Verwenden von Grid Layout für präzise Steuerung */
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); /* Flexibles Layout */
    gap: 1px; /* Abstand zwischen den Bildern */
    margin: 0;
    padding: 0;
    background-color: #878282;
}

.gallery-item {
    margin: 1px; /* Abstand zwischen den Bildern */
    padding: 0.5rem;
    font-size: 0.8em;
    color: #fcfcfc;
    text-align: center;
    background-color: #878282;
}

.gallery-item img {
    width: 100%; /* Alle Bilder nehmen die volle Breite des Elternelements ein */
    height: 180px; /* Festlegung einer festen Höhe für alle Bilder */
    object-fit: cover; /* Bilder werden proportional gestreckt, um die feste Höhe zu erfüllen */
    border: 4px solid #ece3d7; /* Festlegung des Rahmens um jedes Bild */
}

@media screen and (max-width: 480px) {
    .search-filter-container {
        flex-direction: column; /* Ändert die Anordnung auf vertikal */
        align-items: stretch; /* Streckt die Elemente über die gesamte Breite */
    }

    .filter-container,
    .search-container,
    .search-tags-container {
        margin-right: 0; /* Entfernt den seitlichen Abstand */
        margin-bottom: 1em; /* Fügt vertikalen Abstand hinzu */
        margin-left: 0; /* Entfernt den seitlichen Abstand */
    }

    #searchInput,
    #searchTagsInput {
        width: auto; /* Lässt die Breite automatisch anpassen */
        max-width: 100%; /* Begrenzt die Breite auf den verfügbaren Platz */
    }

    .gallery-item {
        flex-basis: calc(100% - 20px); /* Volle Breite für jedes Galerie-Element */
        margin-bottom: 15px; /* Abstand zwischen den Galerie-Elementen */
    }
     figure img {
        width: 100%; /* Stellt sicher, dass die Caporales-Bilder die volle Breite des Bildschirms einnehmen */
        height: auto; /* Proportionen beibehalten */
    }
}