Refactoring um Anzeige und Logik zu trennen

software/app/lib/main.dart

@@ -2,7 +2,7 @@ import 'package:flutter/material.dart';
 import 'package:dynamic_color/dynamic_color.dart';
 import 'package:flutter_localizations/flutter_localizations.dart';
 import 'package:lasertag_app/l10n/app_localizations.dart';
-import 'leader_selection_screen.dart';
+import 'ui/screens/device_selection_screen.dart';
 
 void main() {
   runApp(const LasertagApp());
@@ -44,7 +44,7 @@ class LasertagApp extends StatelessWidget {
           ),
           themeMode: ThemeMode.system, // Folgt macOS/Android Hell/Dunkel Modus
 
-          home: const LeaderSelectionScreen(),
+          home: DeviceSelectionScreen(),
         );
       },
     );

software/app/lib/models/device_model.dart

@@ -0,0 +1,18 @@
+import '../../constants.dart';
+
+class LasertagDevice {
+  final String id;
+  final String name;
+  final int type;
+  final bool isConnected;
+
+  LasertagDevice({
+    required this.id,
+    required this.name,
+    required this.type,
+    this.isConnected = false,
+  });
+
+  // Hilfsmethode: Ist es ein Leader?
+  bool get isLeader => type == LasertagUUIDs.typeLeader;
+}

software/app/lib/providers/device_provider.dart

@@ -0,0 +1,17 @@
+import 'package:flutter/material.dart';
+import '../models/device_model.dart';
+import '../constants.dart';
+
+class DeviceProvider extends ChangeNotifier {
+  // Unsere Dummy-Listen
+  List<LasertagDevice> get dummyLeaders => [
+    LasertagDevice(id: "L-01", name: "EdiLeader Alpha", type: LasertagUUIDs.typeLeader),
+    LasertagDevice(id: "L-02", name: "Säntis Funker", type: LasertagUUIDs.typeLeader),
+  ];
+
+  List<LasertagDevice> get dummyEquip => [
+    LasertagDevice(id: "W-01", name: "Blaster 1", type: LasertagUUIDs.typeWeapon),
+    LasertagDevice(id: "V-01", name: "Weste Blau", type: LasertagUUIDs.typeVest),
+    LasertagDevice(id: "B-01", name: "Basis Mitte", type: LasertagUUIDs.typeBeacon),
+  ];
+}

software/app/lib/ui/screens/device_selection_screen.dart

@@ -0,0 +1,70 @@
+import 'package:flutter/material.dart';
+import '../../models/device_model.dart';
+import '../../providers/device_provider.dart';
+import '../../constants.dart';
+import 'package:lasertag_app/l10n/app_localizations.dart';
+
+class DeviceSelectionScreen extends StatelessWidget {
+  const DeviceSelectionScreen({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    final provider = DeviceProvider(); // Später via "Provider"-Paket
+    final l10n = AppLocalizations.of(context)!;
+
+    return Scaffold(
+      appBar: AppBar(title: Text(l10n.appTitle)),
+      body: CustomScrollView(
+        slivers: [
+          // SEKTION 1: SPIEL-LEITER
+          _buildHeader(context, l10n.typeLeader),
+          _buildDeviceList(context, provider.dummyLeaders, isLeader: true),
+
+          // SEKTION 2: AUSRÜSTUNG (Waffen, Westen, etc.)
+          _buildHeader(context, "Meine Ausrüstung"), // Später in ARB übersetzen
+          _buildDeviceList(context, provider.dummyEquip, isLeader: false),
+        ],
+      ),
+    );
+  }
+
+  Widget _buildHeader(BuildContext context, String title) {
+    return SliverToBoxAdapter(
+      child: Padding(
+        padding: const EdgeInsets.fromLTRB(16, 24, 16, 8),
+        child: Text(
+          title.toUpperCase(),
+          style: TextStyle(
+            fontSize: 12,
+            fontWeight: FontWeight.bold,
+            color: Theme.of(context).colorScheme.secondary,
+            letterSpacing: 1.2,
+          ),
+        ),
+      ),
+    );
+  }
+
+  Widget _buildDeviceList(BuildContext context, List<LasertagDevice> devices, {required bool isLeader}) {
+    return SliverList(
+      delegate: SliverChildBuilderDelegate(
+        (context, index) {
+          final device = devices[index];
+          return ListTile(
+            leading: Icon(
+              isLeader ? Icons.hub : Icons.radar,
+              color: Theme.of(context).colorScheme.primary,
+            ),
+            title: Text(device.name, style: const TextStyle(fontWeight: FontWeight.bold)),
+            subtitle: Text("ID: ${device.id}"),
+            trailing: const Icon(Icons.chevron_right),
+            onTap: () {
+              debugPrint("${device.name} ausgewählt für Konfiguration");
+            },
+          );
+        },
+        childCount: devices.length,
+      ),
+    );
+  }
+}