diff --git a/client/src/styles.css b/client/src/styles.css
index 7fa8485..0971da3 100644
--- a/client/src/styles.css
+++ b/client/src/styles.css
@@ -93,9 +93,9 @@ button.danger { background: #5a2a2a; border-color: #7a3a3a; color: #fff; }
   border-bottom: 1px solid var(--border-soft);
   flex: 0 0 auto;
 }
-.topbar .brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
+.topbar .brand { display: flex; align-items: center; gap: 10px; min-width: 0; overflow: hidden; }
 .topbar .logo { flex: 0 0 auto; }
-.topbar .bar-name { font-size: 26px; font-weight: 800; }
+.topbar .bar-name { font-size: 26px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
 .topbar .change { font-size: 17px; padding: 10px 14px; }
 
 /* Drink grid: 3 equal columns. Row height is DERIVED so exactly five equal
@@ -119,6 +119,20 @@ button.danger { background: #5a2a2a; border-color: #7a3a3a; color: #fff; }
 
 @media (max-width: 480px) {
   .grid { grid-template-columns: repeat(2, 1fr); }
+
+  .topbar { padding: 8px 12px; }
+  .topbar .bar-name { font-size: 20px; }
+  .topbar .change { font-size: 15px; padding: 8px 10px; }
+
+  .drink { font-size: 17px; padding: 6px; }
+  .drink .price { font-size: 17px; }
+  .drink .pfand { font-size: 12px; }
+
+  .cart { flex: 0 0 34vh; padding: 6px 12px; }
+  .cart-line { font-size: 16px; }
+  .cart-total { font-size: 38px; padding: 2px 0 6px; }
+
+  .actions button { height: 52px; font-size: 18px; }
 }
 
 .drink {
@@ -129,8 +143,9 @@ button.danger { background: #5a2a2a; border-color: #7a3a3a; color: #fff; }
   text-align: center;
   padding: 8px;
   font-size: 22px;
+  overflow: hidden;
 }
-.drink .name { font-weight: 800; line-height: 1.15; }
+.drink .name { font-weight: 800; line-height: 1.15; max-width: 100%; word-break: break-word; overflow-wrap: break-word; }
 .drink .price { font-size: 22px; font-weight: 700; margin-top: 6px; }
 .drink .pfand { font-size: 15px; font-weight: 600; color: var(--pfand); margin-top: 2px; }