diff --git a/client/app/lib/api.dart b/client/app/lib/api.dart
index 3f7f59e..453b1ec 100644
--- a/client/app/lib/api.dart
+++ b/client/app/lib/api.dart
@@ -370,20 +370,49 @@ class FileEntry {
 }
 
 class ChatChannel {
-  ChatChannel({required this.id, required this.type});
+  ChatChannel({
+    required this.id,
+    required this.type,
+    this.name,
+    this.gemeindeId,
+    this.createdByUserId,
+  });
   final String id;
   final String type;
+  final String? name;
+  final String? gemeindeId;
+  final String? createdByUserId;
+
   factory ChatChannel.fromJson(Map<String, dynamic> j) => ChatChannel(
         id: j['id'] as String,
         type: j['type'] as String? ?? '',
+        name: j['name'] as String?,
+        gemeindeId: j['gemeindeId'] as String?,
+        createdByUserId: j['createdByUserId'] as String?,
       );
 }
 
 class ChatMessage {
-  ChatMessage({required this.body, required this.createdAt});
+  ChatMessage({
+    this.id,
+    this.channelId,
+    this.senderUserId,
+    this.senderGuestId,
+    required this.body,
+    required this.createdAt,
+  });
+  final String? id;
+  final String? channelId;
+  final String? senderUserId;
+  final String? senderGuestId;
   final String body;
   final String createdAt;
+
   factory ChatMessage.fromJson(Map<String, dynamic> j) => ChatMessage(
+        id: j['id'] as String?,
+        channelId: j['channelId'] as String?,
+        senderUserId: j['senderUserId'] as String?,
+        senderGuestId: j['senderGuestId'] as String?,
         body: j['body'] as String? ?? '',
         createdAt: j['createdAt'] as String? ?? '',
       );
diff --git a/client/app/lib/screens/chat_screen.dart b/client/app/lib/screens/chat_screen.dart
index 33c795e..3696bcb 100644
--- a/client/app/lib/screens/chat_screen.dart
+++ b/client/app/lib/screens/chat_screen.dart
@@ -1,12 +1,28 @@
+import 'dart:math' as math;
 import 'package:flutter/material.dart';
 
 import '../api.dart';
 import '../chat_socket.dart';
 import '../main.dart';
 
-/// Chat: channel list (REST) + a per-channel view that loads history over
-/// REST and then streams live messages over the `/chat` WebSocket gateway
-/// (`chat:join` / `chat:send` / `chat:message`).
+/// WhatsApp brand colors
+abstract final class WhatsAppColors {
+  static const primary = Color(0xFF008069); // WhatsApp Header Green
+  static const primaryDark = Color(0xFF075E54); // Classic WhatsApp Dark Green
+  static const accent = Color(0xFF00A884); // WhatsApp Bright Accent Green
+  static const chatBackground = Color(0xFFEFEAE2); // WhatsApp Chat Wallpaper BG
+  static const outgoingBubble = Color(0xFFE7FFDB); // WhatsApp Light Green Bubble
+  static const incomingBubble = Color(0xFFFFFFFF); // WhatsApp White Bubble
+  static const textPrimary = Color(0xFF111B21); // WhatsApp Main Text Color
+  static const textSecondary = Color(0xFF667781); // WhatsApp Muted / Timestamp Color
+  static const checkmarkBlue = Color(0xFF53BDEB); // WhatsApp Blue Double Check
+  static const dateBadgeBg = Color(0xEEFFFFFF); // WhatsApp Date Header BG
+  static const dateBadgeText = Color(0xFF54656F); // WhatsApp Date Header Text
+  static const composerBg = Color(0xFFF0F2F5); // WhatsApp Composer Bar BG
+  static const iconMuted = Color(0xFF54656F);
+}
+
+/// Chat channel overview screen with WhatsApp look and feel.
 class ChatScreen extends StatefulWidget {
   const ChatScreen({super.key, required this.kcId});
   final String kcId;
@@ -29,58 +45,181 @@ class _ChatScreenState extends State<ChatScreen> {
     'DIREKT': 'Direktnachricht',
     'LT_UEBERGREIFEND': 'Leitungsteam',
     'BROADCAST': 'Ankündigungen',
+    'GRUPPE': 'Gruppenchat',
+  };
+
+  static const _typeIcons = {
+    'GEMEINDE_GRUPPE': Icons.people_alt_rounded,
+    'DIREKT': Icons.person_rounded,
+    'LT_UEBERGREIFEND': Icons.shield_rounded,
+    'BROADCAST': Icons.campaign_rounded,
+    'GRUPPE': Icons.groups_rounded,
+  };
+
+  static const _typeColors = {
+    'GEMEINDE_GRUPPE': Color(0xFF008069),
+    'DIREKT': Color(0xFF2F7CFF),
+    'LT_UEBERGREIFEND': Color(0xFF6C5CE7),
+    'BROADCAST': Color(0xFFF17C20),
+    'GRUPPE': Color(0xFF0984E3),
   };
 
   @override
   Widget build(BuildContext context) {
-    return Scaffold(
-      appBar: AppBar(title: const Text('Chat')),
-      body: FutureBuilder<List<ChatChannel>>(
-        future: _future,
-        builder: (context, snap) {
-          if (snap.connectionState != ConnectionState.done) {
-            return const Center(child: CircularProgressIndicator());
-          }
-          if (snap.hasError) {
-            return Center(
-              child: Padding(
-                padding: const EdgeInsets.all(24),
-                child: Text('${snap.error}', textAlign: TextAlign.center),
+    return Theme(
+      data: Theme.of(context).copyWith(
+        appBarTheme: const AppBarTheme(
+          backgroundColor: WhatsAppColors.primary,
+          foregroundColor: Colors.white,
+          elevation: 1,
+          iconTheme: IconThemeData(color: Colors.white),
+          titleTextStyle: TextStyle(
+            color: Colors.white,
+            fontSize: 20,
+            fontWeight: FontWeight.w700,
+          ),
+        ),
+      ),
+      child: Scaffold(
+        backgroundColor: Colors.white,
+        appBar: AppBar(
+          title: const Text('Chats'),
+          actions: [
+            IconButton(
+              icon: const Icon(Icons.search),
+              tooltip: 'Suchen',
+              onPressed: () {},
+            ),
+            IconButton(
+              icon: const Icon(Icons.more_vert),
+              tooltip: 'Optionen',
+              onPressed: () {},
+            ),
+          ],
+        ),
+        body: FutureBuilder<List<ChatChannel>>(
+          future: _future,
+          builder: (context, snap) {
+            if (snap.connectionState != ConnectionState.done) {
+              return const Center(
+                child: CircularProgressIndicator(color: WhatsAppColors.primary),
+              );
+            }
+            if (snap.hasError) {
+              return Center(
+                child: Padding(
+                  padding: const EdgeInsets.all(24),
+                  child: Column(
+                    mainAxisSize: MainAxisSize.min,
+                    children: [
+                      const Icon(Icons.error_outline, size: 48, color: Colors.redAccent),
+                      const SizedBox(height: 12),
+                      Text('${snap.error}', textAlign: TextAlign.center),
+                    ],
+                  ),
+                ),
+              );
+            }
+            final channels = snap.data!;
+            if (channels.isEmpty) {
+              return Center(
+                child: Column(
+                  mainAxisSize: MainAxisSize.min,
+                  children: [
+                    Icon(Icons.chat_bubble_outline, size: 56, color: Colors.grey.shade400),
+                    const SizedBox(height: 12),
+                    Text(
+                      'Keine Kanäle sichtbar',
+                      style: TextStyle(fontSize: 16, color: Colors.grey.shade600),
+                    ),
+                  ],
+                ),
+              );
+            }
+            return ListView.separated(
+              itemCount: channels.length,
+              separatorBuilder: (_, __) => const Divider(
+                indent: 80,
+                endIndent: 16,
+                height: 1,
+                thickness: 0.8,
+                color: Color(0xFFF0F2F5),
               ),
-            );
-          }
-          final channels = snap.data!;
-          if (channels.isEmpty) {
-            return const Center(child: Text('Keine Kanäle sichtbar.'));
-          }
-          return ListView(
-            children: [
-              for (final c in channels)
-                ListTile(
-                  leading: const Icon(Icons.tag),
-                  title: Text(_typeLabels[c.type] ?? c.type),
-                  subtitle: Text(c.id),
+              itemBuilder: (context, i) {
+                final c = channels[i];
+                final label = c.name?.isNotEmpty == true ? c.name! : (_typeLabels[c.type] ?? c.type);
+                final icon = _typeIcons[c.type] ?? Icons.chat_rounded;
+                final color = _typeColors[c.type] ?? WhatsAppColors.primary;
+
+                return ListTile(
+                  contentPadding: const EdgeInsets.symmetric(horizontal: 16, vertical: 4),
+                  leading: CircleAvatar(
+                    radius: 25,
+                    backgroundColor: color.withValues(alpha: 0.15),
+                    child: Icon(icon, color: color, size: 28),
+                  ),
+                  title: Row(
+                    children: [
+                      Expanded(
+                        child: Text(
+                          label,
+                          style: const TextStyle(
+                            fontSize: 16,
+                            fontWeight: FontWeight.w600,
+                            color: WhatsAppColors.textPrimary,
+                          ),
+                          maxLines: 1,
+                          overflow: TextOverflow.ellipsis,
+                        ),
+                      ),
+                    ],
+                  ),
+                  subtitle: Text(
+                    _typeLabels[c.type] ?? c.type,
+                    style: const TextStyle(
+                      fontSize: 13.5,
+                      color: WhatsAppColors.textSecondary,
+                    ),
+                    maxLines: 1,
+                    overflow: TextOverflow.ellipsis,
+                  ),
+                  trailing: const Icon(Icons.chevron_right, color: Color(0xFFC0C0C0), size: 20),
                   onTap: () => Navigator.of(context).push(
                     MaterialPageRoute(
                       builder: (_) => _ChannelMessages(
                         channelId: c.id,
-                        title: _typeLabels[c.type] ?? c.type,
+                        title: label,
+                        subtitle: _typeLabels[c.type] ?? c.type,
+                        icon: icon,
+                        iconColor: color,
                       ),
                     ),
                   ),
-                ),
-            ],
-          );
-        },
+                );
+              },
+            );
+          },
+        ),
       ),
     );
   }
 }
 
+/// WhatsApp-style chat message screen.
 class _ChannelMessages extends StatefulWidget {
-  const _ChannelMessages({required this.channelId, required this.title});
+  const _ChannelMessages({
+    required this.channelId,
+    required this.title,
+    required this.subtitle,
+    required this.icon,
+    required this.iconColor,
+  });
+
   final String channelId;
   final String title;
+  final String subtitle;
+  final IconData icon;
+  final Color iconColor;
 
   @override
   State<_ChannelMessages> createState() => _ChannelMessagesState();
@@ -94,6 +233,18 @@ class _ChannelMessagesState extends State<_ChannelMessages> {
   bool _loading = true;
   String? _loadError;
   String _wsStatus = 'verbinde…';
+  bool _hasText = false;
+
+  @override
+  void initState() {
+    super.initState();
+    _composer.addListener(() {
+      final hasText = _composer.text.trim().isNotEmpty;
+      if (hasText != _hasText) {
+        setState(() => _hasText = hasText);
+      }
+    });
+  }
 
   @override
   void didChangeDependencies() {
@@ -132,7 +283,11 @@ class _ChannelMessagesState extends State<_ChannelMessages> {
   void _jump() {
     WidgetsBinding.instance.addPostFrameCallback((_) {
       if (_scroll.hasClients) {
-        _scroll.jumpTo(_scroll.position.maxScrollExtent);
+        _scroll.animateTo(
+          _scroll.position.maxScrollExtent,
+          duration: const Duration(milliseconds: 250),
+          curve: Curves.easeOut,
+        );
       }
     });
   }
@@ -152,85 +307,543 @@ class _ChannelMessagesState extends State<_ChannelMessages> {
     super.dispose();
   }
 
+  String _formatTime(String rawDate) {
+    final dt = DateTime.tryParse(rawDate)?.toLocal();
+    if (dt == null) return rawDate;
+    final hour = dt.hour.toString().padLeft(2, '0');
+    final minute = dt.minute.toString().padLeft(2, '0');
+    return '$hour:$minute';
+  }
+
+  String _formatDateHeader(DateTime date) {
+    final now = DateTime.now();
+    final today = DateTime(now.year, now.month, now.day);
+    final messageDate = DateTime(date.year, date.month, date.day);
+
+    if (messageDate == today) {
+      return 'HEUTE';
+    } else if (messageDate == today.subtract(const Duration(days: 1))) {
+      return 'GESTERN';
+    } else {
+      final d = date.day.toString().padLeft(2, '0');
+      final m = date.month.toString().padLeft(2, '0');
+      return '$d.$m.${date.year}';
+    }
+  }
+
+  bool _isSameDay(DateTime a, DateTime b) {
+    return a.year == b.year && a.month == b.month && a.day == b.day;
+  }
+
+  Color _getSenderColor(String id) {
+    final colors = [
+      const Color(0xFF1E88E5),
+      const Color(0xFFE53935),
+      const Color(0xFF8E24AA),
+      const Color(0xFF3949AB),
+      const Color(0xFF00897B),
+      const Color(0xFFD81B60),
+      const Color(0xFFFB8C00),
+      const Color(0xFF43A047),
+    ];
+    var hash = 0;
+    for (var i = 0; i < id.length; i++) {
+      hash = (hash * 31 + id.codeUnitAt(i)) & 0x7FFFFFFF;
+    }
+    return colors[hash % colors.length];
+  }
+
   @override
   Widget build(BuildContext context) {
-    return Scaffold(
-      appBar: AppBar(
-        title: Text(widget.title),
-        bottom: PreferredSize(
-          preferredSize: const Size.fromHeight(18),
-          child: Text('WebSocket: $_wsStatus', style: const TextStyle(fontSize: 11)),
+    final identity = AppScope.of(context).identity;
+
+    return Theme(
+      data: Theme.of(context).copyWith(
+        appBarTheme: const AppBarTheme(
+          backgroundColor: WhatsAppColors.primary,
+          foregroundColor: Colors.white,
+          elevation: 1,
+          iconTheme: IconThemeData(color: Colors.white),
+          titleTextStyle: TextStyle(
+            color: Colors.white,
+            fontSize: 18,
+            fontWeight: FontWeight.w600,
+          ),
         ),
       ),
-      body: Column(
-        children: [
-          Expanded(child: _body(context)),
-          SafeArea(
-            top: false,
-            child: Padding(
-              padding: const EdgeInsets.all(8),
-              child: Row(
-                children: [
-                  Expanded(
-                    child: TextField(
-                      controller: _composer,
-                      onSubmitted: (_) => _send(),
-                      decoration: const InputDecoration(
-                        hintText: 'Nachricht…',
-                        border: OutlineInputBorder(),
-                        isDense: true,
+      child: Scaffold(
+        backgroundColor: WhatsAppColors.chatBackground,
+        appBar: AppBar(
+          titleSpacing: 0,
+          title: Row(
+            children: [
+              CircleAvatar(
+                radius: 19,
+                backgroundColor: Colors.white.withValues(alpha: 0.2),
+                child: Icon(widget.icon, color: Colors.white, size: 22),
+              ),
+              const SizedBox(width: 10),
+              Expanded(
+                child: Column(
+                  crossAxisAlignment: CrossAxisAlignment.start,
+                  mainAxisSize: MainAxisSize.min,
+                  children: [
+                    Text(
+                      widget.title,
+                      style: const TextStyle(
+                        fontSize: 16.5,
+                        fontWeight: FontWeight.w600,
+                        color: Colors.white,
                       ),
+                      maxLines: 1,
+                      overflow: TextOverflow.ellipsis,
                     ),
-                  ),
-                  IconButton(icon: const Icon(Icons.send), onPressed: _send),
-                ],
+                    const SizedBox(height: 1),
+                    Text(
+                      _wsStatus == 'verbunden' || _wsStatus == 'connected'
+                          ? 'online'
+                          : _wsStatus,
+                      style: TextStyle(
+                        fontSize: 11.5,
+                        color: Colors.white.withValues(alpha: 0.85),
+                        fontWeight: FontWeight.normal,
+                      ),
+                      maxLines: 1,
+                      overflow: TextOverflow.ellipsis,
+                    ),
+                  ],
+                ),
+              ),
+            ],
+          ),
+          actions: [
+            IconButton(
+              icon: const Icon(Icons.videocam_rounded),
+              tooltip: 'Videoanruf',
+              onPressed: () {},
+            ),
+            IconButton(
+              icon: const Icon(Icons.call_rounded),
+              tooltip: 'Anruf',
+              onPressed: () {},
+            ),
+            IconButton(
+              icon: const Icon(Icons.more_vert),
+              tooltip: 'Optionen',
+              onPressed: () {},
+            ),
+          ],
+        ),
+        body: Stack(
+          children: [
+            // WhatsApp Doodle Pattern Background
+            Positioned.fill(
+              child: CustomPaint(
+                painter: _WhatsAppDoodlePainter(),
               ),
             ),
-          ),
-        ],
+            // Chat Content
+            Column(
+              children: [
+                Expanded(child: _buildMessagesList(context, identity)),
+                _buildComposer(context),
+              ],
+            ),
+          ],
+        ),
       ),
     );
   }
 
-  Widget _body(BuildContext context) {
-    if (_loading) return const Center(child: CircularProgressIndicator());
+  Widget _buildMessagesList(BuildContext context, Identity? identity) {
+    if (_loading) {
+      return const Center(
+        child: CircularProgressIndicator(color: WhatsAppColors.primary),
+      );
+    }
     if (_loadError != null) {
       return Center(
         child: Padding(
           padding: const EdgeInsets.all(24),
-          child: Text(_loadError!, textAlign: TextAlign.center),
+          child: Column(
+            mainAxisSize: MainAxisSize.min,
+            children: [
+              const Icon(Icons.error_outline, size: 48, color: Colors.redAccent),
+              const SizedBox(height: 12),
+              Text(_loadError!, textAlign: TextAlign.center),
+            ],
+          ),
         ),
       );
     }
     if (_messages.isEmpty) {
-      return const Center(child: Text('Noch keine Nachrichten.'));
-    }
-    return ListView.builder(
-      controller: _scroll,
-      padding: const EdgeInsets.all(12),
-      itemCount: _messages.length,
-      itemBuilder: (context, i) {
-        final m = _messages[i];
-        return Align(
-          alignment: Alignment.centerLeft,
-          child: Container(
-            margin: const EdgeInsets.only(bottom: 8),
-            padding: const EdgeInsets.all(10),
-            decoration: BoxDecoration(
-              color: Theme.of(context).colorScheme.surfaceContainerHighest,
-              borderRadius: BorderRadius.circular(10),
+      return Center(
+        child: Container(
+          padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
+          decoration: BoxDecoration(
+            color: WhatsAppColors.dateBadgeBg,
+            borderRadius: BorderRadius.circular(8),
+            boxShadow: const [
+              BoxShadow(
+                color: Color(0x14000000),
+                blurRadius: 3,
+                offset: Offset(0, 1),
+              ),
+            ],
+          ),
+          child: const Text(
+            'Nachrichten sind durch End-to-End-Verschlüsselung geschützt.',
+            textAlign: TextAlign.center,
+            style: TextStyle(
+              fontSize: 12,
+              color: WhatsAppColors.dateBadgeText,
+              fontWeight: FontWeight.w500,
             ),
+          ),
+        ),
+      );
+    }
+
+    final items = <Widget>[];
+    DateTime? lastDate;
+
+    for (var i = 0; i < _messages.length; i++) {
+      final m = _messages[i];
+      final msgDate = DateTime.tryParse(m.createdAt)?.toLocal();
+
+      // Insert date divider if day changed
+      if (msgDate != null && (lastDate == null || !_isSameDay(lastDate, msgDate))) {
+        items.add(_buildDateHeader(_formatDateHeader(msgDate)));
+        lastDate = msgDate;
+      }
+
+      final isMe = (identity?.kind == SessionKind.user &&
+              m.senderUserId != null &&
+              m.senderUserId == identity?.userId) ||
+          (identity?.kind == SessionKind.guest &&
+              m.senderGuestId != null &&
+              m.senderGuestId == identity?.guestId);
+
+      items.add(_buildMessageBubble(m, isMe));
+    }
+
+    return ListView(
+      controller: _scroll,
+      padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 8),
+      children: items,
+    );
+  }
+
+  Widget _buildDateHeader(String text) {
+    return Center(
+      child: Container(
+        margin: const EdgeInsets.symmetric(vertical: 8),
+        padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 5),
+        decoration: BoxDecoration(
+          color: WhatsAppColors.dateBadgeBg,
+          borderRadius: BorderRadius.circular(7.5),
+          boxShadow: const [
+            BoxShadow(
+              color: Color(0x10000000),
+              blurRadius: 2,
+              offset: Offset(0, 1),
+            ),
+          ],
+        ),
+        child: Text(
+          text,
+          style: const TextStyle(
+            fontSize: 11.5,
+            fontWeight: FontWeight.w600,
+            letterSpacing: 0.3,
+            color: WhatsAppColors.dateBadgeText,
+          ),
+        ),
+      ),
+    );
+  }
+
+  Widget _buildMessageBubble(ChatMessage m, bool isMe) {
+    final timeStr = _formatTime(m.createdAt);
+    final senderId = m.senderUserId ?? m.senderGuestId;
+    final showSender = !isMe && senderId != null;
+    final senderColor = showSender ? _getSenderColor(senderId) : Colors.black;
+
+    return Align(
+      alignment: isMe ? Alignment.centerRight : Alignment.centerLeft,
+      child: ConstrainedBox(
+        constraints: BoxConstraints(
+          maxWidth: MediaQuery.of(context).size.width * 0.78,
+          minWidth: 80,
+        ),
+        child: Container(
+          margin: const EdgeInsets.only(bottom: 4, top: 2),
+          decoration: BoxDecoration(
+            color: isMe ? WhatsAppColors.outgoingBubble : WhatsAppColors.incomingBubble,
+            borderRadius: BorderRadius.only(
+              topLeft: const Radius.circular(12),
+              topRight: const Radius.circular(12),
+              bottomLeft: isMe ? const Radius.circular(12) : const Radius.circular(2),
+              bottomRight: isMe ? const Radius.circular(2) : const Radius.circular(12),
+            ),
+            boxShadow: const [
+              BoxShadow(
+                color: Color(0x18000000),
+                blurRadius: 2,
+                offset: Offset(0, 1),
+              ),
+            ],
+          ),
+          child: Padding(
+            padding: const EdgeInsets.only(left: 10, right: 10, top: 6, bottom: 6),
             child: Column(
               crossAxisAlignment: CrossAxisAlignment.start,
+              mainAxisSize: MainAxisSize.min,
               children: [
-                Text(m.body),
-                const SizedBox(height: 2),
-                Text(m.createdAt, style: Theme.of(context).textTheme.labelSmall),
+                if (showSender) ...[
+                  Text(
+                    m.senderGuestId != null ? 'Konfi / Gast' : 'Teamer / Leitung',
+                    style: TextStyle(
+                      fontSize: 12.5,
+                      fontWeight: FontWeight.w700,
+                      color: senderColor,
+                    ),
+                  ),
+                  const SizedBox(height: 2),
+                ],
+                Wrap(
+                  alignment: WrapAlignment.end,
+                  crossAxisAlignment: WrapCrossAlignment.bottom,
+                  spacing: 8,
+                  runSpacing: 2,
+                  children: [
+                    Text(
+                      m.body,
+                      style: const TextStyle(
+                        fontSize: 15,
+                        color: WhatsAppColors.textPrimary,
+                        height: 1.25,
+                      ),
+                    ),
+                    Padding(
+                      padding: const EdgeInsets.only(top: 4),
+                      child: Row(
+                        mainAxisSize: MainAxisSize.min,
+                        children: [
+                          Text(
+                            timeStr,
+                            style: const TextStyle(
+                              fontSize: 10.5,
+                              color: WhatsAppColors.textSecondary,
+                            ),
+                          ),
+                          if (isMe) ...[
+                            const SizedBox(width: 3),
+                            const Icon(
+                              Icons.done_all_rounded,
+                              size: 15,
+                              color: WhatsAppColors.checkmarkBlue,
+                            ),
+                          ],
+                        ],
+                      ),
+                    ),
+                  ],
+                ),
               ],
             ),
           ),
-        );
-      },
+        ),
+      ),
+    );
+  }
+
+  Widget _buildComposer(BuildContext context) {
+    return SafeArea(
+      top: false,
+      child: Padding(
+        padding: const EdgeInsets.symmetric(horizontal: 6, vertical: 6),
+        child: Row(
+          crossAxisAlignment: CrossAxisAlignment.end,
+          children: [
+            Expanded(
+              child: Container(
+                decoration: BoxDecoration(
+                  color: Colors.white,
+                  borderRadius: BorderRadius.circular(24),
+                  boxShadow: const [
+                    BoxShadow(
+                      color: Color(0x14000000),
+                      blurRadius: 3,
+                      offset: Offset(0, 1),
+                    ),
+                  ],
+                ),
+                child: Row(
+                  crossAxisAlignment: CrossAxisAlignment.end,
+                  children: [
+                    IconButton(
+                      icon: const Icon(Icons.emoji_emotions_outlined),
+                      color: WhatsAppColors.iconMuted,
+                      splashRadius: 20,
+                      onPressed: () {},
+                    ),
+                    Expanded(
+                      child: TextField(
+                        controller: _composer,
+                        minLines: 1,
+                        maxLines: 5,
+                        textCapitalization: TextCapitalization.sentences,
+                        decoration: const InputDecoration(
+                          hintText: 'Nachricht',
+                          hintStyle: TextStyle(
+                            color: WhatsAppColors.textSecondary,
+                            fontSize: 15.5,
+                          ),
+                          border: InputBorder.none,
+                          isDense: true,
+                          contentPadding: EdgeInsets.symmetric(vertical: 11, horizontal: 4),
+                        ),
+                        onSubmitted: (_) => _send(),
+                      ),
+                    ),
+                    IconButton(
+                      icon: const Icon(Icons.attach_file_rounded),
+                      color: WhatsAppColors.iconMuted,
+                      splashRadius: 20,
+                      onPressed: () {},
+                    ),
+                    if (!_hasText)
+                      IconButton(
+                        icon: const Icon(Icons.camera_alt_rounded),
+                        color: WhatsAppColors.iconMuted,
+                        splashRadius: 20,
+                        onPressed: () {},
+                      ),
+                  ],
+                ),
+              ),
+            ),
+            const SizedBox(width: 6),
+            Container(
+              decoration: const BoxDecoration(
+                color: WhatsAppColors.accent,
+                shape: BoxShape.circle,
+                boxShadow: [
+                  BoxShadow(
+                    color: Color(0x28000000),
+                    blurRadius: 4,
+                    offset: Offset(0, 2),
+                  ),
+                ],
+              ),
+              child: IconButton(
+                icon: Icon(_hasText ? Icons.send_rounded : Icons.mic_rounded),
+                color: Colors.white,
+                splashRadius: 24,
+                onPressed: _send,
+              ),
+            ),
+          ],
+        ),
+      ),
     );
   }
 }
+
+/// Custom painter for the iconic subtle WhatsApp background doodle canvas.
+class _WhatsAppDoodlePainter extends CustomPainter {
+  @override
+  void paint(Canvas canvas, Size size) {
+    final paint = Paint()
+      ..color = const Color(0xFF4A6B82).withValues(alpha: 0.05)
+      ..style = PaintingStyle.stroke
+      ..strokeWidth = 1.3;
+
+    final fillPaint = Paint()
+      ..color = const Color(0xFF4A6B82).withValues(alpha: 0.035)
+      ..style = PaintingStyle.fill;
+
+    const spacing = 75.0;
+    final rows = (size.height / spacing).ceil() + 1;
+    final cols = (size.width / spacing).ceil() + 1;
+
+    for (var r = 0; r < rows; r++) {
+      for (var c = 0; c < cols; c++) {
+        final x = c * spacing + ((r % 2 == 1) ? spacing / 2 : 0);
+        final y = r * spacing;
+        final type = (r * 7 + c * 11) % 6;
+
+        canvas.save();
+        canvas.translate(x, y);
+
+        switch (type) {
+          case 0: // Chat bubble doodle
+            final rrect = RRect.fromRectAndRadius(
+              const Rect.fromLTWH(-10, -8, 20, 16),
+              const Radius.circular(5),
+            );
+            canvas.drawRRect(rrect, fillPaint);
+            canvas.drawRRect(rrect, paint);
+            break;
+          case 1: // Small Star
+            final path = Path();
+            for (var i = 0; i < 5; i++) {
+              final angle = i * 4 * math.pi / 5 - math.pi / 2;
+              final px = 8 * math.cos(angle);
+              final py = 8 * math.sin(angle);
+              if (i == 0) {
+                path.moveTo(px, py);
+              } else {
+                path.lineTo(px, py);
+              }
+            }
+            path.close();
+            canvas.drawPath(path, fillPaint);
+            canvas.drawPath(path, paint);
+            break;
+          case 2: // Heart doodle
+            final path = Path();
+            path.moveTo(0, 4);
+            path.cubicTo(-6, -2, -10, -8, 0, -10);
+            path.cubicTo(10, -8, 6, -2, 0, 4);
+            canvas.drawPath(path, fillPaint);
+            canvas.drawPath(path, paint);
+            break;
+          case 3: // Musical note
+            canvas.drawCircle(const Offset(-4, 4), 3, fillPaint);
+            canvas.drawCircle(const Offset(-4, 4), 3, paint);
+            canvas.drawLine(const Offset(-1, 4), const Offset(-1, -6), paint);
+            canvas.drawLine(const Offset(-1, -6), const Offset(5, -4), paint);
+            break;
+          case 4: // Coffee / cup
+            final rrect = RRect.fromRectAndRadius(
+              const Rect.fromLTWH(-7, -5, 14, 12),
+              const Radius.circular(3),
+            );
+            canvas.drawRRect(rrect, fillPaint);
+            canvas.drawRRect(rrect, paint);
+            canvas.drawArc(
+              const Rect.fromLTWH(4, -3, 6, 6),
+              -math.pi / 2,
+              math.pi,
+              false,
+              paint,
+            );
+            break;
+          case 5: // Clock / circle
+            canvas.drawCircle(Offset.zero, 7, fillPaint);
+            canvas.drawCircle(Offset.zero, 7, paint);
+            canvas.drawLine(Offset.zero, const Offset(0, -4), paint);
+            canvas.drawLine(Offset.zero, const Offset(3, 0), paint);
+            break;
+        }
+
+        canvas.restore();
+      }
+    }
+  }
+
+  @override
+  bool shouldRepaint(covariant CustomPainter oldDelegate) => false;
+}
diff --git a/client/app/lib/screens/login_screen.dart b/client/app/lib/screens/login_screen.dart
index 44c7add..fc9c2d7 100644
--- a/client/app/lib/screens/login_screen.dart
+++ b/client/app/lib/screens/login_screen.dart
@@ -172,14 +172,19 @@ class _KonfiOrLeitungsteamSectionState extends State<_KonfiOrLeitungsteamSection
 
   bool get _isLeitungsteamCode {
     final c = _code.text.trim();
-    return c.length > 2 && c.toUpperCase().endsWith('LT');
+    final upper = c.toUpperCase();
+    final lower = c.toLowerCase();
+    return upper == 'LT' || (c.length > 2 && upper.endsWith('LT')) || lower == 'login' || lower == 'sso';
   }
 
   /// The KC-Code with a trailing "LT" trigger stripped back off, so
   /// "ABC123LT" still resolves to the real invite code "ABC123".
   String get _plainCode {
     final c = _code.text.trim();
-    return _isLeitungsteamCode ? c.substring(0, c.length - 2) : c;
+    if (c.toUpperCase() == 'LT' || c.toLowerCase() == 'login' || c.toLowerCase() == 'sso') return '';
+    return (c.length > 2 && c.toUpperCase().endsWith('LT'))
+        ? c.substring(0, c.length - 2)
+        : c;
   }
 
   @override
@@ -196,8 +201,8 @@ class _KonfiOrLeitungsteamSectionState extends State<_KonfiOrLeitungsteamSection
         ),
         const SizedBox(height: 4),
         Text(
-          'Konfi: gib deinen KC-Code ein. Leitungsteam: hänge "LT" an den '
-          'Code an (z. B. "ABC123LT").',
+          'Konfi: gib deinen KC-Code ein. Leitungsteam: gib "LT" ein oder hänge "LT" an den '
+          'Code an (z. B. "LT" oder "ABC123LT").',
           style: Theme.of(context).textTheme.bodySmall,
         ),
         const SizedBox(height: 16),
diff --git a/client/web/app.js b/client/web/app.js
index 299bbea..230d356 100644
--- a/client/web/app.js
+++ b/client/web/app.js
@@ -1,14 +1,139 @@
+/// KC-App Web-Client — App-Shell im JKT-Stil, Konfi-Castle-Farben.
+/// Vanilla JS, kein Build-Step; wird direkt vom NestJS-Backend ausgeliefert.
+
 const state = {
   token: null,
   kcId: null,
   whoami: null,
   socket: null,
   activeChannelId: null,
+  activeChannelType: null,
+  channels: [],
   pickedUsers: new Set(),
   pickedGuests: new Set(),
+  currentScreen: 'home',
 };
 
+/// ═══════════ Authentik OIDC (Authorization Code + PKCE) ═══════════
+/// Mirrors the Flutter client's oidc.dart: public client, PKCE, no secret.
+/// Defaults match the production Authentik app; override via window.__KC_OIDC__
+/// (e.g. set in a small inline <script> before app.js, per environment).
+const OIDC = Object.assign(
+  {
+    issuer: 'https://sso.konfi-castle.com/application/o/konfi-castle-app/',
+    clientId: 'K7f9mn6bP6jSjZDMYuiZCXMeVmVcqFcYNj0blJk9',
+    redirectUri: `${location.origin}/v1/auth/callback`,
+    scope: 'openid profile email groups offline_access',
+  },
+  window.__KC_OIDC__ || {},
+);
+
+function base64UrlEncode(bytes) {
+  let binary = '';
+  for (const b of bytes) binary += String.fromCharCode(b);
+  return btoa(binary).replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/, '');
+}
+
+function randomUrlToken(length) {
+  const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789-._~';
+  const bytes = crypto.getRandomValues(new Uint8Array(length));
+  return Array.from(bytes, (b) => chars[b % chars.length]).join('');
+}
+
+async function sha256Base64Url(text) {
+  const digest = await crypto.subtle.digest('SHA-256', new TextEncoder().encode(text));
+  return base64UrlEncode(new Uint8Array(digest));
+}
+
+let oidcDiscoveryCache = null;
+async function oidcDiscovery() {
+  if (oidcDiscoveryCache) return oidcDiscoveryCache;
+  const base = OIDC.issuer.endsWith('/') ? OIDC.issuer : `${OIDC.issuer}/`;
+  const res = await fetch(`${base}.well-known/openid-configuration`);
+  if (!res.ok) throw new Error(`OIDC discovery failed (${res.status})`);
+  oidcDiscoveryCache = await res.json();
+  return oidcDiscoveryCache;
+}
+
+async function beginAuthentikLogin() {
+  setStatus($('login-status'), 'Weiterleitung zu Authentik…');
+  const disc = await oidcDiscovery();
+  const verifier = randomUrlToken(64);
+  const oidcState = randomUrlToken(24);
+  const challenge = await sha256Base64Url(verifier);
+  sessionStorage.setItem('kc_oidc_verifier', verifier);
+  sessionStorage.setItem('kc_oidc_state', oidcState);
+
+  const url = new URL(disc.authorization_endpoint);
+  url.search = new URLSearchParams({
+    response_type: 'code',
+    client_id: OIDC.clientId,
+    redirect_uri: OIDC.redirectUri,
+    scope: OIDC.scope,
+    state: oidcState,
+    code_challenge: challenge,
+    code_challenge_method: 'S256',
+  }).toString();
+  location.href = url.toString();
+}
+
+/// If the current URL is the OIDC callback (?code=…), exchanges the code
+/// for tokens and logs in. Returns true if this load was a callback.
+async function completeAuthentikCallbackIfPresent() {
+  const params = new URLSearchParams(location.search);
+  const code = params.get('code');
+  if (!code) {
+    if (params.get('error')) {
+      history.replaceState({}, '', location.pathname);
+      setStatus($('login-status'), `Authentik: ${params.get('error_description') || params.get('error')}`, 'error');
+    }
+    return false;
+  }
+
+  const expectedState = sessionStorage.getItem('kc_oidc_state');
+  const verifier = sessionStorage.getItem('kc_oidc_verifier');
+  sessionStorage.removeItem('kc_oidc_state');
+  sessionStorage.removeItem('kc_oidc_verifier');
+  history.replaceState({}, '', location.pathname);
+
+  if (!verifier || params.get('state') !== expectedState) {
+    setStatus($('login-status'), 'State-Mismatch — bitte erneut anmelden.', 'error');
+    return true;
+  }
+
+  setStatus($('login-status'), 'Token wird abgerufen…');
+  try {
+    const disc = await oidcDiscovery();
+    const res = await fetch(disc.token_endpoint, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
+      body: new URLSearchParams({
+        grant_type: 'authorization_code',
+        code,
+        redirect_uri: OIDC.redirectUri,
+        client_id: OIDC.clientId,
+        code_verifier: verifier,
+      }).toString(),
+    });
+    if (!res.ok) throw new Error(`Token-Exchange fehlgeschlagen (${res.status})`);
+    const tokens = await res.json();
+
+    const pendingInviteToken = sessionStorage.getItem('kc_pending_verantw_invite_token');
+    sessionStorage.removeItem('kc_pending_verantw_invite_token');
+    if (pendingInviteToken) {
+      await redeemVerantwortlicheInvite(tokens.access_token, pendingInviteToken);
+    }
+
+    await onLoggedIn(tokens.access_token);
+  } catch (err) {
+    setStatus($('login-status'), err.message || 'Anmeldung fehlgeschlagen.', 'error');
+  }
+  return true;
+}
+
 const $ = (id) => document.getElementById(id);
+const qs = (sel, root = document) => root.querySelector(sel);
+const qsa = (sel, root = document) => Array.from(root.querySelectorAll(sel));
 
 function decodeJwtPayload(token) {
   try {
@@ -20,18 +145,20 @@ function decodeJwtPayload(token) {
 }
 
 function setStatus(el, message, kind) {
+  if (!el) return;
   el.textContent = message;
   el.classList.remove('status-ok', 'status-error');
   if (kind === 'ok') el.classList.add('status-ok');
   if (kind === 'error') el.classList.add('status-error');
 }
 
-function setConnBadge(online) {
-  const badge = $('conn-badge');
-  if (!badge) return;
-  badge.textContent = online ? 'angemeldet' : 'nicht angemeldet';
-  badge.classList.toggle('badge-online', online);
-  badge.classList.toggle('badge-muted', !online);
+function showToast(message) {
+  const el = $('toast');
+  if (!el) return;
+  el.textContent = message;
+  el.hidden = false;
+  clearTimeout(showToast._t);
+  showToast._t = setTimeout(() => { el.hidden = true; }, 2600);
 }
 
 function clearList(listEl, emptyMessage) {
@@ -44,6 +171,10 @@ function clearList(listEl, emptyMessage) {
   }
 }
 
+function initials(firstName, lastName) {
+  return `${(firstName || '?')[0] || '?'}${(lastName || '')[0] || ''}`.toUpperCase();
+}
+
 async function apiFetch(path, options = {}) {
   const headers = Object.assign({}, options.headers);
   if (state.token) headers.Authorization = `Bearer ${state.token}`;
@@ -51,21 +182,103 @@ async function apiFetch(path, options = {}) {
   return fetch(`/api${path}`, Object.assign({}, options, { headers }));
 }
 
-/// --- Tabs (Gast / Team-Login) ---
-document.querySelectorAll('.tab-btn').forEach((btn) => {
-  btn.addEventListener('click', () => {
-    document.querySelectorAll('.tab-btn').forEach((b) => b.classList.remove('active'));
-    document.querySelectorAll('.tab-panel').forEach((p) => (p.hidden = true));
-    btn.classList.add('active');
-    const panel = document.querySelector(`[data-panel="${btn.dataset.tab}"]`);
-    if (panel) panel.hidden = false;
-  });
+/// ═══════════ Login: unified code entry ═══════════
+let resolvedCode = null;
+
+$('code-form').addEventListener('submit', async (event) => {
+  event.preventDefault();
+  const code = $('login-code').value.trim();
+  if (!code) return;
+
+  setStatus($('login-status'), 'Wird geprüft…');
+  let res;
+  try {
+    res = await apiFetch('/auth/resolve-code', { method: 'POST', body: JSON.stringify({ code }) });
+  } catch {
+    setStatus($('login-status'), 'Netzwerkfehler. Bitte erneut versuchen.', 'error');
+    return;
+  }
+
+  if (!res.ok) {
+    setStatus($('login-status'), 'Code ungültig.', 'error');
+    return;
+  }
+
+  resolvedCode = await res.json();
+  resolvedCode.rawCode = code;
+  setStatus($('login-status'), '');
+  showFollowUpForm(resolvedCode);
 });
 
-/// --- Login: Gast/Konfi ---
+function hideAllLoginForms() {
+  $('code-form').hidden = true;
+  $('guest-form').hidden = true;
+  $('team-form').hidden = true;
+  $('teamer-invite-form').hidden = true;
+  $('sso-panel').hidden = true;
+  $('verantw-invite-panel').hidden = true;
+}
+
+function showCodeForm() {
+  hideAllLoginForms();
+  $('code-form').hidden = false;
+  resolvedCode = null;
+  $('login-code').value = '';
+  setStatus($('login-status'), '');
+  $('login-code').focus();
+}
+
+qsa('.back-btn').forEach((btn) => btn.addEventListener('click', showCodeForm));
+
+function showFollowUpForm(resolved) {
+  hideAllLoginForms();
+  switch (resolved.kind) {
+    case 'guest':
+      $('guest-form-hint').textContent = `Konfi-/Gast-Zugang für "${resolved.kcName}"`;
+      $('guest-form').hidden = false;
+      break;
+    case 'team_login':
+      $('team-form-hint').textContent = resolved.identifierType === 'email'
+        ? 'Team-Login per E-Mail'
+        : `Team-Login für Gemeinde "${resolved.gemeindeName}"`;
+      $('team-form').hidden = false;
+      break;
+    case 'teamer_invite':
+      $('teamer-invite-hint').textContent = `Einladung als Teamer für "${resolved.gemeindeName}" (${resolved.kcName})`;
+      if (resolved.pinnedEmail) {
+        $('ti-email').value = resolved.pinnedEmail;
+        $('ti-email-label').hidden = true;
+      } else {
+        $('ti-email-label').hidden = false;
+        $('ti-email').value = '';
+      }
+      $('teamer-invite-form').hidden = false;
+      break;
+    case 'verantwortliche_invite':
+      $('verantw-invite-hint').textContent = `Einladung als Verantwortliche/r für "${resolved.gemeindeName}" (${resolved.kcName})`;
+      $('verantw-invite-panel').hidden = false;
+      break;
+    case 'sso':
+      $('sso-panel').hidden = false;
+      break;
+    default:
+      showCodeForm();
+  }
+}
+
+$('authentik-login-btn').addEventListener('click', () => {
+  beginAuthentikLogin().catch((err) => setStatus($('login-status'), err.message || 'Fehler.', 'error'));
+});
+
+$('verantw-invite-login-btn').addEventListener('click', () => {
+  sessionStorage.setItem('kc_pending_verantw_invite_token', resolvedCode?.rawCode || '');
+  beginAuthentikLogin().catch((err) => setStatus($('login-status'), err.message || 'Fehler.', 'error'));
+});
+
+/// ═══════════ Login: Gast/Konfi (after code resolved to "guest") ═══════════
 $('guest-form').addEventListener('submit', async (event) => {
   event.preventDefault();
-  const inviteCode = $('invite-code').value;
+  const inviteCode = resolvedCode?.rawCode;
   const firstName = $('first-name').value;
   const lastName = $('last-name').value;
 
@@ -77,7 +290,7 @@ $('guest-form').addEventListener('submit', async (event) => {
       method: 'POST',
       body: JSON.stringify({ inviteCode, firstName, lastName }),
     });
-  } catch (err) {
+  } catch {
     setStatus($('login-status'), 'Netzwerkfehler. Bitte erneut versuchen.', 'error');
     return;
   }
@@ -91,21 +304,20 @@ $('guest-form').addEventListener('submit', async (event) => {
   await onLoggedIn(accessToken);
 });
 
-/// --- Login: Team (Gemeinde-Name + Passwort) ---
+/// ═══════════ Login: Team (after code resolved to "team_login") ═══════════
 $('team-form').addEventListener('submit', async (event) => {
   event.preventDefault();
-  const gemeindeName = $('team-gemeinde').value;
   const password = $('team-password').value;
+  const payload = resolvedCode?.identifierType === 'email'
+    ? { email: resolvedCode.rawCode, password }
+    : { gemeindeName: resolvedCode?.gemeindeName || resolvedCode?.rawCode, password };
 
   setStatus($('login-status'), 'Wird geprüft…');
 
   let res;
   try {
-    res = await apiFetch('/auth/team-login', {
-      method: 'POST',
-      body: JSON.stringify({ gemeindeName, password }),
-    });
-  } catch (err) {
+    res = await apiFetch('/auth/team-login', { method: 'POST', body: JSON.stringify(payload) });
+  } catch {
     setStatus($('login-status'), 'Netzwerkfehler. Bitte erneut versuchen.', 'error');
     return;
   }
@@ -119,13 +331,60 @@ $('team-form').addEventListener('submit', async (event) => {
   await onLoggedIn(accessToken);
 });
 
+/// ═══════════ Login: Teamer-Invite redemption (after code resolved to "teamer_invite") ═══════════
+$('teamer-invite-form').addEventListener('submit', async (event) => {
+  event.preventDefault();
+  const firstName = $('ti-first-name').value.trim();
+  const lastName = $('ti-last-name').value.trim();
+  const email = $('ti-email').value.trim();
+  const password = $('ti-password').value;
+
+  setStatus($('login-status'), 'Konto wird erstellt…');
+
+  let res;
+  try {
+    res = await apiFetch('/auth/teamer/register', {
+      method: 'POST',
+      body: JSON.stringify({
+        token: resolvedCode?.rawCode,
+        firstName,
+        lastName,
+        password,
+        email: email || undefined,
+      }),
+    });
+  } catch {
+    setStatus($('login-status'), 'Netzwerkfehler. Bitte erneut versuchen.', 'error');
+    return;
+  }
+
+  if (!res.ok) {
+    setStatus($('login-status'), `Fehler: ${res.status}`, 'error');
+    return;
+  }
+
+  const { accessToken } = await res.json();
+  await onLoggedIn(accessToken);
+});
+
+/// If an Authentik redirect was pending a Verantwortliche-invite redemption,
+/// finishes that here (best-effort; login still succeeds either way).
+async function redeemVerantwortlicheInvite(accessToken, inviteToken) {
+  try {
+    await fetch(`/api/onboarding/verantwortliche-invites/${encodeURIComponent(inviteToken)}/redeem`, {
+      method: 'POST',
+      headers: { Authorization: `Bearer ${accessToken}` },
+    });
+  } catch {
+    // best-effort; the user is still logged in even if redemption failed
+  }
+}
+
 async function onLoggedIn(accessToken) {
   state.token = accessToken;
   const claims = decodeJwtPayload(accessToken);
   state.kcId = claims?.kcId ?? null;
 
-  // Fetch identity/role from the API so the UI can show role-appropriate
-  // sections (Gruppenchat creation is LT/Verantwortliche/r only).
   let me = null;
   try {
     const res = await apiFetch('/auth/me');
@@ -134,42 +393,16 @@ async function onLoggedIn(accessToken) {
     // best-effort
   }
   state.whoami = me;
-
-  setStatus($('login-status'), 'Angemeldet.', 'ok');
-  setConnBadge(true);
-  $('login-section').hidden = true;
-  $('app-section').hidden = false;
-  renderWhoAmI();
-}
-
-function renderWhoAmI() {
-  const card = $('whoami-card');
-  const text = $('whoami-text');
-  const gruppenCard = $('gruppen-card');
-  const manageCard = $('manage-card');
-
-  if (!state.whoami) {
-    card.hidden = true;
-    gruppenCard.hidden = true;
-    manageCard.hidden = true;
-    return;
+  if (!state.kcId && me?.kind === 'user' && me.memberships?.length) {
+    state.kcId = me.memberships.find((m) => m.kcId !== '*')?.kcId ?? null;
   }
 
-  card.hidden = false;
-  if (state.whoami.kind === 'guest') {
-    text.textContent = `Konfi/Gast (KC ${state.whoami.kcId})`;
-    gruppenCard.hidden = true;
-    manageCard.hidden = true;
-  } else {
-    const roles = (state.whoami.memberships || []).map((m) => m.role).join(', ') || 'keine Rolle';
-    text.textContent = `${state.whoami.email} — ${roles}`;
-    const canManageGruppen =
-      state.whoami.isLeitungsteam ||
-      (state.whoami.memberships || []).some((m) => m.role === 'GEMEINDE_VERANTWORTLICHER');
-    gruppenCard.hidden = !canManageGruppen;
-    manageCard.hidden = !canManageGruppen;
-    if (state.kcId) $('gruppe-kcid').value = state.kcId;
-  }
+  setStatus($('login-status'), '');
+  $('login-screen').hidden = true;
+  $('shell').hidden = false;
+  renderShellForRole();
+  switchScreen('home');
+  loadHomeDashboard();
 }
 
 $('logout-btn').addEventListener('click', () => {
@@ -178,23 +411,321 @@ $('logout-btn').addEventListener('click', () => {
   state.kcId = null;
   state.whoami = null;
   state.activeChannelId = null;
-  setConnBadge(false);
-  $('app-section').hidden = true;
-  $('login-section').hidden = false;
-  setStatus($('login-status'), '');
+  $('shell').hidden = true;
+  $('login-screen').hidden = false;
+  showCodeForm();
+  $('team-form').reset();
+  $('guest-form').reset();
+  $('teamer-invite-form').reset();
 });
 
-/// --- Gruppenchat: Kandidaten laden + auswählen ---
+/// ═══════════ Shell rendering (role-aware) ═══════════
+function renderShellForRole() {
+  const me = state.whoami;
+  const badge = $('conn-badge');
+  badge.textContent = 'online';
+  badge.classList.add('online');
+
+  if (!me) return;
+
+  const isGuest = me.kind === 'guest';
+  const isLt = !isGuest && me.isLeitungsteam;
+  const isVerantwortlicher = !isGuest && (me.memberships || []).some((m) => m.role === 'GEMEINDE_VERANTWORTLICHER');
+
+  $('hdr-sub').textContent = isGuest ? 'Konfi / Gast' : (me.email || '');
+  $('hdr-avatar').textContent = isGuest ? 'K' : initials(me.email?.[0], '');
+
+  // Home hero
+  $('home-greeting').textContent = isGuest ? 'Hallo, Konfi! 👋' : `Willkommen zurück! 👋`;
+  $('home-role-chip').textContent = isGuest
+    ? 'Konfi'
+    : (isLt ? 'Leitungsteam' : (me.memberships || []).map((m) => roleLabel(m.role)).join(', ') || 'Team');
+  $('home-kc-chip').textContent = state.kcId ? `KC ${state.kcId.slice(0, 8)}…` : 'kein KC';
+
+  // Profile
+  $('profile-av').textContent = isGuest ? 'K' : initials(me.email?.[0], '');
+  $('profile-name').textContent = isGuest ? 'Konfi / Gast' : (me.email || '–');
+  $('profile-role').textContent = isGuest
+    ? `Gast-Zugang (KC ${me.kcId || ''})`
+    : (isLt ? 'Leitungsteam' : (me.memberships || []).map((m) => roleLabel(m.role)).join(', '));
+  $('profile-kc-id').textContent = state.kcId || '–';
+
+  // Wahl tab view
+  $('wahl-guest-view').hidden = !isGuest;
+  $('wahl-lt-view').hidden = isGuest ? true : !isLt;
+
+  // Chat: Gruppenchat creation only for LT / Verantwortliche
+  $('gruppen-card').hidden = isGuest || !(isLt || isVerantwortlicher);
+}
+
+function roleLabel(role) {
+  return {
+    LEITUNGSTEAM: 'Leitungsteam',
+    GEMEINDE_VERANTWORTLICHER: 'Gemeinde-Verantwortliche/r',
+    GEMEINDE_TEAMER: 'Gemeinde-Teamer',
+  }[role] || role;
+}
+
+/// ═══════════ Bottom-Nav Tab Switching ═══════════
+qsa('.nb').forEach((btn) => {
+  btn.addEventListener('click', () => switchScreen(btn.dataset.screen));
+});
+
+function switchScreen(screenId) {
+  state.currentScreen = screenId;
+  qsa('.nb').forEach((b) => b.classList.toggle('on', b.dataset.screen === screenId));
+  qsa('.tab-screen').forEach((s) => (s.hidden = s.dataset.screen !== screenId));
+
+  if (screenId === 'wahl') loadWahlScreen();
+  if (screenId === 'chat') loadChannelsList();
+  if (screenId === 'files') loadFiles();
+}
+
+$('hdr-avatar').addEventListener('click', () => switchScreen('profile'));
+
+/// ═══════════ HOME dashboard ═══════════
+async function loadHomeDashboard() {
+  const me = state.whoami;
+  if (!me) return;
+  const isGuest = me.kind === 'guest';
+
+  // Wahl summary
+  try {
+    if (isGuest) {
+      const res = await apiFetch('/wahl/guest/overview');
+      if (res.ok) {
+        const { wahlen } = await res.json();
+        const open = wahlen?.length ?? 0;
+        const submitted = (wahlen || []).filter((w) => w.meinePrioritaeten).length;
+        $('home-wahl-summary').textContent = open
+          ? `${open} offene Wahl(en), davon ${submitted} bereits abgegeben.`
+          : 'Aktuell keine offenen Wahlen.';
+      } else {
+        $('home-wahl-summary').textContent = 'Keine Daten verfügbar.';
+      }
+    } else {
+      $('home-wahl-summary').textContent = 'Wahl-Verwaltung im Tab "Wahl" öffnen.';
+    }
+  } catch {
+    $('home-wahl-summary').textContent = 'Fehler beim Laden.';
+  }
+
+  // Chat summary
+  try {
+    if (state.kcId) {
+      const res = await apiFetch(`/chat/${state.kcId}/channels`);
+      if (res.ok) {
+        const channels = await res.json();
+        $('home-chat-summary').textContent = channels.length
+          ? `${channels.length} Chat(s) verfügbar.`
+          : 'Noch keine Chats.';
+      } else {
+        $('home-chat-summary').textContent = 'Keine Daten verfügbar.';
+      }
+    } else {
+      $('home-chat-summary').textContent = 'Kein KC zugeordnet.';
+    }
+  } catch {
+    $('home-chat-summary').textContent = 'Fehler beim Laden.';
+  }
+
+  // Files summary
+  try {
+    if (state.kcId) {
+      const res = await apiFetch(`/files/${state.kcId}`);
+      if (res.ok) {
+        const files = await res.json();
+        $('home-files-summary').textContent = files.length
+          ? `${files.length} Datei(en) für dich freigegeben.`
+          : 'Keine Dateien verfügbar.';
+      } else {
+        $('home-files-summary').textContent = 'Keine Daten verfügbar.';
+      }
+    } else {
+      $('home-files-summary').textContent = 'Kein KC zugeordnet.';
+    }
+  } catch {
+    $('home-files-summary').textContent = 'Fehler beim Laden.';
+  }
+}
+
+/// ═══════════ WAHL tab ═══════════
+async function loadWahlScreen() {
+  const me = state.whoami;
+  if (!me) return;
+  if (me.kind === 'guest') {
+    await loadGuestWahlOverview();
+  }
+}
+
+async function loadGuestWahlOverview() {
+  const container = $('wahl-list');
+  container.innerHTML = '<p class="status">Wird geladen…</p>';
+
+  let res;
+  try {
+    res = await apiFetch('/wahl/guest/overview');
+  } catch {
+    container.innerHTML = '<p class="status status-error">Netzwerkfehler.</p>';
+    return;
+  }
+  if (!res.ok) {
+    container.innerHTML = `<p class="status status-error">Fehler: ${res.status}</p>`;
+    return;
+  }
+
+  const { wahlen } = await res.json();
+  if (!wahlen || !wahlen.length) {
+    container.innerHTML = '<div class="empty"><div class="empty-icon">🗳️</div>Aktuell keine offenen Wahlen.</div>';
+    return;
+  }
+
+  container.innerHTML = '';
+  for (const wahl of wahlen) {
+    const card = document.createElement('div');
+    card.className = 'card card-blue';
+    const already = Array.isArray(wahl.meinePrioritaeten) && wahl.meinePrioritaeten.length > 0;
+
+    card.innerHTML = `
+      <div class="card-header">
+        <h2>${escapeHtml(wahl.name)} ${already ? '<span class="chip chip-green">abgegeben</span>' : ''}</h2>
+        <p class="card-hint">${escapeHtml(wahl.datumsSchluessel)} &middot; Teil ${escapeHtml(wahl.teil)}</p>
+      </div>
+      <div class="workshop-picker" data-wahl-id="${wahl.id}"></div>
+      <button class="btn btn-orange btn-full submit-wahl-btn" data-wahl-id="${wahl.id}">
+        ${already ? 'Wünsche aktualisieren' : 'Wünsche abgeben'}
+      </button>
+      <p class="status" data-status-for="${wahl.id}"></p>
+    `;
+    container.appendChild(card);
+    renderWorkshopPicker(card.querySelector('.workshop-picker'), wahl.workshops, wahl.meinePrioritaeten || []);
+  }
+
+  qsa('.submit-wahl-btn', container).forEach((btn) => {
+    btn.addEventListener('click', () => submitWahlChoice(btn.dataset.wahlId));
+  });
+}
+
+function renderWorkshopPicker(container, workshops, initialPriorities) {
+  const picked = [...initialPriorities];
+  container.dataset.picked = JSON.stringify(picked);
+
+  function render() {
+    container.innerHTML = '';
+    for (const ws of workshops) {
+      const rank = picked.indexOf(ws.id);
+      const item = document.createElement('div');
+      item.className = `workshop-item${rank >= 0 ? ' picked' : ''}`;
+      item.innerHTML = `
+        <span class="workshop-rank${rank >= 0 ? '' : ' empty'}">${rank >= 0 ? rank + 1 : ''}</span>
+        <span class="spacer">${escapeHtml(ws.name)}</span>
+        <span class="chip">Plätze: ${ws.kapazitaet}</span>
+      `;
+      item.addEventListener('click', () => {
+        const idx = picked.indexOf(ws.id);
+        if (idx >= 0) picked.splice(idx, 1);
+        else picked.push(ws.id);
+        container.dataset.picked = JSON.stringify(picked);
+        render();
+      });
+      container.appendChild(item);
+    }
+  }
+  render();
+}
+
+async function submitWahlChoice(wahlId) {
+  const picker = qs(`.workshop-picker[data-wahl-id="${wahlId}"]`);
+  const statusEl = qs(`[data-status-for="${wahlId}"]`);
+  const prioritaeten = JSON.parse(picker?.dataset.picked || '[]');
+
+  if (!prioritaeten.length) {
+    setStatus(statusEl, 'Bitte mindestens einen Workshop auswählen.', 'error');
+    return;
+  }
+
+  setStatus(statusEl, 'Wird gesendet…');
+  let res;
+  try {
+    res = await apiFetch(`/wahl/${wahlId}/teilnehmer`, {
+      method: 'POST',
+      body: JSON.stringify({ prioritaeten }),
+    });
+  } catch {
+    setStatus(statusEl, 'Netzwerkfehler.', 'error');
+    return;
+  }
+
+  if (res.ok) {
+    setStatus(statusEl, 'Gespeichert!', 'ok');
+    showToast('Wünsche gespeichert');
+  } else {
+    setStatus(statusEl, `Fehler: ${res.status}`, 'error');
+  }
+}
+
+/// ═══════════ WAHL tab: Leitungsteam view ═══════════
+$('lt-load-teilnehmer').addEventListener('click', async () => {
+  const wahlId = $('lt-wahl-id').value.trim();
+  if (!wahlId) return;
+
+  let res;
+  try {
+    res = await apiFetch(`/wahl/${wahlId}/teilnehmer`);
+  } catch {
+    setStatus($('wahl-lt-status'), 'Netzwerkfehler.', 'error');
+    return;
+  }
+  if (!res.ok) {
+    setStatus($('wahl-lt-status'), `Fehler: ${res.status}`, 'error');
+    return;
+  }
+
+  const teilnehmer = await res.json();
+  const list = $('lt-teilnehmer-list');
+  if (!teilnehmer.length) {
+    clearList(list, 'Keine Teilnehmer.');
+    return;
+  }
+  list.innerHTML = '';
+  for (const t of teilnehmer) {
+    const li = document.createElement('li');
+    li.textContent = `${t.name} — Wünsche: ${t.prioritaeten.length}${t.forcedWorkshopId ? ' (fest zugeteilt)' : ''}`;
+    list.appendChild(li);
+  }
+  setStatus($('wahl-lt-status'), `${teilnehmer.length} Teilnehmer geladen.`, 'ok');
+});
+
+$('lt-run-zuteilung').addEventListener('click', async () => {
+  const wahlId = $('lt-wahl-id').value.trim();
+  if (!wahlId) return;
+
+  setStatus($('wahl-lt-status'), 'Zuteilung läuft…');
+  let res;
+  try {
+    res = await apiFetch(`/wahl/${wahlId}/zuteilung/run`, { method: 'POST' });
+  } catch {
+    setStatus($('wahl-lt-status'), 'Netzwerkfehler.', 'error');
+    return;
+  }
+  if (res.ok) {
+    setStatus($('wahl-lt-status'), 'Zuteilung abgeschlossen.', 'ok');
+    showToast('Zuteilung durchgeführt');
+  } else {
+    setStatus($('wahl-lt-status'), `Fehler: ${res.status}`, 'error');
+  }
+});
+
+/// ═══════════ CHAT tab: Gruppenchat erstellen ═══════════
 $('load-candidates').addEventListener('click', async () => {
-  const kcId = $('gruppe-kcid').value.trim();
-  if (!kcId) {
-    setStatus($('gruppe-status'), 'Bitte KC-ID angeben.', 'error');
+  if (!state.kcId) {
+    setStatus($('gruppe-status'), 'Kein KC zugeordnet.', 'error');
     return;
   }
 
   let res;
   try {
-    res = await apiFetch(`/chat/${kcId}/gruppen/participant-candidates`);
+    res = await apiFetch(`/chat/${state.kcId}/gruppen/participant-candidates`);
   } catch {
     setStatus($('gruppe-status'), 'Netzwerkfehler beim Laden.', 'error');
     return;
@@ -207,7 +738,7 @@ $('load-candidates').addEventListener('click', async () => {
   const { users, guests } = await res.json();
   state.pickedUsers = new Set();
   state.pickedGuests = new Set();
-  renderCandidateList($('candidate-users'), users, 'userId', (u) => `${u.firstName} ${u.lastName} (${u.role})`, state.pickedUsers);
+  renderCandidateList($('candidate-users'), users, 'userId', (u) => `${u.firstName} ${u.lastName} (${roleLabel(u.role)})`, state.pickedUsers);
   renderCandidateList($('candidate-guests'), guests, 'guestId', (g) => `${g.firstName} ${g.lastName}`, state.pickedGuests);
   setStatus($('gruppe-status'), `${users.length} Team-Mitglieder, ${guests.length} Konfis geladen.`, 'ok');
 });
@@ -243,18 +774,16 @@ function renderCandidateList(listEl, items, idKey, labelFn, pickedSet) {
 }
 
 $('create-gruppe').addEventListener('click', async () => {
-  const kcId = $('gruppe-kcid').value.trim();
-  const name = $('gruppe-name').value.trim();
-  if (!kcId) {
-    setStatus($('gruppe-status'), 'Bitte KC-ID angeben.', 'error');
+  if (!state.kcId) {
+    setStatus($('gruppe-status'), 'Kein KC zugeordnet.', 'error');
     return;
   }
+  const name = $('gruppe-name').value.trim();
 
   setStatus($('gruppe-status'), 'Wird erstellt…');
-
   let res;
   try {
-    res = await apiFetch(`/chat/${kcId}/gruppen`, {
+    res = await apiFetch(`/chat/${state.kcId}/gruppen`, {
       method: 'POST',
       body: JSON.stringify({
         type: 'GRUPPE',
@@ -274,21 +803,186 @@ $('create-gruppe').addEventListener('click', async () => {
   }
 
   const channel = await res.json();
-  setStatus($('gruppe-status'), `Erstellt: ${channel.id}`, 'ok');
-  $('manage-channel-id').value = channel.id;
-  $('channel-id').value = channel.id;
+  setStatus($('gruppe-status'), `Erstellt: ${channel.name || channel.id}`, 'ok');
+  showToast('Gruppenchat erstellt');
+  $('gruppe-name').value = '';
+  await loadChannelsList();
+  openChannel(channel.id, channel.type, channel.name);
 });
 
-/// --- Teilnehmerverwaltung ---
+/// ═══════════ CHAT tab: Kanalliste ═══════════
+$('load-channels').addEventListener('click', loadChannelsList);
+
+async function loadChannelsList() {
+  if (!state.kcId) {
+    clearList($('channel-list'), 'Kein KC zugeordnet.');
+    return;
+  }
+
+  let res;
+  try {
+    res = await apiFetch(`/chat/${state.kcId}/channels`);
+  } catch {
+    clearList($('channel-list'), 'Fehler beim Laden der Chats.');
+    return;
+  }
+
+  const channels = res.ok ? await res.json() : [];
+  state.channels = channels;
+  const list = $('channel-list');
+  if (!channels.length) {
+    clearList(list, 'Keine Chats verfügbar.');
+    return;
+  }
+
+  list.innerHTML = '';
+  for (const channel of channels) {
+    const li = document.createElement('li');
+    li.className = channel.id === state.activeChannelId ? 'active-channel' : '';
+    const label = document.createElement('span');
+    label.textContent = channel.name || channelTypeLabel(channel.type);
+    const chip = document.createElement('span');
+    chip.className = `chip ${chipClassForType(channel.type)}`;
+    chip.textContent = channelTypeLabel(channel.type);
+    li.appendChild(label);
+    li.appendChild(chip);
+    li.addEventListener('click', () => openChannel(channel.id, channel.type, channel.name));
+    list.appendChild(li);
+  }
+}
+
+function channelTypeLabel(type) {
+  return {
+    GEMEINDE_GRUPPE: 'Gemeinde',
+    DIREKT: 'Direkt',
+    LT_UEBERGREIFEND: 'Leitungsteam',
+    BROADCAST: 'Ankündigung',
+    GRUPPE: 'Gruppe',
+  }[type] || type;
+}
+
+function chipClassForType(type) {
+  return {
+    GEMEINDE_GRUPPE: 'chip-green',
+    DIREKT: 'chip-blue',
+    LT_UEBERGREIFEND: 'chip-orange',
+    BROADCAST: 'chip-orange',
+    GRUPPE: 'chip-blue',
+  }[type] || '';
+}
+
+/// ═══════════ CHAT tab: Thread öffnen + WS ═══════════
+function openChannel(channelId, type, name) {
+  state.activeChannelId = channelId;
+  state.activeChannelType = type;
+  $('chat-thread-card').hidden = false;
+  $('chat-thread-title').textContent = name || channelTypeLabel(type);
+  $('manage-participants-btn').hidden = type !== 'GRUPPE';
+  $('manage-card').hidden = type !== 'GRUPPE';
+
+  qsa('#channel-list li').forEach((li) => li.classList.remove('active-channel'));
+
+  loadMessagesAndConnect(channelId);
+}
+
+async function loadMessagesAndConnect(channelId) {
+  const chatLog = $('chat-log');
+  clearList(chatLog, 'Nachrichten werden geladen…');
+
+  let res;
+  try {
+    res = await apiFetch(`/chat/channels/${channelId}/messages`);
+  } catch {
+    clearList(chatLog, 'Fehler beim Laden.');
+    return;
+  }
+  const messages = res.ok ? await res.json() : [];
+  chatLog.innerHTML = '';
+  if (!messages.length) {
+    clearList(chatLog, 'Noch keine Nachrichten.');
+  } else {
+    for (const msg of messages) appendChatMessage(msg);
+    chatLog.scrollTop = chatLog.scrollHeight;
+  }
+
+  connectWebSocket(channelId);
+}
+
+function appendChatMessage(msg) {
+  const chatLog = $('chat-log');
+  const emptyPlaceholder = chatLog.querySelector('.list-empty');
+  if (emptyPlaceholder) emptyPlaceholder.remove();
+
+  const isOwn = state.whoami?.kind === 'guest'
+    ? msg.senderGuestId === state.whoami.guestId
+    : msg.senderUserId === state.whoami?.userId;
+
+  const li = document.createElement('li');
+  li.className = isOwn ? 'own' : '';
+  const body = document.createElement('div');
+  body.textContent = msg.body;
+  const meta = document.createElement('div');
+  meta.className = 'chat-meta';
+  const timeStr = new Date(msg.createdAt).toLocaleTimeString('de-DE', { hour: '2-digit', minute: '2-digit' });
+  meta.innerHTML = isOwn ? `${timeStr} <span style="color:#53bdeb;font-weight:bold;margin-left:2px">✓✓</span>` : timeStr;
+  li.appendChild(body);
+  li.appendChild(meta);
+  chatLog.appendChild(li);
+}
+
+function connectWebSocket(channelId) {
+  if (state.socket) state.socket.close();
+
+  const protocol = location.protocol === 'https:' ? 'wss' : 'ws';
+  const socket = new WebSocket(`${protocol}://${location.host}/chat?token=${state.token}`);
+  state.socket = socket;
+
+  socket.addEventListener('open', () => {
+    socket.send(JSON.stringify({ event: 'chat:join', data: { channelId } }));
+  });
+
+  socket.addEventListener('message', (event) => {
+    const { event: name, data } = JSON.parse(event.data);
+
+    if (name === 'chat:participants-changed') {
+      if (data.channelId === state.activeChannelId) {
+        showToast('Teilnehmerliste aktualisiert');
+      }
+      return;
+    }
+
+    if (name !== 'chat:message') return;
+    if (data.channelId !== state.activeChannelId) return;
+    appendChatMessage(data);
+    $('chat-log').scrollTop = $('chat-log').scrollHeight;
+  });
+}
+
+$('send-message').addEventListener('click', sendChatMessage);
+$('chat-message').addEventListener('keydown', (e) => {
+  if (e.key === 'Enter') sendChatMessage();
+});
+
+function sendChatMessage() {
+  const input = $('chat-message');
+  const body = input.value.trim();
+  if (!body || !state.socket || !state.activeChannelId) return;
+  state.socket.send(
+    JSON.stringify({ event: 'chat:send', data: { channelId: state.activeChannelId, body } }),
+  );
+  input.value = '';
+}
+
+/// ═══════════ CHAT tab: Teilnehmerverwaltung ═══════════
 $('add-participant').addEventListener('click', () => manageParticipant('add'));
 $('remove-participant').addEventListener('click', () => manageParticipant('remove'));
 
 async function manageParticipant(action) {
-  const channelId = $('manage-channel-id').value.trim();
+  const channelId = state.activeChannelId;
   const userId = $('manage-user-id').value.trim();
   const guestId = $('manage-guest-id').value.trim();
   if (!channelId || (!userId && !guestId)) {
-    setStatus($('manage-status'), 'Channel-ID und User- oder Gast-ID angeben.', 'error');
+    setStatus($('manage-status'), 'Bitte User- oder Gast-ID angeben.', 'error');
     return;
   }
 
@@ -311,49 +1005,22 @@ async function manageParticipant(action) {
     return;
   }
   setStatus($('manage-status'), action === 'add' ? 'Hinzugefügt.' : 'Entfernt.', 'ok');
+  showToast(action === 'add' ? 'Teilnehmer hinzugefügt' : 'Teilnehmer entfernt');
 }
 
-/// --- Workshop-Wahl ---
-$('submit-wahl').addEventListener('click', async () => {
-  const wahlId = $('wahl-id').value;
-  const prioritaeten = $('prioritaeten')
-    .value.split(',')
-    .map((s) => s.trim())
-    .filter(Boolean);
+/// ═══════════ FILES tab ═══════════
+$('load-files').addEventListener('click', loadFiles);
 
-  if (!wahlId || prioritaeten.length === 0) {
-    setStatus($('wahl-status'), 'Bitte Wahl-ID und mindestens eine Priorität angeben.', 'error');
+async function loadFiles() {
+  if (!state.kcId) {
+    clearList($('file-list'), 'Kein KC zugeordnet.');
     return;
   }
 
-  setStatus($('wahl-status'), 'Wird gesendet…');
-
-  let res;
-  try {
-    res = await apiFetch(`/wahl/${wahlId}/teilnehmer`, {
-      method: 'POST',
-      body: JSON.stringify({ prioritaeten }),
-    });
-  } catch (err) {
-    setStatus($('wahl-status'), 'Netzwerkfehler. Bitte erneut versuchen.', 'error');
-    return;
-  }
-
-  if (res.ok) {
-    setStatus($('wahl-status'), 'Gespeichert.', 'ok');
-  } else {
-    setStatus($('wahl-status'), `Fehler: ${res.status}`, 'error');
-  }
-});
-
-/// --- Dateien ---
-$('load-files').addEventListener('click', async () => {
-  if (!state.kcId) return;
-
   let res;
   try {
     res = await apiFetch(`/files/${state.kcId}`);
-  } catch (err) {
+  } catch {
     clearList($('file-list'), 'Fehler beim Laden der Dateien.');
     return;
   }
@@ -370,112 +1037,42 @@ $('load-files').addEventListener('click', async () => {
   for (const file of files) {
     const li = document.createElement('li');
     li.textContent = file.filename;
+    li.addEventListener('click', () => downloadFile(file.id, file.filename));
     list.appendChild(li);
   }
-});
-
-/// --- Chat: eigene Channels auflisten ---
-$('load-channels').addEventListener('click', async () => {
-  if (!state.kcId) {
-    setStatus($('login-status'), '');
-    return;
-  }
-
-  let res;
-  try {
-    res = await apiFetch(`/chat/${state.kcId}/channels`);
-  } catch {
-    clearList($('channel-list'), 'Fehler beim Laden der Chats.');
-    return;
-  }
-
-  const channels = res.ok ? await res.json() : [];
-  const list = $('channel-list');
-  if (!channels.length) {
-    clearList(list, 'Keine Chats verfügbar.');
-    return;
-  }
-
-  list.innerHTML = '';
-  for (const channel of channels) {
-    const li = document.createElement('li');
-    const label = document.createElement('span');
-    label.textContent = channel.name || channel.type;
-    const chip = document.createElement('span');
-    chip.className = 'chip';
-    chip.textContent = channel.type;
-    li.appendChild(label);
-    li.appendChild(chip);
-    li.addEventListener('click', () => {
-      $('channel-id').value = channel.id;
-      joinChannel(channel.id);
-    });
-    list.appendChild(li);
-  }
-});
-
-/// --- Chat: beitreten + live mitlesen/schreiben ---
-$('join-channel').addEventListener('click', () => {
-  const channelId = $('channel-id').value;
-  if (!channelId || !state.token) return;
-  joinChannel(channelId);
-});
-
-function joinChannel(channelId) {
-  if (state.socket) state.socket.close();
-  state.activeChannelId = channelId;
-
-  const protocol = location.protocol === 'https:' ? 'wss' : 'ws';
-  const socket = new WebSocket(`${protocol}://${location.host}/chat?token=${state.token}`);
-  state.socket = socket;
-
-  const chatLog = $('chat-log');
-  clearList(chatLog, 'Verbindung wird hergestellt…');
-
-  socket.addEventListener('open', () => {
-    socket.send(JSON.stringify({ event: 'chat:join', data: { channelId } }));
-    clearList(chatLog, 'Verbunden. Warte auf Nachrichten…');
-  });
-
-  socket.addEventListener('message', (event) => {
-    const { event: name, data } = JSON.parse(event.data);
-
-    if (name === 'chat:participants-changed') {
-      if (data.channelId === state.activeChannelId) {
-        setStatus($('manage-status'), 'Teilnehmerliste wurde aktualisiert.', 'ok');
-      }
-      return;
-    }
-
-    if (name !== 'chat:message') return;
-
-    const emptyPlaceholder = chatLog.querySelector('.list-empty');
-    if (emptyPlaceholder) emptyPlaceholder.remove();
-
-    const li = document.createElement('li');
-    const body = document.createElement('span');
-    body.className = 'chat-body';
-    body.textContent = data.body;
-    li.appendChild(body);
-    chatLog.appendChild(li);
-    chatLog.scrollTop = chatLog.scrollHeight;
-  });
-
-  socket.addEventListener('close', () => {
-    setConnBadge(!!state.token);
-  });
 }
 
-$('send-message').addEventListener('click', () => {
-  const input = $('chat-message');
-  const body = input.value.trim();
-  if (!body || !state.socket || !state.activeChannelId) return;
-  state.socket.send(
-    JSON.stringify({ event: 'chat:send', data: { channelId: state.activeChannelId, body } }),
-  );
-  input.value = '';
-});
+async function downloadFile(fileId, filename) {
+  let res;
+  try {
+    res = await apiFetch(`/files/download/${fileId}`);
+  } catch {
+    showToast('Fehler beim Download');
+    return;
+  }
+  if (!res.ok) {
+    showToast(`Fehler: ${res.status}`);
+    return;
+  }
+  const blob = await res.blob();
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement('a');
+  a.href = url;
+  a.download = filename;
+  a.click();
+  URL.revokeObjectURL(url);
+}
 
-$('chat-message').addEventListener('keydown', (e) => {
-  if (e.key === 'Enter') $('send-message').click();
+function escapeHtml(str) {
+  const div = document.createElement('div');
+  div.textContent = str ?? '';
+  return div.innerHTML;
+}
+
+/// ═══════════ Startup: handle Authentik redirect back to us ═══════════
+/// The redirect_uri is /v1/auth/callback; the SPA fallback (ServeStaticModule)
+/// serves this same index.html/app.js for that path too, so we just check
+/// the query string on load regardless of which path we're on.
+completeAuthentikCallbackIfPresent().catch((err) => {
+  setStatus($('login-status'), err.message || 'Anmeldung fehlgeschlagen.', 'error');
 });
diff --git a/client/web/index.html b/client/web/index.html
index 09ef778..44899bd 100644
--- a/client/web/index.html
+++ b/client/web/index.html
@@ -2,216 +2,334 @@
 <html lang="de">
 <head>
   <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
+  <meta name="theme-color" content="#1E2032" />
+  <meta name="mobile-web-app-capable" content="yes" />
+  <meta name="apple-mobile-web-app-capable" content="yes" />
+  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
+  <meta name="apple-mobile-web-app-title" content="KC-App" />
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@700;800&family=Mulish:wght@400;600;700;800&display=swap" rel="stylesheet">
+  <link rel="stylesheet" href="style.css?v=3" />
   <title>KC-App</title>
-  <link rel="stylesheet" href="style.css" />
 </head>
 <body>
-  <div class="bg-decor" aria-hidden="true"></div>
+  <div id="app-root">
 
-  <header class="topbar">
-    <div class="brand">
-      <span class="brand-mark">KC</span>
-      <div>
-        <h1>KC-App</h1>
-        <p class="subtitle">Web-Client &middot; Konfi-Castle Events</p>
+    <!-- ═══════════ LOGIN SCREEN ═══════════ -->
+    <section id="login-screen" class="login-wrap">
+      <div class="login-logo">KC<span>-App</span></div>
+      <p class="login-sub">Konfi-Castle Events &middot; Web-Client</p>
+
+      <div class="login-card">
+        <form id="code-form" class="form-grid">
+          <label>
+            <span>Code</span>
+            <input id="login-code" name="code" placeholder="Einladungscode, 'LT', Gemeinde-Name, E-Mail…" autocomplete="off" autofocus />
+          </label>
+          <button type="submit" class="btn btn-primary btn-full">Weiter</button>
+        </form>
+
+        <!-- Follow-up forms, shown depending on what the code resolved to -->
+        <form id="guest-form" class="form-grid" hidden>
+          <p class="card-hint" id="guest-form-hint">Konfi-/Gast-Zugang</p>
+          <label>
+            <span>Vorname</span>
+            <input id="first-name" name="firstName" required />
+          </label>
+          <label>
+            <span>Nachname</span>
+            <input id="last-name" name="lastName" required />
+          </label>
+          <button type="submit" class="btn btn-orange btn-full">Beitreten</button>
+          <button type="button" class="btn btn-ghost btn-full back-btn">Anderer Code</button>
+        </form>
+
+        <form id="team-form" class="form-grid" hidden>
+          <p class="card-hint" id="team-form-hint">Team-Login</p>
+          <label>
+            <span>Passwort</span>
+            <input id="team-password" name="password" type="password" required />
+          </label>
+          <button type="submit" class="btn btn-primary btn-full">Anmelden</button>
+          <button type="button" class="btn btn-ghost btn-full back-btn">Anderer Code</button>
+        </form>
+
+        <form id="teamer-invite-form" class="form-grid" hidden>
+          <p class="card-hint" id="teamer-invite-hint">Einladung als Gemeinde-Teamer</p>
+          <label>
+            <span>Vorname</span>
+            <input id="ti-first-name" required />
+          </label>
+          <label>
+            <span>Nachname</span>
+            <input id="ti-last-name" required />
+          </label>
+          <label id="ti-email-label">
+            <span>E-Mail</span>
+            <input id="ti-email" type="email" />
+          </label>
+          <label>
+            <span>Passwort (min. 8 Zeichen)</span>
+            <input id="ti-password" type="password" minlength="8" required />
+          </label>
+          <button type="submit" class="btn btn-orange btn-full">Konto erstellen</button>
+          <button type="button" class="btn btn-ghost btn-full back-btn">Anderer Code</button>
+        </form>
+
+        <div id="sso-panel" class="form-grid" hidden>
+          <p class="card-hint">Anmeldung mit deiner Konfi-Castle-ID (Single Sign-On).</p>
+          <button type="button" id="authentik-login-btn" class="btn btn-primary btn-full">Mit Konfi-Castle-ID anmelden</button>
+          <button type="button" class="btn btn-ghost btn-full back-btn">Anderer Code</button>
+        </div>
+
+        <div id="verantw-invite-panel" class="form-grid" hidden>
+          <p class="card-hint" id="verantw-invite-hint">Einladung als Gemeinde-Verantwortliche/r</p>
+          <p class="card-hint">Anmeldung mit deiner Konfi-Castle-ID (Single Sign-On), die Einladung wird danach automatisch eingelöst.</p>
+          <button type="button" id="verantw-invite-login-btn" class="btn btn-primary btn-full">Mit Konfi-Castle-ID anmelden &amp; einlösen</button>
+          <button type="button" class="btn btn-ghost btn-full back-btn">Anderer Code</button>
+        </div>
+
+        <p id="login-status" class="status"></p>
       </div>
-    </div>
-    <span id="conn-badge" class="badge badge-muted">nicht angemeldet</span>
-  </header>
-
-  <main>
-    <section id="login-section" class="card">
-      <div class="card-header">
-        <h2>Anmelden</h2>
-        <p class="card-hint">Als Gast/Konfi mit Einladungscode oder als Team-Mitglied mit Passwort.</p>
-      </div>
-
-      <div class="tabs">
-        <button type="button" class="tab-btn active" data-tab="guest-tab">Gast / Konfi</button>
-        <button type="button" class="tab-btn" data-tab="team-tab">Team-Login</button>
-      </div>
-
-      <form id="guest-form" class="form-grid tab-panel" data-panel="guest-tab">
-        <label>
-          <span>Einladungscode</span>
-          <input id="invite-code" name="inviteCode" placeholder="z. B. AB12-CD34" required />
-        </label>
-        <label>
-          <span>Vorname</span>
-          <input id="first-name" name="firstName" required />
-        </label>
-        <label>
-          <span>Nachname</span>
-          <input id="last-name" name="lastName" required />
-        </label>
-        <button type="submit" class="btn btn-primary">
-          <span>Beitreten</span>
-        </button>
-      </form>
-
-      <form id="team-form" class="form-grid tab-panel" data-panel="team-tab" hidden>
-        <label>
-          <span>Gemeinde-Name</span>
-          <input id="team-gemeinde" name="gemeindeName" placeholder="z. B. Mustergemeinde" />
-        </label>
-        <label>
-          <span>Passwort</span>
-          <input id="team-password" name="password" type="password" required />
-        </label>
-        <button type="submit" class="btn btn-primary">
-          <span>Anmelden</span>
-        </button>
-      </form>
-
-      <p id="login-status" class="status"></p>
     </section>
 
-    <section id="app-section" class="stack" hidden>
-      <div class="card" id="whoami-card" hidden>
-        <div class="card-header row">
-          <div>
-            <h2>Angemeldet als</h2>
-            <p class="card-hint" id="whoami-text">&ndash;</p>
-          </div>
-          <button id="logout-btn" class="btn btn-ghost">Abmelden</button>
+    <!-- ═══════════ APP SHELL ═══════════ -->
+    <div id="shell" class="shell" hidden>
+      <header class="hdr">
+        <div>
+          <div class="hdr-logo">KC<span>-App</span></div>
+          <div class="hdr-sub" id="hdr-sub">&nbsp;</div>
         </div>
-      </div>
+        <div class="hdr-space"></div>
+        <span id="conn-badge" class="hdr-badge">offline</span>
+        <div class="hdr-avatar" id="hdr-avatar" title="Profil">?</div>
+      </header>
 
-      <div class="card" id="gruppen-card" hidden>
-        <div class="card-header row">
-          <div>
-            <h2>Gruppenchat erstellen</h2>
-            <p class="card-hint">Team-Mitglieder und Konfis frei auswählen (KC-weit, egal welche Gemeinde).</p>
+      <div class="content" id="content">
+
+        <!-- ---------- HOME TAB ---------- -->
+        <section class="screen tab-screen" data-screen="home">
+          <div class="hero">
+            <div class="hero-kicker">Willkommen</div>
+            <div class="hero-title" id="home-greeting">Hallo!</div>
+            <div class="hero-chips">
+              <span class="hchip" id="home-role-chip">&ndash;</span>
+              <span class="hchip" id="home-kc-chip">&ndash;</span>
+            </div>
           </div>
-          <button id="load-candidates" class="btn btn-ghost">Kandidaten laden</button>
-        </div>
-        <div class="form-grid">
-          <label>
+
+          <div class="sh">Übersicht</div>
+          <div class="card card-blue">
+            <div class="card-header row">
+              <div>
+                <h2>Workshop-Wahl</h2>
+                <p class="card-hint">Offene Wahlen für dich</p>
+              </div>
+            </div>
+            <div id="home-wahl-summary" class="status">Noch nicht geladen.</div>
+          </div>
+
+          <div class="card card-orange">
+            <div class="card-header row">
+              <div>
+                <h2>Meine Chats</h2>
+                <p class="card-hint">Ungelesene Unterhaltungen</p>
+              </div>
+            </div>
+            <div id="home-chat-summary" class="status">Noch nicht geladen.</div>
+          </div>
+
+          <div class="card card-green">
+            <div class="card-header row">
+              <div>
+                <h2>Dateien</h2>
+                <p class="card-hint">Für dich freigegeben</p>
+              </div>
+            </div>
+            <div id="home-files-summary" class="status">Noch nicht geladen.</div>
+          </div>
+        </section>
+
+        <!-- ---------- WAHL TAB ---------- -->
+        <section class="screen tab-screen" data-screen="wahl" hidden>
+          <div class="sh">Workshop-Wahl</div>
+          <div id="wahl-guest-view">
+            <div id="wahl-list"></div>
+          </div>
+
+          <div id="wahl-lt-view" hidden>
+            <div class="card">
+              <div class="card-header">
+                <h2>Wahl-Verwaltung (Leitungsteam)</h2>
+                <p class="card-hint">Wahl-ID eingeben um Teilnehmer/Ergebnisse zu sehen.</p>
+              </div>
+              <div class="form-grid form-inline">
+                <label>
+                  <span>Wahl-ID</span>
+                  <input id="lt-wahl-id" placeholder="Wahl-ID" />
+                </label>
+                <button id="lt-load-teilnehmer" class="btn btn-primary">Laden</button>
+                <button id="lt-run-zuteilung" class="btn btn-orange">Zuteilung starten</button>
+              </div>
+              <ul id="lt-teilnehmer-list" class="list">
+                <li class="list-empty">Noch nicht geladen.</li>
+              </ul>
+              <p id="wahl-lt-status" class="status"></p>
+            </div>
+          </div>
+        </section>
+
+        <!-- ---------- CHAT TAB ---------- -->
+        <section class="screen tab-screen" data-screen="chat" hidden>
+          <div class="sh">Chats</div>
+
+          <div id="gruppen-card" class="card card-blue" hidden>
+            <div class="card-header row">
+              <div>
+                <h2>Gruppenchat erstellen</h2>
+                <p class="card-hint">Team &amp; Konfis frei wählen, KC-weit.</p>
+              </div>
+              <button id="load-candidates" class="btn btn-ghost btn-sm">Kandidaten</button>
+            </div>
+            <div class="form-grid">
+              <label>
+                <span>Name der Gruppe</span>
+                <input id="gruppe-name" placeholder="z. B. Ausflugsplanung" />
+              </label>
+            </div>
+            <div class="two-col">
+              <div>
+                <p class="card-hint">Team-Mitglieder</p>
+                <ul id="candidate-users" class="list list-picker">
+                  <li class="list-empty">Noch nicht geladen.</li>
+                </ul>
+              </div>
+              <div>
+                <p class="card-hint">Konfis</p>
+                <ul id="candidate-guests" class="list list-picker">
+                  <li class="list-empty">Noch nicht geladen.</li>
+                </ul>
+              </div>
+            </div>
+            <button id="create-gruppe" class="btn btn-primary btn-full">Gruppenchat erstellen</button>
+            <p id="gruppe-status" class="status"></p>
+          </div>
+
+          <div class="card">
+            <div class="card-header row">
+              <h2 style="margin:0">Meine Chats</h2>
+              <button id="load-channels" class="btn btn-ghost btn-sm">Aktualisieren</button>
+            </div>
+            <ul id="channel-list" class="list list-channels">
+              <li class="list-empty">Noch keine Chats geladen.</li>
+            </ul>
+          </div>
+
+          <div id="chat-thread-card" class="card" hidden>
+            <div class="card-header row">
+              <h2 id="chat-thread-title" style="margin:0">Chat</h2>
+              <button id="manage-participants-btn" class="btn btn-ghost btn-sm" hidden>Teilnehmer</button>
+            </div>
+            <ul id="chat-log" class="list list-chat">
+              <li class="list-empty">Noch keine Nachrichten.</li>
+            </ul>
+            <div class="form-grid form-inline" style="margin-top:10px">
+              <label style="flex:3">
+                <span>Nachricht</span>
+                <input id="chat-message" placeholder="Nachricht schreiben…" />
+              </label>
+              <button id="send-message" class="btn btn-primary">Senden</button>
+            </div>
+          </div>
+
+          <div id="manage-card" class="card" hidden>
+            <div class="card-header">
+              <h2>Teilnehmer verwalten</h2>
+              <p class="card-hint">Für den aktuell geöffneten Gruppenchat.</p>
+            </div>
+            <div class="form-grid form-inline">
+              <label>
+                <span>User-ID</span>
+                <input id="manage-user-id" placeholder="optional" />
+              </label>
+              <label>
+                <span>Gast-ID</span>
+                <input id="manage-guest-id" placeholder="optional" />
+              </label>
+            </div>
+            <div class="row" style="margin-top:8px">
+              <button id="add-participant" class="btn btn-primary btn-sm">Hinzufügen</button>
+              <button id="remove-participant" class="btn btn-ghost btn-sm">Entfernen</button>
+            </div>
+            <p id="manage-status" class="status"></p>
+          </div>
+        </section>
+
+        <!-- ---------- FILES TAB ---------- -->
+        <section class="screen tab-screen" data-screen="files" hidden>
+          <div class="sh">Dateien</div>
+          <div class="card">
+            <div class="card-header row">
+              <h2 style="margin:0">Freigegebene Dokumente</h2>
+              <button id="load-files" class="btn btn-ghost btn-sm">Aktualisieren</button>
+            </div>
+            <ul id="file-list" class="list list-files">
+              <li class="list-empty">Noch keine Dateien geladen.</li>
+            </ul>
+          </div>
+        </section>
+
+        <!-- ---------- PROFILE TAB ---------- -->
+        <section class="screen tab-screen" data-screen="profile" hidden>
+          <div class="prof-hero">
+            <div class="prof-av" id="profile-av">?</div>
+            <div class="prof-name" id="profile-name">&ndash;</div>
+            <div class="prof-role" id="profile-role">&ndash;</div>
+          </div>
+
+          <div class="si" id="profile-kc-row">
             <span>KC-ID</span>
-            <input id="gruppe-kcid" placeholder="KC-ID" />
-          </label>
-          <label>
-            <span>Name der Gruppe</span>
-            <input id="gruppe-name" placeholder="z. B. Ausflugsplanung" />
-          </label>
-        </div>
-        <div class="two-col">
-          <div>
-            <p class="card-hint">Team-Mitglieder</p>
-            <ul id="candidate-users" class="list list-picker">
-              <li class="list-empty">Noch nicht geladen.</li>
-            </ul>
+            <span id="profile-kc-id" class="chip chip-blue">&ndash;</span>
           </div>
-          <div>
-            <p class="card-hint">Konfis</p>
-            <ul id="candidate-guests" class="list list-picker">
-              <li class="list-empty">Noch nicht geladen.</li>
-            </ul>
+          <div class="si" id="profile-server-row">
+            <span>Server</span>
+            <span class="chip chip-green">verbunden</span>
           </div>
-        </div>
-        <button id="create-gruppe" class="btn btn-primary">Gruppenchat erstellen</button>
-        <p id="gruppe-status" class="status"></p>
+
+          <button id="logout-btn" class="btn btn-danger btn-full" style="margin-top:16px">Abmelden</button>
+        </section>
+
       </div>
 
-      <div class="card" id="manage-card" hidden>
-        <div class="card-header row">
-          <div>
-            <h2>Teilnehmer verwalten</h2>
-            <p class="card-hint">Für einen bestehenden Gruppenchat Teilnehmer hinzufügen/entfernen.</p>
-          </div>
-        </div>
-        <div class="form-grid form-inline">
-          <label>
-            <span>Channel-ID</span>
-            <input id="manage-channel-id" placeholder="Channel-ID des Gruppenchats" />
-          </label>
-        </div>
-        <div class="form-grid form-inline">
-          <label>
-            <span>User-ID</span>
-            <input id="manage-user-id" placeholder="optional" />
-          </label>
-          <label>
-            <span>Gast-ID</span>
-            <input id="manage-guest-id" placeholder="optional" />
-          </label>
-          <button id="add-participant" class="btn btn-primary">Hinzufügen</button>
-          <button id="remove-participant" class="btn btn-ghost">Entfernen</button>
-        </div>
-        <p id="manage-status" class="status"></p>
-      </div>
+      <nav class="bnav">
+        <button class="nb on" data-screen="home">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M3 12l9-9 9 9M5 10v10a1 1 0 001 1h4v-6h4v6h4a1 1 0 001-1V10"/></svg>
+          Home
+        </button>
+        <button class="nb" data-screen="wahl">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
+          Wahl
+        </button>
+        <button class="nb" data-screen="chat">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"/></svg>
+          Chat
+        </button>
+        <button class="nb" data-screen="files">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M9 17V7m0 10a2 2 0 01-2 2H5a2 2 0 01-2-2V7a2 2 0 012-2h2a2 2 0 012 2m0 10a2 2 0 002 2h2a2 2 0 002-2M9 7a2 2 0 012-2h2a2 2 0 012 2m0 10V7m0 10a2 2 0 002 2h2a2 2 0 002-2V7a2 2 0 00-2-2h-2a2 2 0 00-2 2"/></svg>
+          Dateien
+        </button>
+        <button class="nb" data-screen="profile">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/></svg>
+          Profil
+        </button>
+      </nav>
 
-      <div class="card">
-        <div class="card-header">
-          <h2>Workshop-Wahl</h2>
-          <p class="card-hint">Wünsche in Reihenfolge deiner Priorität eintragen.</p>
-        </div>
-        <div class="form-grid">
-          <label>
-            <span>Wahl-ID</span>
-            <input id="wahl-id" placeholder="Wahl-ID" />
-          </label>
-          <label>
-            <span>Priorit&auml;ten</span>
-            <input id="prioritaeten" placeholder="Workshop-IDs, mit Komma getrennt" />
-          </label>
-          <button id="submit-wahl" class="btn btn-primary">
-            <span>Absenden</span>
-          </button>
-        </div>
-        <p id="wahl-status" class="status"></p>
-      </div>
+      <div id="toast" class="toast" hidden></div>
+    </div>
 
-      <div class="card">
-        <div class="card-header row">
-          <div>
-            <h2>Dateien</h2>
-            <p class="card-hint">Für dich freigegebene Dokumente.</p>
-          </div>
-          <button id="load-files" class="btn btn-ghost">Aktualisieren</button>
-        </div>
-        <ul id="file-list" class="list list-files">
-          <li class="list-empty">Noch keine Dateien geladen.</li>
-        </ul>
-      </div>
+  </div>
 
-      <div class="card">
-        <div class="card-header row">
-          <div>
-            <h2>Chat</h2>
-            <p class="card-hint">Channel-ID eingeben und live mitlesen/schreiben.</p>
-          </div>
-          <button id="load-channels" class="btn btn-ghost">Meine Chats laden</button>
-        </div>
-        <ul id="channel-list" class="list list-channels">
-          <li class="list-empty">Noch keine Chats geladen.</li>
-        </ul>
-        <div class="form-grid form-inline">
-          <label>
-            <span>Channel-ID</span>
-            <input id="channel-id" placeholder="Channel-ID" />
-          </label>
-          <button id="join-channel" class="btn btn-primary">Beitreten</button>
-        </div>
-        <ul id="chat-log" class="list list-chat">
-          <li class="list-empty">Noch keine Nachrichten.</li>
-        </ul>
-        <div class="form-grid form-inline">
-          <label>
-            <span>Nachricht</span>
-            <input id="chat-message" placeholder="Nachricht schreiben…" />
-          </label>
-          <button id="send-message" class="btn btn-primary">Senden</button>
-        </div>
-      </div>
-    </section>
-  </main>
-
-  <footer>
-    <p>KC-App &middot; Zero-Dependency Web-Fallback</p>
-  </footer>
-
-  <script src="app.js"></script>
+  <script src="app.js?v=2"></script>
 </body>
 </html>
diff --git a/client/web/style.css b/client/web/style.css
index 704b9d1..4706448 100644
--- a/client/web/style.css
+++ b/client/web/style.css
@@ -1,127 +1,269 @@
 :root {
-  --bg: #0f1220;
-  --bg-soft: #171b2e;
-  --card: #1c2138;
-  --card-border: #2a3050;
-  --text: #eef0fb;
-  --text-muted: #9aa1c4;
-  --accent: #6c8cff;
-  --accent-strong: #8f6cff;
-  --accent-text: #ffffff;
-  --success: #4ade80;
-  --danger: #f87171;
-  --radius: 14px;
-  color-scheme: dark;
+  --blue: #2F7CFF;
+  --blue-dark: #1F52A9;
+  --orange: #F17C20;
+  --orange-dark: #C8600F;
+  --green: #4EBA9A;
+  --green-dark: #2E7C64;
+  --grey: #69768B;
+  --dark: #2B2D42;
+  --dark-2: #1E2032;
+  --cream: #F6F7FB;
+  --card: #FFFFFF;
+  --card-border: #E7EAF3;
+  --text: #2B2D42;
+  --text-muted: #69768B;
+  --danger: #E24C4C;
+  --radius: 16px;
+  --sh: 0 10px 24px rgba(43, 45, 66, 0.08);
+  color-scheme: light;
 }
 
 * {
   box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+/* The `hidden` attribute must always win over any `display` set by a class
+   on the same element (e.g. `.form-grid { display: flex }` on a form that's
+   also `hidden`) — otherwise every login follow-up form renders at once. */
+[hidden] {
+  display: none !important;
+}
+
+html, body, #app-root {
+  height: 100%;
 }
 
 body {
-  margin: 0;
-  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
-  background: var(--bg);
+  font-family: 'Mulish', 'Inter', system-ui, -apple-system, sans-serif;
+  background: #d9deee;
   color: var(--text);
-  min-height: 100vh;
-  line-height: 1.5;
+  overflow: hidden;
+  overscroll-behavior: none;
+  -webkit-tap-highlight-color: transparent;
 }
 
-.bg-decor {
-  position: fixed;
-  inset: 0;
-  z-index: -1;
-  background:
-    radial-gradient(600px circle at 15% -10%, rgba(108, 140, 255, 0.25), transparent 60%),
-    radial-gradient(500px circle at 100% 10%, rgba(143, 108, 255, 0.18), transparent 55%),
-    var(--bg);
+h1, h2, h3, .headline {
+  font-family: 'Poppins', 'Mulish', sans-serif;
 }
 
-.topbar {
+/* ─── APP SHELL ─────────────────────────────────────────── */
+.shell {
   display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 1rem;
-  max-width: 640px;
+  flex-direction: column;
+  min-height: 100dvh;
+  height: 100dvh;
+  max-width: 440px;
   margin: 0 auto;
-  padding: 2rem 1.25rem 1rem;
+  background: var(--cream);
+  box-shadow: 0 0 60px rgba(30, 32, 50, 0.25);
+  position: relative;
+  overflow: hidden;
 }
 
-.brand {
+.content {
+  flex: 1;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  -webkit-overflow-scrolling: touch;
+  padding-bottom: env(safe-area-inset-bottom);
+}
+
+.screen {
+  padding: 16px 16px 24px;
+}
+
+/* ─── HEADER ────────────────────────────────────────────── */
+.hdr {
+  background: linear-gradient(120deg, var(--dark), var(--dark-2));
+  border-bottom: 2px solid #33365a;
+  padding: 14px 16px;
   display: flex;
   align-items: center;
-  gap: 0.75rem;
+  gap: 10px;
+  position: sticky;
+  top: 0;
+  z-index: 50;
 }
 
-.brand-mark {
-  display: grid;
-  place-items: center;
-  width: 44px;
-  height: 44px;
-  border-radius: 12px;
-  background: linear-gradient(135deg, var(--accent), var(--accent-strong));
+.hdr-logo {
+  font-family: 'Poppins', sans-serif;
+  font-size: 1.1rem;
+  font-weight: 800;
   color: white;
+  letter-spacing: -0.02em;
+}
+
+.hdr-logo span { color: var(--orange); }
+
+.hdr-sub {
+  font-size: 0.68rem;
+  color: #9aa3c4;
+  margin-top: 1px;
+}
+
+.hdr-space { flex: 1; }
+
+.hdr-badge {
+  font-size: 0.68rem;
   font-weight: 700;
-  font-size: 0.95rem;
-  letter-spacing: 0.02em;
-  box-shadow: 0 8px 20px rgba(108, 140, 255, 0.35);
-}
-
-.brand h1 {
-  margin: 0;
-  font-size: 1.25rem;
-  font-weight: 700;
-}
-
-.subtitle {
-  margin: 0.1rem 0 0;
-  color: var(--text-muted);
-  font-size: 0.85rem;
-}
-
-.badge {
-  font-size: 0.75rem;
-  padding: 0.35rem 0.7rem;
+  padding: 0.3rem 0.65rem;
   border-radius: 999px;
-  border: 1px solid var(--card-border);
+  border: 1px solid rgba(255, 255, 255, 0.18);
+  color: #d7dcf2;
+  background: rgba(255, 255, 255, 0.06);
   white-space: nowrap;
 }
 
-.badge-muted {
-  color: var(--text-muted);
-  background: rgba(255, 255, 255, 0.03);
+.hdr-badge.online {
+  color: #7ce7c4;
+  border-color: rgba(78, 186, 154, 0.5);
+  background: rgba(78, 186, 154, 0.15);
 }
 
-.badge-online {
-  color: var(--success);
-  background: rgba(74, 222, 128, 0.12);
-  border-color: rgba(74, 222, 128, 0.35);
+.hdr-avatar {
+  width: 34px;
+  height: 34px;
+  border-radius: 50%;
+  background: var(--orange);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 800;
+  font-size: 0.85rem;
+  color: white;
+  cursor: pointer;
+  border: 2px solid var(--blue);
+  flex-shrink: 0;
 }
 
-main {
-  max-width: 640px;
-  margin: 0 auto;
-  padding: 0.5rem 1.25rem 3rem;
+/* ─── BOTTOM NAV ────────────────────────────────────────── */
+.bnav {
+  background: linear-gradient(120deg, var(--dark), var(--dark-2));
+  display: flex;
+  border-top: 1px solid #33365a;
+  position: sticky;
+  bottom: 0;
+  z-index: 50;
 }
 
-.stack {
+.nb {
+  flex: 1;
   display: flex;
   flex-direction: column;
-  gap: 1.25rem;
+  align-items: center;
+  justify-content: center;
+  padding: 9px 2px 11px;
+  border: none;
+  background: transparent;
+  color: #8b93b3;
+  font-family: 'Mulish', sans-serif;
+  font-size: 0.64rem;
+  font-weight: 700;
+  cursor: pointer;
+  gap: 3px;
+  transition: all 0.15s;
+  min-width: 0;
 }
 
+.nb.on {
+  color: var(--orange);
+  background: rgba(241, 124, 32, 0.1);
+}
+
+.nb svg { width: 20px; height: 20px; }
+
+/* ─── HERO ──────────────────────────────────────────────── */
+.hero {
+  background: linear-gradient(140deg, var(--dark) 0%, #262a4a 55%, var(--blue-dark) 100%);
+  border-bottom: 3px solid #262a4a;
+  padding: 22px 16px 18px;
+  margin: -16px -16px 16px;
+  position: relative;
+  overflow: hidden;
+}
+
+.hero::before {
+  content: '';
+  position: absolute;
+  top: -44px;
+  right: -44px;
+  width: 190px;
+  height: 190px;
+  border-radius: 50%;
+  background: var(--orange);
+  opacity: 0.18;
+}
+
+.hero::after {
+  content: '';
+  position: absolute;
+  bottom: -70px;
+  left: -30px;
+  width: 160px;
+  height: 160px;
+  border-radius: 50%;
+  background: var(--green);
+  opacity: 0.14;
+}
+
+.hero-kicker {
+  font-size: 0.68rem;
+  font-weight: 800;
+  letter-spacing: 2px;
+  text-transform: uppercase;
+  color: var(--orange);
+  margin-bottom: 6px;
+  position: relative;
+}
+
+.hero-title {
+  font-family: 'Poppins', sans-serif;
+  font-size: 1.5rem;
+  font-weight: 800;
+  color: white;
+  line-height: 1.18;
+  margin-bottom: 10px;
+  position: relative;
+}
+
+.hero-title span { color: var(--orange); }
+
+.hero-chips {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+  position: relative;
+}
+
+.hchip {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  background: rgba(255, 255, 255, 0.12);
+  border: 1px solid rgba(255, 255, 255, 0.16);
+  border-radius: 20px;
+  padding: 4px 12px;
+  font-size: 0.73rem;
+  color: white;
+}
+
+/* ─── CARDS ─────────────────────────────────────────────── */
 .card {
   background: var(--card);
   border: 1px solid var(--card-border);
   border-radius: var(--radius);
-  padding: 1.5rem;
-  margin-bottom: 1.25rem;
-  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
+  box-shadow: var(--sh);
+  padding: 16px;
+  margin-bottom: 12px;
 }
 
-.stack .card {
-  margin-bottom: 0;
-}
+.card-accent { border-left: 4px solid var(--orange); }
+.card-orange { border-left: 4px solid var(--orange); }
+.card-blue   { border-left: 4px solid var(--blue); }
+.card-green  { border-left: 4px solid var(--green); }
 
 .card-header {
   margin-bottom: 1.1rem;
@@ -136,16 +278,27 @@ main {
 
 .card-header h2 {
   margin: 0 0 0.25rem;
-  font-size: 1.05rem;
-  font-weight: 650;
+  font-size: 1rem;
+  font-weight: 700;
 }
 
 .card-hint {
   margin: 0;
   color: var(--text-muted);
-  font-size: 0.85rem;
+  font-size: 0.82rem;
 }
 
+.sh {
+  font-family: 'Poppins', sans-serif;
+  font-size: 0.92rem;
+  font-weight: 800;
+  color: var(--dark);
+  margin: 18px 0 10px;
+}
+
+.sh:first-child { margin-top: 0; }
+
+/* ─── FORMS ─────────────────────────────────────────────── */
 .form-grid {
   display: flex;
   flex-direction: column;
@@ -158,111 +311,117 @@ main {
   flex-wrap: wrap;
 }
 
-.form-inline label {
-  flex: 1;
-  min-width: 160px;
-}
+.form-inline label { flex: 1; min-width: 140px; }
 
 label {
   display: flex;
   flex-direction: column;
   gap: 0.35rem;
-  font-size: 0.82rem;
+  font-size: 0.78rem;
   color: var(--text-muted);
+  font-weight: 600;
 }
 
-input {
+input, select {
+  width: 100%;
   padding: 0.65rem 0.75rem;
-  font-size: 0.95rem;
+  font-size: 0.9rem;
   border-radius: 10px;
-  border: 1px solid var(--card-border);
-  background: var(--bg-soft);
+  border: 1.5px solid var(--card-border);
+  background: #fbfcfe;
   color: var(--text);
   outline: none;
+  font-family: 'Mulish', sans-serif;
   transition: border-color 0.15s ease, box-shadow 0.15s ease;
 }
 
-input::placeholder {
-  color: #6b7194;
-}
+input::placeholder { color: #a3aac2; }
 
-input:focus {
-  border-color: var(--accent);
-  box-shadow: 0 0 0 3px rgba(108, 140, 255, 0.2);
+input:focus, select:focus {
+  border-color: var(--blue);
+  box-shadow: 0 0 0 3px rgba(47, 124, 255, 0.15);
 }
 
+/* ─── BUTTONS ───────────────────────────────────────────── */
 .btn {
   appearance: none;
   border: none;
-  border-radius: 10px;
+  border-radius: 12px;
   padding: 0.7rem 1.1rem;
-  font-size: 0.92rem;
-  font-weight: 600;
+  font-size: 0.88rem;
+  font-weight: 700;
   cursor: pointer;
+  font-family: 'Mulish', sans-serif;
   transition: transform 0.08s ease, opacity 0.15s ease, box-shadow 0.15s ease;
 }
 
-.btn:active {
-  transform: translateY(1px);
-}
+.btn:active { transform: translateY(1px); }
 
 .btn-primary {
-  background: linear-gradient(135deg, var(--accent), var(--accent-strong));
-  color: var(--accent-text);
-  box-shadow: 0 8px 20px rgba(108, 140, 255, 0.3);
+  background: linear-gradient(120deg, var(--blue), var(--blue-dark));
+  color: white;
+  box-shadow: 0 8px 20px rgba(47, 124, 255, 0.3);
 }
 
-.btn-primary:hover {
-  opacity: 0.92;
+.btn-primary:hover { opacity: 0.92; }
+
+.btn-orange {
+  background: linear-gradient(120deg, var(--orange), var(--orange-dark));
+  color: white;
+  box-shadow: 0 8px 20px rgba(241, 124, 32, 0.3);
+}
+
+.btn-green {
+  background: linear-gradient(120deg, var(--green), var(--green-dark));
+  color: white;
 }
 
 .btn-ghost {
-  background: rgba(255, 255, 255, 0.04);
+  background: rgba(43, 45, 66, 0.05);
   color: var(--text);
   border: 1px solid var(--card-border);
   padding: 0.5rem 0.85rem;
-  font-size: 0.82rem;
+  font-size: 0.8rem;
 }
 
-.btn-ghost:hover {
-  background: rgba(255, 255, 255, 0.08);
+.btn-ghost:hover { background: rgba(43, 45, 66, 0.1); }
+
+.btn-danger {
+  background: var(--danger);
+  color: white;
 }
 
+.btn-sm { padding: 0.4rem 0.7rem; font-size: 0.76rem; border-radius: 9px; }
+.btn-full { width: 100%; }
+
+/* ─── STATUS TEXT ───────────────────────────────────────── */
 .status {
   min-height: 1.1rem;
   margin: 0.75rem 0 0;
-  font-size: 0.85rem;
+  font-size: 0.82rem;
   color: var(--text-muted);
 }
 
-.status.status-ok {
-  color: var(--success);
-}
-
-.status.status-error {
-  color: var(--danger);
-}
+.status.status-ok { color: var(--green-dark); }
+.status.status-error { color: var(--danger); }
 
+/* ─── LISTS ─────────────────────────────────────────────── */
 .list {
   list-style: none;
-  margin: 0;
-  padding: 0;
   border: 1px solid var(--card-border);
-  border-radius: 10px;
-  max-height: 220px;
+  border-radius: 12px;
+  max-height: 240px;
   overflow-y: auto;
-  background: var(--bg-soft);
+  background: #fbfcfe;
 }
 
 .list li {
-  padding: 0.6rem 0.85rem;
+  padding: 0.65rem 0.85rem;
   border-bottom: 1px solid var(--card-border);
-  font-size: 0.88rem;
+  font-size: 0.86rem;
 }
 
-.list li:last-child {
-  border-bottom: none;
-}
+.list li:last-child { border-bottom: none; }
 
 .list-empty {
   color: var(--text-muted);
@@ -272,61 +431,49 @@ input:focus {
 .list-files li {
   display: flex;
   align-items: center;
-  gap: 0.5rem;
+  gap: 0.6rem;
+  cursor: pointer;
 }
 
-.list-files li::before {
-  content: "📄";
+.list-files li::before { content: "📄"; }
+.list-files li:hover { background: rgba(47, 124, 255, 0.05); }
+
+.list-chat {
+  background: #efeae2;
+  border-radius: 12px;
+  padding: 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 0.4rem;
+  max-height: 420px;
+  overflow-y: auto;
+  border: 1px solid var(--card-border);
 }
 
 .list-chat li {
   display: flex;
   flex-direction: column;
   gap: 0.15rem;
+  max-width: 80%;
+  align-self: flex-start;
+  background: #ffffff;
+  border-radius: 0 12px 12px 12px;
+  padding: 8px 12px;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
+  border-bottom: none;
 }
 
-.list-chat li .chat-body {
-  color: var(--text);
+.list-chat li.own {
+  align-self: flex-end;
+  background: #e7ffdb;
+  border-radius: 12px 0 12px 12px;
 }
 
-.tabs {
-  display: flex;
-  gap: 0.5rem;
-  margin-bottom: 1rem;
-}
-
-.tab-btn {
-  appearance: none;
-  border: 1px solid var(--card-border);
-  background: rgba(255, 255, 255, 0.03);
-  color: var(--text-muted);
-  border-radius: 999px;
-  padding: 0.4rem 0.9rem;
-  font-size: 0.82rem;
-  cursor: pointer;
-}
-
-.tab-btn.active {
-  color: var(--accent-text);
-  background: linear-gradient(135deg, var(--accent), var(--accent-strong));
-  border-color: transparent;
-}
-
-.two-col {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 1rem;
-  margin: 0.75rem 0 1rem;
-}
-
-@media (max-width: 480px) {
-  .two-col {
-    grid-template-columns: 1fr;
-  }
-}
-
-.list-picker {
-  max-height: 180px;
+.list-chat li .chat-meta {
+  font-size: 0.68rem;
+  color: #667781;
+  text-align: right;
+  margin-top: 2px;
 }
 
 .list-picker li {
@@ -336,14 +483,8 @@ input:focus {
   cursor: pointer;
 }
 
-.list-picker li input {
-  padding: 0;
-  width: auto;
-}
-
-.list-picker li.picked {
-  background: rgba(108, 140, 255, 0.12);
-}
+.list-picker li input { padding: 0; width: auto; }
+.list-picker li.picked { background: rgba(47, 124, 255, 0.08); }
 
 .list-channels li {
   display: flex;
@@ -353,36 +494,224 @@ input:focus {
   cursor: pointer;
 }
 
-.list-channels li:hover {
-  background: rgba(255, 255, 255, 0.04);
+.list-channels li:hover { background: rgba(47, 124, 255, 0.05); }
+.list-channels li.active-channel { background: rgba(241, 124, 32, 0.08); border-left: 3px solid var(--orange); }
+
+.two-col {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 1rem;
+  margin: 0.75rem 0 1rem;
+}
+
+@media (max-width: 380px) {
+  .two-col { grid-template-columns: 1fr; }
 }
 
 .chip {
-  font-size: 0.7rem;
-  padding: 0.15rem 0.5rem;
+  font-size: 0.66rem;
+  font-weight: 700;
+  padding: 0.15rem 0.55rem;
   border-radius: 999px;
   border: 1px solid var(--card-border);
   color: var(--text-muted);
   white-space: nowrap;
 }
 
-footer {
-  max-width: 640px;
-  margin: 0 auto;
-  padding: 1rem 1.25rem 2rem;
-  text-align: center;
+.chip-orange { background: rgba(241, 124, 32, 0.1); color: var(--orange-dark); border-color: transparent; }
+.chip-blue   { background: rgba(47, 124, 255, 0.1); color: var(--blue-dark); border-color: transparent; }
+.chip-green  { background: rgba(78, 186, 154, 0.15); color: var(--green-dark); border-color: transparent; }
+
+/* ─── TABS ──────────────────────────────────────────────── */
+.tabs {
+  display: flex;
+  gap: 0.5rem;
+  margin-bottom: 1rem;
+  flex-wrap: wrap;
+}
+
+.tab-btn {
+  appearance: none;
+  border: 1px solid var(--card-border);
+  background: #fff;
   color: var(--text-muted);
-  font-size: 0.75rem;
+  border-radius: 999px;
+  padding: 0.4rem 0.9rem;
+  font-size: 0.8rem;
+  font-weight: 700;
+  cursor: pointer;
+  font-family: 'Mulish', sans-serif;
 }
 
-@media (max-width: 480px) {
-  .topbar {
-    flex-direction: column;
-    align-items: flex-start;
-    gap: 0.75rem;
-  }
-
-  .card {
-    padding: 1.1rem;
-  }
+.tab-btn.active {
+  color: white;
+  background: linear-gradient(120deg, var(--blue), var(--blue-dark));
+  border-color: transparent;
+}
+
+/* ─── LOGIN ─────────────────────────────────────────────── */
+.login-wrap {
+  min-height: 100dvh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 24px;
+  background: linear-gradient(140deg, var(--dark) 0%, #262a4a 55%, var(--blue-dark) 100%);
+}
+
+.login-logo {
+  font-family: 'Poppins', sans-serif;
+  font-size: 2rem;
+  font-weight: 800;
+  color: white;
+  text-align: center;
+}
+
+.login-logo span { color: var(--orange); }
+
+.login-sub {
+  color: #a3aad0;
+  font-size: 0.85rem;
+  text-align: center;
+  margin-bottom: 26px;
+  margin-top: 4px;
+}
+
+.login-card {
+  background: white;
+  border-radius: var(--radius);
+  padding: 22px;
+  width: 100%;
+  max-width: 360px;
+  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
+}
+
+/* ─── PROFILE ───────────────────────────────────────────── */
+.prof-hero {
+  background: linear-gradient(120deg, var(--dark), var(--dark-2));
+  color: white;
+  border-radius: var(--radius);
+  padding: 22px;
+  text-align: center;
+  margin-bottom: 12px;
+  border: 1px solid #33365a;
+}
+
+.prof-av {
+  width: 62px;
+  height: 62px;
+  border-radius: 50%;
+  background: var(--orange);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 1.6rem;
+  font-weight: 800;
+  margin: 0 auto 8px;
+  border: 3px solid var(--blue);
+}
+
+.prof-name {
+  font-family: 'Poppins', sans-serif;
+  font-size: 1rem;
+  font-weight: 800;
+}
+
+.prof-role {
+  font-size: 0.78rem;
+  color: #a3aad0;
+  margin-top: 2px;
+}
+
+.si {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 14px;
+  background: var(--card);
+  border: 1px solid var(--card-border);
+  border-radius: 12px;
+  margin-bottom: 8px;
+  font-size: 0.86rem;
+  font-weight: 700;
+  box-shadow: 0 2px 6px rgba(43, 45, 66, 0.05);
+}
+
+/* ─── WORKSHOP PICK ─────────────────────────────────────── */
+.workshop-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  background: var(--card);
+  border: 1.5px solid var(--card-border);
+  border-radius: 12px;
+  padding: 11px 13px;
+  margin-bottom: 8px;
+  cursor: grab;
+}
+
+.workshop-item.picked {
+  border-color: var(--blue);
+  background: rgba(47, 124, 255, 0.05);
+}
+
+.workshop-rank {
+  width: 26px;
+  height: 26px;
+  border-radius: 50%;
+  background: var(--blue);
+  color: white;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 800;
+  font-size: 0.78rem;
+  flex-shrink: 0;
+}
+
+.workshop-rank.empty {
+  background: transparent;
+  border: 1.5px dashed var(--card-border);
+  color: transparent;
+}
+
+/* ─── EMPTY STATE ───────────────────────────────────────── */
+.empty {
+  text-align: center;
+  padding: 30px 16px;
+  color: var(--text-muted);
+}
+
+.empty-icon { font-size: 2.2rem; margin-bottom: 8px; }
+
+/* ─── TOAST ─────────────────────────────────────────────── */
+.toast {
+  position: absolute;
+  bottom: 78px;
+  left: 50%;
+  transform: translateX(-50%);
+  background: var(--dark);
+  color: white;
+  padding: 10px 20px;
+  border-radius: 20px;
+  font-size: 0.82rem;
+  font-weight: 700;
+  z-index: 300;
+  white-space: nowrap;
+  animation: toastUp 0.3s;
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
+}
+
+@keyframes toastUp {
+  from { opacity: 0; transform: translateX(-50%) translateY(8px); }
+}
+
+.dvd { height: 1px; background: var(--card-border); margin: 14px 0; }
+.row { display: flex; align-items: center; gap: 8px; }
+.spacer { flex: 1; }
+
+@media (max-width: 380px) {
+  .screen { padding: 14px 12px 20px; }
 }