/* ============================================================
   MOBILE: Anmeldung – 4-spaltig → 2-spaltig
   ============================================================ */

@media (max-width: 900px) {

    .card-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

    .beer-action {
        position: absolute;   /* wieder oben rechts */
        top: -10px;            /* leicht tiefer als Desktop */
        right: -12px;
        flex-direction: column;
        align-items: center;
        gap: 2px;
    }

    .beer-button {
        font-size: 40px;      /* etwas kleiner für Mobile */
    }

    .beer-label {
        font-size: 11px;
    }


 #anmeldung-liste {
        grid-template-columns: repeat(3, 1fr); /* vorher 2 */
        gap: 8px; /* kompakt lassen */
    }

    .attendee {
        padding: 6px 6px; /* kompakt */
    }

    .attendee-status {
        width: 14px;
        height: 14px;
        font-size: 9px;
    }

    .attendee-name {
        font-size: 11px;
        text-align: center;
    }

    .attendee-time {
        font-size: 9px;
        text-align: center;
    }
}