/*Layout Content-Container*/
.content-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: auto;
    gap: 1rem;
    width: 100%;
    max-width: 1200px;
    margin: 0;
}

.item {
    grid-column: span 1;
}

.item-1 {
    grid-column: span 4;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.item-2 {
    grid-column: span 4;
    grid-row: 2;
}

.kacheln-container {
    display: flex;
    flex-wrap: wrap; /* Kacheln umbrechen, wenn nicht genug Platz ist */
    gap: 20px; /* Abstand zwischen den Kacheln */
    justify-content: center; /* Zentriert die Kacheln horizontal */
    padding: 20px;
    margin: 100px auto;
    margin-top: 20px;
    width: 90%;
    background-color: transparent;
}

.kachel {
    width: 200px; /* Feste Breite */
    height: 250px; /* Feste Höhe */
    border: 1px solid #ddd;
    border-radius: 8px;
    text-align: center;
    background-color: #fff, 0.5;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    padding: 10px;
    box-sizing: border-box; /* Padding und Border in die Größe einrechnen */
}

.kachel img {
    width: 100%;
    height: 100px; /* Feste Höhe für das Bild */
    object-fit:scale-down; 
    border-radius: 8px 8px 0 0;
}

.kachel h2 {
    font-size: 0.9em;
    margin: 10px 0;
}

.kachel p {
    color: #ffffff;
    font-size: 0.6em;
}

.kachel button {
    background-color: #333333; /* Grüner Hintergrund */
    border: none; /* Keine Umrandung */
    color: white; /* Weißer Text */
    padding: 4px 8px; /* Innenabstand */
    text-align: center; /* Text zentrieren */
    display: inline-block; /* Block-Element */
    font-size: 0.6em; /* Schriftgröße */
    margin: 4px 2px; /* Außenabstand */
    cursor: pointer; /* Zeiger-Cursor */
    border-radius: 50px; /* Abgerundete Ecken */
}

.button-merken {
    background-color: #333333; /* Grüner Hintergrund */
    border: none; /* Keine Umrandung */
    color: white; /* Weißer Text */
    padding: 4px 8px; /* Innenabstand */
    text-align: center; /* Text zentrieren */
    display: inline-block; /* Block-Element */
    font-size: 0.6em; /* Schriftgröße */
    margin: 4px 2px; /* Außenabstand */
    cursor: pointer; /* Zeiger-Cursor */
    border-radius: 50px; /* Abgerundete Ecken */
}

.button-sort {
    background-color: #333333; /* Grüner Hintergrund */
    border: none; /* Keine Umrandung */
    color: white; /* Weißer Text */
    padding: 4px 8px; /* Innenabstand */
    text-align: center; /* Text zentrieren */
    display: inline-block; /* Block-Element */
    font-size: 0.6em; /* Schriftgröße */
    margin: 4px 2px; /* Außenabstand */
    cursor: pointer; /* Zeiger-Cursor */
    border-radius: 50px; /* Abgerundete Ecken */
}