Update styling and accessibility, refine product and shopping list functionalities

App.js

@@ -32,6 +32,7 @@ export default function App() {
   const [productCache, setProductCache] = useState({});
   const [manualPrices, setManualPrices] = useState({});
   const [recentProducts, setRecentProducts] = useState([]);
+  const [lastDeletedListItem, setLastDeletedListItem] = useState(null);
   const [isHydrated, setIsHydrated] = useState(false);
   const [storageError, setStorageError] = useState('');
 
@@ -133,10 +134,13 @@ export default function App() {
         <ShoppingListScreen
           onCompleteList={completeShoppingList}
           onDeleteItem={deleteListItem}
+          onUndoDelete={undoDeleteListItem}
           onStartScan={() => setActiveTab('scan')}
+          onOpenProfile={() => setActiveTab('profile')}
           onToggleItem={toggleListItem}
           onUpdateItemPrice={updateListItemPrice}
           preferences={preferences}
+          lastDeletedItem={lastDeletedListItem}
           shoppingList={shoppingList}
         />
       );
@@ -161,7 +165,7 @@ export default function App() {
           shoppingList={shoppingList}
       />
     );
-  }, [activeTab, manualPrices, preferences, productCache, recentProducts, shoppingList]);
+  }, [activeTab, lastDeletedListItem, manualPrices, preferences, productCache, recentProducts, shoppingList]);
 
   async function scanProductByBarcode(barcode) {
     const result = await lookupProductByBarcode(
@@ -334,6 +338,9 @@ export default function App() {
   }
 
   function deleteListItem(itemId) {
+    const index = shoppingList.items.findIndex((item) => item.id === itemId);
+    if (index < 0) return;
+    setLastDeletedListItem({ item: shoppingList.items[index], index });
     setShoppingList((current) => {
       const items = current.items.filter((item) => item.id !== itemId);
       return {
@@ -344,7 +351,19 @@ export default function App() {
     });
   }
 
+  function undoDeleteListItem() {
+    if (!lastDeletedListItem) return;
+    setShoppingList((current) => {
+      if (current.items.some((item) => item.id === lastDeletedListItem.item.id)) return current;
+      const items = [...current.items];
+      items.splice(Math.min(lastDeletedListItem.index, items.length), 0, lastDeletedListItem.item);
+      return { ...current, items, estimatedTotal: calculateEstimatedTotal(items) };
+    });
+    setLastDeletedListItem(null);
+  }
+
   function completeShoppingList() {
+    setLastDeletedListItem(null);
     setShoppingList({
       ...initialShoppingList,
       createdAt: new Date().toISOString()
@@ -389,6 +408,10 @@ export default function App() {
         <ProductDetailScreen
           onAddToList={addProductToShoppingList}
           onBack={goBackToTabs}
+          onOpenList={() => {
+            setActiveTab('list');
+            goBackToTabs();
+          }}
           onSaveManualPrice={saveManualPriceForProduct}
           onShowRatingCriteria={showRatingCriteria}
           onShowAlternatives={showAlternatives}

src/components/PrimaryButton.js

@@ -2,7 +2,7 @@ import { Pressable, StyleSheet, Text } from 'react-native';
 
 import { colors } from '../utils/constants';
 
-export default function PrimaryButton({ label, onPress, disabled = false }) {
+export default function PrimaryButton({ label, onPress, disabled = false, tone = 'default' }) {
   return (
     <Pressable
       accessibilityRole="button"
@@ -10,11 +10,12 @@ export default function PrimaryButton({ label, onPress, disabled = false }) {
       onPress={onPress}
       style={({ pressed }) => [
         styles.button,
+        tone === 'light' ? styles.lightButton : null,
         pressed ? styles.buttonPressed : null,
         disabled ? styles.disabled : null
       ]}
     >
-      <Text style={[styles.label, disabled ? styles.disabledLabel : null]}>{label}</Text>
+      <Text style={[styles.label, tone === 'light' ? styles.lightLabel : null, disabled ? styles.disabledLabel : null]}>{label}</Text>
     </Pressable>
   );
 }
@@ -23,17 +24,25 @@ const styles = StyleSheet.create({
   button: {
     alignItems: 'center',
     backgroundColor: colors.primary,
-    borderRadius: 8,
+    borderRadius: 14,
+    justifyContent: 'center',
+    minHeight: 50,
     paddingHorizontal: 20,
     paddingVertical: 14
   },
   buttonPressed: {
     opacity: 0.82
   },
+  lightButton: {
+    backgroundColor: colors.surface
+  },
   label: {
     color: colors.surface,
     fontSize: 16,
-    fontWeight: '700'
+    fontWeight: '800'
+  },
+  lightLabel: {
+    color: colors.primaryDark
   },
   disabled: {
     backgroundColor: colors.border

src/components/SecondaryButton.js

@@ -23,8 +23,10 @@ const styles = StyleSheet.create({
   button: {
     alignItems: 'center',
     borderColor: colors.primary,
-    borderRadius: 8,
+    borderRadius: 14,
     borderWidth: 1,
+    justifyContent: 'center',
+    minHeight: 48,
     paddingHorizontal: 18,
     paddingVertical: 12
   },

src/components/form/BudgetInput.js

@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import { Pressable, StyleSheet, Text, TextInput, View } from 'react-native';
 
 import { budgetPeriodLabels, colors } from '../../utils/constants';
@@ -5,16 +6,28 @@ import { budgetPeriodLabels, colors } from '../../utils/constants';
 const budgetPeriods = ['day', 'week', 'month', 'shoppingTrip'];
 
 export default function BudgetInput({ value, currency, period, onChangePeriod, onChangeValue }) {
+  const [inputValue, setInputValue] = useState(String(value ?? ''));
+
+  function updateValue(text) {
+    setInputValue(text);
+    const parsedValue = Number(text.replace(',', '.'));
+    onChangeValue(text.trim() && Number.isFinite(parsedValue) && parsedValue > 0 ? parsedValue : undefined);
+  }
+
   return (
     <View style={styles.wrap}>
-      <Text style={styles.label}>Maximales Einkaufsbudget</Text>
+      <Text style={styles.label}>Dein Budget (optional)</Text>
+      <Text style={styles.hint}>Ohne Budget bleibt die Preisbewertung offen.</Text>
       <View style={styles.row}>
         <Text style={styles.currency}>{currency}</Text>
         <TextInput
+          accessibilityLabel="Budgetbetrag"
           keyboardType="decimal-pad"
-          onChangeText={(text) => onChangeValue(Number(text.replace(',', '.')) || 0)}
+          onChangeText={updateValue}
+          placeholder="z. B. 45.00"
+          placeholderTextColor={colors.muted}
           style={styles.input}
-          value={String(value ?? '')}
+          value={inputValue}
         />
       </View>
       <View style={styles.periodGrid}>
@@ -23,6 +36,7 @@ export default function BudgetInput({ value, currency, period, onChangePeriod, o
           return (
             <Pressable
               accessibilityRole="button"
+              accessibilityState={{ selected: isActive }}
               key={option}
               onPress={() => onChangePeriod(option)}
               style={[styles.periodChip, isActive ? styles.activePeriodChip : null]}
@@ -42,11 +56,16 @@ const styles = StyleSheet.create({
   wrap: {
     backgroundColor: colors.surface,
     borderColor: colors.border,
-    borderRadius: 8,
+    borderRadius: 18,
     borderWidth: 1,
     gap: 10,
     padding: 14
   },
+  hint: {
+    color: colors.muted,
+    fontSize: 13,
+    lineHeight: 18
+  },
   label: {
     color: colors.text,
     fontSize: 15,
@@ -64,7 +83,7 @@ const styles = StyleSheet.create({
   },
   input: {
     borderColor: colors.border,
-    borderRadius: 8,
+    borderRadius: 12,
     borderWidth: 1,
     color: colors.text,
     flex: 1,
@@ -80,7 +99,7 @@ const styles = StyleSheet.create({
   periodChip: {
     alignItems: 'center',
     borderColor: colors.border,
-    borderRadius: 8,
+    borderRadius: 12,
     borderWidth: 1,
     flexGrow: 1,
     paddingHorizontal: 10,

src/components/form/ManualSearchInput.js

@@ -7,6 +7,7 @@ export default function ManualSearchInput({ value, onChangeText, onSubmit, disab
   return (
     <View style={styles.row}>
       <TextInput
+        accessibilityLabel="Produktname oder Barcode"
         autoCapitalize="none"
         onChangeText={onChangeText}
         onSubmitEditing={onSubmit}
@@ -29,7 +30,7 @@ const styles = StyleSheet.create({
   input: {
     backgroundColor: colors.surface,
     borderColor: colors.border,
-    borderRadius: 8,
+    borderRadius: 14,
     borderWidth: 1,
     color: colors.text,
     fontSize: 16,

src/components/form/SettingsSwitchRow.js

@@ -10,6 +10,7 @@ export default function SettingsSwitchRow({ label, description, value, onValueCh
         <Text style={styles.description}>{description}</Text>
       </View>
       <Switch
+        accessibilityLabel={label}
         onValueChange={onValueChange}
         thumbColor={value ? colors.primary : '#f4f3f4'}
         trackColor={{ false: colors.border, true: '#b7dbcf' }}
@@ -24,7 +25,7 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     backgroundColor: colors.surface,
     borderColor: colors.border,
-    borderRadius: 8,
+    borderRadius: 16,
     borderWidth: 1,
     flexDirection: 'row',
     gap: 12,

src/components/layout/AppHeader.js

@@ -23,7 +23,7 @@ export default function AppHeader({ title, subtitle, onBack, rightAction }) {
 
 const styles = StyleSheet.create({
   header: {
-    paddingTop: 6
+    paddingBottom: 2
   },
   row: {
     alignItems: 'center',
@@ -33,11 +33,11 @@ const styles = StyleSheet.create({
   backButton: {
     alignItems: 'center',
     borderColor: colors.border,
-    borderRadius: 8,
+    borderRadius: 14,
     borderWidth: 1,
-    height: 40,
+    height: 44,
     justifyContent: 'center',
-    width: 40
+    width: 44
   },
   backText: {
     color: colors.primary,
@@ -49,8 +49,9 @@ const styles = StyleSheet.create({
   },
   title: {
     color: colors.text,
-    fontSize: 28,
+    fontSize: 29,
-    fontWeight: '800'
+    fontWeight: '800',
+    letterSpacing: -0.6
   },
   subtitle: {
     color: colors.muted,

src/components/layout/BottomTabBar.js

@@ -3,21 +3,23 @@ import { Pressable, StyleSheet, Text, View } from 'react-native';
 import { colors } from '../../utils/constants';
 
 const tabs = [
-  { id: 'home', label: 'Home', icon: '⌂' },
+  { id: 'home', label: 'Start', icon: '⌂' },
-  { id: 'scan', label: 'Scan', icon: '□' },
+  { id: 'scan', label: 'Scannen', icon: '▣' },
-  { id: 'list', label: 'Liste', icon: '✓' },
+  { id: 'list', label: 'Liste', icon: '☷' },
-  { id: 'profile', label: 'Profil', icon: '◦' }
+  { id: 'profile', label: 'Profil', icon: '◉' }
 ];
 
 export default function BottomTabBar({ activeTab, onChange }) {
   return (
     <View style={styles.wrap}>
+      <View style={styles.inner}>
       {tabs.map((tab) => {
         const isActive = activeTab === tab.id;
         return (
           <Pressable
             accessibilityLabel={`${tab.label} öffnen`}
             accessibilityRole="button"
+            accessibilityState={{ selected: isActive }}
             key={tab.id}
             onPress={() => onChange(tab.id)}
             style={[styles.tab, isActive ? styles.activeTab : null]}
@@ -27,6 +29,7 @@ export default function BottomTabBar({ activeTab, onChange }) {
           </Pressable>
         );
       })}
+      </View>
     </View>
   );
 }
@@ -37,26 +40,35 @@ const styles = StyleSheet.create({
     borderColor: colors.border,
     borderTopWidth: 1,
     bottom: 0,
-    flexDirection: 'row',
-    gap: 8,
     left: 0,
-    padding: 10,
+    paddingHorizontal: 12,
+    paddingTop: 9,
+    paddingBottom: 12,
     position: 'absolute',
     right: 0
   },
+  inner: {
+    alignSelf: 'center',
+    flexDirection: 'row',
+    gap: 6,
+    maxWidth: 720,
+    width: '100%'
+  },
   tab: {
     alignItems: 'center',
-    borderRadius: 8,
+    borderRadius: 13,
     flex: 1,
     gap: 2,
-    paddingVertical: 8
+    minHeight: 58,
+    justifyContent: 'center',
+    paddingVertical: 6
   },
   activeTab: {
-    backgroundColor: '#e5f1ec'
+    backgroundColor: colors.surfaceTint
   },
   icon: {
     color: colors.muted,
-    fontSize: 18,
+    fontSize: 20,
     fontWeight: '800'
   },
   label: {

src/components/layout/ScreenContainer.js

@@ -8,7 +8,7 @@ export default function ScreenContainer({ children, scroll = true }) {
   }
 
   return (
-    <ScrollView contentContainerStyle={styles.content} style={styles.container}>
+    <ScrollView contentContainerStyle={styles.content} keyboardShouldPersistTaps="handled" style={styles.container}>
       {children}
     </ScrollView>
   );
@@ -20,8 +20,12 @@ const styles = StyleSheet.create({
     flex: 1
   },
   content: {
-    gap: 18,
+    alignSelf: 'center',
-    padding: 20,
+    gap: 20,
-    paddingBottom: 110
+    maxWidth: 720,
+    paddingHorizontal: 20,
+    paddingTop: 22,
+    paddingBottom: 124,
+    width: '100%'
   }
 });

src/components/layout/SectionTitle.js

@@ -9,8 +9,9 @@ export default function SectionTitle({ children }) {
 const styles = StyleSheet.create({
   title: {
     color: colors.text,
-    fontSize: 18,
+    fontSize: 20,
     fontWeight: '800',
-    marginTop: 4
+    letterSpacing: -0.3,
+    marginTop: 6
   }
 });

src/components/list/ShoppingListItem.js

@@ -13,6 +13,7 @@ export default function ShoppingListItem({ item, onToggle, onDelete, onUpdatePri
   }, [item.estimatedPrice]);
 
   function savePrice() {
+    if (!priceText.trim() && typeof item.estimatedPrice !== 'number') return;
     const parsedPrice = parsePrice(priceText);
 
     if (parsedPrice === undefined) {
@@ -26,12 +27,12 @@ export default function ShoppingListItem({ item, onToggle, onDelete, onUpdatePri
 
   return (
     <View style={styles.row}>
-      <Pressable accessibilityRole="checkbox" onPress={onToggle} style={[styles.checkbox, item.checked ? styles.checked : null]}>
+      <Pressable accessibilityLabel={`${item.productName} ${item.checked ? 'als offen markieren' : 'abhaken'}`} accessibilityRole="checkbox" accessibilityState={{ checked: item.checked }} onPress={onToggle} style={[styles.checkbox, item.checked ? styles.checked : null]}>
         <Text style={styles.checkText}>{item.checked ? '✓' : ''}</Text>
       </Pressable>
       <View style={styles.copy}>
         <Text style={[styles.name, item.checked ? styles.done : null]}>{item.productName}</Text>
-        <Text style={styles.meta}>Menge {item.quantity} · {formatPrice(item.estimatedPrice, item.currency || 'CHF')}</Text>
+        <Text style={styles.meta}>{item.quantity} × {formatPrice(item.estimatedPrice, item.currency || 'CHF')}{item.quantity > 1 && typeof item.estimatedPrice === 'number' ? ` · ${formatPrice(item.estimatedPrice * item.quantity, item.currency || 'CHF')}` : ''}</Text>
         <View style={styles.priceRow}>
           <Text style={styles.currency}>{item.currency || 'CHF'}</Text>
           <TextInput
@@ -51,7 +52,7 @@ export default function ShoppingListItem({ item, onToggle, onDelete, onUpdatePri
         </View>
         {priceError ? <Text style={styles.errorText}>{priceError}</Text> : null}
       </View>
-      <Pressable accessibilityRole="button" onPress={onDelete} style={styles.deleteButton}>
+      <Pressable accessibilityLabel={`${item.productName} löschen`} accessibilityRole="button" onPress={onDelete} style={styles.deleteButton}>
         <Text style={styles.deleteText}>Löschen</Text>
       </Pressable>
     </View>
@@ -78,7 +79,7 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     backgroundColor: colors.surface,
     borderColor: colors.border,
-    borderRadius: 8,
+    borderRadius: 18,
     borderWidth: 1,
     flexDirection: 'row',
     gap: 12,
@@ -87,11 +88,11 @@ const styles = StyleSheet.create({
   checkbox: {
     alignItems: 'center',
     borderColor: colors.primary,
-    borderRadius: 6,
+    borderRadius: 10,
     borderWidth: 2,
-    height: 28,
+    height: 44,
     justifyContent: 'center',
-    width: 28
+    width: 44
   },
   checked: {
     backgroundColor: colors.primary
@@ -129,7 +130,7 @@ const styles = StyleSheet.create({
   },
   priceInput: {
     borderColor: colors.border,
-    borderRadius: 8,
+    borderRadius: 10,
     borderWidth: 1,
     color: colors.text,
     fontSize: 14,
@@ -144,8 +145,9 @@ const styles = StyleSheet.create({
     marginTop: 4
   },
   deleteButton: {
-    paddingHorizontal: 8,
+    justifyContent: 'center',
-    paddingVertical: 6
+    minHeight: 44,
+    paddingHorizontal: 4
   },
   deleteText: {
     color: colors.danger,

src/components/product/AlternativeProductCard.js

@@ -9,7 +9,10 @@ export default function AlternativeProductCard({ item, onChoose, onOpen }) {
     <View style={styles.wrap}>
       <ProductCard product={item.product} rating={item.rating} onPress={onOpen} />
       <Text style={styles.reason}>{item.reason}</Text>
-      <PrimaryButton label="Beste Alternative wählen" onPress={onChoose} />
+      <PrimaryButton
+        label={typeof item.product.price === 'number' ? 'Zur Liste hinzufügen' : 'Produkt ansehen'}
+        onPress={onChoose}
+      />
     </View>
   );
 }

src/components/product/ProductCard.js

@@ -20,7 +20,10 @@ export default function ProductCard({ product, rating, onPress }) {
           </Text>
           <Text style={styles.source}>{sourceLabel(product.dataSource)}</Text>
         </View>
+      </View>
+      <View style={styles.footer}>
         {rating ? <ProductScoreBadge status={rating.overallStatus} score={rating.overallScore} /> : null}
+        <Text style={styles.openLabel}>Details ansehen  ›</Text>
       </View>
     </Pressable>
   );
@@ -40,7 +43,7 @@ const styles = StyleSheet.create({
   card: {
     backgroundColor: colors.surface,
     borderColor: colors.border,
-    borderRadius: 8,
+    borderRadius: 18,
     borderWidth: 1,
     gap: 10,
     padding: 16
@@ -50,12 +53,25 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     gap: 12
   },
+  footer: {
+    alignItems: 'center',
+    borderTopColor: colors.border,
+    borderTopWidth: 1,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    paddingTop: 11
+  },
+  openLabel: {
+    color: colors.primary,
+    fontSize: 13,
+    fontWeight: '800'
+  },
   copy: {
     flex: 1
   },
   name: {
     color: colors.text,
-    fontSize: 17,
+    fontSize: 16,
     fontWeight: '800'
   },
   meta: {
@@ -67,11 +83,11 @@ const styles = StyleSheet.create({
     color: colors.muted,
     fontSize: 13,
     lineHeight: 18,
-    marginTop: 8
+    marginTop: 5
   },
   source: {
     alignSelf: 'flex-start',
-    backgroundColor: '#eef3ef',
+    backgroundColor: colors.surfaceTint,
     borderRadius: 8,
     color: colors.primaryDark,
     fontSize: 12,

src/components/product/ProductScoreBadge.js

@@ -36,7 +36,7 @@ export default function ProductScoreBadge({ status, score }) {
 const styles = StyleSheet.create({
   badge: {
     alignSelf: 'flex-start',
-    borderRadius: 8,
+    borderRadius: 999,
     paddingHorizontal: 10,
     paddingVertical: 6
   },

src/components/product/RatingCategoryRow.js

@@ -34,7 +34,7 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     backgroundColor: colors.surface,
     borderColor: colors.border,
-    borderRadius: 8,
+    borderRadius: 16,
     borderWidth: 1,
     flexDirection: 'row',
     gap: 12,

src/components/scan/BarcodeScannerView.js

@@ -27,7 +27,7 @@ export default function BarcodeScannerView({ isLoadingProduct, isScanning, onBar
 const styles = StyleSheet.create({
   wrap: {
     backgroundColor: '#000000',
-    borderRadius: 8,
+    borderRadius: 18,
     height: 320,
     overflow: 'hidden'
   },
@@ -42,7 +42,7 @@ const styles = StyleSheet.create({
   },
   frame: {
     borderColor: colors.surface,
-    borderRadius: 8,
+    borderRadius: 14,
     borderWidth: 3,
     height: 150,
     width: '82%'

src/components/scan/ScanErrorModal.js

@@ -29,7 +29,7 @@ const styles = StyleSheet.create({
   },
   modal: {
     backgroundColor: colors.surface,
-    borderRadius: 8,
+    borderRadius: 20,
     gap: 14,
     padding: 20,
     width: '100%'

src/screens/AlternativesScreen.js

@@ -74,7 +74,7 @@ const styles = StyleSheet.create({
   empty: {
     backgroundColor: colors.surface,
     borderColor: colors.border,
-    borderRadius: 8,
+    borderRadius: 18,
     borderWidth: 1,
     padding: 16
   },

src/screens/HomeScreen.js

@@ -7,40 +7,46 @@ import SectionTitle from '../components/layout/SectionTitle';
 import ProductCard from '../components/product/ProductCard';
 import { calculateProductRating } from '../services/ratingService';
 import { colors } from '../utils/constants';
+import { formatPrice } from '../utils/formatPrice';
 
 export default function HomeScreen({ preferences, recentProducts, shoppingList, onStartScan, onOpenProduct, onOpenList }) {
   const frequentProducts = [...recentProducts]
     .filter((product) => (product.scanCount || 0) > 1)
     .sort((a, b) => (b.scanCount || 0) - (a.scanCount || 0))
     .slice(0, 3);
+  const openItems = shoppingList?.items?.filter((item) => !item.checked).length || 0;
 
   return (
     <ScreenContainer>
       <AppHeader
         title="Shoppinguin"
-        subtitle="Scanne Produkte im Supermarkt und erhalte eine persönliche Kaufempfehlung."
+        subtitle="Deine Entscheidungshilfe direkt am Regal"
       />
 
       <View style={styles.hero}>
-        <Text style={styles.eyebrow}>Smart Shopping Companion</Text>
+        <Text style={styles.eyebrow}>PRODUKTE BESSER VERSTEHEN</Text>
-        <Text style={styles.title}>Bereit für den nächsten Einkauf?</Text>
+        <Text style={styles.title}>Wissen, was drinsteckt.</Text>
         <Text style={styles.copy}>
-          Prüfe Allergien, Ernährung, Budget und Nachhaltigkeit direkt am Regal.
+          Barcode scannen und sofort sehen, wie ein Produkt zu deinen Zielen passt.
         </Text>
-        <PrimaryButton label="Produkt scannen" onPress={onStartScan} />
+        <PrimaryButton label="Produkt scannen" onPress={onStartScan} tone="light" />
-        {shoppingList?.items?.length > 0 ? (
-          <Pressable accessibilityRole="button" onPress={onOpenList} style={styles.listShortcut}>
-            <Text style={styles.listShortcutTitle}>Einkaufsliste</Text>
-            <Text style={styles.listShortcutCopy}>
-              {shoppingList.items.filter((item) => !item.checked).length} offene Produkte
-            </Text>
-          </Pressable>
-        ) : null}
       </View>
 
+      <Pressable accessibilityRole="button" onPress={onOpenList} style={styles.listShortcut}>
+        <View style={styles.listShortcutText}>
+          <Text style={styles.listShortcutTitle}>Dein Einkauf</Text>
+          <Text style={styles.listShortcutCopy}>
+            {shoppingList?.items?.length ? `${openItems} noch offen · ${shoppingList.items.length} insgesamt` : 'Deine Liste ist noch leer'}
+          </Text>
+        </View>
+        <Text style={styles.listShortcutTotal}>
+          {shoppingList?.items?.length ? formatPrice(shoppingList.estimatedTotal, shoppingList.currency) : 'Liste öffnen'}
+        </Text>
+      </Pressable>
+
       {frequentProducts.length > 0 ? (
         <>
-          <SectionTitle>Häufig gekauft</SectionTitle>
+          <SectionTitle>Häufig gescannt</SectionTitle>
           {frequentProducts.map((product) => (
             <View key={`frequent-${product.id}`} style={styles.frequentWrap}>
               <ProductCard
@@ -54,11 +60,11 @@ export default function HomeScreen({ preferences, recentProducts, shoppingList,
         </>
       ) : null}
 
-      <SectionTitle>Letzte Scans</SectionTitle>
+      <SectionTitle>Zuletzt angesehen</SectionTitle>
       {recentProducts.length === 0 ? (
         <View style={styles.emptyState}>
-          <Text style={styles.emptyTitle}>Noch keine Produkte gescannt</Text>
+          <Text style={styles.emptyTitle}>Dein erster Scan wartet</Text>
-          <Text style={styles.emptyCopy}>Starte einen Scan oder nutze die manuelle Suche.</Text>
+          <Text style={styles.emptyCopy}>Scanne einen Barcode oder suche ein Produkt nach Namen. Deine letzten Produkte erscheinen dann hier.</Text>
         </View>
       ) : (
         recentProducts.map((product) => (
@@ -76,29 +82,30 @@ export default function HomeScreen({ preferences, recentProducts, shoppingList,
 
 const styles = StyleSheet.create({
   hero: {
-    backgroundColor: colors.surface,
+    backgroundColor: colors.primaryDark,
-    borderColor: colors.border,
+    borderRadius: 22,
-    borderRadius: 8,
+    gap: 14,
-    borderWidth: 1,
+    padding: 24
-    gap: 12,
-    padding: 18
   },
   eyebrow: {
-    color: colors.primary,
+    color: '#b8e7ce',
-    fontSize: 13,
+    fontSize: 12,
     fontWeight: '800',
+    letterSpacing: 1.2,
     textTransform: 'uppercase'
   },
   title: {
-    color: colors.text,
+    color: colors.surface,
-    fontSize: 25,
+    fontSize: 31,
     fontWeight: '800',
-    lineHeight: 31
+    letterSpacing: -0.7,
+    lineHeight: 37
   },
   copy: {
-    color: colors.muted,
+    color: '#e2eee7',
     fontSize: 16,
-    lineHeight: 23
+    lineHeight: 23,
+    marginBottom: 6
   },
   frequentWrap: {
     gap: 6
@@ -113,9 +120,9 @@ const styles = StyleSheet.create({
   emptyState: {
     backgroundColor: colors.surface,
     borderColor: colors.border,
-    borderRadius: 8,
+    borderRadius: 18,
     borderWidth: 1,
-    padding: 18
+    padding: 20
   },
   emptyTitle: {
     color: colors.text,
@@ -129,18 +136,33 @@ const styles = StyleSheet.create({
     marginTop: 4
   },
   listShortcut: {
-    backgroundColor: '#eaf4ef',
+    alignItems: 'center',
-    borderRadius: 8,
+    backgroundColor: colors.surface,
-    gap: 2,
+    borderColor: colors.border,
-    padding: 12
+    borderRadius: 18,
+    borderWidth: 1,
+    flexDirection: 'row',
+    gap: 12,
+    minHeight: 80,
+    padding: 18
+  },
+  listShortcutText: {
+    flex: 1,
+    gap: 4
   },
   listShortcutTitle: {
     color: colors.primaryDark,
-    fontSize: 15,
+    fontSize: 17,
     fontWeight: '800'
   },
   listShortcutCopy: {
     color: colors.muted,
     fontSize: 13
+  },
+  listShortcutTotal: {
+    color: colors.primary,
+    fontSize: 14,
+    fontWeight: '800',
+    textAlign: 'right'
   }
 });

src/screens/ProductDetailScreen.js

@@ -1,5 +1,5 @@
 import { useMemo, useState } from 'react';
-import { StyleSheet, Text, TextInput, View } from 'react-native';
+import { Pressable, StyleSheet, Text, TextInput, View } from 'react-native';
 
 import PrimaryButton from '../components/PrimaryButton';
 import SecondaryButton from '../components/SecondaryButton';
@@ -18,6 +18,7 @@ export default function ProductDetailScreen({
   preferences,
   onBack,
   onAddToList,
+  onOpenList,
   onSaveManualPrice,
   onShowRatingCriteria,
   onShowAlternatives
@@ -34,26 +35,27 @@ export default function ProductDetailScreen({
     price: hasProductPrice ? product.price : parsedManualPrice
   }), [currency, hasProductPrice, parsedManualPrice, product]);
   const rating = useMemo(() => calculateProductRating(pricedProduct, preferences), [pricedProduct, preferences]);
+  const recommendation = rating.overallStatus === 'good' ? 'Passt gut zu dir' : rating.overallStatus === 'medium' ? 'Genauer prüfen' : 'Lieber meiden';
 
   function addToList() {
-    if (!hasProductPrice && parsedManualPrice === undefined) {
+    if (!hasProductPrice && manualPrice.trim() && parsedManualPrice === undefined) {
       setSavedMessage('');
-      setPriceError('Bitte gib einen Preis ein, bevor du das Produkt hinzufügst.');
+      setPriceError('Bitte gib einen gültigen Preis ein oder lasse das Feld leer.');
       return;
     }
 
-    if (typeof pricedProduct.price === 'number') {
+    if (!hasProductPrice && typeof pricedProduct.price === 'number') {
       onSaveManualPrice(pricedProduct, pricedProduct.price);
     }
 
     onAddToList(pricedProduct);
     setPriceError('');
-    setSavedMessage('Produkt wurde zur Einkaufsliste hinzugefügt.');
+    setSavedMessage('Zur Einkaufsliste hinzugefügt.');
   }
 
   return (
     <ScreenContainer>
-      <AppHeader title="Produktbewertung" subtitle="Persönliche Einschätzung" onBack={onBack} />
+      <AppHeader title="Produkt im Check" subtitle="Bewertung nach deinen Einstellungen" onBack={onBack} />
 
       <View style={styles.productPanel}>
         <ProductImage imageUrl={product.imageUrl} productName={product.name} size="large" />
@@ -68,24 +70,27 @@ export default function ProductDetailScreen({
           </View>
           <ProductScoreBadge status={rating.overallStatus} score={rating.overallScore} />
         </View>
-        <Text style={styles.summary}>
+        <View style={[styles.recommendation, styles[`${rating.overallStatus}Recommendation`]]}>
-          Empfehlung: {rating.overallStatus === 'good' ? 'kaufen' : rating.overallStatus === 'medium' ? 'prüfen' : 'meiden'}.
+          <Text style={[styles.recommendationTitle, styles[`${rating.overallStatus}Text`]]}>{recommendation}</Text>
-        </Text>
+          <Text style={styles.recommendationCopy}>Tippe unten auf ein Kriterium, um die Bewertung nachzuvollziehen.</Text>
+        </View>
       </View>
 
       {!hasProductPrice ? (
         <View style={styles.pricePanel}>
-          <Text style={styles.priceTitle}>Preis ergänzen</Text>
+          <Text style={styles.priceTitle}>Ladenpreis ergänzen</Text>
           <Text style={styles.priceCopy}>
-            Open Food Facts liefert keine Preise. Gib den Ladenpreis ein, damit die Einkaufsliste und Budgetprüfung stimmen.
+            Optional. Ohne Preis kannst du das Produkt speichern; die Einkaufssumme bleibt dann unvollständig.
           </Text>
           <View style={styles.priceInputRow}>
             <Text style={styles.currency}>{currency}</Text>
             <TextInput
+              accessibilityLabel="Ladenpreis"
               keyboardType="decimal-pad"
               onChangeText={(value) => {
                 setManualPrice(value);
                 setPriceError('');
+                setSavedMessage('');
               }}
               placeholder="z. B. 3.50"
               placeholderTextColor={colors.muted}
@@ -97,6 +102,17 @@ export default function ProductDetailScreen({
         </View>
       ) : null}
 
+      {savedMessage ? (
+        <View style={styles.savedPanel}>
+          <Text style={styles.saved}>{savedMessage}</Text>
+          <Pressable accessibilityRole="button" onPress={onOpenList}>
+            <Text style={styles.savedLink}>Einkaufsliste ansehen  ›</Text>
+          </Pressable>
+        </View>
+      ) : null}
+      <PrimaryButton label="Zur Einkaufsliste hinzufügen" onPress={addToList} />
+      <SecondaryButton label="Bessere Alternativen suchen" onPress={() => onShowAlternatives(product)} />
+
       <SectionTitle>Bewertungskriterien</SectionTitle>
       {Object.entries(rating.categoryScores).map(([category, categoryRating]) => (
         <RatingCategoryRow
@@ -111,14 +127,11 @@ export default function ProductDetailScreen({
       <View style={styles.dataPanel}>
         <Text style={styles.dataText}>Barcode: {product.barcode}</Text>
         <Text style={styles.dataText}>Zutaten: {(product.ingredients || []).join(', ') || 'Keine Angaben'}</Text>
-        <Text style={styles.dataText}>Allergene: {(product.allergens || []).join(', ') || 'Keine'}</Text>
+        <Text style={styles.dataText}>Allergene: {(product.allergens || []).join(', ') || 'Keine Angaben'}</Text>
         <Text style={styles.dataText}>Nutri-Score: {product.nutrition?.nutriScore || 'Keine Angabe'}</Text>
         <Text style={styles.dataText}>Eco-Score: {product.sustainability?.ecoScore || 'Keine Angabe'}</Text>
       </View>
 
-      {savedMessage ? <Text style={styles.saved}>{savedMessage}</Text> : null}
-      <PrimaryButton label="Zur Einkaufsliste hinzufügen" onPress={addToList} />
-      <SecondaryButton label="Alternative anzeigen" onPress={() => onShowAlternatives(product)} />
     </ScreenContainer>
   );
 }
@@ -148,7 +161,7 @@ const styles = StyleSheet.create({
   productPanel: {
     backgroundColor: colors.surface,
     borderColor: colors.border,
-    borderRadius: 8,
+    borderRadius: 20,
     borderWidth: 1,
     gap: 14,
     padding: 18
@@ -190,15 +203,30 @@ const styles = StyleSheet.create({
     paddingHorizontal: 8,
     paddingVertical: 4
   },
-  summary: {
+  recommendation: {
+    borderRadius: 14,
+    gap: 4,
+    padding: 14
+  },
+  goodRecommendation: { backgroundColor: '#e4f4e9' },
+  mediumRecommendation: { backgroundColor: '#fff3d7' },
+  criticalRecommendation: { backgroundColor: '#fee9e7' },
+  recommendationTitle: {
+    fontSize: 17,
+    fontWeight: '800'
+  },
+  goodText: { color: colors.success },
+  mediumText: { color: '#8a5914' },
+  criticalText: { color: colors.danger },
+  recommendationCopy: {
     color: colors.text,
-    fontSize: 16,
+    fontSize: 13,
-    fontWeight: '700'
+    lineHeight: 19
   },
   pricePanel: {
     backgroundColor: colors.surface,
     borderColor: colors.border,
-    borderRadius: 8,
+    borderRadius: 18,
     borderWidth: 1,
     gap: 10,
     padding: 16
@@ -225,7 +253,7 @@ const styles = StyleSheet.create({
   },
   priceInput: {
     borderColor: colors.border,
-    borderRadius: 8,
+    borderRadius: 12,
     borderWidth: 1,
     color: colors.text,
     flex: 1,
@@ -241,7 +269,7 @@ const styles = StyleSheet.create({
   dataPanel: {
     backgroundColor: colors.surface,
     borderColor: colors.border,
-    borderRadius: 8,
+    borderRadius: 18,
     borderWidth: 1,
     gap: 8,
     padding: 14
@@ -255,5 +283,16 @@ const styles = StyleSheet.create({
     color: colors.success,
     fontSize: 14,
     fontWeight: '800'
+  },
+  savedPanel: {
+    backgroundColor: colors.surfaceTint,
+    borderRadius: 14,
+    gap: 6,
+    padding: 14
+  },
+  savedLink: {
+    color: colors.primary,
+    fontSize: 14,
+    fontWeight: '800'
   }
 });

src/screens/ProfileScreen.js

@@ -30,7 +30,7 @@ export default function ProfileScreen({ preferences, onChangePreferences }) {
     <ScreenContainer>
       <AppHeader
         title="Profil"
-        subtitle="Präferenzen steuern die Produktbewertung global."
+        subtitle="Passe die Bewertung an deine Bedürfnisse an"
       />
 
       <SectionTitle>Ernährungsziel</SectionTitle>
@@ -38,6 +38,7 @@ export default function ProfileScreen({ preferences, onChangePreferences }) {
         {dietOptions.map((option) => (
           <Pressable
             accessibilityRole="button"
+            accessibilityState={{ selected: preferences.preferredDiet === option }}
             key={option}
             onPress={() => updatePreference('preferredDiet', option)}
             style={[styles.chip, preferences.preferredDiet === option ? styles.activeChip : null]}
@@ -50,12 +51,14 @@ export default function ProfileScreen({ preferences, onChangePreferences }) {
       </View>
 
       <SectionTitle>Allergien vermeiden</SectionTitle>
+      <Text style={styles.sectionHint}>Wähle nur Allergene, die für dich relevant sind. Fehlende Produktangaben bleiben als unsicher markiert.</Text>
       <View style={styles.optionGrid}>
         {['Erdnüsse', 'Milch', 'Hafer', 'Gluten'].map((allergen) => {
           const isActive = preferences.avoidAllergens?.includes(allergen);
           return (
             <Pressable
               accessibilityRole="button"
+              accessibilityState={{ selected: isActive }}
               key={allergen}
               onPress={() => toggleAllergen(allergen)}
               style={[styles.chip, isActive ? styles.dangerChip : null]}
@@ -111,6 +114,7 @@ function PrioritySelector({ label, value, onChange }) {
         {priorityOptions.map((option) => (
           <Pressable
             accessibilityRole="button"
+            accessibilityState={{ selected: value === option }}
             key={option}
             onPress={() => onChange(option)}
             style={[styles.priorityChip, value === option ? styles.activeChip : null]}
@@ -131,10 +135,16 @@ const styles = StyleSheet.create({
     flexWrap: 'wrap',
     gap: 8
   },
+  sectionHint: {
+    color: colors.muted,
+    fontSize: 13,
+    lineHeight: 19,
+    marginTop: -10
+  },
   chip: {
     backgroundColor: colors.surface,
     borderColor: colors.border,
-    borderRadius: 8,
+    borderRadius: 12,
     borderWidth: 1,
     paddingHorizontal: 12,
     paddingVertical: 10
@@ -161,7 +171,7 @@ const styles = StyleSheet.create({
   priorityRow: {
     backgroundColor: colors.surface,
     borderColor: colors.border,
-    borderRadius: 8,
+    borderRadius: 16,
     borderWidth: 1,
     gap: 10,
     padding: 14
@@ -177,7 +187,7 @@ const styles = StyleSheet.create({
   },
   priorityChip: {
     borderColor: colors.border,
-    borderRadius: 8,
+    borderRadius: 12,
     borderWidth: 1,
     flex: 1,
     paddingVertical: 10,

src/screens/ScanScreen.js

@@ -24,6 +24,8 @@ export default function ScanScreen({ preferences, productCache, onScanBarcode, o
   const [manualSearchQuery, setManualSearchQuery] = useState('');
   const [manualResults, setManualResults] = useState([]);
   const [isSearching, setIsSearching] = useState(false);
+  const [hasSearched, setHasSearched] = useState(false);
+  const [searchError, setSearchError] = useState('');
 
   async function handleBarcodeScanned(event) {
     if (!isScanning) return;
@@ -50,9 +52,14 @@ export default function ScanScreen({ preferences, productCache, onScanBarcode, o
     if (!manualSearchQuery.trim() || isSearching) return;
 
     setIsSearching(true);
+    setSearchError('');
     try {
       const results = await searchProducts(manualSearchQuery, productCache, preferences.offlineModeEnabled);
       setManualResults(results);
+      setHasSearched(true);
+    } catch (error) {
+      setManualResults([]);
+      setSearchError('Die Suche ist gerade nicht verfügbar. Bitte versuche es erneut.');
     } finally {
       setIsSearching(false);
     }
@@ -69,17 +76,19 @@ export default function ScanScreen({ preferences, productCache, onScanBarcode, o
   return (
     <ScreenContainer>
       <AppHeader
-        title="Scan"
+        title="Produkt scannen"
-        subtitle={preferences.offlineModeEnabled ? 'Offline-Modus aktiv: nur Cache-Produkte verfügbar.' : 'Barcode scannen oder Produkt manuell suchen.'}
+        subtitle={preferences.offlineModeEnabled ? 'Offline aktiv · nur gespeicherte Produkte' : 'Barcode scannen oder nach einem Produkt suchen'}
       />
 
-      {!permission?.granted && Platform.OS !== 'web' ? (
+      {permission && !permission.granted && Platform.OS !== 'web' ? (
         <View style={styles.permissionBox}>
-          <Text style={styles.permissionTitle}>Kamera-Berechtigung benötigt</Text>
+          <Text style={styles.permissionTitle}>Kamera für den Scan freigeben</Text>
           <Text style={styles.permissionCopy}>
-            Shoppinguin braucht die Kamera, um Barcodes direkt im Laden zu erfassen.
+            {permission.canAskAgain
+              ? 'Shoppinguin braucht die Kamera, um Barcodes direkt im Laden zu erfassen.'
+              : 'Aktiviere den Kamerazugriff in den Einstellungen deines Geräts. Die Produktsuche funktioniert auch ohne Kamera.'}
           </Text>
-          <PrimaryButton label="Kamera erlauben" onPress={requestPermission} />
+          {permission.canAskAgain ? <PrimaryButton label="Kamera erlauben" onPress={requestPermission} /> : null}
         </View>
       ) : null}
 
@@ -87,35 +96,46 @@ export default function ScanScreen({ preferences, productCache, onScanBarcode, o
         <>
           <BarcodeScannerView isLoadingProduct={isLoadingProduct} isScanning={isScanning} onBarcodeScanned={handleBarcodeScanned} />
           <SecondaryButton
+            disabled={isLoadingProduct}
             label={isScanning ? 'Scan pausieren' : 'Scan fortsetzen'}
             onPress={() => setIsScanning((current) => !current)}
           />
         </>
       ) : (
         <View style={styles.permissionBox}>
-          <Text style={styles.permissionTitle}>Scanner-Simulation</Text>
+          <Text style={styles.permissionTitle}>Beispielprodukt öffnen</Text>
           <Text style={styles.permissionCopy}>
-            Auf Web oder ohne Kamera kannst du Open-Food-Facts-Barcodes testen.
+            Du kannst einen Beispiel-Barcode ausprobieren oder unten nach einem Produkt suchen.
           </Text>
           {isLoadingProduct ? <Text style={styles.note}>Produkt wird geladen...</Text> : null}
           <View style={styles.demoRow}>
             <SecondaryButton label="Nutella" onPress={() => handleBarcodeScanned({ data: '3017620422003' })} />
-            <SecondaryButton label="OpenFoodFacts Beispiel" onPress={() => handleBarcodeScanned({ data: '737628064502' })} />
+            <SecondaryButton label="Weiteres Beispiel" onPress={() => handleBarcodeScanned({ data: '737628064502' })} />
           </View>
         </View>
       )}
 
-      <SectionTitle>Manuelle Suche</SectionTitle>
+      <SectionTitle>Nach Produkt suchen</SectionTitle>
       <ManualSearchInput
-        onChangeText={setManualSearchQuery}
+        onChangeText={(value) => {
+          setManualSearchQuery(value);
+          setManualResults([]);
+          setHasSearched(false);
+          setSearchError('');
+        }}
         onSubmit={handleManualSearch}
         disabled={isSearching}
         value={manualSearchQuery}
       />
       {isSearching ? <Text style={styles.note}>Suche läuft...</Text> : null}
-      {!isSearching && manualSearchQuery && manualResults.length === 0 ? (
+      {searchError ? <Text style={styles.errorNote}>{searchError}</Text> : null}
-        <Text style={styles.note}>Keine Treffer gefunden.</Text>
+      {!isSearching && hasSearched && manualResults.length === 0 ? (
+        <View style={styles.emptyResults}>
+          <Text style={styles.permissionTitle}>Kein passendes Produkt gefunden</Text>
+          <Text style={styles.permissionCopy}>Prüfe die Schreibweise oder suche nach dem Barcode.</Text>
+        </View>
       ) : null}
+      {manualResults.length > 0 ? <Text style={styles.resultsCount}>{manualResults.length} Treffer</Text> : null}
       {manualResults.map((product) => (
         <ProductCard
           key={product.id}
@@ -128,7 +148,10 @@ export default function ScanScreen({ preferences, productCache, onScanBarcode, o
       <ScanErrorModal
         message={scanError}
         onClose={retryScan}
-        onManualSearch={() => setIsErrorModalVisible(false)}
+        onManualSearch={() => {
+          setIsErrorModalVisible(false);
+          setIsScanning(true);
+        }}
         onRetry={retryScan}
         visible={isErrorModalVisible}
       />
@@ -140,11 +163,19 @@ const styles = StyleSheet.create({
   permissionBox: {
     backgroundColor: colors.surface,
     borderColor: colors.border,
-    borderRadius: 8,
+    borderRadius: 18,
     borderWidth: 1,
     gap: 12,
     padding: 16
   },
+  emptyResults: {
+    backgroundColor: colors.surface,
+    borderColor: colors.border,
+    borderRadius: 16,
+    borderWidth: 1,
+    gap: 6,
+    padding: 16
+  },
   permissionTitle: {
     color: colors.text,
     fontSize: 18,
@@ -161,5 +192,15 @@ const styles = StyleSheet.create({
   note: {
     color: colors.muted,
     fontSize: 14
+  },
+  errorNote: {
+    color: colors.danger,
+    fontSize: 14,
+    fontWeight: '700'
+  },
+  resultsCount: {
+    color: colors.muted,
+    fontSize: 13,
+    fontWeight: '700'
   }
 });

src/screens/ShoppingListScreen.js

@@ -1,5 +1,7 @@
-import { StyleSheet, Text, View } from 'react-native';
+import { useState } from 'react';
+import { Pressable, StyleSheet, Text, View } from 'react-native';
 
+import PrimaryButton from '../components/PrimaryButton';
 import SecondaryButton from '../components/SecondaryButton';
 import AppHeader from '../components/layout/AppHeader';
 import ScreenContainer from '../components/layout/ScreenContainer';
@@ -11,15 +13,22 @@ import { formatPrice } from '../utils/formatPrice';
 export default function ShoppingListScreen({
   preferences,
   shoppingList,
+  lastDeletedItem,
   onToggleItem,
   onDeleteItem,
+  onUndoDelete,
   onUpdateItemPrice,
   onStartScan,
+  onOpenProfile,
   onCompleteList
 }) {
+  const [isConfirming, setIsConfirming] = useState(false);
+  const [wasCompleted, setWasCompleted] = useState(false);
   const openItems = shoppingList.items.filter((item) => !item.checked).length;
+  const itemsWithoutPrice = shoppingList.items.filter((item) => typeof item.estimatedPrice !== 'number').length;
   const budget = preferences.maxBudgetPerShoppingTrip;
-  const budgetShare = typeof budget === 'number' && budget > 0 ? shoppingList.estimatedTotal / budget : 0;
+  const hasBudget = typeof budget === 'number' && budget > 0;
+  const budgetShare = hasBudget ? shoppingList.estimatedTotal / budget : 0;
   const budgetStatus = budgetShare <= 0.75 ? 'good' : budgetShare <= 1 ? 'medium' : 'critical';
   const dailyWarnings = calculateShoppingListWarnings(shoppingList);
 
@@ -27,17 +36,32 @@ export default function ShoppingListScreen({
     <ScreenContainer>
       <AppHeader
         title="Einkaufsliste"
-        subtitle={`${openItems} offene Produkte · ${formatPrice(shoppingList.estimatedTotal, shoppingList.currency)}`}
+        subtitle={shoppingList.items.length ? `${openItems} offen · ${shoppingList.items.length} insgesamt` : 'Alles für deinen nächsten Einkauf'}
       />
 
+      {wasCompleted && shoppingList.items.length === 0 ? (
+        <View style={styles.completedNotice}>
+          <Text style={styles.completedText}>Einkauf abgeschlossen. Deine neue Liste ist bereit.</Text>
+        </View>
+      ) : null}
+
+      {lastDeletedItem ? (
+        <View style={styles.undoNotice}>
+          <Text style={styles.undoText}>{lastDeletedItem.item.productName} entfernt</Text>
+          <Pressable accessibilityRole="button" onPress={onUndoDelete}>
+            <Text style={styles.undoAction}>Rückgängig</Text>
+          </Pressable>
+        </View>
+      ) : null}
+
       <View style={styles.summary}>
-        <Text style={styles.summaryTitle}>{shoppingList.title}</Text>
+        <Text style={styles.summaryTitle}>Deine Liste</Text>
-        <Text style={styles.summaryCopy}>
+        <Text style={styles.totalLabel}>{itemsWithoutPrice ? 'Bekannte Summe' : 'Voraussichtliche Summe'}</Text>
-          Produkte abhaken, löschen oder nach dem Einkauf abschliessen.
+        <Text style={styles.totalValue}>{formatPrice(shoppingList.estimatedTotal, shoppingList.currency)}</Text>
-        </Text>
+        {itemsWithoutPrice ? <Text style={styles.summaryCopy}>{itemsWithoutPrice} {itemsWithoutPrice === 1 ? 'Produkt ohne Preis ist' : 'Produkte ohne Preis sind'} nicht eingerechnet.</Text> : null}
-        <View style={styles.budgetBox}>
+        {hasBudget ? <View style={styles.budgetBox}>
           <View style={styles.budgetHeader}>
-            <Text style={styles.budgetLabel}>Budget pro {budgetPeriodLabels[preferences.budgetPeriod] || 'Woche'}</Text>
+            <Text style={styles.budgetLabel}>Anteil am Budget pro {budgetPeriodLabels[preferences.budgetPeriod] || 'Woche'}</Text>
             <Text style={[styles.budgetValue, styles[budgetStatus]]}>
               {formatPrice(shoppingList.estimatedTotal, shoppingList.currency)} von {formatPrice(budget, shoppingList.currency)}
             </Text>
@@ -51,7 +75,11 @@ export default function ShoppingListScreen({
               ]}
             />
           </View>
-        </View>
+        </View> : (
+          <Pressable accessibilityRole="button" onPress={onOpenProfile} style={styles.budgetLink}>
+            <Text style={styles.budgetLinkText}>Budget im Profil festlegen  ›</Text>
+          </Pressable>
+        )}
       </View>
 
       {dailyWarnings.length > 0 ? (
@@ -95,7 +123,23 @@ export default function ShoppingListScreen({
       )}
 
       {shoppingList.items.length > 0 ? (
-        <SecondaryButton label="Einkauf abschliessen" onPress={onCompleteList} />
+        <>
+          <SecondaryButton label="Weiteres Produkt scannen" onPress={onStartScan} />
+          {isConfirming ? (
+            <View style={styles.confirmPanel}>
+              <Text style={styles.confirmTitle}>Einkauf abschliessen?</Text>
+              <Text style={styles.confirmCopy}>Die aktuelle Liste wird geleert. Gespeicherte Produktdaten bleiben erhalten.</Text>
+              <PrimaryButton label="Ja, Einkauf abschliessen" onPress={() => {
+                onCompleteList();
+                setIsConfirming(false);
+                setWasCompleted(true);
+              }} />
+              <SecondaryButton label="Abbrechen" onPress={() => setIsConfirming(false)} />
+            </View>
+          ) : (
+            <SecondaryButton label="Einkauf abschliessen" onPress={() => setIsConfirming(true)} />
+          )}
+        </>
       ) : null}
     </ScreenContainer>
   );
@@ -113,9 +157,9 @@ const styles = StyleSheet.create({
   summary: {
     backgroundColor: colors.surface,
     borderColor: colors.border,
-    borderRadius: 8,
+    borderRadius: 20,
     borderWidth: 1,
-    padding: 16
+    padding: 18
   },
   summaryTitle: {
     color: colors.text,
@@ -126,11 +170,35 @@ const styles = StyleSheet.create({
     color: colors.muted,
     fontSize: 14,
     lineHeight: 20,
-    marginTop: 4
+    marginTop: 7
+  },
+  totalLabel: {
+    color: colors.muted,
+    fontSize: 13,
+    fontWeight: '700',
+    marginTop: 16
+  },
+  totalValue: {
+    color: colors.text,
+    fontSize: 30,
+    fontWeight: '800',
+    letterSpacing: -0.6,
+    marginTop: 2
   },
   budgetBox: {
     marginTop: 14
   },
+  budgetLink: {
+    minHeight: 44,
+    justifyContent: 'center',
+    alignSelf: 'flex-start',
+    marginTop: 8
+  },
+  budgetLinkText: {
+    color: colors.primary,
+    fontSize: 14,
+    fontWeight: '800'
+  },
   budgetHeader: {
     alignItems: 'flex-start',
     gap: 4,
@@ -179,7 +247,7 @@ const styles = StyleSheet.create({
   },
   warningBox: {
     backgroundColor: colors.surface,
-    borderRadius: 8,
+    borderRadius: 16,
     borderWidth: 1,
     padding: 14
   },
@@ -202,7 +270,7 @@ const styles = StyleSheet.create({
   empty: {
     backgroundColor: colors.surface,
     borderColor: colors.border,
-    borderRadius: 8,
+    borderRadius: 18,
     borderWidth: 1,
     gap: 12,
     padding: 16
@@ -216,5 +284,52 @@ const styles = StyleSheet.create({
     color: colors.muted,
     fontSize: 14,
     lineHeight: 20
+  },
+  confirmPanel: {
+    backgroundColor: colors.surface,
+    borderColor: colors.border,
+    borderRadius: 18,
+    borderWidth: 1,
+    gap: 12,
+    padding: 18
+  },
+  confirmTitle: {
+    color: colors.text,
+    fontSize: 18,
+    fontWeight: '800'
+  },
+  confirmCopy: {
+    color: colors.muted,
+    fontSize: 14,
+    lineHeight: 20
+  },
+  completedNotice: {
+    backgroundColor: colors.surfaceTint,
+    borderRadius: 14,
+    padding: 14
+  },
+  completedText: {
+    color: colors.primaryDark,
+    fontSize: 14,
+    fontWeight: '800'
+  },
+  undoNotice: {
+    alignItems: 'center',
+    backgroundColor: colors.text,
+    borderRadius: 14,
+    flexDirection: 'row',
+    gap: 12,
+    padding: 14
+  },
+  undoText: {
+    color: colors.surface,
+    flex: 1,
+    fontSize: 14,
+    fontWeight: '700'
+  },
+  undoAction: {
+    color: '#b8e7ce',
+    fontSize: 14,
+    fontWeight: '800'
   }
 });

src/utils/constants.js

@@ -1,11 +1,12 @@
 export const colors = {
-  background: '#f7f3ea',
+  background: '#f6f8f5',
   surface: '#ffffff',
-  text: '#18201d',
+  surfaceTint: '#e9f4ef',
-  muted: '#5a6a64',
+  text: '#16251f',
-  border: '#d8ded9',
+  muted: '#52665d',
-  primary: '#256f5b',
+  border: '#dce7e0',
-  primaryDark: '#174b3d',
+  primary: '#176b50',
+  primaryDark: '#104934',
   warning: '#b7791f',
   danger: '#b42318',
   success: '#1f7a4d'
@@ -13,10 +14,10 @@ export const colors = {
 
 export const defaultPreferences = {
   id: 'local-user',
-  avoidAllergens: ['Erdnüsse'],
+  avoidAllergens: [],
-  preferredDiet: 'lowSugar',
+  preferredDiet: 'none',
-  preferBio: true,
+  preferBio: false,
-  maxBudgetPerShoppingTrip: 45,
+  maxBudgetPerShoppingTrip: undefined,
   budgetPeriod: 'week',
   currency: 'CHF',
   offlineModeEnabled: false,