diff --git a/src/index.css b/src/index.css
index 434290b..b57b097 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1055,6 +1055,40 @@ html.theme-mobile.dark {
   --shadow-lift: 0 0 0 1px rgb(255 255 255 / 0.08), 0 10px 28px rgb(0 0 0 / 0.6);
 }
 
+/*
+ * Segmentierte Umschalter (Segmented in components/ui/controls.tsx - das
+ * einzige inline-grid der App mit aria-pressed-Knoepfen).
+ *
+ * In der Werkzeugleiste der Buchung stehen zwei davon mit flex-1 neben dem
+ * Mitarbeiter-Auswahlfeld. Ihre Spalten sind minmax(0, 1fr), sie haben also
+ * keine Mindestbreite - auf dem Handy wurden sie auf fast nichts gequetscht und
+ * die Beschriftungen liefen uebereinander. Mit max-content bleiben sie so breit
+ * wie ihr Inhalt, die Leiste bricht vorher um.
+ *
+ * Knoepfe mit Symbol (Kalender/Liste) zeigen nur das Symbol: so passen beide
+ * Umschalter in eine Zeile. Der Text bleibt fuer Screenreader erhalten, der
+ * Knopf traegt zusaetzlich einen title.
+ *
+ * Das Innenpolster steht fest auf 0.25rem, weil der gleitende Marker seine
+ * Breite im Markup mit genau diesem Wert rechnet (100% - 0.5rem); mit dem
+ * kleineren --spacing waere er sonst ein Stueck zu breit.
+ */
+html.theme-mobile .inline-grid:has(> button[aria-pressed]) {
+  min-width: max-content;
+  padding: 0.25rem;
+}
+
+html.theme-mobile .inline-grid:has(> button[aria-pressed]) > span[aria-hidden] {
+  top: 0.25rem;
+  bottom: 0.25rem;
+  left: 0.25rem;
+}
+
+html.theme-mobile .inline-grid > button[aria-pressed]:has(> svg) {
+  gap: 0;
+  font-size: 0;
+}
+
 @layer base {
   :root {
     /*