feat: Implement news section with list and detail views, category filtering, and unread indicators.

innungsapp/apps/mobile/components/news/NewsCard.tsx

@@ -24,22 +24,22 @@ export function NewsCard({ news, onPress }: NewsCardProps) {
 
   return (
     <TouchableOpacity onPress={onPress} style={styles.card} activeOpacity={0.84}>
-      {!isRead && (
-        <View style={styles.newBadge}>
-          <Text style={styles.newBadgeText}>Neu</Text>
-        </View>
-      )}
-
       <View style={styles.content}>
         <View style={styles.topRow}>
-          <Badge label={NEWS_KATEGORIE_LABELS[news.kategorie]} kategorie={news.kategorie} />
+          <View style={styles.badgeRow}>
+            <Badge label={NEWS_KATEGORIE_LABELS[news.kategorie]} kategorie={news.kategorie} />
+            {!isRead && (
+              <View style={styles.newBadge}>
+                <Text style={styles.newBadgeText}>Neu</Text>
+              </View>
+            )}
+          </View>
           <Text style={styles.dateText}>
             {news.publishedAt
               ? format(new Date(news.publishedAt), 'dd. MMM', { locale: de })
               : 'Entwurf'}
           </Text>
         </View>
-
         <Text style={isRead ? styles.titleRead : styles.titleUnread} numberOfLines={2}>
           {news.title}
         </Text>
@@ -71,15 +71,16 @@ const styles = StyleSheet.create({
     elevation: 2,
     position: 'relative',
   },
+  badgeRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 6,
+  },
   newBadge: {
-    position: 'absolute',
-    right: 30,
-    top: 8,
     borderRadius: 999,
     backgroundColor: '#EF4444',
-    paddingHorizontal: 8,
+    paddingHorizontal: 7,
     paddingVertical: 2,
-    zIndex: 2,
   },
   newBadgeText: {
     color: '#FFFFFF',