/* Container für die Produkte */
#addProduct {
    display: flex;
    justify-content: center; /* ZENTRIERT die ganze Gruppe */
    flex-wrap: wrap;
    gap: 12px;               /* Etwas mehr Abstand für bessere Optik */
    padding: 15px;
    width: 100%;
    box-sizing: border-box;
}

/* Die Produkt-Buttons innerhalb des Containers */
#addProduct .addByPricebutton {
    /* WICHTIG: Feste Flex-Basis für gleichmäßige Reihen */
    flex: 0 1 calc(50% - 12px); /* 2 Buttons pro Reihe auf dem Handy */
    
    /* Etwas GRÖSSER als compact, aber kleiner als die Riesen-Euro-Buttons */
    min-width: 130px;           
    max-width: 160px;          /* Verhindert, dass sie auf großen Screens zu breit werden */
    
    min-height: 70px;          /* Höhe für Name + Preis */
    padding: 12px 8px;
    margin: 0;                 /* Abstand macht Gap */
    font-size: 1rem;           /* Normale Schriftgröße */
    
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    
    /* Bestehender Button-Style (Farben, Schatten) bleibt erhalten */
}

/* Optimierung für den Produktnamen */
#addProduct .addByPricebutton strong {
    display: block;
    margin-bottom: 3px;
    line-height: 1.2;
    width: 100%;
    
    /* Erlaubt Zeilenumbruch, falls der Name zu lang ist (besser als Ellipsis) */
    word-wrap: break-word; 
    hyphens: auto;
}

/* Optimierung für den Preis */
#addProduct .addByPricebutton span {
    font-size: 0.9rem;
    opacity: 0.9;
    font-weight: normal;
}

/* RESPONSIVE: Auf Tablets/PCs machen wir 3 oder 4 Spalten */
@media (min-width: 480px) {
    #addProduct .addByPricebutton {
        flex: 0 1 calc(33.33% - 12px); /* 3 Spalten */
    }
}

@media (min-width: 768px) {
    #addProduct .addByPricebutton {
        flex: 0 1 calc(25% - 12px);    /* 4 Spalten */
    }
}