.price {
    color: black;
    font-size: 0.8rem;
    font-style: italic;
}

.pricebtn {
    width: 125px;
    height: 90px;
}

.hidden {
    display: none;
}

td {
    min-width: 20px;
}

/* ---------------------------------------------------------------------
   Kleine Handy-Displays (iPhone 13 mini = 375px, iPhone SE = 320px, ...)

   Greift nur unterhalb des Bootstrap-Breakpoints "sm" (576px), damit sich
   auf Tablet/Desktop und im Querformat nichts aendert.

   Problem vorher bei 375px: 3 x 125px Buttons + Gutter = 413px, das ragte
   ueber den Container hinaus und wurde von .overflow-hidden abgeschnitten
   (die komplette rechte Spalte war nicht sichtbar/klickbar).
   --------------------------------------------------------------------- */
@media (max-width: 575.98px) {

    /* Etwas schmalere Innenabstaende -> mehr Platz fuer die Buttons */
    .container {
        --bs-gutter-x: 0.75rem;
    }

    .row {
        --bs-gutter-x: 0.5rem;
    }

    #buttons {
        --bs-gutter-y: 0.5rem;
    }

    /* Buttons teilen sich die Zeile, statt fix 125px breit zu sein.
       Hoehe waechst mit, falls der Text 3 Zeilen braucht. */
    .pricebtn {
        width: 100%;
        height: auto;
        min-height: 90px;
        padding: 0.35rem 0.2rem;
        font-size: 0.85rem;
        line-height: 1.15;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        overflow-wrap: break-word;
    }

    /* Das <br> aus index.js wird durch das Spalten-Flexbox ersetzt */
    .pricebtn br {
        display: none;
    }

    .pricebtn .price {
        font-size: 0.72rem;
        margin-top: 0.15rem;
    }

    /* "Ansicht wechseln" passte nicht in die col-3 und stand rechts raus */
    .col-3 > .btn {
        width: 100%;
        padding: 0.35rem 0.2rem;
        font-size: 0.8rem;
        line-height: 1.15;
        white-space: normal;
        overflow-wrap: break-word;
    }

    #total {
        margin-bottom: 0;
    }

    /* Listenansicht: die Zellen werden auf dem Handy so schmal, dass das
       Muell-Icon (SVG ohne feste Groesse) auf ein paar Pixel zusammenfaellt
       und nicht mehr treffsicher antippbar ist. */
    #list {
        font-size: 0.9rem;
    }

    #list th,
    #list td {
        padding: 0.5rem 0.25rem;
        vertical-align: middle;
    }

    #list-tbody td:last-child {
        width: 44px;
        text-align: center;
        cursor: pointer;
    }

    #list-tbody td:last-child svg {
        width: 22px;
        height: 22px;
        fill: #dc3545;
    }
}