feat(mobile): settings hub with security section + signout

apps/mobile/app/(app)/settings/_layout.tsx

@@ -0,0 +1,18 @@
+import { Stack } from 'expo-router';
+
+import { colors } from '../../../theme/colors';
+
+export default function SettingsLayout() {
+  return (
+    <Stack
+      screenOptions={{
+        headerStyle: { backgroundColor: colors.bg },
+        headerTitleStyle: { color: colors.text },
+        headerTintColor: colors.accent,
+      }}
+    >
+      <Stack.Screen name="index" options={{ title: 'Einstellungen' }} />
+      <Stack.Screen name="security" options={{ title: 'Sicherheit' }} />
+    </Stack>
+  );
+}

apps/mobile/app/(app)/settings/index.tsx

@@ -0,0 +1,44 @@
+import { useRouter } from 'expo-router';
+import { Alert, Pressable, StyleSheet, Text, View } from 'react-native';
+
+import { useAuth } from '../../../lib/authContext';
+import { colors } from '../../../theme/colors';
+
+export default function SettingsIndex() {
+  const router = useRouter();
+  const { signOut } = useAuth();
+
+  function confirmLogout() {
+    Alert.alert('Abmelden', 'Diese Sitzung beenden?', [
+      { text: 'Abbrechen', style: 'cancel' },
+      { text: 'Abmelden', style: 'destructive', onPress: () => void signOut() },
+    ]);
+  }
+
+  return (
+    <View style={styles.container}>
+      <Pressable style={styles.row} onPress={() => router.push('/(app)/settings/security')}>
+        <Text style={styles.rowTitle}>Sicherheit</Text>
+        <Text style={styles.rowHint}>PIN ändern, Recovery-Code, Identität zurücksetzen</Text>
+      </Pressable>
+      <Pressable style={[styles.row, styles.danger]} onPress={confirmLogout}>
+        <Text style={[styles.rowTitle, styles.dangerText]}>Abmelden</Text>
+      </Pressable>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: { flex: 1, backgroundColor: colors.bg, padding: 16, gap: 12 },
+  row: {
+    backgroundColor: colors.surface,
+    padding: 16,
+    borderRadius: 12,
+    borderColor: colors.border,
+    borderWidth: 1,
+  },
+  rowTitle: { color: colors.text, fontSize: 16, fontWeight: '600' },
+  rowHint: { color: colors.textMuted, fontSize: 13, marginTop: 4 },
+  danger: { borderColor: colors.danger },
+  dangerText: { color: colors.danger },
+});