feat: 4-tier role concept, personal balance & cash register system, left off-canvas drawer navigation

app/templates/buyer.html

@@ -106,9 +106,6 @@
         <button onclick="window.print()" class="btn-secondary">🖨️ Liste drucken (A4)</button>
         <a href="/events/{{ event.id }}/calendar.ics" class="btn-secondary" style="text-decoration: none; display: inline-flex; align-items: center;">📅 Outlook (.ics)</a>
         {% endif %}
-        {% if current_user.role == 'admin' %}
-        <a href="/admin" class="btn-outline" style="text-decoration: none;">⚙️ Zur Verwaltung</a>
-        {% endif %}
       </div>
     </div>
 
@@ -148,13 +145,13 @@
       <div class="sponsor-highlight-card">
         <div class="sponsor-icon">🎁</div>
         <div>
-          <h3>Diese Runde wird gesponsert!</h3>
+          <h3>🎉 Diese Runde wird gesponsert!</h3>
           <p>Sponsor / Anlass: <strong>{{ event.sponsor_name }}</strong> übernimmt die Gesamtrechnung von <strong>{{ "%.2f"|format(total_revenue) }} €</strong> für das gesamte Team.</p>
         </div>
       </div>
       {% endif %}
 
-      <!-- Stats Cards -->
+      <!-- 4 Quick Stats -->
       <div class="stats-grid">
         <div class="stat-card">
           <div class="stat-label">Gesamtsumme Einkauf</div>
@@ -173,20 +170,20 @@
           </div>
         </div>
         <div class="stat-card">
-          <div class="stat-label">Teilnehmer</div>
+          <div class="stat-label">Bestellungen</div>
           <div class="stat-value">{{ orders|length }} Personen</div>
         </div>
       </div>
 
-      <!-- 2-Column Responsive Layout -->
-      <div class="admin-columns">
+      <!-- Grid: Links Sammelliste, Rechts Wer bekommt was -->
+      <div class="buyer-grid">
         
         <!-- Sammelliste für Metzger & Bäcker -->
         <div class="admin-card">
-          <h2>🛒 Sammelliste für Metzger & Bäcker</h2>
-          <p class="card-hint">Das musst du für die gesamte Runde besorgen:</p>
-          
-          <div class="shopping-table-wrapper">
+          <h2>🥖 Sammelliste für Bäcker & Metzger</h2>
+          <p class="card-hint">Mengen gebündelt für deinen Einkauf an der Theke:</p>
+
+          <div class="orders-table-wrapper">
             <table class="data-table">
               <thead>
                 <tr>
@@ -213,7 +210,7 @@
         <!-- Einzelübersicht / Strichliste zum Abhaken -->
         <div class="admin-card">
           <h2>👥 Wer bekommt was? (Kasse & Abhaken)</h2>
-          <p class="card-hint">Tippe auf den Status, um bezahlt/offen umzuschalten:</p>
+          <p class="card-hint">Tippe auf den Status zum Abbuchen oder Abhaken:</p>
 
           <div class="orders-table-wrapper">
             <table class="data-table">
@@ -222,7 +219,7 @@
                   <th>Kollege / Gast</th>
                   <th>Bestellung</th>
                   <th>Betrag</th>
-                  <th>Status</th>
+                  <th>Status / Kasse</th>
                 </tr>
               </thead>
               <tbody>
@@ -234,6 +231,8 @@
                     <span class="badge-role guest">Gast</span>
                     {% elif not order.user and order.guest_display_name %}
                     <span class="badge-role" style="background: rgba(148, 163, 184, 0.15); color: #cbd5e1;">Gast</span>
+                    {% elif order.user %}
+                    <div><small class="text-muted">Guthaben: <strong>{{ "%.2f"|format(order.user.balance) }} €</strong></small></div>
                     {% endif %}
                   </td>
                   <td>
@@ -250,12 +249,31 @@
                   <td>
                     {% if event.sponsor_name %}
                     <span class="badge-btn paid" style="cursor: default;">✓ Gesponsert</span>
-                    {% else %}
-                    <form action="/admin/toggle-paid/{{ order.id }}" method="POST" style="margin: 0;">
-                      <button type="submit" class="badge-btn {% if order.is_paid %}paid{% else %}unpaid{% endif %}">
-                        {% if order.is_paid %}✓ Bezahlt{% else %}⏳ Offen{% endif %}
+                    {% elif order.is_paid %}
+                    <form action="/admin/toggle-paid/{{ order.id }}" method="POST" style="margin: 0; display: inline;">
+                      <button type="submit" class="badge-btn paid" title="Klick um Bezahlung zurückzusetzen">
+                        {% if order.payment_method == 'balance' %}
+                        ✓ Bezahlt (Guthaben)
+                        {% else %}
+                        ✓ Bezahlt (Bar)
+                        {% endif %}
                       </button>
                     </form>
+                    {% else %}
+                    <div style="display: flex; gap: 6px; flex-wrap: wrap;">
+                      {% if order.user and order.user.balance >= order.total_price %}
+                      <form action="/kasse/charge-order/{{ order.id }}?method=balance" method="POST" style="margin: 0;">
+                        <button type="submit" class="badge-btn paid" style="background: rgba(34, 197, 94, 0.15); color: var(--success);" title="Vom Guthaben des Mitarbeiters abbuchen">
+                          💰 Abbuchen
+                        </button>
+                      </form>
+                      {% endif %}
+                      <form action="/kasse/charge-order/{{ order.id }}?method=cash" method="POST" style="margin: 0;">
+                        <button type="submit" class="badge-btn unpaid" title="Barzahlung annehmen">
+                          💵 Bar bezahlt
+                        </button>
+                      </form>
+                    </div>
                     {% endif %}
                   </td>
                 </tr>