diff --git a/public/styles/meals.css b/public/styles/meals.css
index a6a04da..b066738 100644
--- a/public/styles/meals.css
+++ b/public/styles/meals.css
@@ -140,6 +140,7 @@
   text-transform: uppercase;
   letter-spacing: 0.05em;
   padding: var(--space-1) var(--space-2) 0;
+  text-align: left;
 }
 
 /* Slot-Typ-Farben — zentrale Tokens aus tokens.css */
@@ -175,6 +176,8 @@
   flex: 1;
   display: flex;
   flex-direction: column;
+  align-items: flex-start;
+  text-align: left;
   padding: var(--space-1) var(--space-2) var(--space-2);
   cursor: pointer;
 }
@@ -187,6 +190,7 @@
   overflow: hidden;
   text-overflow: ellipsis;
   line-height: 1.4;
+  width: 100%;
 }
 
 .meal-card__meta {
@@ -194,6 +198,7 @@
   display: flex;
   align-items: center;
   gap: var(--space-1);
+  width: 100%;
 }
 
 .meal-card__ingredients-count {
diff --git a/public/styles/pwa.css b/public/styles/pwa.css
index 751b397..80e2210 100644
--- a/public/styles/pwa.css
+++ b/public/styles/pwa.css
@@ -30,8 +30,14 @@ body {
   padding-bottom: env(safe-area-inset-bottom);
 }
 
-/* ── Touch-Targets: min 44×44px (Apple HIG / WCAG 2.5.5) ── */
-button, a, [role="button"], input[type="checkbox"], input[type="radio"] {
+/* ── Touch-Targets: min 44×44px (Apple HIG / WCAG 2.5.5) ──
+ * Ausnahme: Elemente, die Touch-Area bereits per ::before erweitern
+ * (task-status-btn, subtask-item__checkbox, meal-card action-btns,
+ *  note color-swatches, etc.) — dort würde min-44px das Layout sprengen. */
+button:not(.task-status-btn):not(.subtask-item__checkbox):not(.meal-card__action-btn):not(.note-color-btn):not(.modal-panel__close):not(.btn-dismiss),
+a,
+input[type="checkbox"],
+input[type="radio"] {
   min-height: 44px;
   min-width: 44px;
 }