Große Knöpfe mit Symbol linksbündig [deploy]

Eddy: „im Auftrag … die Symbole alle linksbündig" — die farbigen Kreise
stehen in einer Spalte, der Text beginnt immer an derselben Stelle.
Gilt für alle Knöpfe mit Symbol; der kleine „Auswählen"-Knopf bleibt mittig.
Im Android-Emulator angesehen, Eddy: „lass das mal so".

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

README.md

@@ -20,7 +20,7 @@ Mobile Progressive Web App für die Baustellen-Doku — Foto-Upload, Sprach- und
 - ✅ Auftragsdetail mit Kunde, Adresse, Telefon (Click-to-Call)
 - ✅ **Neuer Auftrag** (FAB): Kunde per Suche/Zuletzt-verwendet wählen, dann **Ihr Zeichen** (Pflicht), **Auftragsbeschreibung** (optional), **Geplanter Liefertermin** (Datum + Uhrzeit) und Checkbox **Auftrag direkt freigeben**. Kunden-Defaults (Zahlungsbedingung/Zahlart, Ansprechpartner) werden übernommen. Bei „direkt freigeben" wird der Auftrag **ohne Position** validiert — die Leistungen kommen aus dem Stundenzettel. (Bis Bericht 1.3.1 hängte das Backend hier eine Std-Lohn-Zeile mit Menge 1 an; die verfälschte den Auftragswert, stand als offene Restmenge in der Lieferauflistung und im Kunden-PDF.)
 
-**Aussehen:** Knöpfe tragen farbige Symbole statt Emojis (`icon()` in app.js, Material Icons; Farben je Symbol in app.css `.ikon-<name>`) — Emojis erscheinen je nach Handy als Kästchen. Große Knöpfe: weißes Symbol im farbigen runden Feld; kleine Knöpfe: farbiges Symbol. Untere Leiste: farbiges Symbol über dem Wort. Überschriften fett in normaler Schreibweise, ohne Versalien und ohne Emoji (ROADMAP Punkt 12).
+**Aussehen:** Knöpfe tragen farbige Symbole statt Emojis (`icon()` in app.js, Material Icons; Farben je Symbol in app.css `.ikon-<name>`) — Emojis erscheinen je nach Handy als Kästchen. Große Knöpfe: weißes Symbol im farbigen runden Feld, linksbündig (Symbole in einer Spalte, Text darunter bündig); kleine Knöpfe: farbiges Symbol. Untere Leiste: farbiges Symbol über dem Wort. Überschriften fett in normaler Schreibweise, ohne Versalien und ohne Emoji (ROADMAP Punkt 12).
 
 **Foto- und Video-Upload**
 - ✅ Live-Kamera-Modal (getUserMedia): bleibt für Serien-Aufnahmen offen — Auslöser + Filmstreifen mit Upload-Status je Foto (💾 gesichert → ⏳ lädt hoch → ✓ fertig), Front-/Rückkamera-Umschaltung (nur bei zwei Kameras), Fehlschuss löschbar

ROADMAP.md

@@ -73,6 +73,9 @@ Anlass: der 🔄-Wechselknopf erschien als blaues Kästchen („den hässlichen
       farbigen runden Feld (Kamera blau, Galerie grün, Sprachnotiz rot, Notizen gelb, Material orange, Bericht lila,
       Lieferungen türkis …), kleine Knöpfe ein farbiges Symbol (Teilen blau, Löschen rot, Stift/Blitz/Hilfe gelb,
       Download/Telefon grün). Farben je Symbol in `app.css` (`.ikon-<name>`: `--ikon-farbe`, `--ikon-grund`).
+- [x] ✅ 20.10.2026 (Eddy: „die Symbole alle linksbündig"): große Knöpfe mit Symbol **linksbündig** — die farbigen
+      Kreise stehen in einer Spalte, der Text beginnt immer an derselben Stelle (liest sich wie eine Liste). Gilt für
+      alle `.btn` mit Symbol; nur der kleine „Auswählen"-Knopf bleibt mittig.
 - [x] ✅ Untere Leiste wie in Handy-Apps: Symbol über dem Wort, farbig (Heute als Sonne), aktive Seite blau; das Zahnrad heißt jetzt „Einstellungen".
 - [x] ✅ Titel der Vollbild-Ansichten und Abschnitts-Überschriften ohne Emoji (reiner Text).
 - Bewusst gelassen: Zustandsanzeige 🟢/🟡/🔴 (Farbe ist dort die Aussage), Stempel im Skizzen-Editor (werden so ins Bild

app.css

@@ -196,7 +196,10 @@ body {
    „viel zu schlicht". Also: kleine Knoepfe = farbiges Symbol (--ikon-farbe), grosse Knoepfe =
    weisses Symbol im farbigen runden Feld (--ikon-grund). */
 .ikon { color: var(--ikon-farbe, currentColor); }
-.btn:has(> .ikon) { display: flex; align-items: center; justify-content: center; gap: 12px; }
+/* Linksbuendig: Symbole stehen untereinander in einer Spalte, der Text beginnt immer an derselben
+   Stelle — liest sich wie eine Liste (Eddy 20.10.2026: „die Symbole alle linksbuendig") */
+.btn:has(> .ikon) { display: flex; align-items: center; justify-content: flex-start; gap: 14px; padding-left: 16px; text-align: left; }
+.btn-small:has(> .ikon) { justify-content: center; padding-left: 10px; }   /* kleiner Auswahl-Knopf bleibt mittig */
 .btn > .ikon {
     flex: 0 0 auto;
     box-sizing: content-box;