/* 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;
}

/* 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. */
.recipe-tags {
    font-size: 9px; /* Ändere die Schriftgröße der Tags nach Bedarf */
    text-align: center;
}

.recipe-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(180px, 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 */
    }
}