tablet: split price/pfand, light mode, bigger bold text

- show drink price and Pfand separately on tiles and in cart
- add light/dark toggle on the bar-picker page (persisted)
- theme via CSS variables, applied on load for tablet + admin
- larger, bolder text throughout; much bigger total sum

client/src/tablet/BarPicker.tsx

@@ -1,4 +1,6 @@
+import { useState } from 'preact/hooks';
 import type { Bar } from '@wutzcalc/shared';
+import { getTheme, setTheme } from '../api';
 
 interface Props {
   bars: Bar[] | null;
@@ -6,6 +8,14 @@ interface Props {
 }
 
 export function BarPicker({ bars, onPick }: Props) {
+  const [theme, setThemeState] = useState(getTheme());
+
+  function toggleTheme() {
+    const next = theme === 'dark' ? 'light' : 'dark';
+    setTheme(next);
+    setThemeState(next);
+  }
+
   return (
     <div class="bar-picker">
       <h1>Bar auswählen</h1>
@@ -18,6 +28,9 @@ export function BarPicker({ bars, onPick }: Props) {
           </button>
         ))
       )}
+      <button class="theme-toggle" onClick={toggleTheme}>
+        {theme === 'dark' ? '☀ Heller Modus' : '🌙 Dunkler Modus'}
+      </button>
     </div>
   );
 }

client/src/tablet/Sale.tsx

@@ -51,6 +51,8 @@ export function Sale({ config, onChangeBar }: Props) {
     setPfandReturns(0);
   }
 
+  const pfandCount = useMemo(() => lines.reduce((sum, l) => sum + l.qty, 0), [lines]);
+
   const isEmpty = lines.length === 0 && pfandReturns === 0;
 
   async function confirm(crew: boolean) {
@@ -84,7 +86,10 @@ export function Sale({ config, onChangeBar }: Props) {
         {drinks.map(d => (
           <button key={d.id} class="drink" onClick={() => addDrink(d.id)}>
             <div class="name">{d.name}</div>
-            <div class="price">{formatCents(d.price_cents + bar.pfand_cents)}</div>
+            <div class="price">{formatCents(d.price_cents)}</div>
+            {bar.pfand_cents > 0 && (
+              <div class="pfand">+ {formatCents(bar.pfand_cents)} Pfand</div>
+            )}
           </button>
         ))}
         <button class="drink pfand-return" onClick={addPfandReturn}>
@@ -99,14 +104,19 @@ export function Sale({ config, onChangeBar }: Props) {
           {lines.map((l, i) => {
             const d = drinkById.get(l.drink_id);
             if (!d) return null;
-            const unit = d.price_cents + bar.pfand_cents;
             return (
               <div key={i} class="cart-line">
                 <span>{l.qty}× {d.name}</span>
-                <span>{formatCents(unit * l.qty)}</span>
+                <span>{formatCents(d.price_cents * l.qty)}</span>
               </div>
             );
           })}
+          {bar.pfand_cents > 0 && pfandCount > 0 && (
+            <div class="cart-line pfand">
+              <span>{pfandCount}× Pfand</span>
+              <span>{formatCents(bar.pfand_cents * pfandCount)}</span>
+            </div>
+          )}
           {pfandReturns > 0 && (
             <div class="cart-line return">
               <span>{pfandReturns}× Pfand zurück</span>

client/src/tablet/main.tsx

@@ -1,4 +1,6 @@
 import { render } from 'preact';
 import { App } from './App';
+import { applyTheme } from '../api';
 
+applyTheme();
 render(<App />, document.getElementById('app')!);