feat: UI-Umbau - weiches Dunkel, Schriftgroessen-Regler, Sprechblasen umschaltbar, Einstellungen als Vollbild

Bernds Entscheidungen 2026-10-07:
- theme.dart: ThemeVariant (Dunkel = neues weiches Dunkelgrau als Standard,
  Schwarz = bisheriges Fast-Schwarz, Hell) mit PyramidPalette; Nebentexte
  kontrastreicher. Alte Einstellung theme_dark wird uebernommen
  (dunkel -> weiches Dunkel). Fest verdrahtete Dunkelfarben im Profil-Popup
  und GIF-Picker folgen jetzt dem Farbmodus.
- appearance.dart: Schriftgroesse = Pyramid-Regler x Systemeinstellung
  (Handy-Standard 115 %, PC 100 %), MessageStyle Automatisch/Sprechblasen/
  Liste, gemeinsame isMobileLayout-Regel.
- message_bubbles.dart: Sprechblasen-Darstellung (eigene rechts in
  Akzentfarbe, Gruppen mit Name + Avatar, Bilder ohne Blase in voller Groesse);
  Listen-Darstellung unveraendert, Weiche in MessageGroup.
- Formatierte Nachrichten (u. a. Antworten) nutzten RichText ohne
  Schriftskalierung -> erschienen kleiner; jetzt Text.rich.
- Einstellungen auf dem Handy als ganze Seite, Schalter unter dem Text.
- UI-Durchlauf um Liste/Hell/Gruppe/Einstellungen erweitert; Tests fuer
  Theme-Varianten, Uebernahme alter Werte, Schriftfaktor, Darstellung.

Co-Authored-By: Claude Opus 5.5 <[email protected]>

lib/widgets/settings_modal.dart

@@ -21,6 +21,7 @@ import 'package:pretty_qr_code/pretty_qr_code.dart';
 import 'package:path_provider/path_provider.dart';
 import 'package:pointycastle/export.dart' as pc;
 import 'package:pyramid/core/app_state.dart';
+import 'package:pyramid/core/appearance.dart';
 import 'package:pyramid/core/auth_log.dart';
 import 'package:pyramid/core/e2ee_diagnostics.dart';
 import 'package:pyramid/features/auth/bootstrap_dialog.dart' show isKeyBackupMissing;
@@ -85,7 +86,7 @@ class _SettingsModalState extends ConsumerState<SettingsModal> {
   @override
   Widget build(BuildContext context) {
     final pt = PyramidTheme.of(context);
-    final isDark = ref.watch(themeModeProvider);
+    final isDark = ref.watch(themeVariantProvider).isDark;
     final accentIdx = ref.watch(accentProvider);
     final radius = ref.watch(radiusProvider);
     final density = ref.watch(densityProvider);
@@ -101,24 +102,30 @@ class _SettingsModalState extends ConsumerState<SettingsModal> {
         child: Center(
           child: GestureDetector(
             onTap: () {},
+            // Handy: ganze Seite (wie System-Einstellungen) statt schwebender
+            // Karte mit abgedunkeltem Rand – mehr Platz, weniger Gequetsche.
             child: Container(
-              constraints: const BoxConstraints(maxWidth: 820, maxHeight: 660),
-              width: isMobile ? size.width * 0.97 : 740,
-              height: isMobile ? size.height * 0.92 : 560,
+              constraints: isMobile
+                  ? null
+                  : const BoxConstraints(maxWidth: 820, maxHeight: 660),
+              width: isMobile ? size.width : 740,
+              height: isMobile ? size.height : 560,
               decoration: BoxDecoration(
                 color: pt.bg1,
-                borderRadius: BorderRadius.circular(pt.rXl),
-                border: Border.all(color: pt.border),
-                boxShadow: [
-                  BoxShadow(
-                    color: Colors.black.withAlpha(130),
-                    blurRadius: 40,
-                    offset: const Offset(0, 12),
-                  ),
-                ],
+                borderRadius: BorderRadius.circular(isMobile ? 0 : pt.rXl),
+                border: isMobile ? null : Border.all(color: pt.border),
+                boxShadow: isMobile
+                    ? null
+                    : [
+                        BoxShadow(
+                          color: Colors.black.withAlpha(130),
+                          blurRadius: 40,
+                          offset: const Offset(0, 12),
+                        ),
+                      ],
               ),
               child: ClipRRect(
-                borderRadius: BorderRadius.circular(pt.rXl),
+                borderRadius: BorderRadius.circular(isMobile ? 0 : pt.rXl),
                 child: isMobile
                     ? _mobileLayout(pt, isDark, accentIdx, radius, density, motion)
                     : _desktopLayout(pt, isDark, accentIdx, radius, density, motion),
@@ -242,10 +249,15 @@ class _SettingsModalState extends ConsumerState<SettingsModal> {
 
   Widget _buildContent(PyramidTheme pt, bool isDark, int accentIdx,
       double radius, double density, double motion, String section) {
+    final variant = ref.watch(themeVariantProvider);
+    final textScale = ref.watch(textScaleProvider);
+    final messageStyle = ref.watch(messageStyleProvider);
     return switch (section) {
       'appearance' => _AppearanceSection(
           pt: pt,
-          isDark: isDark,
+          variant: variant,
+          textScale: textScale,
+          messageStyle: messageStyle,
           accentIdx: accentIdx,
           radius: radius,
           density: density,
@@ -261,7 +273,9 @@ class _SettingsModalState extends ConsumerState<SettingsModal> {
       'about' => _AboutSection(pt: pt),
       _ => _AppearanceSection(
           pt: pt,
-          isDark: isDark,
+          variant: variant,
+          textScale: textScale,
+          messageStyle: messageStyle,
           accentIdx: accentIdx,
           radius: radius,
           density: density,