From 1774d7df884930ea8acfe17b4750ef5ca2388368 Mon Sep 17 00:00:00 2001
From: "Torsten Schulz (local)" <tsschulz@gmx.net>
Date: Thu, 19 Mar 2026 16:18:51 +0100
Subject: [PATCH] Refactor feedback handling across components: Replace `alert`
 and `confirm` calls with centralized feedback functions for improved user
 experience. Update various components to utilize `showError`, `showSuccess`,
 and `confirmAction` for consistent messaging and confirmation dialogs.
 Enhance UI responsiveness and maintainability by streamlining feedback logic.

---
 docs/USABILITY_CONCEPT.md                     |  38 +-
 frontend/src/components/AppNavigation.vue     |  49 +-
 .../src/components/falukant/DirectorInfo.vue  |  11 +-
 .../components/falukant/ProductionSection.vue |   5 +-
 .../src/components/falukant/SaleSection.vue   |  11 +-
 .../components/falukant/StorageSection.vue    |   9 +-
 .../src/dialogues/chat/MultiChatDialog.vue    |   6 +-
 .../socialnetwork/CreateFolderDialog.vue      |   3 +-
 .../socialnetwork/UserProfileDialog.vue       |   6 +-
 .../src/dialogues/standard/ChooseDialog.vue   |   2 -
 frontend/src/utils/feedback.js                |   8 +-
 frontend/src/views/admin/MinigamesView.vue    |  47 +-
 .../src/views/admin/ServicesStatusView.vue    |   7 +-
 frontend/src/views/admin/TaxiToolsView.vue    |  37 +-
 .../views/admin/falukant/CreateNPCView.vue    |   4 +-
 .../views/admin/falukant/MapRegionsView.vue   |  17 +-
 frontend/src/views/blog/BlogEditorView.vue    |   3 +-
 frontend/src/views/falukant/BankView.vue      |   4 +-
 frontend/src/views/falukant/BranchView.vue    |  23 +-
 frontend/src/views/falukant/ChurchView.vue    |   6 +-
 frontend/src/views/falukant/EducationView.vue |   4 +-
 frontend/src/views/falukant/FamilyView.vue    |  13 +-
 frontend/src/views/falukant/HouseView.vue     | 152 +++--
 frontend/src/views/falukant/NobilityView.vue  |   6 +-
 frontend/src/views/falukant/OverviewView.vue  | 202 +++---
 frontend/src/views/falukant/PoliticsView.vue  | 383 ++++++-----
 frontend/src/views/minigames/Match3Game.vue   | 616 +++++++++---------
 frontend/src/views/minigames/TaxiGame.vue     |   5 +-
 frontend/src/views/personal/CalendarView.vue  |   5 +-
 frontend/src/views/social/FriendsView.vue     |   6 +-
 frontend/src/views/social/SearchView.vue      |  73 ++-
 .../src/views/social/VocabCourseListView.vue  |   9 +-
 frontend/src/views/social/VocabCourseView.vue | 218 +++----
 frontend/src/views/social/VocabLessonView.vue | 118 ++--
 .../src/views/social/VocabTrainerView.vue     |   8 +-
 35 files changed, 1097 insertions(+), 1017 deletions(-)

diff --git a/docs/USABILITY_CONCEPT.md b/docs/USABILITY_CONCEPT.md
index bba6c75..bd3a079 100644
--- a/docs/USABILITY_CONCEPT.md
+++ b/docs/USABILITY_CONCEPT.md
@@ -343,6 +343,33 @@ Aktueller Stand:
 - breite Tabellen auf kleinen Screens per horizontalem Scroll-Fallback abgesichert
 - globale Touch-Ziele fuer Buttons leicht vergroessert und letzte Shell-Kanten geglaettet
 
+### Phase U6: Vereinfachung und Restentruempelung
+
+Ergebnis:
+
+- die letzten spuerbaren Bedienhuerden aus Altmustern, Scrolllogik und funktionslastigen Ansichten werden systematisch entfernt
+
+Arbeit:
+
+- verbliebene `alert`-/`confirm`-Fluesse auf das zentrale Feedbacksystem umstellen
+- verschachtelte Scrollcontainer in Falukant, Admin und Minigames entfernen oder entkoppeln
+- tabellenlastige Kernansichten auf klarere Aufgabenreihenfolge pruefen
+- Debug-/Altinteraktionen aus grossen Kernviews reduzieren, wenn sie Bedienbarkeit oder Folgepflege stoeren
+
+Aktueller Stand:
+
+- `U6.1` abgeschlossen
+- `U6.2` abgeschlossen
+- `U6.3` abgeschlossen
+- `U6.4` abgeschlossen
+- aus der Review nach U5 als eigener Nachlauf identifiziert
+- Fokus bewusst nicht mehr auf Redesign, sondern auf Reibungsabbau in realen Nutzungswegen
+- priorisierte Teilpakete:
+- `U6.1 Feedback vereinheitlichen`
+- `U6.2 Scroll- und Layoutfallen entfernen`
+- `U6.3 Tabellen- und Arbeitsflaechen vereinfachen`
+- `U6.4 Interaktionsaltlasten reduzieren`
+
 ## Konkreter Arbeitskatalog
 
 ### 1. Shell und Navigation
@@ -378,6 +405,13 @@ Aktueller Stand:
 - breite Inhalte auf kleine Screens pruefen
 - Dialoge und Tabellen fuer Touch pruefen
 
+### 6. Vereinfachungsreview
+
+- Restbestände an `alert`, `confirm` und lokalen Sonderdialogen abbauen
+- komplexe Tabellenbereiche in Aufgabenfolge statt nur Datenanzeige gliedern
+- verschachtelte Scrollbereiche konsequent entfernen
+- Debug-/Sonderlogik in Kerninteraktionen auf Bedienrelevanz pruefen
+
 ## Definition of Done
 
 Das Bedienbarkeitsprojekt gilt als abgeschlossen, wenn:
@@ -386,6 +420,7 @@ Das Bedienbarkeitsprojekt gilt als abgeschlossen, wenn:
 - P1- und P2-Probleme aus dem Audit abgearbeitet sind
 - Navigation, Formulare, Dialoge und Feedback nach gemeinsamen Regeln funktionieren
 - Kernaufgaben auf Desktop und kleinem Viewport ohne strukturelle Reibung moeglich sind
+- verbleibende Altinteraktionen in Kernpfaden keine zusaetzliche Bedienlogik mehr erzwingen
 - Restpunkte nur noch P3/P4-Feinschliff sind
 
 ## Empfohlene Reihenfolge
@@ -395,7 +430,8 @@ Das Bedienbarkeitsprojekt gilt als abgeschlossen, wenn:
 3. Formulare und Abschlusslogik
 4. Falukant, Vokabeltrainer, Admin, Minigames
 5. Mobile Endabnahme
+6. Vereinfachungsnachlauf ueber Feedback, Scrolllogik und tabellenlastige Restbereiche
 
 ## Naechster konkreter Schritt
 
-Der erste sinnvolle Umsetzungsschritt ist nicht sofort Code, sondern ein kurzer UX-Audit-Durchgang ueber die wichtigsten Aufgabenfluesse. Daraus entsteht ein priorisierter Problemkatalog, auf dessen Basis die Bedienbarkeitsarbeit strukturiert umgesetzt wird.
+Der naechste sinnvolle Umsetzungsschritt ist `U6.1 Feedback vereinheitlichen`: alle verbliebenen `alert`-/`confirm`-Fluesse in Kernpfaden auf das zentrale Feedback- und Bestätigungssystem ziehen und dabei zugleich die groebsten Altinteraktionen in Falukant, Kalender, Vokabeln und Admin bereinigen.
diff --git a/frontend/src/components/AppNavigation.vue b/frontend/src/components/AppNavigation.vue
index 71e2cfc..703ba3e 100644
--- a/frontend/src/components/AppNavigation.vue
+++ b/frontend/src/components/AppNavigation.vue
@@ -175,24 +175,11 @@
 
 <script>
 import { mapGetters, mapActions } from 'vuex';
-import { createApp } from 'vue';
 import apiClient from '@/utils/axios.js';
 import { EventBus } from '@/utils/eventBus.js';
 
-import RandomChatDialog from '../dialogues/chat/RandomChatDialog.vue';
-import MultiChatDialog from '../dialogues/chat/MultiChatDialog.vue';
-
-// Wichtig: die zentrale Instanzen importieren
-import store from '@/store';
-import router from '@/router';
-import i18n from '@/i18n';
-
 export default {
   name: 'AppNavigation',
-  components: {
-    RandomChatDialog,
-    MultiChatDialog
-  },
   data() {
     return {
       forumList: [],
@@ -292,7 +279,8 @@ export default {
       this.pinnedSubKey = this.pinnedSubKey === key ? null : key;
     },
 
-    collapseMenus() {
+    collapseMenus(options = {}) {
+      const { blurActiveElement = true } = options;
       this.expandedMainKey = null;
       this.expandedSubKey = null;
       this.pinnedMainKey = null;
@@ -305,11 +293,13 @@ export default {
         this.suppressHover = false;
         this.hoverReleaseTimer = null;
       }, 180);
-      this.$nextTick(() => {
-        if (document.activeElement && typeof document.activeElement.blur === 'function') {
-          document.activeElement.blur();
-        }
-      });
+      if (blurActiveElement) {
+        this.$nextTick(() => {
+          if (document.activeElement && typeof document.activeElement.blur === 'function') {
+            document.activeElement.blur();
+          }
+        });
+      }
     },
 
     handleDocumentClick(event) {
@@ -317,7 +307,7 @@ export default {
       if (!root || root.contains(event.target)) {
         return;
       }
-      this.collapseMenus();
+      this.collapseMenus({ blurActiveElement: false });
     },
 
     handleDocumentKeydown(event) {
@@ -435,10 +425,21 @@ export default {
     },
 
     openChat(userId) {
-      console.log('openChat:', userId);
-      // Datei erstellen und ans body anhängen
-      const container = document.createElement('div');
-      document.body.appendChild(container);
+      const dialogRef = this.$root.$refs.multiChatDialog;
+      const friend = this.friendsList.find((entry) => entry.id === userId);
+      if (!dialogRef || typeof dialogRef.open !== 'function') {
+        this.openProfile(userId);
+        return;
+      }
+      dialogRef.open();
+      if (!friend?.username) {
+        return;
+      }
+      window.setTimeout(() => {
+        if (dialogRef.usersInRoom?.some((user) => user.name === friend.username)) {
+          dialogRef.selectedTargetUser = friend.username;
+        }
+      }, 250);
     },
 
     /**
diff --git a/frontend/src/components/falukant/DirectorInfo.vue b/frontend/src/components/falukant/DirectorInfo.vue
index b7aeda1..0489dd4 100644
--- a/frontend/src/components/falukant/DirectorInfo.vue
+++ b/frontend/src/components/falukant/DirectorInfo.vue
@@ -179,6 +179,7 @@
 <script>
 import apiClient from '@/utils/axios.js';
 import NewDirectorDialog from '@/dialogues/falukant/NewDirectorDialog.vue';
+import { showError, showInfo, showSuccess } from '@/utils/feedback.js';
 
 export default {
   name: "DirectorInfo",
@@ -307,11 +308,11 @@ export default {
     },
 
     fireDirector() {
-      alert(this.$t('falukant.branch.director.fireAlert'));
+      showInfo(this, this.$t('falukant.branch.director.fireAlert'));
     },
 
     teachDirector() {
-      alert(this.$t('falukant.branch.director.teachAlert'));
+      showInfo(this, this.$t('falukant.branch.director.teachAlert'));
     },
 
     vehicleTypeOptions() {
@@ -440,11 +441,11 @@ export default {
           cost: 0.1,
           costLabel: '',
         };
-        alert(this.$t('falukant.branch.director.emptyTransport.success'));
+        showSuccess(this, this.$t('falukant.branch.director.emptyTransport.success'));
         this.$emit('transportCreated');
       } catch (error) {
         console.error('Error creating empty transport:', error);
-        alert(this.$t('falukant.branch.director.emptyTransport.error'));
+        showError(this, this.$t('falukant.branch.director.emptyTransport.error'));
       }
     },
   },
@@ -575,4 +576,4 @@ export default {
 .transport-route > div {
   margin-bottom: 0.25rem;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/frontend/src/components/falukant/ProductionSection.vue b/frontend/src/components/falukant/ProductionSection.vue
index 6c4ca68..eacc559 100644
--- a/frontend/src/components/falukant/ProductionSection.vue
+++ b/frontend/src/components/falukant/ProductionSection.vue
@@ -63,6 +63,7 @@
   
   <script>
   import apiClient from '@/utils/axios.js';
+  import { showApiError } from '@/utils/feedback.js';
   export default {
     name: "ProductionSection",
     props: { 
@@ -166,7 +167,7 @@
               });
               this.loadProductions();
             } catch (error) {
-              alert(this.$t(`falukant.branch.production.error${error.response.data.error}`));
+              showApiError(this, error, 'tr:error.network');
             }
           }
         }
@@ -205,4 +206,4 @@
     border: 1px solid #ddd;
   }
   </style>
-  
\ No newline at end of file
+  
diff --git a/frontend/src/components/falukant/SaleSection.vue b/frontend/src/components/falukant/SaleSection.vue
index 27aead0..a5d67ee 100644
--- a/frontend/src/components/falukant/SaleSection.vue
+++ b/frontend/src/components/falukant/SaleSection.vue
@@ -173,6 +173,7 @@
   
   <script>
   import apiClient from '@/utils/axios.js';
+  import { showError, showSuccess } from '@/utils/feedback.js';
   export default {
     name: "SaleSection",
     props: {
@@ -334,13 +335,13 @@
           quantity: quantityToSell,
           quality: item.quality,
         }).catch(() => {
-          alert(this.$t('falukant.branch.sale.sellError'));
+          showError(this, this.$t('falukant.branch.sale.sellError'));
         });
       },
       sellAll() {
         apiClient.post(`/api/falukant/sell/all`, { branchId: this.branchId })
         .catch(() => {
-          alert(this.$t('falukant.branch.sale.sellAllError'));
+          showError(this, this.$t('falukant.branch.sale.sellAllError'));
         });
       },
       inventoryOptions() {
@@ -502,11 +503,11 @@
           });
           await this.loadInventory();
           await this.loadTransports();
-          alert(this.$t('falukant.branch.sale.transportStarted'));
+          showSuccess(this, this.$t('falukant.branch.sale.transportStarted'));
           this.$emit('transportCreated');
         } catch (error) {
           console.error('Error creating transport:', error);
-          alert(this.$t('falukant.branch.sale.transportError'));
+          showError(this, this.$t('falukant.branch.sale.transportError'));
         }
       },
       async loadTransports() {
@@ -596,4 +597,4 @@
     font-style: italic;
   }
   </style>
-  
\ No newline at end of file
+  
diff --git a/frontend/src/components/falukant/StorageSection.vue b/frontend/src/components/falukant/StorageSection.vue
index c273713..4c02ede 100644
--- a/frontend/src/components/falukant/StorageSection.vue
+++ b/frontend/src/components/falukant/StorageSection.vue
@@ -76,6 +76,7 @@
   
   <script>
   import apiClient from '@/utils/axios.js';
+  import { showError } from '@/utils/feedback.js';
   export default {
     name: "StorageSection",
     props: { branchId: { type: Number, required: true } },
@@ -164,12 +165,12 @@
             });
           } catch (err) {
             console.error(err);
-            alert('Error buying storage for one part of the order');
+            showError(this, 'Fehler beim Kaufen eines Teils der Lagerkapazität.');
           }
           remainingAmount -= toBuy;
         }
         if (remainingAmount > 0) {
-          alert(this.$t('falukant.branch.storage.notEnoughAvailable'));
+          showError(this, this.$t('falukant.branch.storage.notEnoughAvailable'));
         }
         this.loadStorageData();
       },
@@ -185,7 +186,7 @@
         .then(() => this.loadStorageData())
         .catch(err => {
           console.error(err);
-          alert('Error selling storage');
+          showError(this, 'Fehler beim Verkaufen der Lagerkapazität.');
         });
       },
       getCostOfType(labelTr) {
@@ -216,4 +217,4 @@
     border: 1px solid #ddd;
   }
   </style>
-  
\ No newline at end of file
+  
diff --git a/frontend/src/dialogues/chat/MultiChatDialog.vue b/frontend/src/dialogues/chat/MultiChatDialog.vue
index d093421..cc80f04 100644
--- a/frontend/src/dialogues/chat/MultiChatDialog.vue
+++ b/frontend/src/dialogues/chat/MultiChatDialog.vue
@@ -239,6 +239,7 @@ import DialogWidget from '@/components/DialogWidget.vue';
 import { fetchPublicRooms, fetchRoomCreateOptions, fetchOwnRooms } from '@/api/chatApi.js';
 import { mapGetters } from 'vuex';
 import { getChatWsUrl, getChatWsCandidates, getChatWsProtocols } from '@/services/chatWs.js';
+import { confirmAction } from '@/utils/feedback.js';
 
 export default {
     name: 'MultiChat',
@@ -561,7 +562,10 @@ export default {
         },
         async deleteOwnedRoom(room) {
             const title = room?.title || '';
-            const confirmed = window.confirm(this.$t('chat.multichat.createRoom.ownedRooms.confirmDelete', { room: title }));
+            const confirmed = await confirmAction(this, {
+                title: this.$t('chat.multichat.createRoom.ownedRooms.title'),
+                message: this.$t('chat.multichat.createRoom.ownedRooms.confirmDelete', { room: title })
+            });
             if (!confirmed) return;
             if (!this.transportConnected) {
                 this.messages.push({
diff --git a/frontend/src/dialogues/socialnetwork/CreateFolderDialog.vue b/frontend/src/dialogues/socialnetwork/CreateFolderDialog.vue
index a6dfd81..ca9590a 100644
--- a/frontend/src/dialogues/socialnetwork/CreateFolderDialog.vue
+++ b/frontend/src/dialogues/socialnetwork/CreateFolderDialog.vue
@@ -41,6 +41,7 @@ import DialogWidget from '@/components/DialogWidget.vue';
 import { mapGetters } from 'vuex';
 import apiClient from '@/utils/axios.js';
 import { EventBus } from '@/utils/eventBus.js';
+import { showError } from '@/utils/feedback.js';
 
 export default {
     name: 'CreateFolderDialog',
@@ -93,7 +94,7 @@ export default {
         },
         async createFolder() {
             if (!this.folderTitle || !this.selectedVisibility.length) {
-                alert(this.$t('socialnetwork.gallery.errors.missing_fields'));
+                showError(this, this.$t('socialnetwork.gallery.errors.missing_fields'));
                 return;
             }
             const payload = {
diff --git a/frontend/src/dialogues/socialnetwork/UserProfileDialog.vue b/frontend/src/dialogues/socialnetwork/UserProfileDialog.vue
index 38163e6..487cbb6 100644
--- a/frontend/src/dialogues/socialnetwork/UserProfileDialog.vue
+++ b/frontend/src/dialogues/socialnetwork/UserProfileDialog.vue
@@ -97,6 +97,7 @@ import FolderItem from '../../components/FolderItem.vue';
 import { Editor, EditorContent } from '@tiptap/vue-3'
 import StarterKit from '@tiptap/starter-kit'
 import DOMPurify from 'dompurify';
+import { showError } from '@/utils/feedback.js';
 
 export default {
     name: 'UserProfileDialog',
@@ -265,7 +266,10 @@ export default {
             }
         },
         async submitGuestbookEntry() {
-            if (!this.newEntryContent) return alert(this.$t('socialnetwork.guestbook.emptyContent'));
+            if (!this.newEntryContent) {
+                showError(this, this.$t('socialnetwork.guestbook.emptyContent'));
+                return;
+            }
             const formData = new FormData();
             formData.append('htmlContent', this.newEntryContent);
             formData.append('recipientName', this.userProfile.username);
diff --git a/frontend/src/dialogues/standard/ChooseDialog.vue b/frontend/src/dialogues/standard/ChooseDialog.vue
index 0bcce9e..69ba48d 100644
--- a/frontend/src/dialogues/standard/ChooseDialog.vue
+++ b/frontend/src/dialogues/standard/ChooseDialog.vue
@@ -42,12 +42,10 @@ export default {
             this.$refs.dialog.close();
         },
         confirmYes() {
-            console.log('ja');
             this.resolve(true);
             this.close();
         },
         confirmNo() {
-            console.log('nein');
             this.resolve(false);
             this.close();
         },
diff --git a/frontend/src/utils/feedback.js b/frontend/src/utils/feedback.js
index 5582894..abac29c 100644
--- a/frontend/src/utils/feedback.js
+++ b/frontend/src/utils/feedback.js
@@ -52,6 +52,11 @@ export function showApiError(context, error, fallback = 'tr:error.network') {
   showError(context, fallback, fallback);
 }
 
+export async function confirmAction(context, options = {}) {
+  const refs = getRootRefs(context);
+  return refs.chooseDialog?.open?.(options) ?? false;
+}
+
 export default {
   install(app) {
     const getAppContext = () => app._instance?.proxy;
@@ -61,7 +66,8 @@ export default {
       showSuccess: (...args) => showSuccess(getAppContext(), ...args),
       showInfo: (...args) => showInfo(getAppContext(), ...args),
       showError: (...args) => showError(getAppContext(), ...args),
-      showApiError: (...args) => showApiError(getAppContext(), ...args)
+      showApiError: (...args) => showApiError(getAppContext(), ...args),
+      confirmAction: (...args) => confirmAction(getAppContext(), ...args)
     };
   }
 };
diff --git a/frontend/src/views/admin/MinigamesView.vue b/frontend/src/views/admin/MinigamesView.vue
index fdd33d5..d0b2616 100644
--- a/frontend/src/views/admin/MinigamesView.vue
+++ b/frontend/src/views/admin/MinigamesView.vue
@@ -1,6 +1,5 @@
 <template>
-  <div class="contenthidden">
-    <div class="contentscroll">
+  <div class="admin-minigames-view">
       <div class="admin-header">
         <h1>{{ $t('admin.match3.title') }}</h1>
         <p>Verwalte Minigames, Level und Konfigurationen</p>
@@ -14,7 +13,7 @@
           <div>
             <span class="workflow-hero__eyebrow">Arbeitsfluss</span>
             <h2>{{ $t('admin.match3.title') }}</h2>
-            <p>Erst Level waehlen, dann Spielfeld und Ziele anpassen und erst am Ende speichern.</p>
+            <p>Erst Level wählen, dann Spielfeld und Ziele anpassen und erst am Ende speichern.</p>
           </div>
           <div class="workflow-hero__meta">
             <span class="workflow-pill">{{ currentModeLabel }}</span>
@@ -26,12 +25,12 @@
           <article class="workflow-card surface-card">
             <span class="workflow-card__step">1</span>
             <h3>Level waehlen</h3>
-            <p>Bestehendes Level oeffnen oder sofort mit einer neuen Vorlage starten.</p>
+            <p>Bestehendes Level öffnen oder sofort mit einer neuen Vorlage starten.</p>
           </article>
           <article class="workflow-card surface-card">
             <span class="workflow-card__step">2</span>
             <h3>Spielfeld bauen</h3>
-            <p>Groesse, Zuege, Kacheln und Layout zuerst festziehen, bevor Ziele folgen.</p>
+            <p>Größe, Züge, Kacheln und Layout zuerst festziehen, bevor Ziele folgen.</p>
           </article>
           <article class="workflow-card surface-card">
             <span class="workflow-card__step">3</span>
@@ -79,7 +78,7 @@
           <article class="admin-summary-card surface-card">
             <span class="admin-summary-card__label">Spielfeld</span>
             <strong>{{ levelForm.boardWidth }} x {{ levelForm.boardHeight }}</strong>
-            <p>{{ levelForm.moveLimit }} Zuege, {{ levelForm.tileTypes.length }} aktive Tile-Typen.</p>
+            <p>{{ levelForm.moveLimit }} Züge, {{ levelForm.tileTypes.length }} aktive Tile-Typen.</p>
           </article>
           <article class="admin-summary-card surface-card">
             <span class="admin-summary-card__label">Objectives</span>
@@ -601,14 +600,13 @@
           </form>
         </div>
       </div>
-    </div>
   </div>
 </template>
 
 <script>
 import SimpleTabs from '../../components/SimpleTabs.vue';
 import apiClient from '../../utils/axios.js';
-import { showError, showSuccess } from '@/utils/feedback.js';
+import { confirmAction, showError, showSuccess } from '@/utils/feedback.js';
 
 export default {
   name: 'AdminMinigamesView',
@@ -1016,15 +1014,20 @@ export default {
     },
 
     async deleteLevel(levelId) {
-      if (confirm('Möchtest du dieses Level wirklich löschen?')) {
-        try {
-          await apiClient.delete(`/api/admin/minigames/match3/levels/${levelId}`);
-          this.loadLevels();
-          showSuccess(this, 'Level wurde geloescht.');
-        } catch (error) {
-          console.error('Fehler beim Löschen des Levels:', error);
-          showError(this, 'Fehler beim Loeschen des Levels');
-        }
+      const confirmed = await confirmAction(this, {
+        title: 'Level löschen',
+        message: 'Möchtest du dieses Level wirklich löschen?'
+      });
+      if (!confirmed) {
+        return;
+      }
+      try {
+        await apiClient.delete(`/api/admin/minigames/match3/levels/${levelId}`);
+        this.loadLevels();
+        showSuccess(this, 'Level wurde gelöscht.');
+      } catch (error) {
+        console.error('Fehler beim Löschen des Levels:', error);
+        showError(this, 'Fehler beim Löschen des Levels');
       }
     },
 
@@ -1047,14 +1050,20 @@ export default {
     },
 
     removeObjective(index) {
-      if (confirm('Möchtest du dieses Objective wirklich löschen?')) {
+      confirmAction(this, {
+        title: 'Ziel löschen',
+        message: 'Möchtest du dieses Objective wirklich löschen?'
+      }).then((confirmed) => {
+        if (!confirmed) {
+          return;
+        }
         this.levelForm.objectives.splice(index, 1);
         
         // Aktualisiere die Reihenfolge
         this.levelForm.objectives.forEach((objective, idx) => {
           objective.order = idx + 1;
         });
-      }
+      });
     },
 
     async loadObjectivesForLevel(levelId) {
diff --git a/frontend/src/views/admin/ServicesStatusView.vue b/frontend/src/views/admin/ServicesStatusView.vue
index 26748d0..d801d77 100644
--- a/frontend/src/views/admin/ServicesStatusView.vue
+++ b/frontend/src/views/admin/ServicesStatusView.vue
@@ -1,6 +1,5 @@
 <template>
-  <div class="contenthidden">
-    <div class="contentscroll">
+  <div class="services-status-view">
       <div class="admin-header">
         <h1>{{ $t('admin.servicesStatus.title') }}</h1>
         <p>{{ $t('admin.servicesStatus.description') }}</p>
@@ -95,8 +94,7 @@
           </div>
         </div>
       </div>
-    </div>
-    
+
     <!-- WebSocket Log Dialog -->
     <WebSocketLogDialog ref="webSocketLogDialog" />
   </div>
@@ -481,4 +479,3 @@ export default {
   color: #c62828;
 }
 </style>
-
diff --git a/frontend/src/views/admin/TaxiToolsView.vue b/frontend/src/views/admin/TaxiToolsView.vue
index 6970947..fd31959 100644
--- a/frontend/src/views/admin/TaxiToolsView.vue
+++ b/frontend/src/views/admin/TaxiToolsView.vue
@@ -1,6 +1,5 @@
 <template>
-  <div class="contenthidden">
-    <div class="contentscroll">
+  <div class="admin-taxi-tools-view">
       <div class="admin-header">
         <h1>{{ $t('admin.taxiTools.title') }}</h1>
         <p>{{ $t('admin.taxiTools.description') }}</p>
@@ -367,8 +366,7 @@
           </form>
         </div>
       </div>
-    </div>
-    
+
     <!-- Message Dialog -->
     <MessageDialog ref="messageDialog" />
   </div>
@@ -378,6 +376,7 @@
 import SimpleTabs from '../../components/SimpleTabs.vue';
 import MessageDialog from '../../dialogues/standard/MessageDialog.vue';
 import apiClient from '../../utils/axios.js';
+import { confirmAction, showError, showSuccess } from '@/utils/feedback.js';
 
 // Matrix: erlaubte Haus-Tür-Richtungen je Tile-Typ und Ecke
 // Richtungen: bottom, right, top, left
@@ -1216,10 +1215,10 @@ export default {
         
         // Erfolgsmeldung anzeigen
         const message = isUpdate ? 'admin.taxiTools.mapEditor.updateSuccess' : 'admin.taxiTools.mapEditor.createSuccess';
-        this.$refs.messageDialog.open(`tr:${message}`);
+        showSuccess(this, `tr:${message}`);
       } catch (error) {
         console.error('Fehler beim Speichern der Map:', error);
-        alert('Fehler beim Speichern der Map');
+        showError(this, 'Fehler beim Speichern der Map');
       }
     },
 
@@ -1247,16 +1246,20 @@ export default {
     },
 
     async deleteMap(mapId) {
-      if (confirm('Möchtest du diese Map wirklich löschen?')) {
-        try {
-          await apiClient.delete(`/api/taxi-maps/maps/${mapId}`);
-          this.loadMaps();
-          
-          // Erfolgsmeldung anzeigen
-          this.$refs.messageDialog.open('tr:admin.taxiTools.mapEditor.deleteSuccess');
-        } catch (error) {
-          console.error('Fehler beim Löschen der Map:', error);
-        }
+      const confirmed = await confirmAction(this, {
+        title: 'Map löschen',
+        message: 'Möchtest du diese Map wirklich löschen?'
+      });
+      if (!confirmed) {
+        return;
+      }
+      try {
+        await apiClient.delete(`/api/taxi-maps/maps/${mapId}`);
+        this.loadMaps();
+        showSuccess(this, 'tr:admin.taxiTools.mapEditor.deleteSuccess');
+      } catch (error) {
+        console.error('Fehler beim Löschen der Map:', error);
+        showError(this, 'Fehler beim Löschen der Map');
       }
     }
   }
@@ -1692,4 +1695,4 @@ export default {
     height: 40px;
   }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/frontend/src/views/admin/falukant/CreateNPCView.vue b/frontend/src/views/admin/falukant/CreateNPCView.vue
index d55489c..fc8f75b 100644
--- a/frontend/src/views/admin/falukant/CreateNPCView.vue
+++ b/frontend/src/views/admin/falukant/CreateNPCView.vue
@@ -1,6 +1,5 @@
 <template>
-  <div class="contenthidden">
-    <div class="contentscroll">
+  <div class="create-npc-page">
       <div class="create-npc-view">
         <h1>{{ $t('admin.falukant.createNPC.title') }}</h1>
     
@@ -102,7 +101,6 @@
     <div v-if="error" class="error-message">
       {{ error }}
     </div>
-      </div>
     </div>
   </div>
 </template>
diff --git a/frontend/src/views/admin/falukant/MapRegionsView.vue b/frontend/src/views/admin/falukant/MapRegionsView.vue
index f2b4e66..dc802a7 100644
--- a/frontend/src/views/admin/falukant/MapRegionsView.vue
+++ b/frontend/src/views/admin/falukant/MapRegionsView.vue
@@ -1,6 +1,5 @@
 <template>
-  <div class="contenthidden">
-    <div class="contentscroll falukant-map-admin">
+  <div class="falukant-map-admin">
       <div class="admin-header">
         <h1>{{ $t('admin.falukant.map.title') }}</h1>
         <p>{{ $t('admin.falukant.map.description') }}</p>
@@ -212,13 +211,13 @@
           </div>
         </div>
       </div>
-    </div>
   </div>
 </template>
 
 <script>
 import apiClient from '@/utils/axios.js';
 import SimpleTabs from '@/components/SimpleTabs.vue';
+import { confirmAction, showError } from '@/utils/feedback.js';
 
 export default {
   name: 'AdminFalukantMapRegionsView',
@@ -469,17 +468,21 @@ export default {
         await this.loadConnections();
       } catch (error) {
         console.error('Error saving region distance:', error);
-        alert(this.$t('admin.falukant.map.errorSaveConnection'));
+        showError(this, this.$t('admin.falukant.map.errorSaveConnection'));
       }
     },
     async deleteConnection(id) {
-      if (!confirm(this.$t('admin.falukant.map.confirmDeleteConnection'))) return;
+      const confirmed = await confirmAction(this, {
+        title: this.$t('admin.falukant.map.connectionsTitle'),
+        message: this.$t('admin.falukant.map.confirmDeleteConnection')
+      });
+      if (!confirmed) return;
       try {
         await apiClient.delete(`/api/admin/falukant/region-distances/${id}`);
         await this.loadConnections();
       } catch (error) {
         console.error('Error deleting region distance:', error);
-        alert(this.$t('admin.falukant.map.errorDeleteConnection'));
+        showError(this, this.$t('admin.falukant.map.errorDeleteConnection'));
       }
     },
     regionName(id) {
@@ -635,5 +638,3 @@ export default {
 .btn.mini.icon {
 }
 </style>
-
-
diff --git a/frontend/src/views/blog/BlogEditorView.vue b/frontend/src/views/blog/BlogEditorView.vue
index 0ef16f9..d2efd9a 100644
--- a/frontend/src/views/blog/BlogEditorView.vue
+++ b/frontend/src/views/blog/BlogEditorView.vue
@@ -65,6 +65,7 @@
 <script>
 import { createBlog, updateBlog, getBlog, createPost, shareBlog } from '@/api/blogApi.js';
 import RichTextEditor from './components/RichTextEditor.vue';
+import { showError } from '@/utils/feedback.js';
 export default {
   name: 'BlogEditorView',
   components: { RichTextEditor },
@@ -107,7 +108,7 @@ export default {
     async save() {
       if (this.form.visibility === 'logged_in') {
         if (this.form.ageMin != null && this.form.ageMax != null && this.form.ageMin > this.form.ageMax) {
-          alert('Ungültiger Altersbereich');
+          showError(this, 'Ungültiger Altersbereich');
           return;
         }
       }
diff --git a/frontend/src/views/falukant/BankView.vue b/frontend/src/views/falukant/BankView.vue
index 250ca5a..ffa22c0 100644
--- a/frontend/src/views/falukant/BankView.vue
+++ b/frontend/src/views/falukant/BankView.vue
@@ -1,7 +1,7 @@
 <template>
-  <div class="contenthidden">
+  <div class="bank-view">
     <StatusBar />
-    <div class="contentscroll">
+    <div class="bank-content">
 
       <h2>{{ $t('falukant.bank.title') }}</h2>
       <SimpleTabs v-model="activeTab" :tabs="tabs" />
diff --git a/frontend/src/views/falukant/BranchView.vue b/frontend/src/views/falukant/BranchView.vue
index e6101d1..7b36bc2 100644
--- a/frontend/src/views/falukant/BranchView.vue
+++ b/frontend/src/views/falukant/BranchView.vue
@@ -1,8 +1,7 @@
 <template>
-    <div class="contenthidden">
+    <div class="falukant-branch-view">
         <StatusBar ref="statusBar" />
-        <div class="contentscroll">
-            <div class="falukant-branch">
+        <div class="falukant-branch">
             <section class="branch-hero surface-card">
                 <div>
                     <span class="branch-kicker">Niederlassung</span>
@@ -315,7 +314,6 @@
                     </div>
                 </div>
             </div>
-            </div>
         </div>
     </div>
 </template>
@@ -332,6 +330,7 @@ import RevenueSection from '@/components/falukant/RevenueSection.vue';
 import BuyVehicleDialog from '@/dialogues/falukant/BuyVehicleDialog.vue';
 import apiClient from '@/utils/axios.js';
 import { mapState } from 'vuex';
+import { showError, showSuccess, showApiError } from '@/utils/feedback.js';
 
 export default {
     name: "BranchView",
@@ -657,7 +656,7 @@ export default {
                 }
             } catch (error) {
                 console.error('Error upgrading branch:', error);
-                alert(this.$t('falukant.branch.actions.upgradeAlert', { branchId: this.selectedBranch.id }));
+                showError(this, this.$t('falukant.branch.actions.upgradeAlert', { branchId: this.selectedBranch.id }));
             }
         },
 
@@ -956,7 +955,7 @@ export default {
 
         async sendVehicles() {
             if (!this.sendVehicleDialog.targetBranchId) {
-                alert(this.$t('falukant.branch.transport.selectTargetError'));
+                showError(this, this.$t('falukant.branch.transport.selectTargetError'));
                 return;
             }
 
@@ -975,7 +974,7 @@ export default {
                 } else if (this.sendVehicleDialog.vehicleTypeId) {
                     payload.vehicleTypeId = this.sendVehicleDialog.vehicleTypeId;
                 } else {
-                    alert(this.$t('falukant.branch.transport.noVehiclesSelected'));
+                    showError(this, this.$t('falukant.branch.transport.noVehiclesSelected'));
                     return;
                 }
 
@@ -984,7 +983,7 @@ export default {
                 this.sendVehicleDialog.success = true;
             } catch (error) {
                 console.error('Error sending vehicles:', error);
-                alert(this.$t('falukant.branch.transport.sendError'));
+                showApiError(this, error, this.$t('falukant.branch.transport.sendError'));
             }
         },
 
@@ -1043,12 +1042,12 @@ export default {
                 });
                 await this.loadVehicles();
                 this.closeRepairAllVehiclesDialog();
-                alert(this.$t('falukant.branch.transport.repairAllSuccess'));
+                showSuccess(this, this.$t('falukant.branch.transport.repairAllSuccess'));
                 this.$refs.statusBar?.fetchStatus();
             } catch (error) {
                 console.error('Error repairing all vehicles:', error);
                 const errorMessage = error.response?.data?.message || this.$t('falukant.branch.transport.repairAllError');
-                alert(errorMessage);
+                showError(this, errorMessage);
             }
         },
 
@@ -1105,12 +1104,12 @@ export default {
                 await apiClient.post(`/api/falukant/vehicles/${this.repairVehicleDialog.vehicle.id}/repair`);
                 await this.loadVehicles();
                 this.closeRepairVehicleDialog();
-                alert(this.$t('falukant.branch.transport.repairSuccess'));
+                showSuccess(this, this.$t('falukant.branch.transport.repairSuccess'));
                 this.$refs.statusBar?.fetchStatus();
             } catch (error) {
                 console.error('Error repairing vehicle:', error);
                 const errorMessage = error.response?.data?.message || this.$t('falukant.branch.transport.repairError');
-                alert(errorMessage);
+                showError(this, errorMessage);
             }
         },
     },
diff --git a/frontend/src/views/falukant/ChurchView.vue b/frontend/src/views/falukant/ChurchView.vue
index 109ac46..a48e15e 100644
--- a/frontend/src/views/falukant/ChurchView.vue
+++ b/frontend/src/views/falukant/ChurchView.vue
@@ -1,7 +1,7 @@
 <template>
-  <div class="contenthidden">
+  <div class="church-view">
     <StatusBar />
-    <div class="contentscroll">
+    <div class="church-content">
       <h2>{{ $t('falukant.church.title') }}</h2>
       <SimpleTabs v-model="activeTab" :tabs="tabs" />
 
@@ -450,4 +450,4 @@ th {
 .reject-button:hover {
   background-color: #c82333;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/frontend/src/views/falukant/EducationView.vue b/frontend/src/views/falukant/EducationView.vue
index 83e26b6..18d1cf9 100644
--- a/frontend/src/views/falukant/EducationView.vue
+++ b/frontend/src/views/falukant/EducationView.vue
@@ -1,7 +1,7 @@
 <template>
-    <div class="contenthidden">
+    <div class="education-view">
         <StatusBar />
-        <div class="contentscroll">
+        <div class="education-content">
             <h2>{{ $t('falukant.education.title') }}</h2>
             <SimpleTabs v-model="activeTab" :tabs="tabs" />
 
diff --git a/frontend/src/views/falukant/FamilyView.vue b/frontend/src/views/falukant/FamilyView.vue
index 0a552ee..f448a81 100644
--- a/frontend/src/views/falukant/FamilyView.vue
+++ b/frontend/src/views/falukant/FamilyView.vue
@@ -1,7 +1,7 @@
 <template>
-    <div class="contenthidden">
+    <div class="family-view">
         <StatusBar />
-        <div class="contentscroll family-layout">
+        <div class="family-layout">
             <div class="family-content">
             <section class="family-hero surface-card">
                 <div>
@@ -189,8 +189,7 @@
                     <p>{{ $t('falukant.family.lovers.none') }}</p>
                 </div>
             </div>
-
-            </div>
+        </div>
         </div>
         <ChildDetailsDialog ref="childDetailsDialog" />
     </div>
@@ -204,6 +203,7 @@ import ChildDetailsDialog from '@/dialogues/falukant/ChildDetailsDialog.vue'
 import Character3D from '@/components/Character3D.vue'
 
 import apiClient from '@/utils/axios.js'
+import { confirmAction } from '@/utils/feedback.js'
 import { mapState } from 'vuex'
 
 const WOOING_PROGRESS_TARGET = 70
@@ -350,7 +350,10 @@ export default {
         },
 
         async cancelWooing() {
-            const confirmed = window.confirm(this.$t('falukant.family.spouse.wooing.cancelConfirm'));
+            const confirmed = await confirmAction(this, {
+                title: 'Werbung abbrechen',
+                message: this.$t('falukant.family.spouse.wooing.cancelConfirm')
+            });
             if (!confirmed) return;
             try {
                 await apiClient.post('/api/falukant/family/cancel-wooing');
diff --git a/frontend/src/views/falukant/HouseView.vue b/frontend/src/views/falukant/HouseView.vue
index 246642a..3695e57 100644
--- a/frontend/src/views/falukant/HouseView.vue
+++ b/frontend/src/views/falukant/HouseView.vue
@@ -4,40 +4,33 @@
         <h2>{{ $t('falukant.house.title') }}</h2>
         <div class="existing-house">
             <div :style="houseType ? houseStyle(houseType.position, 341) : {}" class="house"></div>
-            <div class="status-panel">
+            <div class="status-panel surface-card">
                 <h3>{{ $t('falukant.house.statusreport') }}</h3>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>{{ $t('falukant.house.element') }}</th>
-                            <th>{{ $t('falukant.house.state') }}</th>
-                            <th></th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr v-for="(value, key) in status" :key="key">
-                            <td>{{ $t(`falukant.house.status.${key}`) }}</td>
-                            <td>{{ conditionLabel(value) }}</td>
-                            <td>
-                                <button v-if="value < 100" @click="renovate(key)">
-                                    {{ $t('falukant.house.renovate') }} ({{ getRenovationCost(key, value) }})
-                                </button>
-                            </td>
-                        </tr>
-                        <tr>
-                            <td>{{ $t('falukant.house.worth') }}</td>
-                            <td>{{ getWorth() }} {{ currency }}</td>
-                            <td>
-                                <button @click="renovateAll" :disabled="allRenovated">
-                                    {{ $t('falukant.house.renovateAll') }} ({{ getAllRenovationCost() }})
-                                </button>
-                                <button @click="sellHouse">
-                                    {{ $t('falukant.house.sell') }}
-                                </button>
-                            </td>
-                        </tr>
-                    </tbody>
-                </table>
+                <div class="status-cards">
+                    <article v-for="(value, key) in status" :key="key" class="status-card">
+                        <div>
+                            <span class="status-card__label">{{ $t(`falukant.house.status.${key}`) }}</span>
+                            <strong>{{ conditionLabel(value) }}</strong>
+                        </div>
+                        <button v-if="value < 100" @click="renovate(key)">
+                            {{ $t('falukant.house.renovate') }} ({{ getRenovationCost(key, value) }})
+                        </button>
+                    </article>
+                    <article class="status-card status-card--summary">
+                        <div>
+                            <span class="status-card__label">{{ $t('falukant.house.worth') }}</span>
+                            <strong>{{ getWorth() }} {{ currency }}</strong>
+                        </div>
+                        <div class="status-card__actions">
+                            <button @click="renovateAll" :disabled="allRenovated">
+                                {{ $t('falukant.house.renovateAll') }} ({{ getAllRenovationCost() }})
+                            </button>
+                            <button class="button-secondary" @click="sellHouse">
+                                {{ $t('falukant.house.sell') }}
+                            </button>
+                        </div>
+                    </article>
+                </div>
             </div>
         </div>
 
@@ -49,16 +42,15 @@
                         class="house-preview"></div>
                     <div class="house-info">
                         <h4>{{ $t(`falukant.house.type.${house.houseType.labelTr}`) }}</h4>
-                        <table>
-                            <tbody>
-                                <tr v-for="(val, prop) in house" :key="prop"
-                                    v-if="['roofCondition', 'wallCondition', 'floorCondition', 'windowCondition'].includes(prop)">
-                                    <td>{{ $t(`falukant.house.status.${prop}`) }}</td>
-                                    <td>{{ conditionLabel(val) }}</td>
-                                </tr>
-                            </tbody>
-                        </table>
-                        <div>
+                        <div class="buyable-house-stats">
+                            <div v-for="(val, prop) in house" :key="prop"
+                                v-if="['roofCondition', 'wallCondition', 'floorCondition', 'windowCondition'].includes(prop)"
+                                class="buyable-house-stat">
+                                <span>{{ $t(`falukant.house.status.${prop}`) }}</span>
+                                <strong>{{ conditionLabel(val) }}</strong>
+                            </div>
+                        </div>
+                        <div class="buyable-house-price">
                             {{ $t('falukant.house.price') }}: {{ buyCost(house) }}
                         </div>
                         <button @click="buyHouse(house.id)">
@@ -263,6 +255,7 @@ h2 {
 
 .status-panel {
     flex: 1;
+    padding: 18px;
 }
 
 .buyable-houses {
@@ -284,8 +277,12 @@ h2 {
 .house-item {
     display: flex;
     flex-direction: column;
-    gap: 5px;
+    gap: 12px;
     align-items: center;
+    padding: 18px;
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-lg);
+    background: rgba(255, 255, 255, 0.68);
 }
 
 .house-preview {
@@ -301,20 +298,73 @@ h2 {
     /* center sprite */
 }
 
-table {
+.house-info {
     width: 100%;
-    border-collapse: collapse;
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
 }
 
-table th,
-table td {
-    border: 1px solid #ddd;
-    padding: 8px;
-    text-align: left;
+.status-cards,
+.buyable-house-stats {
+    display: grid;
+    gap: 12px;
+}
+
+.status-card,
+.buyable-house-stat {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+    padding: 14px 16px;
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-lg);
+    background: rgba(255, 255, 255, 0.68);
+}
+
+.status-card__label,
+.buyable-house-stat span {
+    display: block;
+    margin-bottom: 4px;
+    color: var(--color-text-secondary);
+    font-size: 0.88rem;
+}
+
+.status-card--summary {
+    align-items: flex-start;
+    flex-direction: column;
+}
+
+.status-card__actions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 10px;
+}
+
+.buyable-house-price {
+    font-weight: 700;
 }
 
 button {
     padding: 6px 12px;
     cursor: pointer;
 }
+
+@media (max-width: 960px) {
+    .existing-house {
+        flex-direction: column;
+    }
+
+    .house {
+        width: min(341px, 100%);
+        margin: 0 auto;
+    }
+
+    .status-card,
+    .buyable-house-stat {
+        flex-direction: column;
+        align-items: flex-start;
+    }
+}
 </style>
diff --git a/frontend/src/views/falukant/NobilityView.vue b/frontend/src/views/falukant/NobilityView.vue
index 6833485..c6bf682 100644
--- a/frontend/src/views/falukant/NobilityView.vue
+++ b/frontend/src/views/falukant/NobilityView.vue
@@ -1,7 +1,7 @@
 <template>
-    <div class="contenthidden">
+    <div class="nobility-view">
       <StatusBar />
-      <div class="contentscroll">
+      <div class="nobility-content">
         <h2>{{ $t('falukant.nobility.title') }}</h2>
         <SimpleTabs v-model="activeTab" :tabs="tabs" />
   
@@ -200,4 +200,4 @@
     font-style: italic;
     margin-top: 1rem;
   }
-  </style>
\ No newline at end of file
+  </style>
diff --git a/frontend/src/views/falukant/OverviewView.vue b/frontend/src/views/falukant/OverviewView.vue
index 444bb76..5a4ebfb 100644
--- a/frontend/src/views/falukant/OverviewView.vue
+++ b/frontend/src/views/falukant/OverviewView.vue
@@ -5,7 +5,7 @@
             <div>
                 <span class="falukant-kicker">Falukant</span>
                 <h2>{{ $t('falukant.overview.title') }}</h2>
-                <p>Dein Stand in Wirtschaft, Familie und Besitz in einer verdichteten Uebersicht.</p>
+                <p>Dein Stand in Wirtschaft, Familie und Besitz in einer verdichteten Übersicht.</p>
             </div>
         </section>
 
@@ -27,7 +27,7 @@
             <article class="summary-card surface-card">
                 <span class="summary-card__label">Niederlassungen</span>
                 <strong>{{ branchCount }}</strong>
-                <p>Direkter Zugriff auf deine wichtigsten Geschaeftsstandorte.</p>
+                <p>Direkter Zugriff auf deine wichtigsten Geschäftsstandorte.</p>
             </article>
             <article class="summary-card surface-card">
                 <span class="summary-card__label">Produktionen aktiv</span>
@@ -37,7 +37,7 @@
             <article class="summary-card surface-card">
                 <span class="summary-card__label">Lagerpositionen</span>
                 <strong>{{ stockEntryCount }}</strong>
-                <p>Verdichteter Blick auf Warenbestand ueber alle Regionen.</p>
+                <p>Verdichteter Blick auf Warenbestand über alle Regionen.</p>
             </article>
         </section>
 
@@ -82,92 +82,76 @@
         
         <!-- Normale Übersicht wenn Charakter vorhanden -->
         <div v-if="falukantUser?.character" class="overviewcontainer">
-            <div>
+            <section class="overview-panel surface-card">
                 <h3>{{ $t('falukant.overview.metadata.title') }}</h3>
-                <table>
-                    <tr>
-                        <td>{{ $t('falukant.overview.metadata.name') }}</td>
-                        <td>{{ falukantUser?.character?.definedFirstName?.name }} {{
-                            falukantUser?.character?.definedLastName?.name }}</td>
-                    </tr>
-                    <tr>
-                        <td>{{ $t('falukant.overview.metadata.nobleTitle') }}</td>
-                        <td>{{ $t('falukant.titles.' + falukantUser?.character?.gender + '.' +
-                            falukantUser?.character?.nobleTitle?.labelTr) }}</td>
-                    </tr>
-                    <tr>
-                        <td>{{ $t('falukant.overview.metadata.money') }}</td>
-                        <td>
+                <div class="detail-list">
+                    <div class="detail-list__item">
+                        <span>{{ $t('falukant.overview.metadata.name') }}</span>
+                        <strong>{{ falukantUser?.character?.definedFirstName?.name }} {{ falukantUser?.character?.definedLastName?.name }}</strong>
+                    </div>
+                    <div class="detail-list__item">
+                        <span>{{ $t('falukant.overview.metadata.nobleTitle') }}</span>
+                        <strong>{{ $t('falukant.titles.' + falukantUser?.character?.gender + '.' + falukantUser?.character?.nobleTitle?.labelTr) }}</strong>
+                    </div>
+                    <div class="detail-list__item">
+                        <span>{{ $t('falukant.overview.metadata.money') }}</span>
+                        <strong>
                             {{ moneyValue != null
                                 ? moneyValue.toLocaleString(locale, { style: 'currency', currency: 'EUR' })
                                 : '---' }}
-                        </td>
-                    </tr>
-                    <tr>
-                        <td>{{ $t('falukant.overview.metadata.age') }}</td>
-                        <td>{{ falukantUser?.character?.age }}</td>
-                    </tr>
-                    <tr>
-                        <td>{{ $t('falukant.overview.metadata.mainbranch') }}</td>
-                        <td>{{ falukantUser?.mainBranchRegion?.name }}</td>
-                    </tr>
-                </table>
-            </div>
-            <div>
+                        </strong>
+                    </div>
+                    <div class="detail-list__item">
+                        <span>{{ $t('falukant.overview.metadata.age') }}</span>
+                        <strong>{{ falukantUser?.character?.age }}</strong>
+                    </div>
+                    <div class="detail-list__item">
+                        <span>{{ $t('falukant.overview.metadata.mainbranch') }}</span>
+                        <strong>{{ falukantUser?.mainBranchRegion?.name }}</strong>
+                    </div>
+                </div>
+            </section>
+            <section class="overview-panel surface-card">
                 <h3>{{ $t('falukant.overview.productions.title') }}</h3>
-                <table v-if="productions.length > 0">
-                    <thead>
-                        <tr>
-                            <th>{{ $t('falukant.branch.sale.region') }}</th>
-                            <th>{{ $t('falukant.branch.production.product') }}</th>
-                            <th>{{ $t('falukant.branch.production.quantity') }}</th>
-                            <th>{{ $t('falukant.branch.production.ending') }}</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr v-for="(production, index) in productions" :key="index">
-                            <td>{{ production.cityName }}</td>
-                            <td>{{ $t(`falukant.product.${production.productName}`) }}</td>
-                            <td>{{ production.quantity }}</td>
-                            <td>{{ formatDate(production.endTimestamp) }}</td>
-                        </tr>
-                    </tbody>
-                </table>
+                <div v-if="productions.length > 0" class="overview-card-list">
+                    <article v-for="(production, index) in productions" :key="index" class="overview-entry-card">
+                        <strong>{{ $t(`falukant.product.${production.productName}`) }}</strong>
+                        <div class="overview-entry-card__meta">
+                            <span>{{ $t('falukant.branch.sale.region') }}: {{ production.cityName }}</span>
+                            <span>{{ $t('falukant.branch.production.quantity') }}: {{ production.quantity }}</span>
+                            <span>{{ $t('falukant.branch.production.ending') }}: {{ formatDate(production.endTimestamp) }}</span>
+                        </div>
+                    </article>
+                </div>
                 <p v-else>{{ $t('falukant.branch.production.noProductions') }}</p>
-            </div>
-            <div>
+            </section>
+            <section class="overview-panel surface-card">
                 <h3>{{ $t('falukant.overview.stock.title') }}</h3>
-                <table v-if="allStock.length > 0">
-                    <thead>
-                        <tr>
-                            <th>{{ $t('falukant.branch.sale.region') }}</th>
-                            <th>{{ $t('falukant.branch.sale.product') }}</th>
-                            <th>{{ $t('falukant.branch.sale.quantity') }}</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr v-for="(item, index) in allStock" :key="index">
-                            <td>{{ item.regionName }}</td>
-                            <td>{{ $t(`falukant.product.${item.productLabelTr}`) }}</td>
-                            <td>{{ item.quantity }}</td>
-                        </tr>
-                    </tbody>
-                </table>
+                <div v-if="allStock.length > 0" class="overview-card-list">
+                    <article v-for="(item, index) in allStock" :key="index" class="overview-entry-card">
+                        <strong>{{ $t(`falukant.product.${item.productLabelTr}`) }}</strong>
+                        <div class="overview-entry-card__meta">
+                            <span>{{ $t('falukant.branch.sale.region') }}: {{ item.regionName }}</span>
+                            <span>{{ $t('falukant.branch.sale.quantity') }}: {{ item.quantity }}</span>
+                        </div>
+                    </article>
+                </div>
                 <p v-else>{{ $t('falukant.branch.sale.noInventory') }}</p>
-            </div>
-            <div>
+            </section>
+            <section class="overview-panel surface-card">
                 <h3>{{ $t('falukant.overview.branches.title') }}</h3>
-                <table>
-                    <tr v-for="branch in falukantUser?.branches" :key="branch.id">
-                        <td>
-                            <span @click="openBranch(branch.id)" class="link">{{ branch.region.name }}</span>
-                        </td>
-                        <td>
-                            {{ $t(`falukant.overview.branches.level.${branch.branchType.labelTr}`) }}
-                        </td>
-                    </tr>
-                </table>
-            </div>
+                <div class="overview-card-list">
+                    <article v-for="branch in falukantUser?.branches" :key="branch.id" class="overview-entry-card overview-entry-card--action">
+                        <div>
+                            <strong>{{ branch.region.name }}</strong>
+                            <div class="overview-entry-card__meta">
+                                <span>{{ $t(`falukant.overview.branches.level.${branch.branchType.labelTr}`) }}</span>
+                            </div>
+                        </div>
+                        <button type="button" class="button-secondary" @click="openBranch(branch.id)">Öffnen</button>
+                    </article>
+                </div>
+            </section>
         </div>
     </div>
 </template>
@@ -287,7 +271,7 @@ export default {
             return [
                 {
                     kicker: 'Routine',
-                    title: 'Niederlassung oeffnen',
+                    title: 'Niederlassung öffnen',
                     description: 'Die schnellste Route zu Produktion, Lager, Verkauf und Transport.',
                     cta: 'Zu den Betrieben',
                     route: 'BranchView',
@@ -303,8 +287,8 @@ export default {
                 {
                     kicker: 'Charakter',
                     title: 'Familie und Nachfolge',
-                    description: 'Wichtige persoenliche Entscheidungen und Haushaltsstatus gesammelt.',
-                    cta: 'Familie oeffnen',
+                    description: 'Wichtige persönliche Entscheidungen und Haushaltsstatus gesammelt.',
+                    cta: 'Familie öffnen',
                     route: 'FalukantFamily',
                     secondary: true,
                 },
@@ -499,7 +483,7 @@ export default {
                     await this.fetchAllStock();
                     await this.fetchProductions();
                 }
-                showSuccess(this, 'Erbe wurde uebernommen.');
+                showSuccess(this, 'Erbe wurde übernommen.');
             } catch (error) {
                 console.error('Error selecting heir:', error);
                 showError(this, this.$t('falukant.overview.heirSelection.error'));
@@ -597,12 +581,54 @@ export default {
     gap: 12px;
 }
 
-.overviewcontainer>div {
+.overview-panel {
+    padding: 18px;
+}
+
+.detail-list,
+.overview-card-list {
+    display: grid;
+    gap: 12px;
+}
+
+.detail-list__item,
+.overview-entry-card {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+    padding: 14px 16px;
     border: 1px solid var(--color-border);
-    padding: 16px;
     border-radius: var(--radius-lg);
-    background: rgba(255, 253, 249, 0.82);
-    box-shadow: var(--shadow-soft);
+    background: rgba(255, 255, 255, 0.66);
+}
+
+.detail-list__item {
+    flex-direction: column;
+    align-items: flex-start;
+}
+
+.detail-list__item span,
+.overview-entry-card__meta {
+    color: var(--color-text-secondary);
+}
+
+.overview-entry-card {
+    align-items: flex-start;
+    flex-direction: column;
+}
+
+.overview-entry-card__meta {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px 16px;
+    margin-top: 6px;
+    font-size: 0.9rem;
+}
+
+.overview-entry-card--action {
+    flex-direction: row;
+    align-items: center;
 }
 
 .imagecontainer {
diff --git a/frontend/src/views/falukant/PoliticsView.vue b/frontend/src/views/falukant/PoliticsView.vue
index e767a6d..5445875 100644
--- a/frontend/src/views/falukant/PoliticsView.vue
+++ b/frontend/src/views/falukant/PoliticsView.vue
@@ -2,7 +2,13 @@
     <div class="politics-view">
         <StatusBar />
 
-        <h2>{{ $t('falukant.politics.title') }}</h2>
+        <section class="politics-hero surface-card">
+            <div>
+                <span class="politics-kicker">Falukant</span>
+                <h2>{{ $t('falukant.politics.title') }}</h2>
+                <p>Ämter, Kandidaturen und Wahlen als klare Aufgabenfläche statt als reine Verwaltungstabelle.</p>
+            </div>
+        </section>
 
         <SimpleTabs v-model="activeTab" :tabs="tabs" @change="onTabChange" />
 
@@ -11,86 +17,65 @@
             <!-- Aktuelle Positionen -->
             <div v-if="activeTab === 'current'" class="tab-pane">
                 <div v-if="loading.current" class="loading">{{ $t('loading') }}</div>
-                <div v-else class="table-scroll">
-                    <table class="politics-table">
-                        <thead>
-                            <tr>
-                                <th>{{ $t('falukant.politics.current.office') }}</th>
-                                <th>{{ $t('falukant.politics.current.region') }}</th>
-                                    <th>{{ $t('falukant.politics.current.holder') }}</th>
-                                    <th>{{ $t('falukant.politics.current.benefit') }}</th>
-                                <th>{{ $t('falukant.politics.current.termEnds') }}</th>
-                            </tr>
-                        </thead>
-                        <tbody>
-                            <tr v-for="pos in currentPositions" :key="pos.id" :class="{ 'own-position': isOwnPosition(pos) }">
-                                <td>{{ $t(`falukant.politics.offices.${pos.officeType.name}`) }}</td>
-                                <td>{{ pos.region.name }}</td>
-                                <td>
-                                    <span v-if="pos.character">
-                                        {{ pos.character.definedFirstName.name }}
-                                        {{ pos.character.definedLastName.name }}
-                                    </span>
-                                    <span v-else>—</span>
-                                </td>
-                                <td>
-                                    <span v-if="pos.benefit && pos.benefit.length">
-                                        <span v-if="pos.benefit.includes('*')">{{ $t('falukant.politics.current.benefit_all') }}</span>
-                                        <span v-else>{{ pos.benefit.join(', ') }}</span>
-                                    </span>
-                                    <span v-else>—</span>
-                                </td>
-                                <td>
-                                    <span v-if="pos.termEnds">
-                                        {{ formatDate(pos.termEnds) }}
-                                    </span>
-                                    <span v-else>—</span>
-                                </td>
-                            </tr>
-                            <tr v-if="!currentPositions.length">
-                                <td colspan="4">{{ $t('falukant.politics.current.none') }}</td>
-                            </tr>
-                        </tbody>
-                    </table>
+                <div v-else-if="currentPositions.length" class="politics-card-list">
+                    <article v-for="pos in currentPositions" :key="pos.id" class="politics-card" :class="{ 'own-position': isOwnPosition(pos) }">
+                        <div class="politics-card__header">
+                            <strong>{{ $t(`falukant.politics.offices.${pos.officeType.name}`) }}</strong>
+                            <span>{{ pos.region.name }}</span>
+                        </div>
+                        <div class="politics-card__meta">
+                            <span>
+                                {{ $t('falukant.politics.current.holder') }}:
+                                <template v-if="pos.character">
+                                    {{ pos.character.definedFirstName.name }} {{ pos.character.definedLastName.name }}
+                                </template>
+                                <template v-else>—</template>
+                            </span>
+                            <span>
+                                {{ $t('falukant.politics.current.benefit') }}:
+                                <template v-if="pos.benefit && pos.benefit.length">
+                                    <span v-if="pos.benefit.includes('*')">{{ $t('falukant.politics.current.benefit_all') }}</span>
+                                    <span v-else>{{ pos.benefit.join(', ') }}</span>
+                                </template>
+                                <template v-else>—</template>
+                            </span>
+                            <span>
+                                {{ $t('falukant.politics.current.termEnds') }}:
+                                <template v-if="pos.termEnds">{{ formatDate(pos.termEnds) }}</template>
+                                <template v-else>—</template>
+                            </span>
+                        </div>
+                    </article>
                 </div>
+                <p v-else class="loading">{{ $t('falukant.politics.current.none') }}</p>
             </div>
 
             <!-- OPEN Tab: hier zeigen wir 'openPolitics' -->
             <div v-else-if="activeTab === 'openPolitics'" class="tab-pane">
                 <p class="politics-age-requirement">{{ $t('falukant.politics.open.ageRequirement') }}</p>
                 <div v-if="loading.openPolitics" class="loading">{{ $t('loading') }}</div>
-                <div v-else class="table-scroll">
-                    <table class="politics-table">
-                        <thead>
-                            <tr>
-                                <th>{{ $t('falukant.politics.open.office') }}</th>
-                                <th>{{ $t('falukant.politics.open.region') }}</th>
-                                <th>{{ $t('falukant.politics.open.date') }}</th>
-                                <th>{{ $t('falukant.politics.open.candidacyWithAge') }}</th>
-                            </tr>
-                        </thead>
-                        <tbody>
-                            <tr v-for="e in openPolitics" :key="e.id">
-                                <td>{{ $t(`falukant.politics.offices.${e.officeType.name}`) }}</td>
-                                <td>{{ e.region.name }}</td>
-                                <td>{{ formatDate(e.date) }}</td>
-                                <!-- Checkbox ganz am Ende -->
-                                <td :title="e.canApplyByAge === false ? $t('falukant.politics.open.minAgeHint') : null">
-                                    <input
-                                        type="checkbox"
-                                        :id="`apply-${e.id}`"
-                                        v-model="selectedApplications"
-                                        :value="e.id"
-                                        :disabled="e.alreadyApplied || e.canApplyByAge === false"
-                                    />
-                                </td>
-                            </tr>
-                            <tr v-if="!openPolitics.length">
-                                <td colspan="4">{{ $t('falukant.politics.open.none') }}</td>
-                            </tr>
-                        </tbody>
-                    </table>
+                <div v-else-if="openPolitics.length" class="politics-card-list">
+                    <article v-for="e in openPolitics" :key="e.id" class="politics-card">
+                        <div class="politics-card__header">
+                            <strong>{{ $t(`falukant.politics.offices.${e.officeType.name}`) }}</strong>
+                            <span>{{ e.region.name }}</span>
+                        </div>
+                        <div class="politics-card__meta">
+                            <span>{{ $t('falukant.politics.open.date') }}: {{ formatDate(e.date) }}</span>
+                        </div>
+                        <label class="politics-card__checkbox" :title="e.canApplyByAge === false ? $t('falukant.politics.open.minAgeHint') : null">
+                            <input
+                                type="checkbox"
+                                :id="`apply-${e.id}`"
+                                v-model="selectedApplications"
+                                :value="e.id"
+                                :disabled="e.alreadyApplied || e.canApplyByAge === false"
+                            />
+                            <span>Für diese Kandidatur vormerken</span>
+                        </label>
+                    </article>
                 </div>
+                <p v-else class="loading">{{ $t('falukant.politics.open.none') }}</p>
 
                 <div class="apply-button">
                     <button :disabled="!selectedApplications.length" @click="submitApplications">
@@ -102,65 +87,47 @@
             <!-- Wahlen -->
             <div v-else-if="activeTab === 'elections'" class="tab-pane">
                 <div v-if="loading.elections" class="loading">{{ $t('loading') }}</div>
-                <div v-else class="table-scroll">
-                    <table class="politics-table">
-                        <thead>
-                            <tr>
-                                <th>{{ $t('falukant.politics.elections.office') }}</th>
-                                <th>{{ $t('falukant.politics.elections.region') }}</th>
-                                <th>{{ $t('falukant.politics.elections.date') }}</th>
-                                <th>{{ $t('falukant.politics.elections.posts') }}</th>
-                                <th>{{ $t('falukant.politics.elections.candidates') }}</th>
-                                <th>{{ $t('falukant.politics.elections.action') }}</th>
-                            </tr>
-                        </thead>
-                        <tbody>
-                            <tr v-for="e in elections" :key="e.id">
-                                <td>{{ $t(`falukant.politics.offices.${e.officeType.name}`) }}</td>
-                                <td>{{ e.region.name }}</td>
-                                <td>{{ formatDate(e.date) }}</td>
-                                <td>{{ e.postsToFill }}</td>
-                                <td v-if="!e.voted">
-                                    <Multiselect v-model="selectedCandidates[e.id]" :options="e.candidates" multiple
-                                        :max="e.postsToFill" :close-on-select="false" :clear-on-select="false"
-                                        track-by="id" label="name" :custom-label="candidateLabel" placeholder="">
-                                        <template #option="{ option }">
-                                            {{ $t(`falukant.titles.${option.gender}.${option.title}`) }}
-                                            {{ option.name }} ({{ option.age }})
-                                        </template>
-                                        <template #selected="{ option }">
-                                            {{ $t(`falukant.titles.${option.gender}.${option.title}`) }}
-                                            {{ option.name }}
-                                        </template>
-                                    </Multiselect>
-                                </td>
-                                <td v-else>
-                                    <ul class="voted-list">
-                                        <li v-for="cid in e.votedFor" :key="cid">
-                                            <span v-if="findCandidateById(e, cid)">
-                                                {{ formatCandidateTitle(findCandidateById(e, cid)) }}
-                                                {{ findCandidateById(e, cid).name }}
-                                            </span>
-                                        </li>
-                                        <li v-if="!e.votedFor || !e.votedFor.length">—</li>
-                                    </ul>
-                                </td>
-
-                                <td>
-                                    <button v-if="!e.voted"
-                                        :disabled="!selectedCandidates[e.id] || !selectedCandidates[e.id].length"
-                                        @click="submitVote(e.id)">
-                                        {{ $t('falukant.politics.elections.vote') }}
-                                    </button>
-                                </td>
-                            </tr>
-
-                            <tr v-if="!elections.length">
-                                <td colspan="6">{{ $t('falukant.politics.elections.none') }}</td>
-                            </tr>
-                        </tbody>
-                    </table>
+                <div v-else-if="elections.length" class="politics-card-list">
+                    <article v-for="e in elections" :key="e.id" class="politics-card politics-card--election">
+                        <div class="politics-card__header">
+                            <strong>{{ $t(`falukant.politics.offices.${e.officeType.name}`) }}</strong>
+                            <span>{{ e.region.name }}</span>
+                        </div>
+                        <div class="politics-card__meta">
+                            <span>{{ $t('falukant.politics.elections.date') }}: {{ formatDate(e.date) }}</span>
+                            <span>{{ $t('falukant.politics.elections.posts') }}: {{ e.postsToFill }}</span>
+                        </div>
+                        <div v-if="!e.voted" class="politics-card__vote">
+                            <Multiselect v-model="selectedCandidates[e.id]" :options="e.candidates" multiple
+                                :max="e.postsToFill" :close-on-select="false" :clear-on-select="false"
+                                track-by="id" label="name" :custom-label="candidateLabel" placeholder="">
+                                <template #option="{ option }">
+                                    {{ $t(`falukant.titles.${option.gender}.${option.title}`) }}
+                                    {{ option.name }} ({{ option.age }})
+                                </template>
+                                <template #selected="{ option }">
+                                    {{ $t(`falukant.titles.${option.gender}.${option.title}`) }}
+                                    {{ option.name }}
+                                </template>
+                            </Multiselect>
+                            <button
+                                :disabled="!selectedCandidates[e.id] || !selectedCandidates[e.id].length"
+                                @click="submitVote(e.id)">
+                                {{ $t('falukant.politics.elections.vote') }}
+                            </button>
+                        </div>
+                        <ul v-else class="voted-list">
+                            <li v-for="cid in e.votedFor" :key="cid">
+                                <span v-if="findCandidateById(e, cid)">
+                                    {{ formatCandidateTitle(findCandidateById(e, cid)) }}
+                                    {{ findCandidateById(e, cid).name }}
+                                </span>
+                            </li>
+                            <li v-if="!e.votedFor || !e.votedFor.length">—</li>
+                        </ul>
+                    </article>
                 </div>
+                <p v-else class="loading">{{ $t('falukant.politics.elections.none') }}</p>
 
                 <div class="all-vote-button" v-if="hasAnyUnvoted">
                     <button :disabled="!hasAnySelection" @click="submitAllVotes">
@@ -177,6 +144,9 @@ import StatusBar from '@/components/falukant/StatusBar.vue';
 import SimpleTabs from '@/components/SimpleTabs.vue';
 import Multiselect from 'vue-multiselect';
 import apiClient from '@/utils/axios.js';
+import { showApiError, showSuccess } from '@/utils/feedback.js';
+
+const debugLog = () => {};
 
 export default {
     name: 'PoliticsView',
@@ -232,10 +202,10 @@ export default {
             this.loading.current = true;
             try {
                 const { data } = await apiClient.get('/api/falukant/politics/overview');
-                console.log('[PoliticsView] loadCurrentPositions - API response:', data);
-                console.log('[PoliticsView] loadCurrentPositions - ownCharacterId at load time:', this.ownCharacterId);
+                debugLog('[PoliticsView] loadCurrentPositions - API response:', data);
+                debugLog('[PoliticsView] loadCurrentPositions - ownCharacterId at load time:', this.ownCharacterId);
                 this.currentPositions = data;
-                console.log('[PoliticsView] loadCurrentPositions - Loaded', data.length, 'positions');
+                debugLog('[PoliticsView] loadCurrentPositions - Loaded', data.length, 'positions');
             } catch (err) {
                 console.error('[PoliticsView] Error loading current positions', err);
             } finally {
@@ -304,8 +274,10 @@ export default {
                     { votes: singlePayload }
                 );
                 await this.loadElections();
+                showSuccess(this, 'Stimme erfolgreich abgegeben.');
             } catch (err) {
                 console.error(`Error submitting vote for election ${electionId}`, err);
+                showApiError(this, err, 'Fehler beim Abgeben der Stimme');
             }
         },
 
@@ -323,8 +295,10 @@ export default {
                     { votes: payload }
                 );
                 await this.loadElections();
+                showSuccess(this, 'Alle Stimmen erfolgreich abgegeben.');
             } catch (err) {
                 console.error('Error submitting all votes', err);
+                showApiError(this, err, 'Fehler beim Abgeben der Stimmen');
             }
         },
 
@@ -339,18 +313,8 @@ export default {
         async loadOwnCharacterId() {
             try {
                 const { data } = await apiClient.get('/api/falukant/info');
-                console.log('[PoliticsView] loadOwnCharacterId - API response:', data);
-                console.log('[PoliticsView] loadOwnCharacterId - data.character:', data.character);
-                console.log('[PoliticsView] loadOwnCharacterId - data.character?.id:', data.character?.id);
                 if (data.character && data.character.id) {
                     this.ownCharacterId = data.character.id;
-                    console.log('[PoliticsView] loadOwnCharacterId - Set ownCharacterId to:', this.ownCharacterId);
-                } else {
-                    console.warn('[PoliticsView] loadOwnCharacterId - No character ID found in response', {
-                        hasCharacter: !!data.character,
-                        characterKeys: data.character ? Object.keys(data.character) : null,
-                        characterId: data.character?.id
-                    });
                 }
             } catch (err) {
                 console.error('[PoliticsView] Error loading own character ID', err);
@@ -358,20 +322,10 @@ export default {
         },
 
         isOwnPosition(pos) {
-            console.log('[PoliticsView] isOwnPosition - Checking position:', {
-                posId: pos.id,
-                posCharacter: pos.character,
-                posCharacterId: pos.character?.id,
-                ownCharacterId: this.ownCharacterId,
-                match: pos.character?.id === this.ownCharacterId
-            });
             if (!this.ownCharacterId || !pos.character) {
-                console.log('[PoliticsView] isOwnPosition - Returning false (missing ownCharacterId or pos.character)');
                 return false;
             }
-            const isMatch = pos.character.id === this.ownCharacterId;
-            console.log('[PoliticsView] isOwnPosition - Result:', isMatch);
-            return isMatch;
+            return pos.character.id === this.ownCharacterId;
         },
 
         async submitApplications() {
@@ -388,12 +342,14 @@ export default {
                 this.selectedApplications = this.openPolitics
                     .filter(e => e.alreadyApplied || appliedIds.includes(e.id))
                     .map(e => e.id);
+                showSuccess(this, 'Kandidatur erfolgreich vorgemerkt.');
             } catch (err) {
                 console.error('Error submitting applications', err);
-                const msg = err?.response?.data?.error === 'too_young'
-                    ? this.$t('falukant.politics.too_young')
-                    : (err?.response?.data?.error || err?.message || this.$t('falukant.politics.applyError'));
-                this.$root.$refs?.messageDialog?.open?.(msg, this.$t('falukant.politics.title'));
+                if (err?.response?.data?.error === 'too_young') {
+                    showApiError(this, err, this.$t('falukant.politics.too_young'));
+                    return;
+                }
+                showApiError(this, err, this.$t('falukant.politics.applyError'));
             }
         }
     }
@@ -402,73 +358,99 @@ export default {
 
 <style scoped>
 .politics-view {
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-    overflow: hidden;
+    max-width: var(--content-max-width);
+    margin: 0 auto;
+    padding-bottom: 24px;
 }
 
-h2 {
+.politics-hero {
+    padding: 24px 26px;
+    margin-bottom: 16px;
+}
+
+.politics-kicker {
+    display: inline-block;
+    margin-bottom: 10px;
+    padding: 4px 10px;
+    border-radius: 999px;
+    background: rgba(120, 195, 138, 0.14);
+    color: #42634e;
+    font-size: 0.75rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+}
+
+.politics-hero p {
     margin: 0;
-    padding: 20px 0 0 0;
-    flex: 0 0 auto;
+    color: var(--color-text-secondary);
 }
 
 .simple-tabs {
-    flex: 0 0 auto;
+    margin-bottom: 16px;
 }
 
 .tab-content {
-    flex: 1 1 auto;
     display: flex;
     flex-direction: column;
-    overflow: hidden;
 }
 
 .tab-pane {
-    flex: 1;
     display: flex;
     flex-direction: column;
-    overflow: hidden;
 }
 
 .politics-age-requirement {
-    flex: 0 0 auto;
     margin: 0 0 10px 0;
     font-size: 0.95em;
-    color: #555;
+    color: var(--color-text-secondary);
 }
 
-.table-scroll {
-    flex: 1;
-    overflow-y: auto;
-    border: 1px solid #ddd;
+.politics-card-list {
+    display: grid;
+    gap: 12px;
 }
 
-.politics-table {
-    border-collapse: collapse;
-    width: auto;
-    /* kein 100% */
+.politics-card {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    padding: 18px;
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-lg);
+    background: rgba(255, 255, 255, 0.72);
 }
 
-.politics-table thead th {
-    position: sticky;
-    top: 0;
-    background: #FFF;
-    z-index: 1;
-    padding: 8px;
-    border: 1px solid #ddd;
-    text-align: left;
+.politics-card.own-position {
+    border-color: rgba(120, 195, 138, 0.45);
+    background: rgba(236, 248, 238, 0.92);
 }
 
-.politics-table tbody td {
-    padding: 8px;
-    border: 1px solid #ddd;
+.politics-card__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+    flex-wrap: wrap;
 }
 
-.politics-table tbody tr.own-position {
-    background-color: #e0e0e0;
-    font-weight: bold;
+.politics-card__meta {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px 16px;
+    color: var(--color-text-secondary);
+}
+
+.politics-card__checkbox {
+    display: inline-flex;
+    align-items: center;
+    gap: 10px;
+    width: fit-content;
+}
+
+.politics-card__vote {
+    display: grid;
+    gap: 12px;
 }
 
 .loading {
@@ -491,6 +473,13 @@ h2 {
 .all-vote-button button {
     padding: 6px 12px;
     cursor: pointer;
-    margin: 2em;
 }
-</style>
\ No newline at end of file
+
+@media (max-width: 900px) {
+    .politics-card__header,
+    .politics-card__meta {
+        flex-direction: column;
+        align-items: flex-start;
+    }
+}
+</style>
diff --git a/frontend/src/views/minigames/Match3Game.vue b/frontend/src/views/minigames/Match3Game.vue
index 4effbf0..e153aae 100644
--- a/frontend/src/views/minigames/Match3Game.vue
+++ b/frontend/src/views/minigames/Match3Game.vue
@@ -1,6 +1,5 @@
 <template>
-  <div class="contenthidden">
-    <div class="contentscroll match3-view">
+  <div class="match3-view">
       <!-- Spiel-Titel -->
       <section class="game-title surface-card">
         <span class="game-title__eyebrow">Minispiele</span>
@@ -10,14 +9,14 @@
 
       <section class="play-focus surface-card">
         <div class="play-focus__main">
-          <span class="play-focus__eyebrow">Naechster Schritt</span>
+          <span class="play-focus__eyebrow">Nächster Schritt</span>
           <h2>{{ playFocusTitle }}</h2>
           <p>{{ playFocusDescription }}</p>
         </div>
         <div class="play-focus__stats">
           <span class="play-focus__pill">Level {{ currentLevel }}</span>
           <span class="play-focus__pill">{{ completedObjectivesCount }}/{{ totalObjectivesCount || 0 }} Ziele</span>
-          <span class="play-focus__pill">{{ safeMovesLeft }} Zuege uebrig</span>
+          <span class="play-focus__pill">{{ safeMovesLeft }} Züge übrig</span>
         </div>
         <div class="play-focus__actions">
           <button class="btn btn-primary" @click="isPaused ? resumeGame() : pauseGame()">
@@ -139,16 +138,8 @@
             
             <!-- Loading State -->
             <div v-else class="game-board-loading">
-              <p>Lade Spielbrett...</p>
-              <div class="debug-info">
-                <p>Debug-Info:</p>
-                <p>Board-Länge: {{ board.length }}</p>
-                <p>Board-Breite: {{ boardWidth }}</p>
-                <p>Board-Höhe: {{ boardHeight }}</p>
-                <p>Game Active: {{ gameActive }}</p>
-                <p>Current Level Data: {{ currentLevelData ? 'Ja' : 'Nein' }}</p>
-                <p>Board Layout: {{ boardLayout ? 'Ja' : 'Nein' }}</p>
-              </div>
+              <p>Spielbrett wird vorbereitet...</p>
+              <p class="game-board-loading__hint">Leveldaten, Ziele und Feldlayout werden gerade synchronisiert.</p>
             </div>
 
             <!-- Power-Up Animationen (relativ zum Game-Board) -->
@@ -276,12 +267,14 @@
       </v-dialog>
 
       <!-- Power-Up Animationen -->
-    </div>
   </div>
 </template>
 
 <script>
 import apiClient from '../../utils/axios.js';
+import { showError } from '@/utils/feedback.js';
+
+const debugLog = () => {};
 
 export default {
   name: 'Match3Game',
@@ -423,7 +416,7 @@ export default {
           this.sounds.rainbow.load(),
           this.sounds.falling.load()
         ]).then(() => {
-          console.log('🔊 Sounds erfolgreich geladen:', {
+          debugLog('🔊 Sounds erfolgreich geladen:', {
             move: this.sounds.move.readyState,
             bomb: this.sounds.bomb.readyState,
             rocket: this.sounds.rocket.readyState,
@@ -799,18 +792,18 @@ export default {
       const maxAttempts = 10; // Verhindere Endlosschleifen
       
       // Prüfe und korrigiere initiale Matches
-      console.log('🔧 Prüfe auf initiale Matches...');
+      debugLog('🔧 Prüfe auf initiale Matches...');
       const initialMatches = this.findMatchesOnBoard(this.board, true);
       
       if (initialMatches.length > 0) {
-        console.log(`🔧 ${initialMatches.length} initiale Matches gefunden, starte Korrektur...`);
+        debugLog(`🔧 ${initialMatches.length} initiale Matches gefunden, starte Korrektur...`);
         this.fixInitialMatches();
       } else {
-        console.log('🔧 Keine initialen Matches gefunden, Level ist bereit');
+        debugLog('🔧 Keine initialen Matches gefunden, Level ist bereit');
       }
         
       // WICHTIG: Nach der Korrektur der initialen Matches das Brett erneut überprüfen
-      console.log('🔍 Überprüfe das Brett nach der Korrektur der initialen Matches...');
+      debugLog('🔍 Überprüfe das Brett nach der Korrektur der initialen Matches...');
       await this.checkBoardAfterSetup();
       
       // WICHTIG: Setze das Spiel als aktiv, aber prüfe NICHT sofort die Level-Objekte
@@ -824,10 +817,10 @@ export default {
 
           // Neue Methode: Räume initiale Matches auf (ohne Punkte/Level-Objekte)
     cleanupInitialMatches(matches) {
-      console.log('🔧 cleanupInitialMatches - Starte Aufräumen');
+      debugLog('🔧 cleanupInitialMatches - Starte Aufräumen');
       
       if (!matches || matches.length === 0) {
-        console.log('🔧 Keine Matches zum Aufräumen gefunden');
+        debugLog('🔧 Keine Matches zum Aufräumen gefunden');
         return;
       }
       
@@ -837,17 +830,17 @@ export default {
         match.forEach(index => matchedIndices.add(index));
       });
       
-      console.log('🔧 Zu entfernende Indizes:', Array.from(matchedIndices));
+      debugLog('🔧 Zu entfernende Indizes:', Array.from(matchedIndices));
       
       // Entferne alle gematchten Tiles (außer Regenbögen)
       matchedIndices.forEach(index => {
         if (this.board[index] && this.board[index].type !== 'rainbow') {
-          console.log(`🔧 Entferne Tile an Position ${index}:`, this.board[index]);
+          debugLog(`🔧 Entferne Tile an Position ${index}:`, this.board[index]);
           this.board[index] = null;
         }
       });
       
-      console.log('🔧 Alle gematchten Tiles entfernt, fülle leere Felder');
+      debugLog('🔧 Alle gematchten Tiles entfernt, fülle leere Felder');
       
       // Fülle leere Felder direkt mit neuen Tiles (nur beim Level-Start)
       this.fillEmptySpacesWithNewTiles();
@@ -864,7 +857,7 @@ export default {
 
     // Neue Methode: Fülle leere Felder direkt mit neuen Tiles (für Level-Start)
     fillEmptySpacesWithNewTiles() {
-      console.log('🔧 fillEmptySpacesWithNewTiles - Starte Auffüllen');
+      debugLog('🔧 fillEmptySpacesWithNewTiles - Starte Auffüllen');
       
       let tilesAdded = 0;
       
@@ -879,7 +872,7 @@ export default {
               if (this.boardLayout[row] && this.boardLayout[row][col] && 
                   this.boardLayout[row][col].type === 'empty') {
                 // Freies Feld - überspringe es
-                console.log(`🔧 Überspringe freies Feld an [${row},${col}]`);
+                debugLog(`🔧 Überspringe freies Feld an [${row},${col}]`);
                 continue;
               }
               
@@ -893,13 +886,13 @@ export default {
               };
               
               tilesAdded++;
-              console.log(`🔧 Neues Tile ${tileType} an Position [${row},${col}] hinzugefügt`);
+              debugLog(`🔧 Neues Tile ${tileType} an Position [${row},${col}] hinzugefügt`);
             }
           }
         }
       }
       
-      console.log(`🔧 Insgesamt ${tilesAdded} neue Tiles hinzugefügt`);
+      debugLog(`🔧 Insgesamt ${tilesAdded} neue Tiles hinzugefügt`);
     },
 
     startDrag(index, event) {
@@ -1086,7 +1079,7 @@ export default {
             matches.push([index1, index2, index3, index4, index5]);
             // Markiere alle Positionen als Teil eines 5er-Matches
             [index1, index2, index3, index4, index5].forEach(idx => foundFiveMatches.add(idx));
-            if (showDebug) console.log(`🔍 5er-Match horizontal: [${row},${col}] bis [${row},${col+4}]`);
+            if (showDebug) debugLog(`🔍 5er-Match horizontal: [${row},${col}] bis [${row},${col+4}]`);
           }
         }
       }
@@ -1106,7 +1099,7 @@ export default {
             matches.push([index1, index2, index3, index4, index5]);
             // Markiere alle Positionen als Teil eines 5er-Matches
             [index1, index2, index3, index4, index5].forEach(idx => foundFiveMatches.add(idx));
-            if (showDebug) console.log(`🔍 5er-Match vertikal: [${row},${col}] bis [${row+4},${col}]`);
+            if (showDebug) debugLog(`🔍 5er-Match vertikal: [${row},${col}] bis [${row+4},${col}]`);
           }
         }
       }
@@ -1177,9 +1170,9 @@ export default {
                   verticalLength,
                   horizontalLength
                 });
-                if (showDebug) console.log(`🔍 L-Form Match (┌): [${row},${col}] mit ${verticalLength}er vertikal und ${horizontalLength}er horizontal`);
+                if (showDebug) debugLog(`🔍 L-Form Match (┌): [${row},${col}] mit ${verticalLength}er vertikal und ${horizontalLength}er horizontal`);
               } else {
-                if (showDebug) console.log(`🔍 L-Form Match (┌) übersprungen: [${row},${col}] - Teil eines 5er-Matches`);
+                if (showDebug) debugLog(`🔍 L-Form Match (┌) übersprungen: [${row},${col}] - Teil eines 5er-Matches`);
               }
             }
           }
@@ -1237,9 +1230,9 @@ export default {
                   verticalLength,
                   horizontalLength
                 });
-                if (showDebug) console.log(`🔍 L-Form Match (┐): [${row},${col}] mit ${verticalLength}er vertikal und ${horizontalLength}er horizontal`);
+                if (showDebug) debugLog(`🔍 L-Form Match (┐): [${row},${col}] mit ${verticalLength}er vertikal und ${horizontalLength}er horizontal`);
               } else {
-                if (showDebug) console.log(`🔍 L-Form Match (┐) übersprungen: [${row},${col}] - Teil eines 5er-Matches`);
+                if (showDebug) debugLog(`🔍 L-Form Match (┐) übersprungen: [${row},${col}] - Teil eines 5er-Matches`);
               }
             }
           }
@@ -1297,9 +1290,9 @@ export default {
                   verticalLength,
                   horizontalLength
                 });
-                if (showDebug) console.log(`🔍 L-Form Match (└): [${row},${col}] mit ${verticalLength}er vertikal und ${horizontalLength}er horizontal`);
+                if (showDebug) debugLog(`🔍 L-Form Match (└): [${row},${col}] mit ${verticalLength}er vertikal und ${horizontalLength}er horizontal`);
               } else {
-                if (showDebug) console.log(`🔍 L-Form Match (└) übersprungen: [${row},${col}] - Teil eines 5er-Matches`);
+                if (showDebug) debugLog(`🔍 L-Form Match (└) übersprungen: [${row},${col}] - Teil eines 5er-Matches`);
               }
             }
           }
@@ -1357,9 +1350,9 @@ export default {
                   verticalLength,
                   horizontalLength
                 });
-                if (showDebug) console.log(`🔍 L-Form Match (┘): [${row},${col}] mit ${verticalLength}er vertikal und ${horizontalLength}er horizontal`);
+                if (showDebug) debugLog(`🔍 L-Form Match (┘): [${row},${col}] mit ${verticalLength}er vertikal und ${horizontalLength}er horizontal`);
               } else {
-                if (showDebug) console.log(`🔍 L-Form Match (┘) übersprungen: [${row},${col}] - Teil eines 5er-Matches`);
+                if (showDebug) debugLog(`🔍 L-Form Match (┘) übersprungen: [${row},${col}] - Teil eines 5er-Matches`);
               }
             }
           }
@@ -1383,7 +1376,7 @@ export default {
             // Prüfe ob diese Position bereits Teil eines 5er-Matches oder L-Form ist
             const currentIndex = this.coordsToIndex(row, col);
             if (usedIndices.has(currentIndex)) {
-              if (showDebug) console.log(`🔍 Überspringe Position [${row},${col}] - bereits Teil eines höherwertigen Matches`);
+              if (showDebug) debugLog(`🔍 Überspringe Position [${row},${col}] - bereits Teil eines höherwertigen Matches`);
               continue;
             }
           
@@ -1397,7 +1390,7 @@ export default {
             if (!usedIndices.has(index1) && !usedIndices.has(index2) && !usedIndices.has(index3) && 
                 this.isValidMatch(index1, index2, index3, board)) {
               matches.push([index1, index2, index3]);
-              if (showDebug) console.log(`🔍 3er-Match horizontal: [${row},${col}] bis [${row},${col+2}]`);
+              if (showDebug) debugLog(`🔍 3er-Match horizontal: [${row},${col}] bis [${row},${col+2}]`);
             }
           }
           
@@ -1413,7 +1406,7 @@ export default {
                 this.isValidMatch(index1, index2, index3, board) && 
                 this.isValidMatch(index2, index3, index4, board)) {
               matches.push([index1, index2, index3, index4]);
-              if (showDebug) console.log(`🔍 4er-Match horizontal: [${row},${col}] bis [${row},${col+3}]`);
+              if (showDebug) debugLog(`🔍 4er-Match horizontal: [${row},${col}] bis [${row},${col+3}]`);
             }
           }
           
@@ -1427,7 +1420,7 @@ export default {
           // Prüfe ob diese Position bereits Teil eines höherwertigen Matches ist
           const currentIndex = this.coordsToIndex(row, col);
           if (usedIndices.has(currentIndex)) {
-            if (showDebug) console.log(`🔍 Überspringe Position [${row},${col}] - bereits Teil eines höherwertigen Matches`);
+            if (showDebug) debugLog(`🔍 Überspringe Position [${row},${col}] - bereits Teil eines höherwertigen Matches`);
             continue;
           }
           
@@ -1441,7 +1434,7 @@ export default {
             if (!usedIndices.has(index1) && !usedIndices.has(index2) && !usedIndices.has(index3) &&
                 this.isValidMatch(index1, index2, index3, board)) {
               matches.push([index1, index2, index3]);
-              if (showDebug) console.log(`🔍 3er-Match vertikal: [${row},${col}] bis [${row+2},${col}]`);
+              if (showDebug) debugLog(`🔍 3er-Match vertikal: [${row},${col}] bis [${row+2},${col}]`);
             }
           }
           
@@ -1457,7 +1450,7 @@ export default {
                 this.isValidMatch(index1, index2, index3, board) && 
                 this.isValidMatch(index2, index3, index4, board)) {
               matches.push([index1, index2, index3, index4]);
-              if (showDebug) console.log(`🔍 4er-Match vertikal: [${row},${col}] bis [${row+3},${col}]`);
+              if (showDebug) debugLog(`🔍 4er-Match vertikal: [${row},${col}] bis [${row+3},${col}]`);
             }
           }
           
@@ -1466,7 +1459,7 @@ export default {
       }
       
       if (showDebug) {
-        console.log(`🔍 Gefundene Matches: ${matches.length}`, matches);
+        debugLog(`🔍 Gefundene Matches: ${matches.length}`, matches);
       }
       
       return matches;
@@ -1490,13 +1483,13 @@ export default {
     
     // Hilfsmethode: Debug-Ausgabe für Power-ups
     debugPowerUps() {
-      console.log('🔍 Debug: Alle Power-ups auf dem Board:');
+      debugLog('🔍 Debug: Alle Power-ups auf dem Board:');
       for (let i = 0; i < this.board.length; i++) {
         if (this.board[i]) {
           const isPowerUp = this.isPowerUpTile(this.board[i].type);
-          console.log(`🔍 Position ${i}: Tile ${this.board[i].type}, isPowerUpTile: ${isPowerUp}`);
+          debugLog(`🔍 Position ${i}: Tile ${this.board[i].type}, isPowerUpTile: ${isPowerUp}`);
           if (isPowerUp) {
-            console.log(`🔍 ✅ Power-up erkannt: ${this.board[i].type} an Position ${i}`);
+            debugLog(`🔍 ✅ Power-up erkannt: ${this.board[i].type} an Position ${i}`);
           }
         }
       }
@@ -1575,7 +1568,7 @@ export default {
     },
 
     fixInitialMatches() {
-      console.log('🔧 fixInitialMatches - Starte Korrektur initialer Matches');
+      debugLog('🔧 fixInitialMatches - Starte Korrektur initialer Matches');
       
       let attempts = 0;
       const maxAttempts = 100; // Erhöht für komplexere Matches
@@ -1584,15 +1577,15 @@ export default {
         // Finde alle initialen Matches
         const initialMatches = this.findMatchesOnBoard(this.board, false);
         if (initialMatches.length === 0) {
-          console.log('🔧 Keine Matches mehr gefunden, Level ist bereit');
+          debugLog('🔧 Keine Matches mehr gefunden, Level ist bereit');
           break;
         }
         
-        console.log(`🔧 Versuch ${attempts + 1}: ${initialMatches.length} Matches gefunden`);
+        debugLog(`🔧 Versuch ${attempts + 1}: ${initialMatches.length} Matches gefunden`);
         
         // Wähle einen zufälligen Match
         if (initialMatches.length === 0) {
-          console.log('🔧 Keine Matches mehr gefunden, Level ist bereit');
+          debugLog('🔧 Keine Matches mehr gefunden, Level ist bereit');
           break;
         }
         
@@ -1631,7 +1624,7 @@ export default {
         // Ändere den Tile-Typ
         this.board[randomTileIndex].type = newType;
         
-        console.log(`🔧 Änderte Tile an Position ${randomTileIndex} von ${currentType} zu ${newType}`);
+        debugLog(`🔧 Änderte Tile an Position ${randomTileIndex} von ${currentType} zu ${newType}`);
         
         attempts++;
       } while (attempts < maxAttempts);
@@ -1639,7 +1632,7 @@ export default {
       if (attempts >= maxAttempts) {
         console.warn('⚠️ Konnte initiale Matches nicht vollständig korrigieren nach', maxAttempts, 'Versuchen');
       } else {
-        console.log(`🔧 Initiale Matches in ${attempts} Versuchen korrigiert`);
+        debugLog(`🔧 Initiale Matches in ${attempts} Versuchen korrigiert`);
       }
     },
 
@@ -1741,7 +1734,7 @@ export default {
       if (rainbowSwapResult) {
         // Regenbogen-Tausch erfolgreich - Zug-Zähler wird bereits in handleRainbowSwap erhöht
         // ABER: Wir müssen trotzdem die Matches verarbeiten, die durch den Regenbogen-Tausch entstanden sind
-        console.log('🌈 Regenbogen-Tausch erfolgreich, verarbeite entstandene Matches...');
+        debugLog('🌈 Regenbogen-Tausch erfolgreich, verarbeite entstandene Matches...');
         
         // Warte kurz, damit die Animation abgeschlossen ist
         await new Promise(resolve => setTimeout(resolve, 100));
@@ -1749,7 +1742,7 @@ export default {
         // Prüfe auf Matches nach dem Regenbogen-Tausch
         const matchesAfterRainbow = this.findMatchesOnBoard(this.board, false);
         if (matchesAfterRainbow.length > 0) {
-          console.log(`🌈 ${matchesAfterRainbow.length} Matches nach Regenbogen-Tausch gefunden, verarbeite sie...`);
+          debugLog(`🌈 ${matchesAfterRainbow.length} Matches nach Regenbogen-Tausch gefunden, verarbeite sie...`);
           await this.handleMatches(matchesAfterRainbow, true); // true = Spieler-Zug
         }
         
@@ -1795,19 +1788,19 @@ export default {
     // Verarbeite gefundene Matches
     async handleMatches(matches, isPlayerMove = false) {
       if (matches.length === 0) {
-        console.log('🔧 Keine Matches zum Verarbeiten');
+        debugLog('🔧 Keine Matches zum Verarbeiten');
         return;
       }
       
-      console.log(`🔧 Verarbeite ${matches.length} Matches...`);
+      debugLog(`🔧 Verarbeite ${matches.length} Matches...`);
       
       // Debug: Zeige alle gefundenen Matches
-      console.log('🔧 Debug: Alle gefundenen Matches:');
+      debugLog('🔧 Debug: Alle gefundenen Matches:');
       matches.forEach((match, index) => {
         if (match.type === 'l-shape') {
-          console.log(`  Match ${index + 1}: L-Form ${match.direction} an Ecke ${match.corner}`);
+          debugLog(`  Match ${index + 1}: L-Form ${match.direction} an Ecke ${match.corner}`);
         } else if (Array.isArray(match)) {
-          console.log(`  Match ${index + 1}: ${match.length}er-Match [${match.join(', ')}]`);
+          debugLog(`  Match ${index + 1}: ${match.length}er-Match [${match.join(', ')}]`);
         }
       });
       
@@ -1821,7 +1814,7 @@ export default {
       matches.forEach((match, matchIndex) => {
         if (match.type === 'l-shape') {
           // L-Form Match: Erstelle Bombe an der Ecke
-          console.log(`🔧 L-Form Match ${matchIndex + 1}: ${match.direction} an Ecke ${match.corner}`);
+          debugLog(`🔧 L-Form Match ${matchIndex + 1}: ${match.direction} an Ecke ${match.corner}`);
           
           // Alle Tiles der L-Form entfernen (außer der Ecke, wo die Bombe ist)
           match.indices.forEach(tileIndex => {
@@ -1831,7 +1824,7 @@ export default {
           });
           
           // Bombe wird später in createPowerUpsForMatches erstellt
-          console.log(`💣 Bombe wird später an Position ${match.corner} erstellt`);
+          debugLog(`💣 Bombe wird später an Position ${match.corner} erstellt`);
         }
       });
       
@@ -1840,16 +1833,16 @@ export default {
       matches.forEach((match, matchIndex) => {
         if (Array.isArray(match) && match.length >= 3) {
           // Normale Matches (3er, 4er, 5er)
-          console.log(`🔧 ${match.length}er-Match ${matchIndex + 1}: [${match.join(', ')}]`);
+          debugLog(`🔧 ${match.length}er-Match ${matchIndex + 1}: [${match.join(', ')}]`);
           
           // Berechne Punkte für diesen Match
           let matchPoints = 0;
           if (match.length === 3) {
             matchPoints = 10; // 3er-Match: 10 Punkte
-            console.log(`🔧 3er-Match: +${matchPoints} Punkte`);
+            debugLog(`🔧 3er-Match: +${matchPoints} Punkte`);
           } else if (match.length === 4) {
             matchPoints = 20; // 4er-Match (Rakete): 20 Punkte
-            console.log(`🔧 4er-Match (Rakete): +${matchPoints} Punkte`);
+            debugLog(`🔧 4er-Match (Rakete): +${matchPoints} Punkte`);
           } else if (match.length === 5) {
             // Prüfe ob es ein Regenbogen-Match ist
             const hasRainbow = match.some(tileIndex => 
@@ -1857,10 +1850,10 @@ export default {
             );
             if (hasRainbow) {
               matchPoints = 50; // 5er-Match mit Regenbogen: 50 Punkte
-              console.log(`🔧 5er-Match mit Regenbogen: +${matchPoints} Punkte`);
+              debugLog(`🔧 5er-Match mit Regenbogen: +${matchPoints} Punkte`);
             } else {
               matchPoints = 35; // 5er-Match (Bombe): 35 Punkte
-              console.log(`🔧 5er-Match (Bombe): +${matchPoints} Punkte`);
+              debugLog(`🔧 5er-Match (Bombe): +${matchPoints} Punkte`);
             }
           }
           
@@ -1869,12 +1862,12 @@ export default {
           match.forEach(tileIndex => {
             // WICHTIG: Power-ups dürfen NIE entfernt werden
             if (this.board[tileIndex] && this.isPowerUpTile(this.board[tileIndex].type)) {
-              console.log(`🔧 Power-up ${this.board[tileIndex].type} an Position ${tileIndex} wird NICHT entfernt (Typ-Prüfung)`);
+              debugLog(`🔧 Power-up ${this.board[tileIndex].type} an Position ${tileIndex} wird NICHT entfernt (Typ-Prüfung)`);
               return; // Überspringe dieses Tile
             }
             
             // Nur normale Tiles zur Entfernung hinzufügen
-            console.log(`🔧 Füge Tile ${this.board[tileIndex].type} an Position ${tileIndex} zur Entfernung hinzu`);
+            debugLog(`🔧 Füge Tile ${this.board[tileIndex].type} an Position ${tileIndex} zur Entfernung hinzu`);
             tilesToRemove.add(tileIndex);
           });
         }
@@ -1884,66 +1877,66 @@ export default {
       if (totalMatchPoints > 0) {
         this.levelScore += totalMatchPoints;
         this.score += totalMatchPoints;
-        console.log(`🎯 Match-Punkte hinzugefügt: +${totalMatchPoints} Punkte (Level: ${this.levelScore}, Gesamt: ${this.score})`);
+        debugLog(`🎯 Match-Punkte hinzugefügt: +${totalMatchPoints} Punkte (Level: ${this.levelScore}, Gesamt: ${this.score})`);
       }
       
       // WICHTIG: Erhöhe den Match-Zähler für Level-Objekte
       if (isPlayerMove && !this.isInitializingLevel) {
       this.matchesMade += 1;
-        console.log(`🎯 Match-Zähler erhöht: ${this.matchesMade} Matches gemacht`);
+        debugLog(`🎯 Match-Zähler erhöht: ${this.matchesMade} Matches gemacht`);
       }
       
       // Debug: Zeige alle Tiles, die zur Entfernung hinzugefügt wurden
-      console.log('🔧 Debug: Alle Tiles, die zur Entfernung hinzugefügt wurden:');
+      debugLog('🔧 Debug: Alle Tiles, die zur Entfernung hinzugefügt wurden:');
       tilesToRemove.forEach(index => {
         if (this.board[index]) {
-          console.log(`  - Position ${index}: ${this.board[index].type}`);
+          debugLog(`  - Position ${index}: ${this.board[index].type}`);
         }
       });
       
       if (tilesToRemove.size === 0) {
-        console.log('🔧 Keine Tiles zum Entfernen gefunden');
+        debugLog('🔧 Keine Tiles zum Entfernen gefunden');
         return;
       }
       
-      console.log(`🔧 ${tilesToRemove.size} Tiles zum Entfernen gefunden`);
+      debugLog(`🔧 ${tilesToRemove.size} Tiles zum Entfernen gefunden`);
       
       // Debug: Zeige alle Tiles, die entfernt werden sollen
-      console.log('🔧 Debug: Tiles die entfernt werden sollen:');
+      debugLog('🔧 Debug: Tiles die entfernt werden sollen:');
       tilesToRemove.forEach(index => {
         if (this.board[index]) {
-          console.log(`  - Position ${index}: ${this.board[index].type}`);
+          debugLog(`  - Position ${index}: ${this.board[index].type}`);
         }
       });
       
       // Starte Schrumpf-Animation für alle zu entfernenden Tiles
-      console.log(`🔧 Starte Schrumpf-Animation für ${tilesToRemove.size} Tiles...`);
+      debugLog(`🔧 Starte Schrumpf-Animation für ${tilesToRemove.size} Tiles...`);
       await this.animateTileRemoval(Array.from(tilesToRemove));
       
       // Entferne alle gematchten Tiles nach der Animation
       tilesToRemove.forEach(index => {
         if (this.board[index]) {
-          console.log(`🔧 Entferne Tile ${this.board[index].type} an Position ${index}`);
+          debugLog(`🔧 Entferne Tile ${this.board[index].type} an Position ${index}`);
           this.board[index] = null;
         }
       });
       
       // Debug: Zeige alle Power-ups nach der Tile-Entfernung
-      console.log('🔧 Debug: Alle Power-ups nach Tile-Entfernung:');
+      debugLog('🔧 Debug: Alle Power-ups nach Tile-Entfernung:');
       this.debugPowerUps();
       
       // Aktualisiere die Anzeige
       this.$forceUpdate();
       
-      console.log(`🔧 ${tilesToRemove.size} einzigartige Tiles aus 3er-Matches entfernt`);
+      debugLog(`🔧 ${tilesToRemove.size} einzigartige Tiles aus 3er-Matches entfernt`);
       
       // JETZT erst Power-ups erstellen, nachdem die Tiles entfernt wurden
-      console.log('🔧 Erstelle Power-ups nach der Tile-Entfernung...');
+      debugLog('🔧 Erstelle Power-ups nach der Tile-Entfernung...');
       const powerUpsCreated = await this.createPowerUpsForMatches(matches);
       
       // Wenn Raketen erstellt wurden, lass sie im nächsten Zug starten
       if (powerUpsCreated && powerUpsCreated.rockets && powerUpsCreated.rockets.length > 0) {
-        console.log(`🚀 ${powerUpsCreated.rockets.length} Raketen erstellt - werden im nächsten Zug aktiviert`);
+        debugLog(`🚀 ${powerUpsCreated.rockets.length} Raketen erstellt - werden im nächsten Zug aktiviert`);
         
         // Aktualisiere die Anzeige
         this.$forceUpdate();
@@ -1956,49 +1949,49 @@ export default {
       }
       
       // Debug: Zeige alle Power-ups nach der Erstellung
-      console.log('🔧 Debug: Alle Power-ups nach createPowerUpsForMatches:');
+      debugLog('🔧 Debug: Alle Power-ups nach createPowerUpsForMatches:');
       this.debugPowerUps();
       
       // Debug: Zeige alle Power-ups im Board nach der Erstellung
-      console.log('🔧 Debug: Board nach Power-up-Erstellung:');
+      debugLog('🔧 Debug: Board nach Power-up-Erstellung:');
       for (let i = 0; i < this.board.length; i++) {
         if (this.board[i] && this.isPowerUpTile(this.board[i].type)) {
-          console.log(`🔧 Position ${i}: Power-up ${this.board[i].type}`);
-          console.log(`🔧 Board[${i}] = ${JSON.stringify(this.board[i])}`);
+          debugLog(`🔧 Position ${i}: Power-up ${this.board[i].type}`);
+          debugLog(`🔧 Board[${i}] = ${JSON.stringify(this.board[i])}`);
         }
       }
       
       // Debug: Zeige alle Power-ups im Template
-      console.log('🔧 Debug: Power-ups im Template:');
+      debugLog('🔧 Debug: Power-ups im Template:');
       for (let i = 0; i < this.board.length; i++) {
         if (this.board[i]) {
-          console.log(`🔧 Position ${i}: Tile ${this.board[i].type}, isPowerUpTile: ${this.isPowerUpTile(this.board[i].type)}, isRocketTile: ${this.isRocketTile(this.board[i].type)}`);
+          debugLog(`🔧 Position ${i}: Tile ${this.board[i].type}, isPowerUpTile: ${this.isPowerUpTile(this.board[i].type)}, isRocketTile: ${this.isRocketTile(this.board[i].type)}`);
           if (this.isPowerUpTile(this.board[i].type)) {
-            console.log(`🔧 ✅ Power-up erkannt: ${this.board[i].type} an Position ${i}`);
+            debugLog(`🔧 ✅ Power-up erkannt: ${this.board[i].type} an Position ${i}`);
           }
         }
       }
       
       // Debug: Zeige alle Power-ups vor dem Fall-Down
-      console.log('🔧 Debug: Alle Power-ups vor dem Fall-Down:');
+      debugLog('🔧 Debug: Alle Power-ups vor dem Fall-Down:');
       this.debugPowerUps();
       
       // Debug: Zeige alle Power-ups nach dem Fall-Down
-      console.log('🔧 Debug: Alle Power-ups nach dem Fall-Down:');
+      debugLog('🔧 Debug: Alle Power-ups nach dem Fall-Down:');
       this.debugPowerUps();
       
       // Führe Fall-Down-Logik aus
       await this.fallTilesDown();
       
       // Debug: Zeige alle Power-ups nach dem Fall-Down
-      console.log('🔧 Debug: Alle Power-ups nach dem Fall-Down:');
+      debugLog('🔧 Debug: Alle Power-ups nach dem Fall-Down:');
       this.debugPowerUps();
       
       // Fülle leere gültige Felder mit neuen Tiles auf
       await this.checkAndFillEmptyValidFields();
       
       // Debug: Zeige alle Power-ups nach dem Füllen
-      console.log('🔧 Debug: Alle Power-ups nach dem Füllen:');
+      debugLog('🔧 Debug: Alle Power-ups nach dem Füllen:');
       this.debugPowerUps();
       
       // Prüfe ob Power-ups erstellt wurden - wenn ja, keine Cascade-Matches prüfen
@@ -2007,27 +2000,27 @@ export default {
         // Nur Cascade-Matches prüfen, wenn keine Power-ups erstellt wurden
         await this.checkForCascadeMatches();
       } else {
-        console.log(`🔧 ${powerUpsCreated.count} Power-ups erstellt - überspringe Cascade-Match-Prüfung`);
+        debugLog(`🔧 ${powerUpsCreated.count} Power-ups erstellt - überspringe Cascade-Match-Prüfung`);
         
         // Debug: Zeige alle Power-ups nach der Verarbeitung
-        console.log('🔧 Debug: Alle Power-ups nach Power-up-Verarbeitung:');
+        debugLog('🔧 Debug: Alle Power-ups nach Power-up-Verarbeitung:');
         this.debugPowerUps();
         
               // Debug: Zeige alle Power-ups im Template nach der Verarbeitung
-      console.log('🔧 Debug: Power-ups im Template nach Verarbeitung:');
+      debugLog('🔧 Debug: Power-ups im Template nach Verarbeitung:');
       for (let i = 0; i < this.board.length; i++) {
         if (this.board[i]) {
           const isPowerUp = this.isPowerUpTile(this.board[i].type);
-          console.log(`🔧 Position ${i}: Tile ${this.board[i].type}, isPowerUpTile: ${isPowerUp}`);
+          debugLog(`🔧 Position ${i}: Tile ${this.board[i].type}, isPowerUpTile: ${isPowerUp}`);
           if (isPowerUp) {
-            console.log(`🔧 ✅ Power-up im Template: ${this.board[i].type} an Position ${i}`);
+            debugLog(`🔧 ✅ Power-up im Template: ${this.board[i].type} an Position ${i}`);
           }
         }
       }
       
       // WICHTIG: Prüfe Level-Objekte nach dem Verarbeiten der Matches
       if (isPlayerMove && !this.isInitializingLevel) {
-        console.log('🎯 Prüfe Level-Objekte nach Match-Verarbeitung...');
+        debugLog('🎯 Prüfe Level-Objekte nach Match-Verarbeitung...');
       this.checkLevelObjectives();
       }
       
@@ -2036,7 +2029,7 @@ export default {
     
     // Fall-Down-Logik: Bewege Tiles nach unten in leere Positionen
     async fallTilesDown() {
-      console.log('🔧 Starte Fall-Down-Logik...');
+      debugLog('🔧 Starte Fall-Down-Logik...');
       
       let hasChanges = true;
       let iteration = 0;
@@ -2044,13 +2037,13 @@ export default {
       
       while (hasChanges && iteration < maxIterations) {
         iteration++;
-        console.log(`🔧 Fall-Down Iteration ${iteration}...`);
+        debugLog(`🔧 Fall-Down Iteration ${iteration}...`);
         
         hasChanges = false;
         
         // 1. Von unten nach oben leere Felder finden und Tiles nach unten verschieben
         for (let col = 0; col < this.boardWidth; col++) {
-          console.log(`🔧 Prüfe Spalte ${col}...`);
+          debugLog(`🔧 Prüfe Spalte ${col}...`);
           
           // Finde alle leeren Positionen in dieser Spalte von unten nach oben
           for (let row = this.boardHeight - 1; row >= 0; row--) {
@@ -2063,13 +2056,13 @@ export default {
                 if (row < layoutRows.length && col < layoutRows[row].length) {
                   const targetChar = layoutRows[row][col];
                   if (targetChar !== 'x') {
-                    console.log(`🔧 Position [${row}, ${col}] ist ungültig im Layout (${targetChar}) - überspringe`);
+                    debugLog(`🔧 Position [${row}, ${col}] ist ungültig im Layout (${targetChar}) - überspringe`);
                     continue; // Überspringe ungültige Positionen
                   }
                 }
               }
               
-              console.log(`🔧 Leere Position gefunden: [${row}, ${col}] -> Index ${index}`);
+              debugLog(`🔧 Leere Position gefunden: [${row}, ${col}] -> Index ${index}`);
               
               // Suche nach oben nach einem Tile
               let tileFound = false;
@@ -2077,7 +2070,7 @@ export default {
                 const searchIndex = this.coordsToIndex(searchRow, col);
                 
                 if (this.board[searchIndex] && !this.isPowerUpTile(this.board[searchIndex].type)) {
-                  console.log(`🔧 Tile ${this.board[searchIndex].type} gefunden an [${searchRow}, ${col}] -> verschiebe nach [${row}, ${col}]`);
+                  debugLog(`🔧 Tile ${this.board[searchIndex].type} gefunden an [${searchRow}, ${col}] -> verschiebe nach [${row}, ${col}]`);
                   
                   // Verschiebe Tile nach unten
                   this.board[index] = this.board[searchIndex];
@@ -2096,7 +2089,7 @@ export default {
               }
               
               if (!tileFound) {
-                console.log(`🔧 Kein Tile über Position [${row}, ${col}] gefunden`);
+                debugLog(`🔧 Kein Tile über Position [${row}, ${col}] gefunden`);
               }
             }
           }
@@ -2104,7 +2097,7 @@ export default {
         
         // 2. Oberste Zeile nach fehlenden Feldern untersuchen und auffüllen
         if (hasChanges) {
-          console.log('🔧 Fülle oberste Zeile auf...');
+          debugLog('🔧 Fülle oberste Zeile auf...');
           
           for (let col = 0; col < this.boardWidth; col++) {
             const index = this.coordsToIndex(0, col);
@@ -2116,7 +2109,7 @@ export default {
                 if (0 < layoutRows.length && col < layoutRows[0].length) {
                   const targetChar = layoutRows[0][col];
                   if (targetChar !== 'x') {
-                    console.log(`🔧 Oberste Position [0, ${col}] ist ungültig im Layout (${targetChar}) - überspringe`);
+                    debugLog(`🔧 Oberste Position [0, ${col}] ist ungültig im Layout (${targetChar}) - überspringe`);
                     continue;
                   }
                 }
@@ -2125,7 +2118,7 @@ export default {
               // Erstelle neues Tile
               const newTile = this.createRandomTile();
               this.board[index] = newTile;
-              console.log(`🔧 Neues Tile ${newTile.type} an oberster Position [0, ${col}] hinzugefügt`);
+              debugLog(`🔧 Neues Tile ${newTile.type} an oberster Position [0, ${col}] hinzugefügt`);
               hasChanges = true;
             }
           }
@@ -2135,19 +2128,19 @@ export default {
           await this.wait(100);
         }
         
-        console.log(`🔧 Iteration ${iteration} abgeschlossen - Änderungen: ${hasChanges}`);
+        debugLog(`🔧 Iteration ${iteration} abgeschlossen - Änderungen: ${hasChanges}`);
       }
       
       if (iteration >= maxIterations) {
-        console.log('⚠️ Maximale Anzahl von Fall-Down Iterationen erreicht');
+        debugLog('⚠️ Maximale Anzahl von Fall-Down Iterationen erreicht');
       }
       
-      console.log('🔧 Fall-Down-Logik abgeschlossen');
+      debugLog('🔧 Fall-Down-Logik abgeschlossen');
     },
     
     // Hilfsfunktion: Zeige den aktuellen Board-Zustand in der Konsole
     printBoardState() {
-      console.log('🔧 Board-Zustand:');
+      debugLog('🔧 Board-Zustand:');
       for (let row = 0; row < this.boardHeight; row++) {
         let rowStr = '';
         for (let col = 0; col < this.boardWidth; col++) {
@@ -2159,13 +2152,13 @@ export default {
             rowStr += '[ ] ';
           }
         }
-        console.log(`  Zeile ${row}: ${rowStr}`);
+        debugLog(`  Zeile ${row}: ${rowStr}`);
       }
     },
     
     // Fülle leere Positionen mit neuen Tiles auf
     async fillEmptyPositions() {
-      console.log('🔧 Fülle leere Positionen mit neuen Tiles auf...');
+      debugLog('🔧 Fülle leere Positionen mit neuen Tiles auf...');
       
       let newTilesAdded = 0;
       const newTilePositions = [];
@@ -2201,9 +2194,9 @@ export default {
                 newTilesAdded++;
                 newTilePositions.push({ index, row: topEmptyRow, col, type: newTile.type });
                 
-                console.log(`🔧 Neues Tile ${newTile.type} an Position [${topEmptyRow}, ${col}] hinzugefügt`);
+                debugLog(`🔧 Neues Tile ${newTile.type} an Position [${topEmptyRow}, ${col}] hinzugefügt`);
               } else {
-                console.log(`🔧 Position [${topEmptyRow}, ${col}] wird nicht gefüllt - Layout zeigt '${targetChar}'`);
+                debugLog(`🔧 Position [${topEmptyRow}, ${col}] wird nicht gefüllt - Layout zeigt '${targetChar}'`);
               }
             }
           } else {
@@ -2214,7 +2207,7 @@ export default {
             newTilesAdded++;
             newTilePositions.push({ index, row: topEmptyRow, col, type: newTile.type });
             
-            console.log(`🔧 Neues Tile ${newTile.type} an Position [${topEmptyRow}, ${col}] hinzugefügt`);
+            debugLog(`🔧 Neues Tile ${newTile.type} an Position [${topEmptyRow}, ${col}] hinzugefügt`);
           }
         }
       }
@@ -2227,11 +2220,11 @@ export default {
         await this.animateNewTilesAppearing(newTilePositions);
       }
       
-      console.log(`🔧 ${newTilesAdded} neue Tiles hinzugefügt`);
+      debugLog(`🔧 ${newTilesAdded} neue Tiles hinzugefügt`);
       
       // WICHTIG: Nach dem Füllen der leeren Positionen das Brett auf Matches überprüfen
       if (newTilesAdded > 0) {
-        console.log('🔍 Überprüfe das Brett auf Matches nach dem Füllen der leeren Positionen...');
+        debugLog('🔍 Überprüfe das Brett auf Matches nach dem Füllen der leeren Positionen...');
         
         // Warte kurz, damit die neuen Tiles vollständig angezeigt werden
         await this.wait(300);
@@ -2240,7 +2233,7 @@ export default {
         const matchesAfterFill = this.findMatchesOnBoard(this.board, false);
         
         if (matchesAfterFill.length > 0) {
-          console.log(`🔍 ${matchesAfterFill.length} Match(es) nach dem Füllen gefunden - starte automatische Behandlung`);
+          debugLog(`🔍 ${matchesAfterFill.length} Match(es) nach dem Füllen gefunden - starte automatische Behandlung`);
           
           // Behandle die gefundenen Matches automatisch (kein Spieler-Move)
           await this.handleMatches(matchesAfterFill, false);
@@ -2253,24 +2246,24 @@ export default {
           
           if (this.recursionDepth < 3) {
             this.recursionDepth++;
-            console.log(`🔄 Rekursiver Aufruf ${this.recursionDepth}/3 - prüfe auf weitere leere Positionen`);
+            debugLog(`🔄 Rekursiver Aufruf ${this.recursionDepth}/3 - prüfe auf weitere leere Positionen`);
             
             // Prüfe erneut auf leere Positionen und fülle sie auf
             await this.checkAndFillEmptyValidFields();
             
             this.recursionDepth--;
           } else {
-            console.log('⚠️ Maximale Rekursionstiefe erreicht - stoppe automatische Match-Behandlung');
+            debugLog('⚠️ Maximale Rekursionstiefe erreicht - stoppe automatische Match-Behandlung');
           }
         } else {
-          console.log('✅ Keine Matches nach dem Füllen gefunden - Board ist bereit');
+          debugLog('✅ Keine Matches nach dem Füllen gefunden - Board ist bereit');
         }
       }
     },
     
     // Erstelle Power-ups für 4er-Matches, 5er-Matches und L-Form-Matches
     async createPowerUpsForMatches(matches) {
-      console.log('🔧 Prüfe auf Power-up-Erstellung...');
+      debugLog('🔧 Prüfe auf Power-up-Erstellung...');
       
       let powerUpsCreated = 0;
       const bombs = [];
@@ -2283,7 +2276,7 @@ export default {
       // Verarbeite zuerst 5er-Matches (höchste Priorität)
       matches.forEach(match => {
         if (Array.isArray(match) && match.length === 5) {
-          console.log(`🔧 5er-Match gefunden: ${match.join(', ')} - erstelle Regenbogen-Tile`);
+          debugLog(`🔧 5er-Match gefunden: ${match.join(', ')} - erstelle Regenbogen-Tile`);
           
           // Regenbogen-Tile erscheint an der Position des mittleren Tiles (Index 2)
           const rainbowIndex = match[2];
@@ -2294,8 +2287,8 @@ export default {
           // Erstelle Regenbogen-Tile
           this.board[rainbowIndex] = { type: 'rainbow' };
           
-          console.log(`🌈 Regenbogen-Tile an Position ${rainbowIndex} erstellt`);
-          console.log(`🔧 Board[${rainbowIndex}] = ${JSON.stringify(this.board[rainbowIndex])}`);
+          debugLog(`🌈 Regenbogen-Tile an Position ${rainbowIndex} erstellt`);
+          debugLog(`🔧 Board[${rainbowIndex}] = ${JSON.stringify(this.board[rainbowIndex])}`);
           powerUpsCreated++;
           rainbows.push(rainbowIndex);
         }
@@ -2304,11 +2297,11 @@ export default {
       // Verarbeite dann L-Form-Matches (mittlere Priorität)
       matches.forEach(match => {
         if (match.type === 'l-shape') {
-          console.log(`🔧 L-Form-Match gefunden: ${match.direction} an Ecke ${match.corner} - erstelle Bombe`);
+          debugLog(`🔧 L-Form-Match gefunden: ${match.direction} an Ecke ${match.corner} - erstelle Bombe`);
           
           // Prüfe ob die Ecke bereits von einem 5er-Match verwendet wird
           if (usedPositions.has(match.corner)) {
-            console.log(`🔧 Überspringe L-Form-Match - Position ${match.corner} bereits von 5er-Match verwendet`);
+            debugLog(`🔧 Überspringe L-Form-Match - Position ${match.corner} bereits von 5er-Match verwendet`);
             return;
           }
           
@@ -2318,8 +2311,8 @@ export default {
           // Bombe an der Ecke erstellen
           this.board[match.corner] = { type: 'bomb' };
           
-          console.log(`💣 Bombe an Position ${match.corner} erstellt`);
-          console.log(`🔧 Board[${match.corner}] = ${JSON.stringify(this.board[match.corner])}`);
+          debugLog(`💣 Bombe an Position ${match.corner} erstellt`);
+          debugLog(`🔧 Board[${match.corner}] = ${JSON.stringify(this.board[match.corner])}`);
           powerUpsCreated++;
           bombs.push(match.corner);
         }
@@ -2328,14 +2321,14 @@ export default {
       // Verarbeite zuletzt 4er-Matches (niedrigste Priorität)
       matches.forEach(match => {
         if (Array.isArray(match) && match.length === 4) {
-          console.log(`🔧 4er-Match gefunden: ${match.join(', ')} - erstelle Rakete`);
+          debugLog(`🔧 4er-Match gefunden: ${match.join(', ')} - erstelle Rakete`);
           
           // Rakete erscheint an der Position des zweiten Tiles
           const rocketIndex = match[1];
           
           // Prüfe ob die Position bereits von einem höherwertigen Power-up verwendet wird
           if (usedPositions.has(rocketIndex)) {
-            console.log(`🔧 Überspringe 4er-Match - Position ${rocketIndex} bereits von höherwertigem Power-up verwendet`);
+            debugLog(`🔧 Überspringe 4er-Match - Position ${rocketIndex} bereits von höherwertigem Power-up verwendet`);
             return;
           }
           
@@ -2346,8 +2339,8 @@ export default {
           const rocketType = this.determineRocketType(match);
           this.board[rocketIndex] = { type: rocketType };
           
-          console.log(`🚀 Rakete ${rocketType} an Position ${rocketIndex} erstellt`);
-          console.log(`🔧 Board[${rocketIndex}] = ${JSON.stringify(this.board[rocketIndex])}`);
+          debugLog(`🚀 Rakete ${rocketType} an Position ${rocketIndex} erstellt`);
+          debugLog(`🔧 Board[${rocketIndex}] = ${JSON.stringify(this.board[rocketIndex])}`);
           powerUpsCreated++;
           rockets.push(rocketIndex);
         }
@@ -2356,7 +2349,7 @@ export default {
       // Aktualisiere die Anzeige nach der Power-up-Erstellung
       if (powerUpsCreated > 0) {
         this.$forceUpdate();
-        console.log(`🔧 ${powerUpsCreated} Power-ups erstellt und Board aktualisiert`);
+        debugLog(`🔧 ${powerUpsCreated} Power-ups erstellt und Board aktualisiert`);
       }
       
       // Gib detaillierte Informationen über erstellte Power-ups zurück
@@ -2385,7 +2378,7 @@ export default {
     
     // Prüfe und fülle alle leeren gültigen Felder nach dem Fallen
     async checkAndFillEmptyValidFields() {
-      console.log('🔧 Prüfe alle leeren gültigen Felder...');
+      debugLog('🔧 Prüfe alle leeren gültigen Felder...');
       
       let hasEmptyValidFields = false;
       const emptyValidFields = [];
@@ -2409,25 +2402,25 @@ export default {
                   // Gültiges Feld ist leer - muss gefüllt werden
                   emptyValidFields.push({ index, row, col });
                   hasEmptyValidFields = true;
-                  console.log(`🔧 Gültiges Feld [${row}, ${col}] ist leer und muss gefüllt werden`);
+                  debugLog(`🔧 Gültiges Feld [${row}, ${col}] ist leer und muss gefüllt werden`);
                 }
               }
             }
           } else if (this.board[index] && this.isPowerUpTile(this.board[index].type)) {
             // Position enthält bereits ein Power-up - nicht überschreiben
-            console.log(`🔧 Position [${row}, ${col}] enthält bereits Power-up ${this.board[index].type} - wird nicht überschrieben`);
+            debugLog(`🔧 Position [${row}, ${col}] enthält bereits Power-up ${this.board[index].type} - wird nicht überschrieben`);
           }
         }
       }
       
       if (hasEmptyValidFields) {
-        console.log(`🔧 ${emptyValidFields.length} leere gültige Felder gefunden - starte erneuten Fall-Prozess`);
+        debugLog(`🔧 ${emptyValidFields.length} leere gültige Felder gefunden - starte erneuten Fall-Prozess`);
         
         // Fülle alle leeren gültigen Felder mit neuen Tiles
         for (const field of emptyValidFields) {
           const newTile = this.createRandomTile();
           this.board[field.index] = newTile;
-          console.log(`🔧 Neues Tile ${newTile.type} an Position [${field.row}, ${field.col}] hinzugefügt`);
+          debugLog(`🔧 Neues Tile ${newTile.type} an Position [${field.row}, ${field.col}] hinzugefügt`);
         }
         
         // Aktualisiere die Anzeige
@@ -2441,10 +2434,10 @@ export default {
           type: this.board[field.index].type 
         })));
         
-        console.log(`🔧 Alle leeren gültigen Felder gefüllt`);
+        debugLog(`🔧 Alle leeren gültigen Felder gefüllt`);
         
         // WICHTIG: Nach dem Füllen der leeren gültigen Felder das Brett auf Matches überprüfen
-        console.log('🔍 Überprüfe das Brett auf Matches nach dem Füllen der leeren gültigen Felder...');
+        debugLog('🔍 Überprüfe das Brett auf Matches nach dem Füllen der leeren gültigen Felder...');
         
         // Warte kurz, damit die neuen Tiles vollständig angezeigt werden
         await this.wait(300);
@@ -2453,7 +2446,7 @@ export default {
         const matchesAfterFill = this.findMatchesOnBoard(this.board, false);
         
         if (matchesAfterFill.length > 0) {
-          console.log(`🔍 ${matchesAfterFill.length} Match(es) nach dem Füllen der leeren gültigen Felder gefunden - starte automatische Behandlung`);
+          debugLog(`🔍 ${matchesAfterFill.length} Match(es) nach dem Füllen der leeren gültigen Felder gefunden - starte automatische Behandlung`);
           
           // Behandle die gefundenen Matches automatisch (kein Spieler-Move)
           await this.handleMatches(matchesAfterFill, false);
@@ -2466,26 +2459,26 @@ export default {
           
           if (this.recursionDepth < 3) {
             this.recursionDepth++;
-            console.log(`🔄 Rekursiver Aufruf ${this.recursionDepth}/3 - prüfe auf weitere leere gültige Felder`);
+            debugLog(`🔄 Rekursiver Aufruf ${this.recursionDepth}/3 - prüfe auf weitere leere gültige Felder`);
             
             // Prüfe erneut auf leere gültige Felder und fülle sie auf
             await this.checkAndFillEmptyValidFields();
             
             this.recursionDepth--;
           } else {
-            console.log('⚠️ Maximale Rekursionstiefe erreicht - stoppe automatische Match-Behandlung');
+            debugLog('⚠️ Maximale Rekursionstiefe erreicht - stoppe automatische Match-Behandlung');
           }
         } else {
-          console.log('✅ Keine Matches nach dem Füllen der leeren gültigen Felder gefunden - Board ist bereit');
+          debugLog('✅ Keine Matches nach dem Füllen der leeren gültigen Felder gefunden - Board ist bereit');
         }
       } else {
-        console.log('🔧 Alle gültigen Felder enthalten Tiles - Board ist vollständig');
+        debugLog('🔧 Alle gültigen Felder enthalten Tiles - Board ist vollständig');
       }
     },
     
     // Animierte Entfernung von Tiles mit Schrumpf-Effekt
     async animateTileRemoval(tileIndices) {
-      console.log(`🎬 Starte Schrumpf-Animation für ${tileIndices.length} Tiles...`);
+      debugLog(`🎬 Starte Schrumpf-Animation für ${tileIndices.length} Tiles...`);
       
       // Sammle alle DOM-Elemente der zu entfernenden Tiles
       const tileElements = tileIndices.map(index => {
@@ -2493,7 +2486,7 @@ export default {
         if (element) {
           // Füge CSS-Klasse für die Animation hinzu
           element.classList.add('removing');
-          console.log(`🎬 CSS-Klasse 'removing' zu Tile ${index} hinzugefügt`);
+          debugLog(`🎬 CSS-Klasse 'removing' zu Tile ${index} hinzugefügt`);
         }
         return element;
       }).filter(element => element !== null);
@@ -2503,7 +2496,7 @@ export default {
         return;
       }
       
-      console.log(`🎬 ${tileElements.length} DOM-Elemente für Animation vorbereitet`);
+      debugLog(`🎬 ${tileElements.length} DOM-Elemente für Animation vorbereitet`);
       
       // Warte auf die Animation (0,75 Sekunden)
       await this.wait(750);
@@ -2513,12 +2506,12 @@ export default {
         element.classList.remove('removing');
       });
       
-      console.log(`🎬 Schrumpf-Animation abgeschlossen`);
+      debugLog(`🎬 Schrumpf-Animation abgeschlossen`);
     },
     
     // Animierte Fall-Animation für Tiles (einfache Animation nach dem Verschieben im Board)
     async animateTilesFalling(tilesToFall) {
-      console.log(`🎬 Starte Fall-Animation für ${tilesToFall.length} Tiles...`);
+      debugLog(`🎬 Starte Fall-Animation für ${tilesToFall.length} Tiles...`);
       
       // Sammle alle DOM-Elemente der fallenden Tiles (an ihren neuen Positionen)
       const tileElements = tilesToFall.map(fallData => {
@@ -2537,7 +2530,7 @@ export default {
           // Füge CSS-Klasse für die Fall-Animation hinzu
           element.classList.add('falling');
           
-          console.log(`🎬 Fall-Animation für Tile ${fallData.toIndex}: ${fallDistance} Zeile(n) (${fallPixels}px)`);
+          debugLog(`🎬 Fall-Animation für Tile ${fallData.toIndex}: ${fallDistance} Zeile(n) (${fallPixels}px)`);
         }
         return element;
       }).filter(element => element !== null);
@@ -2547,7 +2540,7 @@ export default {
         return;
       }
       
-      console.log(`🎬 ${tileElements.length} DOM-Elemente für Fall-Animation vorbereitet`);
+      debugLog(`🎬 ${tileElements.length} DOM-Elemente für Fall-Animation vorbereitet`);
       
       // Warte kurz, damit die transform-Eigenschaft gesetzt wird
       await this.wait(50);
@@ -2570,12 +2563,12 @@ export default {
         element.style.removeProperty('transition');
       });
       
-      console.log(`🎬 Fall-Animation abgeschlossen`);
+      debugLog(`🎬 Fall-Animation abgeschlossen`);
     },
     
     // Animierte Erscheinung neuer Tiles
     async animateNewTilesAppearing(newTilePositions) {
-      console.log(`🎬 Starte Erscheinungs-Animation für ${newTilePositions.length} neue Tiles...`);
+      debugLog(`🎬 Starte Erscheinungs-Animation für ${newTilePositions.length} neue Tiles...`);
       
       // Sammle alle DOM-Elemente der neuen Tiles
       const tileElements = newTilePositions.map(tileData => {
@@ -2583,7 +2576,7 @@ export default {
         if (element) {
           // Füge CSS-Klasse für die Erscheinungs-Animation hinzu
           element.classList.add('new-tile');
-          console.log(`🎬 CSS-Klasse 'new-tile' zu Tile ${tileData.index} hinzugefügt`);
+          debugLog(`🎬 CSS-Klasse 'new-tile' zu Tile ${tileData.index} hinzugefügt`);
         }
         return element;
       }).filter(element => element !== null);
@@ -2593,7 +2586,7 @@ export default {
         return;
       }
       
-      console.log(`🎬 ${tileElements.length} DOM-Elemente für Erscheinungs-Animation vorbereitet`);
+      debugLog(`🎬 ${tileElements.length} DOM-Elemente für Erscheinungs-Animation vorbereitet`);
       
       // Warte auf die Erscheinungs-Animation (0,5 Sekunden)
       await this.wait(500);
@@ -2603,7 +2596,7 @@ export default {
         element.classList.remove('new-tile');
       });
       
-      console.log(`🎬 Erscheinungs-Animation abgeschlossen`);
+      debugLog(`🎬 Erscheinungs-Animation abgeschlossen`);
     },
     
     // Erstelle ein zufälliges Tile
@@ -2718,8 +2711,7 @@ export default {
         const fullMessage = `${message}\n\nFehler-Details: ${error.message || 'Unbekannter Fehler'}\n\nDas Spiel konnte nicht geladen werden. Überprüfe deine Internetverbindung und versuche es erneut.`;
         this.$refs.errorDialog.open(fullMessage);
       } else {
-        // Fallback: Zeige einfache Alert-Meldung
-        alert(`${message}\n\nFehler: ${error.message || 'Unbekannter Fehler'}`);
+        showError(this, `${message}\n\nFehler: ${error.message || 'Unbekannter Fehler'}`);
       }
     },
 
@@ -2795,7 +2787,7 @@ export default {
 
     // Fall-Prozess: Tiles fallen lassen und neue hinzufügen
     async processFalling() {
-      console.log('🔧 Starte Fall-Prozess...');
+      debugLog('🔧 Starte Fall-Prozess...');
       
       // Führe Fall-Down-Logik aus
       await this.fallTilesDown();
@@ -2803,12 +2795,12 @@ export default {
       // Fülle leere gültige Felder mit neuen Tiles auf
       await this.checkAndFillEmptyValidFields();
       
-      console.log('🔧 Fall-Prozess abgeschlossen');
+      debugLog('🔧 Fall-Prozess abgeschlossen');
     },
 
     // Prüfe auf Cascade-Matches nach dem Fallen
     async checkForCascadeMatches() {
-      console.log('🔧 Prüfe auf Cascade-Matches...');
+      debugLog('🔧 Prüfe auf Cascade-Matches...');
       
       // Warte kurz, damit alle Animationen abgeschlossen sind
       await this.wait(200);
@@ -2819,21 +2811,21 @@ export default {
       // Filtere Power-up-Matches heraus (diese sollen nicht als Cascade-Matches behandelt werden)
       const filteredMatches = newMatches.filter(match => {
         if (match.type === 'l-shape') {
-          console.log('🔧 L-Form Match in Cascade gefunden - überspringe');
+          debugLog('🔧 L-Form Match in Cascade gefunden - überspringe');
           return false;
         }
         if (Array.isArray(match) && match.length === 4) {
-          console.log('🔧 4er-Match in Cascade gefunden - überspringe');
+          debugLog('🔧 4er-Match in Cascade gefunden - überspringe');
           return false;
         }
         return true;
       });
       
       if (filteredMatches.length > 0) {
-        console.log(`🔧 ${filteredMatches.length} neue Cascade-Matches gefunden`);
+        debugLog(`🔧 ${filteredMatches.length} neue Cascade-Matches gefunden`);
         await this.handleMatches(filteredMatches, false);
       } else {
-        console.log('🔧 Keine neuen Cascade-Matches gefunden');
+        debugLog('🔧 Keine neuen Cascade-Matches gefunden');
       }
     },
 
@@ -2843,41 +2835,41 @@ export default {
 
     // Führe einen Move durch (Tausch zweier Tiles)
     async performMove(fromIndex, toIndex) {
-      console.log(`🔧 Führe Move durch: ${fromIndex} ↔ ${toIndex}`);
+      debugLog(`🔧 Führe Move durch: ${fromIndex} ↔ ${toIndex}`);
       
       // Prüfe ob beide Positionen gültig sind
       if (!this.board[fromIndex] || !this.board[toIndex]) {
-        console.log('⚠️ Ungültige Positionen für Move');
+        debugLog('⚠️ Ungültige Positionen für Move');
         return false;
       }
       
       // Prüfe ob die Tiles benachbart sind
       if (!this.areTilesAdjacent(fromIndex, toIndex)) {
-        console.log('⚠️ Tiles sind nicht benachbart');
+        debugLog('⚠️ Tiles sind nicht benachbart');
         return false;
       }
       
       // Prüfe ob ein Tile eine Rakete ist
       if (this.isRocketTile(this.board[fromIndex].type) || this.isRocketTile(this.board[toIndex].type)) {
-        console.log('🚀 Rakete wird aktiviert!');
+        debugLog('🚀 Rakete wird aktiviert!');
         return await this.activateRocket(fromIndex, toIndex);
       }
       
       // Prüfe ob ein Tile eine Bombe ist
       if (this.board[fromIndex].type === 'bomb' || this.board[toIndex].type === 'bomb') {
-        console.log('💣 Bombe wird aktiviert!');
+        debugLog('💣 Bombe wird aktiviert!');
         return await this.activateBomb(fromIndex, toIndex);
       }
       
       // Prüfe ob ein Tile ein Regenbogen-Tile ist
       if (this.board[fromIndex].type === 'rainbow' || this.board[toIndex].type === 'rainbow') {
-        console.log('🌈 Regenbogen-Tile wird aktiviert!');
+        debugLog('🌈 Regenbogen-Tile wird aktiviert!');
         return await this.activateRainbow(fromIndex, toIndex);
       }
       
       // Prüfe ob das Ziel ein leeres Feld ist
       if (!this.board[toIndex]) {
-        console.log('⚠️ Verschieben auf leeres Feld nicht erlaubt');
+        debugLog('⚠️ Verschieben auf leeres Feld nicht erlaubt');
         return false;
       }
       
@@ -2900,17 +2892,17 @@ export default {
         );
     
     if (hasValidMatch) {
-      console.log(`✅ Move erfolgreich - ${matches.length} Match(es) gefunden!`);
+      debugLog(`✅ Move erfolgreich - ${matches.length} Match(es) gefunden!`);
       
       // WICHTIG: Zähle den erfolgreichen Zug
       this.moves++;
       this.movesLeft--;
-      console.log(`🎯 Zug gezählt: ${this.moves} Züge gemacht, ${this.movesLeft} Züge übrig`);
+      debugLog(`🎯 Zug gezählt: ${this.moves} Züge gemacht, ${this.movesLeft} Züge übrig`);
       
       await this.handleMatches(matches, true);
       return true;
     } else {
-      console.log('❌ Move nicht erfolgreich - Kein 3er-Match');
+      debugLog('❌ Move nicht erfolgreich - Kein 3er-Match');
       // Tausche die Tiles zurück
       this.board[fromIndex] = { ...this.board[toIndex] };
       this.board[toIndex] = tempTile;
@@ -2921,7 +2913,7 @@ export default {
     
     // Aktiviere eine Rakete (durch Verschieben oder Doppelklick)
     async activateRocket(rocketIndex, targetIndex) {
-      console.log(`🚀 Aktiviere Rakete an Position ${rocketIndex}`);
+      debugLog(`🚀 Aktiviere Rakete an Position ${rocketIndex}`);
       
       // Bestimme das Zentrum der Raketen-Explosion
       let explosionCenter;
@@ -2939,7 +2931,7 @@ export default {
       
       // Entferne die Tiles um das Explosionszentrum
       if (tilesToRemove.size > 0) {
-        console.log(`🚀 Entferne ${tilesToRemove.size} Tiles um Position ${explosionCenter}`);
+        debugLog(`🚀 Entferne ${tilesToRemove.size} Tiles um Position ${explosionCenter}`);
         
         // Starte Schrumpf-Animation für alle zu entfernenden Tiles
         await this.animateTileRemoval(Array.from(tilesToRemove));
@@ -2947,14 +2939,14 @@ export default {
         // Entferne alle Tiles nach der Animation
         tilesToRemove.forEach(index => {
           if (this.board[index]) {
-            console.log(`🚀 Entferne Tile ${this.board[index].type} an Position ${index}`);
+            debugLog(`🚀 Entferne Tile ${this.board[index].type} an Position ${index}`);
             this.board[index] = null;
           }
         });
         
         // Entferne auch die Rakete selbst
         if (this.isRocketTile(this.board[rocketIndex].type)) {
-          console.log(`🚀 Entferne Rakete an Position ${rocketIndex}`);
+          debugLog(`🚀 Entferne Rakete an Position ${rocketIndex}`);
           this.board[rocketIndex] = null;
         }
         
@@ -2981,7 +2973,7 @@ export default {
     
     // Aktiviere eine Bombe (durch Verschieben oder Doppelklick)
     async activateBomb(bombIndex, targetIndex) {
-      console.log(`💣 Aktiviere Bombe an Position ${bombIndex}`);
+      debugLog(`💣 Aktiviere Bombe an Position ${bombIndex}`);
       
       // Bestimme das Zentrum der Bomben-Explosion
       let explosionCenter;
@@ -3002,7 +2994,7 @@ export default {
       
       // Entferne die Bombe nach der Explosion
       if (this.board[bombIndex].type === 'bomb') {
-        console.log(`💣 Entferne Bombe an Position ${bombIndex}`);
+        debugLog(`💣 Entferne Bombe an Position ${bombIndex}`);
         this.board[bombIndex] = null;
       }
       
@@ -3023,7 +3015,7 @@ export default {
     
     // Aktiviere ein Regenbogen-Tile (durch Verschieben)
     async activateRainbow(rainbowIndex, targetIndex) {
-      console.log(`🌈 Aktiviere Regenbogen-Tile an Position ${rainbowIndex}`);
+      debugLog(`🌈 Aktiviere Regenbogen-Tile an Position ${rainbowIndex}`);
       
       // Bestimme das Zentrum der Regenbogen-Aktivität
       let activationCenter;
@@ -3052,7 +3044,7 @@ export default {
         }
         
         if (tilesToRemove.size > 0) {
-          console.log(`🌈 Entferne ${tilesToRemove.size} Tiles vom Typ ${targetTile.type}`);
+          debugLog(`🌈 Entferne ${tilesToRemove.size} Tiles vom Typ ${targetTile.type}`);
           
           // Starte Schrumpf-Animation für alle zu entfernenden Tiles
           await this.animateTileRemoval(Array.from(tilesToRemove));
@@ -3060,14 +3052,14 @@ export default {
           // Entferne alle Tiles nach der Animation
           tilesToRemove.forEach(index => {
             if (this.board[index]) {
-              console.log(`🌈 Entferne Tile ${this.board[index].type} an Position ${index}`);
+              debugLog(`🌈 Entferne Tile ${this.board[index].type} an Position ${index}`);
               this.board[index] = null;
             }
           });
           
           // Entferne auch das Regenbogen-Tile selbst
           if (this.board[rainbowIndex].type === 'rainbow') {
-            console.log(`🌈 Entferne Regenbogen-Tile an Position ${rainbowIndex}`);
+            debugLog(`🌈 Entferne Regenbogen-Tile an Position ${rainbowIndex}`);
             this.board[rainbowIndex] = null;
           }
           
@@ -3092,7 +3084,7 @@ export default {
     
     // Aktiviere eine Rakete automatisch (für sofortige Aktivierung nach der Erstellung)
     async activateRocketAutomatically(rocketIndex) {
-      console.log(`🚀 Aktiviere Rakete automatisch an Position ${rocketIndex}`);
+      debugLog(`🚀 Aktiviere Rakete automatisch an Position ${rocketIndex}`);
       
       // Wähle ein zufälliges Ziel für die Rakete
       const availableTargets = [];
@@ -3109,7 +3101,7 @@ export default {
       
       // Wähle ein zufälliges Ziel
       const randomTarget = availableTargets[Math.floor(Math.random() * availableTargets.length)];
-      console.log(`🚀 Rakete startet auf zufälliges Ziel an Position ${randomTarget}`);
+      debugLog(`🚀 Rakete startet auf zufälliges Ziel an Position ${randomTarget}`);
       
       // Zeige Raketen-Explosions-Animation (einfache Version ohne Flug)
       await this.showRocketExplosionAnimationSimple(randomTarget);
@@ -3118,7 +3110,7 @@ export default {
       const tilesToRemove = this.getRocketExplosionTiles(randomTarget);
       
       if (tilesToRemove.size > 0) {
-        console.log(`🚀 Entferne ${tilesToRemove.size} Tiles um Position ${randomTarget}`);
+        debugLog(`🚀 Entferne ${tilesToRemove.size} Tiles um Position ${randomTarget}`);
         
         // Starte Schrumpf-Animation für alle zu entfernenden Tiles
         await this.animateTileRemoval(Array.from(tilesToRemove));
@@ -3126,13 +3118,13 @@ export default {
         // Entferne alle Tiles nach der Animation
         tilesToRemove.forEach(index => {
           if (this.board[index]) {
-            console.log(`🚀 Entferne Tile ${this.board[index].type} an Position ${index}`);
+            debugLog(`🚀 Entferne Tile ${this.board[index].type} an Position ${index}`);
             this.board[index] = null;
           }
         });
         
         // Entferne auch die Rakete selbst
-        console.log(`🚀 Entferne Rakete an Position ${rocketIndex}`);
+        debugLog(`🚀 Entferne Rakete an Position ${rocketIndex}`);
         this.board[rocketIndex] = null;
         
         // Aktualisiere die Anzeige
@@ -3238,14 +3230,14 @@ export default {
         const randomTargetIndex = occupiedTiles[Math.floor(Math.random() * occupiedTiles.length)];
         const targetPos = this.indexToCoords(randomTargetIndex);
         
-        console.log(`🚀 Rakete fliegt zu Position [${targetPos.row}, ${targetPos.col}]`);
+        debugLog(`🚀 Rakete fliegt zu Position [${targetPos.row}, ${targetPos.col}]`);
         
         // Zeige Flug-Animation
         await this.showRocketFlightAnimation(randomTargetIndex);
         
         // Entferne das Ziel-Tile nach der Animation
         this.board[randomTargetIndex] = null;
-        console.log(`🚀 Ziel-Tile an Position ${randomTargetIndex} entfernt`);
+        debugLog(`🚀 Ziel-Tile an Position ${randomTargetIndex} entfernt`);
         
         // Aktualisiere die Anzeige
         this.$forceUpdate();
@@ -3263,7 +3255,7 @@ export default {
       }
       
       // Zeige Flug-Animation
-      console.log(`🚀 Rakete fliegt zu Ziel...`);
+      debugLog(`🚀 Rakete fliegt zu Ziel...`);
       
       // Zeige die fliegende Rakete
       this.showFlyingRocket = true;
@@ -3285,7 +3277,7 @@ export default {
       // Verstecke die fliegende Rakete
       this.showFlyingRocket = false;
       
-      console.log(`🚀 Rakete erreicht Ziel und zerstört es`);
+      debugLog(`🚀 Rakete erreicht Ziel und zerstört es`);
       
       // Aktualisiere die Anzeige
       this.$forceUpdate();
@@ -3323,7 +3315,7 @@ export default {
       const adjacentTiles = [];
       const currentPos = this.indexToCoords(tileIndex);
       
-      console.log(`🔧 Position: [${currentPos.row}, ${currentPos.col}]`);
+      debugLog(`🔧 Position: [${currentPos.row}, ${currentPos.col}]`);
       
       // Prüfe alle 4 Richtungen: oben, unten, links, rechts
       const directions = [
@@ -3341,24 +3333,24 @@ export default {
           const newIndex = this.coordsToIndex(newRow, newCol);
           if (newIndex !== null && this.board[newIndex]) {
             adjacentTiles.push(newIndex);
-            console.log(`🔧 Benachbart: [${newRow}, ${newCol}] -> Index ${newIndex}`);
+            debugLog(`🔧 Benachbart: [${newRow}, ${newCol}] -> Index ${newIndex}`);
           }
         }
       });
       
-      console.log(`🔧 ${adjacentTiles.length} benachbarte Tiles gefunden`);
+      debugLog(`🔧 ${adjacentTiles.length} benachbarte Tiles gefunden`);
       
       // Markiere alle benachbarten Tiles
       adjacentTiles.forEach(index => {
         const tileElement = document.querySelector(`[data-index="${index}"]`);
         if (tileElement) {
           tileElement.classList.add('adjacent-available');
-          console.log(`🔧 CSS-Klasse zu Tile ${index} hinzugefügt`);
+          debugLog(`🔧 CSS-Klasse zu Tile ${index} hinzugefügt`);
           
           // Test: Überprüfe ob die Klasse tatsächlich angewendet wurde
           setTimeout(() => {
             if (tileElement.classList.contains('adjacent-available')) {
-              console.log(`✅ CSS-Klasse 'adjacent-available' ist auf Tile ${index} aktiv`);
+              debugLog(`✅ CSS-Klasse 'adjacent-available' ist auf Tile ${index} aktiv`);
             } else {
               console.warn(`❌ CSS-Klasse 'adjacent-available' ist NICHT auf Tile ${index} aktiv`);
             }
@@ -3400,7 +3392,7 @@ export default {
 
     // Drag & Drop Event-Handler
     onTileMouseDown(event, tileIndex) {
-      console.log(`🔧 onTileMouseDown aufgerufen für Tile ${tileIndex}`);
+      debugLog(`🔧 onTileMouseDown aufgerufen für Tile ${tileIndex}`);
       
       // Verhindere Standard-Verhalten
       event.preventDefault();
@@ -3414,11 +3406,11 @@ export default {
       
       // Prüfe ob bereits ein Drag läuft
       if (this.isDragging) {
-        console.log(`🔧 Drag läuft bereits, ignoriere neuen Start`);
+        debugLog(`🔧 Drag läuft bereits, ignoriere neuen Start`);
         return;
       }
       
-      console.log(`🔧 Starte Drag für Tile ${tileIndex}`);
+      debugLog(`🔧 Starte Drag für Tile ${tileIndex}`);
       
       // Setze Drag-Status
       this.draggedTileIndex = tileIndex;
@@ -3438,16 +3430,16 @@ export default {
           width: rect.width,
           height: rect.height
         };
-        console.log(`🔧 Ursprüngliche Tile-Position gespeichert: [${rect.left}, ${rect.top}] mit Größe [${rect.width}x${rect.height}]`);
+        debugLog(`🔧 Ursprüngliche Tile-Position gespeichert: [${rect.left}, ${rect.top}] mit Größe [${rect.width}x${rect.height}]`);
         
         // Füge CSS-Klassen für visuelles Feedback hinzu
         tileElement.classList.add('dragging');
-        console.log(`🔧 'dragging' Klasse zu Tile ${tileIndex} hinzugefügt`);
+        debugLog(`🔧 'dragging' Klasse zu Tile ${tileIndex} hinzugefügt`);
       } else {
         console.warn(`⚠️ Konnte .game-tile Element für Tile ${tileIndex} nicht finden`);
       }
       
-      console.log(`🔧 Drag-Start-Position: dragStartX=${this.dragStartX}, dragStartY=${this.dragStartY}`);
+      debugLog(`🔧 Drag-Start-Position: dragStartX=${this.dragStartX}, dragStartY=${this.dragStartY}`);
       
       // Markiere alle benachbarten Tiles als verfügbar für den Move
       this.highlightAdjacentTiles(tileIndex);
@@ -3455,7 +3447,7 @@ export default {
       // WICHTIG: Entferne alle falschen drag-hover Klassen von anderen Tiles
       this.removeFalseDragHoverClasses();
       
-      console.log(`🔧 Drag-Status: isDragging=${this.isDragging}, draggedTileIndex=${this.draggedTileIndex}`);
+      debugLog(`🔧 Drag-Status: isDragging=${this.isDragging}, draggedTileIndex=${this.draggedTileIndex}`);
       
       // DEBUG: Zeige alle Tiles mit CSS-Klassen nach dem Drag-Start
       this.debugAllTileClasses();
@@ -3467,7 +3459,7 @@ export default {
         return;
       }
       
-      console.log(`🔧 Entferne falsche drag-hover Klassen...`);
+      debugLog(`🔧 Entferne falsche drag-hover Klassen...`);
       
       // Finde alle Tiles mit drag-hover Klasse
       const allHoverElements = document.querySelectorAll('.drag-hover');
@@ -3480,7 +3472,7 @@ export default {
           // Prüfe ob das Tile benachbart ist
           if (!this.adjacentTilesForHover.includes(tileIndex)) {
             element.classList.remove('drag-hover');
-            console.log(`🔧 Entferne falsche drag-hover Klasse von Tile ${tileIndex}`);
+            debugLog(`🔧 Entferne falsche drag-hover Klasse von Tile ${tileIndex}`);
           }
         }
       });
@@ -3492,18 +3484,18 @@ export default {
         return;
       }
       
-      console.log(`🔧 onTileMouseMove: clientX=${event.clientX}, clientY=${event.clientY}`);
+      debugLog(`🔧 onTileMouseMove: clientX=${event.clientX}, clientY=${event.clientY}`);
       
       // Berechne Drag-Offset
       const deltaX = event.clientX - this.dragStartX;
       const deltaY = event.clientY - this.dragStartY;
       
-      console.log(`🔧 Drag-Offset: deltaX=${deltaX}px, deltaY=${deltaY}px`);
+      debugLog(`🔧 Drag-Offset: deltaX=${deltaX}px, deltaY=${deltaY}px`);
       
       // Bewege das gedraggte Tile
       const draggedElement = document.querySelector(`[data-index="${this.draggedTileIndex}"]`);
       if (draggedElement) {
-        console.log(`🔧 Bewege Tile ${this.draggedTileIndex} um ${deltaX}px, ${deltaY}px`);
+        debugLog(`🔧 Bewege Tile ${this.draggedTileIndex} um ${deltaX}px, ${deltaY}px`);
         
         // Setze alle Styles direkt
         draggedElement.style.position = 'relative';
@@ -3512,7 +3504,7 @@ export default {
         draggedElement.style.zIndex = '1000';
         draggedElement.style.pointerEvents = 'none';
         
-        console.log(`🔧 Styles gesetzt: position=${draggedElement.style.position}, left=${draggedElement.style.left}, top=${draggedElement.style.top}`);
+        debugLog(`🔧 Styles gesetzt: position=${draggedElement.style.position}, left=${draggedElement.style.left}, top=${draggedElement.style.top}`);
       } else {
         console.warn(`⚠️ Konnte gedraggtes Tile ${this.draggedTileIndex} nicht finden`);
       }
@@ -3547,12 +3539,12 @@ export default {
           const draggedArea = draggedRect.width * draggedRect.height;
           const overlapWithOriginal = (overlapArea / draggedArea) * 100;
           
-          console.log(`🔧 Überlappung mit ursprünglicher Position: ${overlapWithOriginal.toFixed(1)}%`);
+          debugLog(`🔧 Überlappung mit ursprünglicher Position: ${overlapWithOriginal.toFixed(1)}%`);
           
           // Animation stoppen nur wenn das gedraggte Tile fast komplett zurück zu seiner ursprünglichen Position ist
           // UND eine Animation läuft
           if (overlapWithOriginal > 98 && this.currentlyAnimatingTile !== null) {
-            console.log(`🔧 Gedraggtes Tile ist fast zurück zu seiner ursprünglichen Position (${overlapWithOriginal.toFixed(1)}%), stoppe Animation für Tile ${this.currentlyAnimatingTile}`);
+            debugLog(`🔧 Gedraggtes Tile ist fast zurück zu seiner ursprünglichen Position (${overlapWithOriginal.toFixed(1)}%), stoppe Animation für Tile ${this.currentlyAnimatingTile}`);
             this.stopMovePreviewAnimation(this.currentlyAnimatingTile);
             this.currentlyAnimatingTile = null;
             return; // Keine weiteren Animationen starten
@@ -3578,7 +3570,7 @@ export default {
           const draggedArea = draggedRect.width * draggedRect.height;
           const overlapPercentage = (overlapArea / draggedArea) * 100;
           
-          console.log(`🔧 Überlappung mit Tile ${adjacentIndex}: ${overlapPercentage.toFixed(1)}%`);
+          debugLog(`🔧 Überlappung mit Tile ${adjacentIndex}: ${overlapPercentage.toFixed(1)}%`);
           
           if (overlapPercentage > 10) {
             overlappingTiles.push({
@@ -3594,11 +3586,11 @@ export default {
       
       if (overlappingTiles.length > 0) {
         const bestTile = overlappingTiles[0];
-        console.log(`🔧 Beste Überlappung: Tile ${bestTile.index} mit ${bestTile.percentage.toFixed(1)}%`);
+        debugLog(`🔧 Beste Überlappung: Tile ${bestTile.index} mit ${bestTile.percentage.toFixed(1)}%`);
         
         // Wenn ein anderes Tile animiert ist, stoppe es
         if (this.currentlyAnimatingTile !== null && this.currentlyAnimatingTile !== bestTile.index) {
-          console.log(`🔧 Stoppe vorheriges animiertes Tile ${this.currentlyAnimatingTile} für bessere Überlappung`);
+          debugLog(`🔧 Stoppe vorheriges animiertes Tile ${this.currentlyAnimatingTile} für bessere Überlappung`);
           this.stopMovePreviewAnimation(this.currentlyAnimatingTile);
         }
         
@@ -3610,7 +3602,7 @@ export default {
       } else {
         // Keine Überlappung über 10% - stoppe alle Animationen
         if (this.currentlyAnimatingTile !== null) {
-          console.log(`🔧 Keine Überlappung über 10%, stoppe Animation für Tile ${this.currentlyAnimatingTile}`);
+          debugLog(`🔧 Keine Überlappung über 10%, stoppe Animation für Tile ${this.currentlyAnimatingTile}`);
           this.stopMovePreviewAnimation(this.currentlyAnimatingTile);
           this.currentlyAnimatingTile = null;
         }
@@ -3634,10 +3626,10 @@ export default {
       const deltaX = this.originalTilePosition.left - adjacentRect.left;
       const deltaY = this.originalTilePosition.top - adjacentRect.top;
       
-      console.log(`🎬 Starte Animation für Tile ${adjacentIndex}:`);
-      console.log(`  - Ursprüngliche Position gedraggtes Tile: [${this.originalTilePosition.left}, ${this.originalTilePosition.top}]`);
-      console.log(`  - Aktuelle Position benachbartes Tile: [${adjacentRect.left}, ${adjacentRect.top}]`);
-      console.log(`  - Delta zur ursprünglichen Position: [${deltaX}px, ${deltaY}px]`);
+      debugLog(`🎬 Starte Animation für Tile ${adjacentIndex}:`);
+      debugLog(`  - Ursprüngliche Position gedraggtes Tile: [${this.originalTilePosition.left}, ${this.originalTilePosition.top}]`);
+      debugLog(`  - Aktuelle Position benachbartes Tile: [${adjacentRect.left}, ${adjacentRect.top}]`);
+      debugLog(`  - Delta zur ursprünglichen Position: [${deltaX}px, ${deltaY}px]`);
       
       // Verwende transform direkt mit !important über setProperty
       adjacentElement.style.setProperty('transform', `translate(${deltaX}px, ${deltaY}px)`, 'important');
@@ -3647,7 +3639,7 @@ export default {
       // Füge eine CSS-Klasse hinzu um den transform zu priorisieren
       adjacentElement.classList.add('preview-animating');
       
-      console.log(`🎬 Styles gesetzt für Tile ${adjacentIndex}: transform=${adjacentElement.style.transform}`);
+      debugLog(`🎬 Styles gesetzt für Tile ${adjacentIndex}: transform=${adjacentElement.style.transform}`);
     },
     
     // Stoppe Move-Preview Animation
@@ -3655,7 +3647,7 @@ export default {
       const adjacentElement = document.querySelector(`[data-index="${adjacentIndex}"]`);
       if (!adjacentElement) return;
       
-      console.log(`⏹️ Stoppe Animation für Tile ${adjacentIndex}`);
+      debugLog(`⏹️ Stoppe Animation für Tile ${adjacentIndex}`);
       
       // Bewege das Tile zurück zur ursprünglichen Position
       adjacentElement.style.transition = 'all 0.3s ease-out';
@@ -3669,7 +3661,7 @@ export default {
         adjacentElement.classList.remove('preview-animating');
       }, 300);
       
-      console.log(`⏹️ Animation gestoppt für Tile ${adjacentIndex}`);
+      debugLog(`⏹️ Animation gestoppt für Tile ${adjacentIndex}`);
     },
     
     // Hilfsmethode: Prüfe ob ein Tile gerade animiert wird
@@ -3683,7 +3675,7 @@ export default {
       // Setze das gedraggte Tile zurück
       const draggedElement = document.querySelector(`[data-index="${this.draggedTileIndex}"]`);
       if (draggedElement) {
-        console.log(`🔄 Setze gedraggtes Tile ${this.draggedTileIndex} zurück`);
+        debugLog(`🔄 Setze gedraggtes Tile ${this.draggedTileIndex} zurück`);
         
         // Setze alle Styles zurück
         draggedElement.style.position = '';
@@ -3707,7 +3699,7 @@ export default {
       // Zusätzlich: Setze alle Tiles zurück, die möglicherweise noch transform haben
       document.querySelectorAll('.game-tile').forEach(tileElement => {
         if (tileElement.style.transform && tileElement.style.transform !== '') {
-          console.log(`🔄 Setze transform für Tile zurück: ${tileElement.dataset.index}`);
+          debugLog(`🔄 Setze transform für Tile zurück: ${tileElement.dataset.index}`);
           tileElement.style.removeProperty('transform');
           tileElement.style.transition = '';
           tileElement.style.zIndex = '';
@@ -3718,7 +3710,7 @@ export default {
       // Setze den aktuell animierten Tile zurück
       this.currentlyAnimatingTile = null;
       
-      console.log(`🔄 Alle Tile-Animationen zurückgesetzt`);
+      debugLog(`🔄 Alle Tile-Animationen zurückgesetzt`);
     },
     
     // Globaler Mouse-Move Handler für kontinuierliches Dragging
@@ -3731,13 +3723,13 @@ export default {
     // Globaler Mouse-Up Handler für Drag & Drop
     onGlobalMouseUp(event) {
       if (this.isDragging) {
-        console.log(`🔧 Globaler MouseUp während Drag - beende Drag`);
+        debugLog(`🔧 Globaler MouseUp während Drag - beende Drag`);
         this.endDrag();
       }
     },
     
     onTileMouseUp(event, tileIndex) {
-      console.log(`🔧 onTileMouseUp aufgerufen für Tile ${tileIndex}`);
+      debugLog(`🔧 onTileMouseUp aufgerufen für Tile ${tileIndex}`);
       
       // Verhindere Standard-Verhalten
       event.preventDefault();
@@ -3745,11 +3737,11 @@ export default {
       
       // Prüfe ob ein Drag läuft
       if (!this.isDragging || this.draggedTileIndex === null) {
-        console.log(`🔧 Kein aktiver Drag, ignoriere MouseUp`);
+        debugLog(`🔧 Kein aktiver Drag, ignoriere MouseUp`);
         return;
       }
       
-      console.log(`🔧 Beende Drag: draggedTileIndex=${this.draggedTileIndex}, targetTile=${tileIndex}`);
+      debugLog(`🔧 Beende Drag: draggedTileIndex=${this.draggedTileIndex}, targetTile=${tileIndex}`);
       
       // WICHTIG: Prüfe ob ein Tile tatsächlich animiert wurde
       let shouldPerformMove = false;
@@ -3761,13 +3753,13 @@ export default {
           // Das Ziel-Tile ist animiert - führe Move durch
           shouldPerformMove = true;
           targetTileIndex = tileIndex;
-          console.log(`🔧 Ziel-Tile ${tileIndex} ist animiert - führe Move durch`);
+          debugLog(`🔧 Ziel-Tile ${tileIndex} ist animiert - führe Move durch`);
         } else {
           // Das Ziel-Tile ist nicht animiert - kein Move
-          console.log(`🔧 Ziel-Tile ${tileIndex} ist nicht animiert - kein Move`);
+          debugLog(`🔧 Ziel-Tile ${tileIndex} ist nicht animiert - kein Move`);
         }
       } else {
-        console.log(`🔧 Gleiches Tile, kein Move erforderlich`);
+        debugLog(`🔧 Gleiches Tile, kein Move erforderlich`);
       }
       
       // Setze alle Animationen zurück
@@ -3775,7 +3767,7 @@ export default {
       
       // Führe den Move durch, wenn erlaubt
       if (shouldPerformMove && targetTileIndex !== null) {
-        console.log(`🔧 Führe Move durch: ${this.draggedTileIndex} → ${targetTileIndex}`);
+        debugLog(`🔧 Führe Move durch: ${this.draggedTileIndex} → ${targetTileIndex}`);
         this.performMove(this.draggedTileIndex, targetTileIndex);
       }
       
@@ -3790,15 +3782,15 @@ export default {
       // Entferne alle CSS-Klassen und Hervorhebungen
       this.clearAllHighlights();
       
-      console.log(`🔧 Drag beendet, Status zurückgesetzt`);
+      debugLog(`🔧 Drag beendet, Status zurückgesetzt`);
     },
     
     // Beende den Drag korrekt
     endDrag() {
-      console.log(`🔧 endDrag aufgerufen`);
+      debugLog(`🔧 endDrag aufgerufen`);
       
       if (!this.isDragging) {
-        console.log(`🔧 Kein aktiver Drag, ignoriere endDrag`);
+        debugLog(`🔧 Kein aktiver Drag, ignoriere endDrag`);
         return;
       }
       
@@ -3810,12 +3802,12 @@ export default {
         // Ein anderes Tile ist animiert - führe Move durch
         shouldPerformMove = true;
         targetTileIndex = this.currentlyAnimatingTile;
-        console.log(`🔧 Anderes Tile ${targetTileIndex} ist animiert - führe Move durch`);
+        debugLog(`🔧 Anderes Tile ${targetTileIndex} ist animiert - führe Move durch`);
       } else if (this.currentlyAnimatingTile === this.draggedTileIndex) {
         // Das gedraggte Tile ist auf sich selbst animiert - kein Move
-        console.log(`🔧 Gedraggtes Tile ist auf sich selbst animiert - kein Move`);
+        debugLog(`🔧 Gedraggtes Tile ist auf sich selbst animiert - kein Move`);
       } else {
-        console.log(`🔧 Kein Tile animiert - kein Move`);
+        debugLog(`🔧 Kein Tile animiert - kein Move`);
       }
       
       // Zusätzliche Prüfung: Wenn das gedraggte Tile fast an seiner ursprünglichen Position ist, kein Move
@@ -3828,7 +3820,7 @@ export default {
           
           // Wenn das gedraggte Tile weniger als 20px von seiner ursprünglichen Position entfernt ist, kein Move
           if (deltaX < 20 && deltaY < 20) {
-            console.log(`🔧 Gedraggtes Tile ist zu nah an seiner ursprünglichen Position (${deltaX}px, ${deltaY}px) - kein Move`);
+            debugLog(`🔧 Gedraggtes Tile ist zu nah an seiner ursprünglichen Position (${deltaX}px, ${deltaY}px) - kein Move`);
             shouldPerformMove = false;
             targetTileIndex = null;
           }
@@ -3840,7 +3832,7 @@ export default {
       
       // Führe den Move durch, wenn erlaubt
       if (shouldPerformMove && targetTileIndex !== null) {
-        console.log(`🔧 Führe Move durch: ${this.draggedTileIndex} → ${targetTileIndex}`);
+        debugLog(`🔧 Führe Move durch: ${this.draggedTileIndex} → ${targetTileIndex}`);
         this.performMove(this.draggedTileIndex, targetTileIndex);
       }
       
@@ -3855,29 +3847,29 @@ export default {
       // Entferne alle CSS-Klassen und Hervorhebungen
       this.clearAllHighlights();
       
-      console.log(`🔧 Drag beendet, Status zurückgesetzt`);
+      debugLog(`🔧 Drag beendet, Status zurückgesetzt`);
     },
     
     // Debug-Methode: Zeige aktuellen Drag-Status
     debugDragStatus() {
-      console.log('🔍 Aktueller Drag-Status:');
-      console.log(`  - isDragging: ${this.isDragging}`);
-      console.log(`  - draggedTileIndex: ${this.draggedTileIndex}`);
-      console.log(`  - adjacentTilesForHover: [${this.adjacentTilesForHover.join(', ')}]`);
+      debugLog('🔍 Aktueller Drag-Status:');
+      debugLog(`  - isDragging: ${this.isDragging}`);
+      debugLog(`  - draggedTileIndex: ${this.draggedTileIndex}`);
+      debugLog(`  - adjacentTilesForHover: [${this.adjacentTilesForHover.join(', ')}]`);
       
       // Zeige alle aktiven CSS-Klassen
       const draggingElements = document.querySelectorAll('.dragging');
       const adjacentElements = document.querySelectorAll('.adjacent-available');
       const hoverElements = document.querySelectorAll('.drag-hover');
       
-      console.log(`  - .dragging Elemente: ${draggingElements.length}`);
-      console.log(`  - .adjacent-available Elemente: ${adjacentElements.length}`);
-      console.log(`  - .drag-hover Elemente: ${hoverElements.length}`);
+      debugLog(`  - .dragging Elemente: ${draggingElements.length}`);
+      debugLog(`  - .adjacent-available Elemente: ${adjacentElements.length}`);
+      debugLog(`  - .drag-hover Elemente: ${hoverElements.length}`);
     },
     
     // DEBUG: Zeige alle Tiles mit CSS-Klassen nach dem Drag-Start
     debugAllTileClasses() {
-      console.log('🔍 DEBUG: Alle Tiles mit CSS-Klassen nach Drag-Start:');
+      debugLog('🔍 DEBUG: Alle Tiles mit CSS-Klassen nach Drag-Start:');
       
       // Durchsuche alle Tiles im Board
       for (let i = 0; i < this.board.length; i++) {
@@ -3889,7 +3881,7 @@ export default {
             const hasHover = tileElement.classList.contains('drag-hover');
             
             if (hasDragging || hasAdjacent || hasHover) {
-              console.log(`  Tile ${i}: .dragging=${hasDragging}, .adjacent-available=${hasAdjacent}, .drag-hover=${hasHover}`);
+              debugLog(`  Tile ${i}: .dragging=${hasDragging}, .adjacent-available=${hasAdjacent}, .drag-hover=${hasHover}`);
             }
           }
         }
@@ -3898,22 +3890,22 @@ export default {
       // Zeige auch alle Tiles mit .adjacent-available Klasse
       const adjacentElements = document.querySelectorAll('.adjacent-available');
       if (adjacentElements.length > 0) {
-        console.log(`🔍 Tiles mit .adjacent-available Klasse:`);
+        debugLog(`🔍 Tiles mit .adjacent-available Klasse:`);
         adjacentElements.forEach(element => {
           const index = element.getAttribute('data-index');
-          console.log(`  - Tile ${index}`);
+          debugLog(`  - Tile ${index}`);
         });
       } else {
-        console.log(`❌ Keine Tiles mit .adjacent-available Klasse gefunden!`);
+        debugLog(`❌ Keine Tiles mit .adjacent-available Klasse gefunden!`);
       }
     },
     
     onTileMouseEnter(event, tileIndex) {
       // Debug: Zeige alle Event-Parameter
-      console.log(`🔧 onTileMouseEnter: Tile ${tileIndex}, isDragging: ${this.isDragging}, draggedTileIndex: ${this.draggedTileIndex}`);
+      debugLog(`🔧 onTileMouseEnter: Tile ${tileIndex}, isDragging: ${this.isDragging}, draggedTileIndex: ${this.draggedTileIndex}`);
       
       if (!this.isDragging || this.draggedTileIndex === null) {
-        console.log(`🔧 Kein aktiver Drag, ignoriere MouseEnter`);
+        debugLog(`🔧 Kein aktiver Drag, ignoriere MouseEnter`);
         return;
       }
       
@@ -3923,16 +3915,16 @@ export default {
         const tileElement = event.target.closest('.game-tile');
         if (tileElement) {
           tileElement.classList.add('drag-hover');
-          console.log(`✅ Hover über benachbartem Tile ${tileIndex} - drag-hover Klasse hinzugefügt`);
+          debugLog(`✅ Hover über benachbartem Tile ${tileIndex} - drag-hover Klasse hinzugefügt`);
         }
       } else {
-        console.log(`❌ Hover über NICHT-benachbartem Tile ${tileIndex} - wird ignoriert`);
+        debugLog(`❌ Hover über NICHT-benachbartem Tile ${tileIndex} - wird ignoriert`);
         
         // WICHTIG: Entferne drag-hover Klasse falls sie fälschlicherweise gesetzt wurde
         const tileElement = event.target.closest('.game-tile');
         if (tileElement && tileElement.classList.contains('drag-hover')) {
           tileElement.classList.remove('drag-hover');
-          console.log(`🔧 Entferne fälschliche drag-hover Klasse von Tile ${tileIndex}`);
+          debugLog(`🔧 Entferne fälschliche drag-hover Klasse von Tile ${tileIndex}`);
         }
       }
     },
@@ -4744,7 +4736,7 @@ export default {
       
       // Prüfe auf Raketen-Tiles (neue Power-ups)
       if (this.isRocketTile(tile.type)) {
-        console.log(`🚀 Doppelklick auf Rakete ${tile.type} an Position ${index}`);
+        debugLog(`🚀 Doppelklick auf Rakete ${tile.type} an Position ${index}`);
         // Rakete durch Doppelklick aktivieren
         await this.activateRocketByDoubleClick(index);
         return;
@@ -4752,7 +4744,7 @@ export default {
       
       // Prüfe auf Bomben-Tiles (neue Power-ups)
       if (tile.type === 'bomb') {
-        console.log(`💣 Doppelklick auf Bombe an Position ${index}`);
+        debugLog(`💣 Doppelklick auf Bombe an Position ${index}`);
         // Bombe durch Doppelklick aktivieren
         await this.activateBombByDoubleClick(index);
         return;
@@ -4760,7 +4752,7 @@ export default {
       
       // Prüfe auf Regenbogen-Tiles
       if (tile.type === 'rainbow') {
-        console.log(`🌈 Doppelklick auf Regenbogen-Tile an Position ${index}`);
+        debugLog(`🌈 Doppelklick auf Regenbogen-Tile an Position ${index}`);
         // Regenbogen-Tile durch Doppelklick aktivieren
         await this.activateRainbowByDoubleClick(index);
         return;
@@ -4769,13 +4761,13 @@ export default {
     
     // Aktiviere Rakete durch Doppelklick
     async activateRocketByDoubleClick(rocketIndex) {
-      console.log(`🚀 Aktiviere Rakete durch Doppelklick an Position ${rocketIndex}`);
+      debugLog(`🚀 Aktiviere Rakete durch Doppelklick an Position ${rocketIndex}`);
       
       // Hole alle Tiles um die Rakete herum
       const tilesToRemove = this.getRocketExplosionTiles(rocketIndex);
       
       if (tilesToRemove.size > 0) {
-        console.log(`🚀 Entferne ${tilesToRemove.size} Tiles um Rakete herum`);
+        debugLog(`🚀 Entferne ${tilesToRemove.size} Tiles um Rakete herum`);
         
         // Starte Schrumpf-Animation für alle zu entfernenden Tiles
         await this.animateTileRemoval(Array.from(tilesToRemove));
@@ -4783,13 +4775,13 @@ export default {
         // Entferne alle Tiles nach der Animation
         tilesToRemove.forEach(index => {
           if (this.board[index]) {
-            console.log(`🚀 Entferne Tile ${this.board[index].type} an Position ${index}`);
+            debugLog(`🚀 Entferne Tile ${this.board[index].type} an Position ${index}`);
             this.board[index] = null;
           }
         });
         
         // Entferne auch die Rakete selbst
-        console.log(`🚀 Entferne Rakete an Position ${rocketIndex}`);
+        debugLog(`🚀 Entferne Rakete an Position ${rocketIndex}`);
         this.board[rocketIndex] = null;
         
         // Aktualisiere die Anzeige
@@ -4811,7 +4803,7 @@ export default {
     
     // Aktiviere Bombe durch Doppelklick
     async activateBombByDoubleClick(bombIndex) {
-      console.log(`💣 Aktiviere Bombe durch Doppelklick an Position ${bombIndex}`);
+      debugLog(`💣 Aktiviere Bombe durch Doppelklick an Position ${bombIndex}`);
       
       // Spiele Bomben-Sound
       this.playSound('bomb');
@@ -4823,7 +4815,7 @@ export default {
       this.explodeBomb(bombIndex, 1, true);
       
       // Entferne die Bombe selbst
-      console.log(`💣 Entferne Bombe an Position ${bombIndex}`);
+      debugLog(`💣 Entferne Bombe an Position ${bombIndex}`);
       this.board[bombIndex] = null;
       
       // Aktualisiere die Anzeige
@@ -4841,17 +4833,17 @@ export default {
     
     // Aktiviere Regenbogen-Tile durch Doppelklick
     async activateRainbowByDoubleClick(rainbowIndex) {
-      console.log(`🌈 Regenbogen-Tile an Position ${rainbowIndex} durch Doppelklick aktiviert`);
+      debugLog(`🌈 Regenbogen-Tile an Position ${rainbowIndex} durch Doppelklick aktiviert`);
       
       // Wähle zufällig eine vorhandene Tile-Art aus (außer Power-ups)
       const availableTypes = this.getAvailableTileTypes();
       if (availableTypes.length === 0) {
-        console.log('⚠️ Keine verfügbaren Tile-Typen für Regenbogen-Aktivierung');
+        debugLog('⚠️ Keine verfügbaren Tile-Typen für Regenbogen-Aktivierung');
         return;
       }
       
       const randomType = availableTypes[Math.floor(Math.random() * availableTypes.length)];
-      console.log(`🌈 Zufällig ausgewählter Tile-Typ: ${randomType}`);
+      debugLog(`🌈 Zufällig ausgewählter Tile-Typ: ${randomType}`);
       
       // Aktiviere den Regenbogen mit dem zufälligen Typ
       await this.activateRainbow(rainbowIndex, null, randomType);
@@ -4905,17 +4897,17 @@ export default {
     
     // Neue Methode: Aktiviere Regenbogen-Tile durch Doppelklick
     async activateRainbowByDoubleClick(rainbowIndex) {
-      console.log(`🌈 Aktiviere Regenbogen-Tile durch Doppelklick an Position ${rainbowIndex}`);
+      debugLog(`🌈 Aktiviere Regenbogen-Tile durch Doppelklick an Position ${rainbowIndex}`);
       
       // Wähle zufällig eine vorhandene Tile-Art aus (außer Power-ups)
       const availableTypes = this.getAvailableTileTypes();
       if (availableTypes.length === 0) {
-        console.log('⚠️ Keine verfügbaren Tile-Typen für Regenbogen-Aktivierung');
+        debugLog('⚠️ Keine verfügbaren Tile-Typen für Regenbogen-Aktivierung');
         return;
       }
       
       const randomType = availableTypes[Math.floor(Math.random() * availableTypes.length)];
-      console.log(`🌈 Zufällig ausgewählter Tile-Typ: ${randomType}`);
+      debugLog(`🌈 Zufällig ausgewählter Tile-Typ: ${randomType}`);
       
       // Aktiviere den Regenbogen mit dem zufälligen Typ
       await this.activateRainbowByType(rainbowIndex, randomType);
@@ -4923,18 +4915,18 @@ export default {
     
     // Neue Methode: Aktiviere Regenbogen-Tile mit spezifischem Typ
     async activateRainbowByType(rainbowIndex, targetType) {
-      console.log(`🌈 Aktiviere Regenbogen-Tile an Position ${rainbowIndex} mit Typ: ${targetType}`);
+      debugLog(`🌈 Aktiviere Regenbogen-Tile an Position ${rainbowIndex} mit Typ: ${targetType}`);
       
       // Spiele Regenbogen-Sound
       this.playSound('rainbow');
       
       // Überspringe Power-ups
       if (this.isPowerUpTile(targetType)) {
-        console.log(`⚠️ Überspringe Power-up Typ: ${targetType}`);
+        debugLog(`⚠️ Überspringe Power-up Typ: ${targetType}`);
         return;
       }
       
-      console.log(`🌈 Entferne alle Tiles vom Typ: ${targetType}`);
+      debugLog(`🌈 Entferne alle Tiles vom Typ: ${targetType}`);
       
       // Sammle alle Tiles des Ziel-Typs
       const tilesToRemove = [];
@@ -4945,7 +4937,7 @@ export default {
       }
       
       if (tilesToRemove.length === 0) {
-        console.log(`⚠️ Keine Tiles vom Typ ${targetType} gefunden`);
+        debugLog(`⚠️ Keine Tiles vom Typ ${targetType} gefunden`);
         return;
       }
       
@@ -4980,17 +4972,17 @@ export default {
       this.levelScore += points;
       this.score += points;
       
-      console.log(`🌈 ${tilesToRemove.length} Tiles vom Typ ${targetType} entfernt, +${points} Punkte`);
+      debugLog(`🌈 ${tilesToRemove.length} Tiles vom Typ ${targetType} entfernt, +${points} Punkte`);
       
               // WICHTIG: Erhöhe den Match-Zähler für Level-Objekte
         if (!this.isInitializingLevel) {
           this.matchesMade += 1;
-          console.log(`🎯 Match-Zähler erhöht nach Regenbogen-Aktivierung: ${this.matchesMade} Matches gemacht`);
+          debugLog(`🎯 Match-Zähler erhöht nach Regenbogen-Aktivierung: ${this.matchesMade} Matches gemacht`);
         }
         
         // WICHTIG: Prüfe Level-Objekte nach der Regenbogen-Aktivierung
         if (!this.isInitializingLevel) {
-          console.log('🎯 Prüfe Level-Objekte nach Regenbogen-Aktivierung...');
+          debugLog('🎯 Prüfe Level-Objekte nach Regenbogen-Aktivierung...');
           this.checkLevelObjectives();
         }
     },
@@ -5006,7 +4998,7 @@ export default {
         this.playSound('rainbow');
         
         // Zwei Regenbogen-Tiles getauscht: Entferne alle Tiles vom gesamten Board
-        console.log('🌈 Zwei Regenbogen-Tiles kombiniert - entferne alle Tiles vom Board!');
+        debugLog('🌈 Zwei Regenbogen-Tiles kombiniert - entferne alle Tiles vom Board!');
         await this.removeAllTilesFromBoardIncludingRainbows();
         return true;
       } else if (originalTile1.type === 'rainbow' || originalTile2.type === 'rainbow') {
@@ -5135,7 +5127,7 @@ export default {
     
     // Neue Methode: Überprüfe das Brett nach dem Feldaufbau auf Matches
     async checkBoardAfterSetup() {
-      console.log('🔍 Überprüfe das Brett nach dem Feldaufbau auf Matches...');
+      debugLog('🔍 Überprüfe das Brett nach dem Feldaufbau auf Matches...');
       
       // Warte kurz, damit alle Tiles vollständig angezeigt werden
       await this.wait(500);
@@ -5144,14 +5136,14 @@ export default {
       const matchesAfterSetup = this.findMatchesOnBoard(this.board, false);
       
       if (matchesAfterSetup.length > 0) {
-        console.log(`🔍 ${matchesAfterSetup.length} Match(es) nach dem Feldaufbau gefunden - starte automatische Behandlung`);
+        debugLog(`🔍 ${matchesAfterSetup.length} Match(es) nach dem Feldaufbau gefunden - starte automatische Behandlung`);
         
         // Behandle die gefundenen Matches automatisch (kein Spieler-Move)
         await this.handleMatches(matchesAfterSetup, false);
         
-        console.log('✅ Brett nach dem Feldaufbau erfolgreich bereinigt');
+        debugLog('✅ Brett nach dem Feldaufbau erfolgreich bereinigt');
       } else {
-        console.log('✅ Keine Matches nach dem Feldaufbau gefunden - Brett ist bereit');
+        debugLog('✅ Keine Matches nach dem Feldaufbau gefunden - Brett ist bereit');
       }
     },
     
@@ -5167,7 +5159,7 @@ export default {
       }
       
       if (allTileIndices.length > 0) {
-        console.log(`🌈 Entferne alle ${allTileIndices.length} Tiles vom Board (einschließlich Regenbögen)`);
+        debugLog(`🌈 Entferne alle ${allTileIndices.length} Tiles vom Board (einschließlich Regenbögen)`);
         
         // Zeige Regenbogen-Effekt-Animation in der Mitte des Boards
         const centerIndex = Math.floor(this.board.length / 2);
@@ -5198,17 +5190,17 @@ export default {
         this.levelScore += points;
         this.score += points;
         
-        console.log(`🌈 Alle Tiles erfolgreich entfernt! +${points} Punkte`);
+        debugLog(`🌈 Alle Tiles erfolgreich entfernt! +${points} Punkte`);
         
         // WICHTIG: Erhöhe den Match-Zähler für Level-Objekte
         if (!this.isInitializingLevel) {
           this.matchesMade += 1;
-          console.log(`🎯 Match-Zähler erhöht nach Regenbogen-Tausch: ${this.matchesMade} Matches gemacht`);
+          debugLog(`🎯 Match-Zähler erhöht nach Regenbogen-Tausch: ${this.matchesMade} Matches gemacht`);
         }
         
         // WICHTIG: Prüfe Level-Objekte nach dem Regenbogen-Tausch
         if (!this.isInitializingLevel) {
-          console.log('🎯 Prüfe Level-Objekte nach Regenbogen-Tausch...');
+          debugLog('🎯 Prüfe Level-Objekte nach Regenbogen-Tausch...');
           this.checkLevelObjectives();
         }
       }
@@ -5269,7 +5261,7 @@ export default {
         // WICHTIG: Erhöhe den Match-Zähler für Level-Objekte (nur bei manueller Aktivierung)
         if (isManualActivation && !this.isInitializingLevel) {
           this.matchesMade += 1;
-          console.log(`🎯 Match-Zähler erhöht nach Bomben-Explosion: ${this.matchesMade} Matches gemacht`);
+          debugLog(`🎯 Match-Zähler erhöht nach Bomben-Explosion: ${this.matchesMade} Matches gemacht`);
         }
         
         // WICHTIG: Zug-Zähler wird bereits in handleRainbowSwap erhöht, nicht hier nochmal!
@@ -5367,7 +5359,7 @@ export default {
       // WICHTIG: Erhöhe den Match-Zähler für Level-Objekte
       if (!this.isInitializingLevel && bombIndices.length > 0) {
         this.matchesMade += 1;
-        console.log(`🎯 Match-Zähler erhöht nach Massen-Bomben-Explosion: ${this.matchesMade} Matches gemacht`);
+        debugLog(`🎯 Match-Zähler erhöht nach Massen-Bomben-Explosion: ${this.matchesMade} Matches gemacht`);
       }
       
       // WICHTIG: Zug-Zähler wird bereits in handleRainbowSwap erhöht, nicht hier nochmal!
@@ -5422,7 +5414,7 @@ export default {
       // WICHTIG: Erhöhe den Match-Zähler für Level-Objekte
       if (!this.isInitializingLevel && rocketIndices.length > 0) {
         this.matchesMade += 1;
-        console.log(`🎯 Match-Zähler erhöht nach Massen-Raketen-Start: ${this.matchesMade} Matches gemacht`);
+        debugLog(`🎯 Match-Zähler erhöht nach Massen-Raketen-Start: ${this.matchesMade} Matches gemacht`);
       }
       
       // WICHTIG: Zug-Zähler wird bereits in handleRainbowSwap erhöht, nicht hier nochmal!
@@ -5476,7 +5468,7 @@ export default {
           // WICHTIG: Erhöhe den Match-Zähler für Level-Objekte
           if (!this.isInitializingLevel) {
             this.matchesMade += 1;
-            console.log(`🎯 Match-Zähler erhöht nach Raketen-Bomben-Kombination: ${this.matchesMade} Matches gemacht`);
+            debugLog(`🎯 Match-Zähler erhöht nach Raketen-Bomben-Kombination: ${this.matchesMade} Matches gemacht`);
           }
           
           // WICHTIG: Zug-Zähler wird bereits in handleRainbowSwap erhöht, nicht hier nochmal!
@@ -5513,7 +5505,7 @@ export default {
         // WICHTIG: Erhöhe den Match-Zähler für Level-Objekte
         if (!this.isInitializingLevel) {
           this.matchesMade += 1;
-          console.log(`🎯 Match-Zähler erhöht nach Bomben-Raketen-Landung: ${this.matchesMade} Matches gemacht`);
+          debugLog(`🎯 Match-Zähler erhöht nach Bomben-Raketen-Landung: ${this.matchesMade} Matches gemacht`);
         }
         
         // WICHTIG: Zug-Zähler wird bereits in handleRainbowSwap erhöht, nicht hier nochmal!
@@ -5846,7 +5838,7 @@ export default {
         // WICHTIG: Erhöhe den Match-Zähler für Level-Objekte
         if (!this.isInitializingLevel) {
           this.matchesMade += 1;
-          console.log(`🎯 Match-Zähler erhöht nach Raketen-Verbindung: ${this.matchesMade} Matches gemacht`);
+          debugLog(`🎯 Match-Zähler erhöht nach Raketen-Verbindung: ${this.matchesMade} Matches gemacht`);
         }
         
         // WICHTIG: Zug-Zähler wird bereits in handleRainbowSwap erhöht, nicht hier nochmal!
@@ -5913,7 +5905,7 @@ export default {
         // WICHTIG: Erhöhe den Match-Zähler für Level-Objekte
         if (!this.isInitializingLevel) {
           this.matchesMade += 1;
-          console.log(`🎯 Match-Zähler erhöht nach 3-Raketen-Start: ${this.matchesMade} Matches gemacht`);
+          debugLog(`🎯 Match-Zähler erhöht nach 3-Raketen-Start: ${this.matchesMade} Matches gemacht`);
         }
         
         // WICHTIG: Zug-Zähler wird bereits in handleRainbowSwap erhöht, nicht hier nochmal!
@@ -5999,7 +5991,7 @@ export default {
         // WICHTIG: Erhöhe den Match-Zähler für Level-Objekte
         if (!this.isInitializingLevel) {
           this.matchesMade += 1;
-          console.log(`🎯 Match-Zähler erhöht nach Raketen-Start: ${this.matchesMade} Matches gemacht`);
+          debugLog(`🎯 Match-Zähler erhöht nach Raketen-Start: ${this.matchesMade} Matches gemacht`);
         }
         
         // WICHTIG: Zug-Zähler wird bereits in handleRainbowSwap erhöht, nicht hier nochmal!
@@ -6056,7 +6048,7 @@ export default {
         return 'Level wird vorbereitet';
       }
       if (this.nextPendingObjective) {
-        return this.nextPendingObjective.description || 'Aktuelles Ziel abschliessen';
+        return this.nextPendingObjective.description || 'Aktuelles Ziel abschließen';
       }
       return 'Level sauber zu Ende spielen';
     },
@@ -6065,12 +6057,12 @@ export default {
         return 'Setze das Level fort oder starte es kontrolliert neu, ohne den aktuellen Kontext zu verlieren.';
       }
       if (!this.currentLevelData) {
-        return 'Sobald das Level geladen ist, erscheinen hier das naechste Ziel und die passende Hauptaktion.';
+        return 'Sobald das Level geladen ist, erscheinen hier das nächste Ziel und die passende Hauptaktion.';
       }
       if (this.nextPendingObjective) {
         return `Konzentriere dich zuerst auf dieses Ziel. Bereits erledigt: ${this.completedObjectivesCount} von ${this.totalObjectivesCount}.`;
       }
-      return 'Alle sichtbaren Ziele sind erledigt. Jetzt zaehlt nur noch der saubere Abschluss des Levels.';
+      return 'Alle sichtbaren Ziele sind erledigt. Jetzt zählt nur noch der saubere Abschluss des Levels.';
     }
   }
 }
diff --git a/frontend/src/views/minigames/TaxiGame.vue b/frontend/src/views/minigames/TaxiGame.vue
index 47a6998..b98e5b3 100644
--- a/frontend/src/views/minigames/TaxiGame.vue
+++ b/frontend/src/views/minigames/TaxiGame.vue
@@ -1,6 +1,5 @@
 <template>
-  <div class="contenthidden">
-    <div class="contentscroll">
+  <div class="taxi-game-view">
       <!-- Spiel-Titel -->
       <div class="game-title">
         <h1>{{ $t('minigames.taxi.title') }}</h1>
@@ -247,8 +246,6 @@
 
         </div>
       </div>
-    </div>
-    
   </div>
 </template>
 
diff --git a/frontend/src/views/personal/CalendarView.vue b/frontend/src/views/personal/CalendarView.vue
index 0066ca5..a6519a1 100644
--- a/frontend/src/views/personal/CalendarView.vue
+++ b/frontend/src/views/personal/CalendarView.vue
@@ -347,6 +347,7 @@
 
 <script>
 import apiClient from '@/utils/axios.js';
+import { showError } from '@/utils/feedback.js';
 
 export default {
     name: 'CalendarView',
@@ -784,7 +785,7 @@ export default {
                 this.closeEventDialog();
             } catch (error) {
                 console.error('Error saving event:', error);
-                alert(this.$t('personal.calendar.form.saveError') || 'Error saving event');
+                showError(this, this.$t('personal.calendar.form.saveError') || 'Error saving event');
             } finally {
                 this.saving = false;
             }
@@ -803,7 +804,7 @@ export default {
                 this.closeEventDialog();
             } catch (error) {
                 console.error('Error deleting event:', error);
-                alert(this.$t('personal.calendar.form.deleteError') || 'Error deleting event');
+                showError(this, this.$t('personal.calendar.form.deleteError') || 'Error deleting event');
             } finally {
                 this.saving = false;
             }
diff --git a/frontend/src/views/social/FriendsView.vue b/frontend/src/views/social/FriendsView.vue
index 62f26af..8cea4f1 100644
--- a/frontend/src/views/social/FriendsView.vue
+++ b/frontend/src/views/social/FriendsView.vue
@@ -160,13 +160,9 @@ export default {
         },
         setupSocketListener() {
             if (this.socket) {
-                console.log("Setting up friendshipChanged listener");
-                this.socket.on("friendshipChanged", (data) => {
-                    console.log("Friendship changed:", data);
+                this.socket.on("friendshipChanged", () => {
                     this.fetchFriendships();
                 });
-            } else {
-                console.error("Socket not initialized");
             }
         },
     },
diff --git a/frontend/src/views/social/SearchView.vue b/frontend/src/views/social/SearchView.vue
index c900436..974367c 100644
--- a/frontend/src/views/social/SearchView.vue
+++ b/frontend/src/views/social/SearchView.vue
@@ -47,22 +47,20 @@
                 <h3>{{ $t('socialnetwork.usersearch.results_title') }}</h3>
                 <span class="results-count">{{ searchResults.length }} Treffer</span>
             </div>
-            <table>
-                <thead>
-                    <tr>
-                        <th>{{ $t("socialnetwork.usersearch.result.nick") }}</th>
-                        <th>{{ $t("socialnetwork.usersearch.result.gender") }}</th>
-                        <th>{{ $t("socialnetwork.usersearch.result.age") }}</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    <tr v-for="result in searchResults" :key="result.id">
-                        <td><span @click.prevent="openUserProfile(result.id)" :class="'clickable g-' + result.gender">{{ result.username }}</span></td>
-                        <td>{{ result.gender }}</td>
-                        <td>{{ result.age }}</td>
-                    </tr>
-                </tbody>
-            </table>
+            <div class="result-cards">
+                <article v-for="result in searchResults" :key="result.id" class="result-card">
+                    <div class="result-card__main">
+                        <span @click.prevent="openUserProfile(result.id)" :class="'clickable g-' + result.gender">{{ result.username }}</span>
+                        <div class="result-card__meta">
+                            <span>{{ $t("socialnetwork.usersearch.result.gender") }}: {{ result.gender }}</span>
+                            <span>{{ $t("socialnetwork.usersearch.result.age") }}: {{ result.age }}</span>
+                        </div>
+                    </div>
+                    <button type="button" class="button-secondary" @click="openUserProfile(result.id)">
+                        Profil öffnen
+                    </button>
+                </article>
+            </div>
         </section>
         <div v-else class="no-results surface-card">
             {{ $t('socialnetwork.usersearch.no_results') }}
@@ -211,26 +209,34 @@ label {
     font-weight: 700;
 }
 
-table {
-    width: 100%;
-    margin: 0.5em 0;
-    padding: 0;
-    border-collapse: collapse;
-    background: rgba(255, 255, 255, 0.62);
+.result-cards {
+    display: grid;
+    gap: 12px;
+}
+
+.result-card {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 16px;
+    padding: 16px 18px;
+    border: 1px solid var(--color-border);
     border-radius: var(--radius-lg);
-    overflow: hidden;
+    background: rgba(255, 255, 255, 0.66);
 }
 
-thead {
-    color: #42634e;
+.result-card__main {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
 }
 
-th, td {
-    padding: 12px 14px;
-}
-
-tbody tr + tr td {
-    border-top: 1px solid var(--color-border);
+.result-card__meta {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 10px 16px;
+    color: var(--color-text-secondary);
+    font-size: 0.92rem;
 }
 
 .clickable {
@@ -259,5 +265,10 @@ tbody tr + tr td {
     .age-range {
         flex-wrap: wrap;
     }
+
+    .result-card {
+        flex-direction: column;
+        align-items: flex-start;
+    }
 }
 </style>
diff --git a/frontend/src/views/social/VocabCourseListView.vue b/frontend/src/views/social/VocabCourseListView.vue
index 1dbe9ad..3848203 100644
--- a/frontend/src/views/social/VocabCourseListView.vue
+++ b/frontend/src/views/social/VocabCourseListView.vue
@@ -141,6 +141,7 @@
 <script>
 import { mapGetters } from 'vuex';
 import apiClient from '@/utils/axios.js';
+import { showApiError, showError } from '@/utils/feedback.js';
 
 export default {
   name: 'VocabCourseListView',
@@ -273,7 +274,7 @@ export default {
     },
     async findCourseByCode() {
       if (!this.shareCode.trim()) {
-        alert(this.$t('socialnetwork.vocab.courses.invalidCode'));
+        showError(this, this.$t('socialnetwork.vocab.courses.invalidCode'));
         return;
       }
       this.loading = true;
@@ -286,7 +287,7 @@ export default {
         this.openCourse(course.id);
       } catch (e) {
         console.error('Fehler beim Suchen des Kurses:', e);
-        alert(e.response?.data?.error || this.$t('socialnetwork.vocab.courses.courseNotFound'));
+        showApiError(this, e, this.$t('socialnetwork.vocab.courses.courseNotFound'));
       } finally {
         this.loading = false;
       }
@@ -332,7 +333,7 @@ export default {
         await this.loadAllCourses();
       } catch (e) {
         console.error('Fehler beim Erstellen des Kurses:', e);
-        alert(e.response?.data?.error || 'Fehler beim Erstellen des Kurses');
+        showApiError(this, e, 'Fehler beim Erstellen des Kurses');
       }
     },
     async enroll(courseId) {
@@ -342,7 +343,7 @@ export default {
         this.openCourse(courseId);
       } catch (e) {
         console.error('Fehler beim Einschreiben:', e);
-        alert(e.response?.data?.error || 'Fehler beim Einschreiben');
+        showApiError(this, e, 'Fehler beim Einschreiben');
       }
     },
     openCourse(courseId) {
diff --git a/frontend/src/views/social/VocabCourseView.vue b/frontend/src/views/social/VocabCourseView.vue
index eb377a0..d52ed8f 100644
--- a/frontend/src/views/social/VocabCourseView.vue
+++ b/frontend/src/views/social/VocabCourseView.vue
@@ -29,55 +29,44 @@
             {{ $t('socialnetwork.vocab.courses.continueCurrentLesson') }}
           </button>
         </div>
-        <h3>{{ $t('socialnetwork.vocab.courses.lessons') }}</h3>
-        <table class="lessons-table">
-          <thead>
-            <tr>
-              <th class="col-number">#</th>
-              <th class="col-title">{{ $t('socialnetwork.vocab.courses.title') }}</th>
-              <th class="col-status">Status</th>
-              <th class="col-actions">Aktionen</th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr v-for="lesson in course.lessons" :key="lesson.id" class="lesson-row">
-              <td class="lesson-number">{{ lesson.lessonNumber }}</td>
-              <td class="lesson-title">
-                <div class="lesson-title-content">
-                  <span class="title-label">{{ lesson.title }}</span>
-                  <span v-if="lesson.description" class="lesson-description">{{ lesson.description }}</span>
-                </div>
-              </td>
-              <td class="lesson-status">
-                <div class="lesson-status-content">
-                  <span v-if="getLessonProgress(lesson.id)?.completed" class="badge completed">
-                    {{ $t('socialnetwork.vocab.courses.completed') }}
-                  </span>
-                  <span v-else-if="getLessonProgress(lesson.id)?.score" class="score">
-                    {{ $t('socialnetwork.vocab.courses.score') }}: {{ getLessonProgress(lesson.id).score }}%
-                  </span>
-                  <span v-else class="status-new">
-                    {{ $t('socialnetwork.vocab.courses.notStarted') }}
-                  </span>
-                </div>
-              </td>
-              <td class="lesson-actions">
-                <div class="lesson-actions-content">
-                  <button 
-                    @click="openLesson(lesson.id)" 
-                    class="btn-start"
-                    :disabled="!canStartLesson(lesson)"
-                    :title="!canStartLesson(lesson) ? $t('socialnetwork.vocab.courses.previousLessonRequired') : ''"
-                  >
-                    {{ getLessonProgress(lesson.id)?.completed ? $t('socialnetwork.vocab.courses.review') : $t('socialnetwork.vocab.courses.start') }}
-                  </button>
-                  <button v-if="isOwner" @click="editLesson(lesson.id)" class="btn-edit">{{ $t('socialnetwork.vocab.courses.edit') }}</button>
-                  <button v-if="isOwner" @click="deleteLesson(lesson.id)" class="btn-delete">{{ $t('general.delete') }}</button>
-                </div>
-              </td>
-            </tr>
-          </tbody>
-        </table>
+        <div class="lessons-header">
+          <h3>{{ $t('socialnetwork.vocab.courses.lessons') }}</h3>
+          <span class="lessons-count">{{ course.lessons.length }} Lektionen</span>
+        </div>
+        <div class="lesson-cards">
+          <article v-for="lesson in course.lessons" :key="lesson.id" class="lesson-card">
+            <div class="lesson-card__header">
+              <span class="lesson-number">#{{ lesson.lessonNumber }}</span>
+              <div class="lesson-status-content">
+                <span v-if="getLessonProgress(lesson.id)?.completed" class="badge completed">
+                  {{ $t('socialnetwork.vocab.courses.completed') }}
+                </span>
+                <span v-else-if="getLessonProgress(lesson.id)?.score" class="score">
+                  {{ $t('socialnetwork.vocab.courses.score') }}: {{ getLessonProgress(lesson.id).score }}%
+                </span>
+                <span v-else class="status-new">
+                  {{ $t('socialnetwork.vocab.courses.notStarted') }}
+                </span>
+              </div>
+            </div>
+            <div class="lesson-title-content">
+              <span class="title-label">{{ lesson.title }}</span>
+              <span v-if="lesson.description" class="lesson-description">{{ lesson.description }}</span>
+            </div>
+            <div class="lesson-actions-content">
+              <button 
+                @click="openLesson(lesson.id)" 
+                class="btn-start"
+                :disabled="!canStartLesson(lesson)"
+                :title="!canStartLesson(lesson) ? $t('socialnetwork.vocab.courses.previousLessonRequired') : ''"
+              >
+                {{ getLessonProgress(lesson.id)?.completed ? $t('socialnetwork.vocab.courses.review') : $t('socialnetwork.vocab.courses.start') }}
+              </button>
+              <button v-if="isOwner" @click="editLesson(lesson.id)" class="btn-edit">{{ $t('socialnetwork.vocab.courses.edit') }}</button>
+              <button v-if="isOwner" @click="deleteLesson(lesson.id)" class="btn-delete">{{ $t('general.delete') }}</button>
+            </div>
+          </article>
+        </div>
       </div>
       <div v-else>
         <p class="surface-card course-state">{{ $t('socialnetwork.vocab.courses.noLessons') }}</p>
@@ -122,7 +111,7 @@
 <script>
 import { mapGetters } from 'vuex';
 import apiClient from '@/utils/axios.js';
-import { showApiError, showSuccess } from '@/utils/feedback.js';
+import { confirmAction, showApiError, showSuccess } from '@/utils/feedback.js';
 
 export default {
   name: 'VocabCourseView',
@@ -274,7 +263,11 @@ export default {
       }
     },
     async deleteLesson(lessonId) {
-      if (!confirm(this.$t('socialnetwork.vocab.courses.confirmDelete'))) {
+      const confirmed = await confirmAction(this, {
+        title: 'Lektion löschen',
+        message: this.$t('socialnetwork.vocab.courses.confirmDelete')
+      });
+      if (!confirmed) {
         return;
       }
       try {
@@ -370,6 +363,20 @@ export default {
   padding: 20px;
 }
 
+.lessons-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  margin-bottom: 12px;
+}
+
+.lessons-count {
+  color: var(--color-text-muted);
+  font-size: 0.84rem;
+  font-weight: 700;
+}
+
 .course-state {
   padding: 18px;
   text-align: center;
@@ -403,93 +410,40 @@ export default {
   border: 1px solid #5D4037;
 }
 
-.lessons-table {
-  width: 100%;
-  border-collapse: separate;
-  border-spacing: 0;
-  table-layout: fixed;
-}
-
-.lessons-table th,
-.lessons-table td {
-  box-sizing: border-box;
-}
-
-.lessons-table thead {
-  background: #f8f9fa;
-}
-
-.lessons-table th {
-  padding: 12px 15px;
-  text-align: left;
-  font-weight: 600;
-  color: #333;
-  font-size: 0.9em;
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-}
-
-.lessons-table th.col-number,
-.lessons-table td.lesson-number {
-  width: 50px;
-  min-width: 50px;
-  max-width: 50px;
-  overflow: visible;
-  text-align: center;
-}
-
-.lessons-table th.col-number {
-  text-align: center;
-}
-
-.lessons-table th.col-title,
-.lessons-table td.lesson-title {
-  width: auto;
-  min-width: 200px;
-  overflow: visible;
-}
-
-.lessons-table th.col-status,
-.lessons-table td.lesson-status {
-  width: 200px;
-  min-width: 200px;
-  max-width: 200px;
-  overflow: visible;
-  word-wrap: break-word;
-}
-
-.lessons-table th.col-actions,
-.lessons-table td.lesson-actions {
-  width: 250px;
-  min-width: 250px;
-  max-width: 250px;
-  overflow: visible;
-}
-
-.lessons-table tbody tr {
-  transition: background-color 0.2s ease;
-}
-
-.lessons-table tbody tr:hover {
-  background-color: #f8f9fa;
-}
-
-.lessons-table td {
-  padding: 15px;
-  vertical-align: top;
-  display: table-cell;
+.lesson-cards {
+  display: grid;
+  gap: 12px;
 }
 
 .lesson-number {
   font-weight: 600;
   color: #666;
   font-size: 0.95em;
-  text-align: center;
-  display: block;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 48px;
+  padding: 6px 10px;
+  border-radius: 999px;
+  background: rgba(248, 162, 43, 0.12);
 }
 
-.lesson-title {
-  display: block;
+.lesson-card {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+  padding: 16px 18px;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-lg);
+  background: rgba(255, 255, 255, 0.7);
+}
+
+.lesson-card__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  flex-wrap: wrap;
 }
 
 .lesson-title-content {
@@ -510,10 +464,6 @@ export default {
   line-height: 1.4;
 }
 
-.lesson-status {
-  display: block;
-}
-
 .lesson-status-content {
   display: flex;
   flex-direction: column;
diff --git a/frontend/src/views/social/VocabLessonView.vue b/frontend/src/views/social/VocabLessonView.vue
index fc9d878..d724ecd 100644
--- a/frontend/src/views/social/VocabLessonView.vue
+++ b/frontend/src/views/social/VocabLessonView.vue
@@ -352,8 +352,8 @@
 
           <!-- Fallback für unbekannte Typen -->
           <div v-else class="unknown-exercise">
-            <p>Übungstyp: {{ getExerciseType(exercise) }}</p>
-            <pre>{{ JSON.stringify(exercise, null, 2) }}</pre>
+            <p>Dieser Übungstyp wird in der aktuellen Ansicht noch nicht interaktiv dargestellt.</p>
+            <p class="unknown-exercise__type">Typ: {{ getExerciseType(exercise) }}</p>
           </div>
           </div>
         </div>
@@ -418,6 +418,8 @@
 import { mapGetters } from 'vuex';
 import apiClient from '@/utils/axios.js';
 
+const debugLog = () => {};
+
 export default {
   name: 'VocabLessonView',
   props: {
@@ -533,7 +535,7 @@ export default {
         // Normale Lektion: Verwende effectiveExercises (grammarExercises)
         const exercises = this.effectiveExercises;
         if (!exercises || !Array.isArray(exercises) || exercises.length === 0) {
-          console.log('[importantVocab] Keine Übungen vorhanden');
+          debugLog('[importantVocab] Keine Übungen vorhanden');
           return [];
         }
         return this._extractVocabFromExercises(exercises);
@@ -576,7 +578,7 @@ export default {
       const isArrayLike = exercises.length !== undefined && typeof exercises.length === 'number';
       
       if (!Array.isArray(exercises) && isArrayLike) {
-        console.log('[_extractVocabFromExercises] exercises ist kein Array, aber array-like, konvertiere...');
+        debugLog('[_extractVocabFromExercises] exercises ist kein Array, aber array-like, konvertiere...');
         // Versuche Array.from (funktioniert mit iterierbaren Objekten und Array-like Objekten)
         try {
           exercisesArray = Array.from(exercises);
@@ -601,13 +603,13 @@ export default {
       
       exercisesArray.forEach((exercise, idx) => {
           try {
-            console.log(`[importantVocab] Verarbeite Übung ${idx + 1}:`, exercise.title);
+            debugLog(`[importantVocab] Verarbeite Übung ${idx + 1}:`, exercise.title);
             // Extrahiere aus questionData
             const qData = this.getQuestionData(exercise);
             const aData = this.getAnswerData(exercise);
             
-            console.log(`[importantVocab] qData:`, qData);
-            console.log(`[importantVocab] aData:`, aData);
+            debugLog(`[importantVocab] qData:`, qData);
+            debugLog(`[importantVocab] aData:`, aData);
             
             if (qData && aData) {
               // Für Multiple Choice: Extrahiere Optionen und richtige Antwort
@@ -616,12 +618,12 @@ export default {
                 const correctIndex = aData.correctAnswer !== undefined ? aData.correctAnswer : (aData.correct || 0);
                 const correctAnswer = options[correctIndex] || '';
                 
-                console.log(`[importantVocab] Multiple Choice - options:`, options, `correctIndex:`, correctIndex, `correctAnswer:`, correctAnswer);
+                debugLog(`[importantVocab] Multiple Choice - options:`, options, `correctIndex:`, correctIndex, `correctAnswer:`, correctAnswer);
                 
                 if (correctAnswer) {
                   // Versuche die Frage zu analysieren (z.B. "Wie sagt man 'X' auf Bisaya?" oder "Was bedeutet 'X'?")
                   const question = qData.question || qData.text || '';
-                  console.log(`[importantVocab] Frage:`, question);
+                  debugLog(`[importantVocab] Frage:`, question);
                   
                   // Pattern 1: "Wie sagt man 'X' auf Bisaya?" -> X ist Muttersprache (z.B. "Großmutter"), correctAnswer ist Bisaya (z.B. "Lola")
                   let match = question.match(/Wie sagt man ['"]([^'"]+)['"]/i);
@@ -629,11 +631,11 @@ export default {
                     const nativeWord = match[1]; // Das Wort in der Muttersprache
                     // Nur hinzufügen, wenn Muttersprache und Bisaya unterschiedlich sind (verhindert "ko" -> "ko")
                     if (nativeWord && correctAnswer && nativeWord.trim() !== correctAnswer.trim()) {
-                      console.log(`[importantVocab] Pattern 1 gefunden - Muttersprache:`, nativeWord, `Bisaya:`, correctAnswer);
+                      debugLog(`[importantVocab] Pattern 1 gefunden - Muttersprache:`, nativeWord, `Bisaya:`, correctAnswer);
                       // learning = Muttersprache (was man lernt), reference = Bisaya (Zielsprache)
                       vocabMap.set(`${nativeWord}-${correctAnswer}`, { learning: nativeWord, reference: correctAnswer });
                     } else {
-                      console.log(`[importantVocab] Pattern 1 übersprungen - Muttersprache und Bisaya sind gleich:`, nativeWord, correctAnswer);
+                      debugLog(`[importantVocab] Pattern 1 übersprungen - Muttersprache und Bisaya sind gleich:`, nativeWord, correctAnswer);
                     }
                   } else {
                     // Pattern 2: "Was bedeutet 'X'?" -> X ist Bisaya, correctAnswer ist Muttersprache
@@ -642,14 +644,14 @@ export default {
                       const bisayaWord = match[1];
                       // Nur hinzufügen, wenn Bisaya und Muttersprache unterschiedlich sind (verhindert "ko" -> "ko")
                       if (bisayaWord && correctAnswer && bisayaWord.trim() !== correctAnswer.trim()) {
-                        console.log(`[importantVocab] Pattern 2 gefunden - Bisaya:`, bisayaWord, `Muttersprache:`, correctAnswer);
+                        debugLog(`[importantVocab] Pattern 2 gefunden - Bisaya:`, bisayaWord, `Muttersprache:`, correctAnswer);
                         // learning = Muttersprache (was man lernt), reference = Bisaya (Zielsprache)
                         vocabMap.set(`${correctAnswer}-${bisayaWord}`, { learning: correctAnswer, reference: bisayaWord });
                       } else {
-                        console.log(`[importantVocab] Pattern 2 übersprungen - Bisaya und Muttersprache sind gleich:`, bisayaWord, correctAnswer);
+                        debugLog(`[importantVocab] Pattern 2 übersprungen - Bisaya und Muttersprache sind gleich:`, bisayaWord, correctAnswer);
                       }
                     } else {
-                      console.log(`[importantVocab] Kein Pattern gefunden, Überspringe diese Übung`);
+                      debugLog(`[importantVocab] Kein Pattern gefunden, Überspringe diese Übung`);
                       // Überspringe, wenn wir die Richtung nicht erkennen können
                     }
                   }
@@ -659,7 +661,7 @@ export default {
               // Für Gap Fill: Extrahiere richtige Antworten
               if (this.getExerciseType(exercise) === 'gap_fill') {
                 const answers = aData.answers || (aData.correct ? (Array.isArray(aData.correct) ? aData.correct : [aData.correct]) : []);
-                console.log(`[importantVocab] Gap Fill - answers:`, answers);
+                debugLog(`[importantVocab] Gap Fill - answers:`, answers);
                 if (answers.length > 0) {
                   // Versuche aus dem Text Kontext zu extrahieren
                   // Gap Fill hat normalerweise Format: "{gap} (Muttersprache) | {gap} (Muttersprache) | ..."
@@ -668,7 +670,7 @@ export default {
                   const matches = text.matchAll(/\(([^)]+)\)/g);
                   const nativeWords = Array.from(matches, m => m[1]);
                   
-                  console.log(`[importantVocab] Gap Fill - text:`, text, `nativeWords:`, nativeWords);
+                  debugLog(`[importantVocab] Gap Fill - text:`, text, `nativeWords:`, nativeWords);
                   
                   // Nur extrahieren, wenn Muttersprache-Hinweise (Klammern) vorhanden sind
                   if (nativeWords.length > 0) {
@@ -679,14 +681,14 @@ export default {
                           // Die answer ist normalerweise Bisaya, nativeWord ist Muttersprache
                           // Nur hinzufügen, wenn sie unterschiedlich sind (verhindert "ko" -> "ko")
                           vocabMap.set(`${nativeWord}-${answer}`, { learning: nativeWord, reference: answer });
-                          console.log(`[importantVocab] Gap Fill extrahiert - Muttersprache:`, nativeWord, `Bisaya:`, answer);
+                          debugLog(`[importantVocab] Gap Fill extrahiert - Muttersprache:`, nativeWord, `Bisaya:`, answer);
                         } else {
-                          console.log(`[importantVocab] Gap Fill übersprungen - keine Muttersprache oder gleich:`, nativeWord, answer);
+                          debugLog(`[importantVocab] Gap Fill übersprungen - keine Muttersprache oder gleich:`, nativeWord, answer);
                         }
                       }
                     });
                   } else {
-                    console.log(`[importantVocab] Gap Fill übersprungen - keine Muttersprache-Hinweise (Klammern) gefunden`);
+                    debugLog(`[importantVocab] Gap Fill übersprungen - keine Muttersprache-Hinweise (Klammern) gefunden`);
                   }
                 }
               }
@@ -697,17 +699,17 @@ export default {
         });
       
       const result = Array.from(vocabMap.values());
-      console.log(`[_extractVocabFromExercises] Ergebnis:`, result.length, 'Vokabeln');
+      debugLog(`[_extractVocabFromExercises] Ergebnis:`, result.length, 'Vokabeln');
       return result;
     },
     async loadLesson() {
       // Verhindere mehrfaches Laden
       if (this.loading) {
-        console.log('[VocabLessonView] loadLesson übersprungen - bereits am Laden');
+        debugLog('[VocabLessonView] loadLesson übersprungen - bereits am Laden');
         return;
       }
       
-      console.log('[VocabLessonView] loadLesson gestartet für lessonId:', this.lessonId);
+      debugLog('[VocabLessonView] loadLesson gestartet für lessonId:', this.lessonId);
       this.loading = true;
       // Setze Antworten und Ergebnisse zurück
       this.exerciseAnswers = {};
@@ -725,19 +727,19 @@ export default {
       try {
         const res = await apiClient.get(`/api/vocab/lessons/${this.lessonId}`);
         this.lesson = res.data;
-        console.log('[VocabLessonView] Geladene Lektion:', this.lesson?.id, this.lesson?.title);
+        debugLog('[VocabLessonView] Geladene Lektion:', this.lesson?.id, this.lesson?.title);
         // Initialisiere mit effectiveExercises (für Review: reviewVocabExercises, sonst: grammarExercises)
         this.$nextTick(async () => {
           const exercises = this.effectiveExercises;
           if (exercises && exercises.length > 0) {
-            console.log('[VocabLessonView] Übungen für Kapitel-Prüfung:', exercises.length);
+            debugLog('[VocabLessonView] Übungen für Kapitel-Prüfung:', exercises.length);
             this.initializeExercises(exercises);
           } else {
-            console.log('[VocabLessonView] Lade Übungen separat...');
+            debugLog('[VocabLessonView] Lade Übungen separat...');
             await this.loadGrammarExercises();
           }
         });
-        console.log('[VocabLessonView] loadLesson abgeschlossen');
+        debugLog('[VocabLessonView] loadLesson abgeschlossen');
       } catch (e) {
         console.error('[VocabLessonView] Fehler beim Laden der Lektion:', e);
       } finally {
@@ -883,18 +885,18 @@ export default {
     async checkLessonCompletion() {
       // Verhindere mehrfache Ausführung
       if (this.isCheckingLessonCompletion || this.isNavigatingToNext) {
-        console.log('[VocabLessonView] checkLessonCompletion übersprungen - bereits in Ausführung');
+        debugLog('[VocabLessonView] checkLessonCompletion übersprungen - bereits in Ausführung');
         return;
       }
       
       // Prüfe ob alle Übungen korrekt beantwortet wurden (effectiveExercises = Kapitel-Prüfung)
       const allExercises = this.effectiveExercises;
       if (!this.lesson || !allExercises || allExercises.length === 0) {
-        console.log('[VocabLessonView] checkLessonCompletion übersprungen - keine Lektion/Übungen');
+        debugLog('[VocabLessonView] checkLessonCompletion übersprungen - keine Lektion/Übungen');
         return;
       }
       if (allExercises.length === 0) {
-        console.log('[VocabLessonView] checkLessonCompletion übersprungen - keine Übungen');
+        debugLog('[VocabLessonView] checkLessonCompletion übersprungen - keine Übungen');
         return;
       }
       
@@ -904,11 +906,11 @@ export default {
         return result && result.correct;
       });
       
-      console.log('[VocabLessonView] checkLessonCompletion - allCompleted:', allCompleted, 'Übungen:', allExercises.length, 'Korrekt:', allExercises.filter(ex => this.exerciseResults[ex.id]?.correct).length);
+      debugLog('[VocabLessonView] checkLessonCompletion - allCompleted:', allCompleted, 'Übungen:', allExercises.length, 'Korrekt:', allExercises.filter(ex => this.exerciseResults[ex.id]?.correct).length);
       
       if (allCompleted && !this.isCheckingLessonCompletion) {
         this.isCheckingLessonCompletion = true;
-        console.log('[VocabLessonView] Alle Übungen abgeschlossen - starte Fortschritts-Update');
+        debugLog('[VocabLessonView] Alle Übungen abgeschlossen - starte Fortschritts-Update');
         
         try {
           // Berechne Gesamt-Score
@@ -916,7 +918,7 @@ export default {
           const correctExercises = allExercises.filter(ex => this.exerciseResults[ex.id]?.correct).length;
           const score = Math.round((correctExercises / totalExercises) * 100);
           
-          console.log('[VocabLessonView] Score berechnet:', score, '%');
+          debugLog('[VocabLessonView] Score berechnet:', score, '%');
           
           // Aktualisiere Fortschritt
           await apiClient.put(`/api/vocab/lessons/${this.lessonId}/progress`, {
@@ -925,7 +927,7 @@ export default {
             timeSpentMinutes: 0 // TODO: Zeit tracken
           });
           
-          console.log('[VocabLessonView] Fortschritt aktualisiert - starte Navigation');
+          debugLog('[VocabLessonView] Fortschritt aktualisiert - starte Navigation');
           
           // Weiterleitung zur nächsten Lektion
           await this.navigateToNextLesson();
@@ -938,7 +940,7 @@ export default {
     async navigateToNextLesson() {
       // Verhindere mehrfache Navigation
       if (this.isNavigatingToNext) {
-        console.log('[VocabLessonView] Navigation bereits in Gang, überspringe...');
+        debugLog('[VocabLessonView] Navigation bereits in Gang, überspringe...');
         return;
       }
       this.isNavigatingToNext = true;
@@ -949,7 +951,7 @@ export default {
         const course = courseRes.data;
         
         if (!course.lessons || course.lessons.length === 0) {
-          console.log('[VocabLessonView] Keine Lektionen gefunden');
+          debugLog('[VocabLessonView] Keine Lektionen gefunden');
           this.isNavigatingToNext = false;
           this.isCheckingLessonCompletion = false;
           return;
@@ -961,7 +963,7 @@ export default {
         if (currentLessonIndex >= 0 && currentLessonIndex < course.lessons.length - 1) {
           // Nächste Lektion gefunden
           const nextLesson = course.lessons[currentLessonIndex + 1];
-          console.log('[VocabLessonView] Nächste Lektion gefunden:', nextLesson.id);
+          debugLog('[VocabLessonView] Nächste Lektion gefunden:', nextLesson.id);
           
           // Zeige Erfolgs-Meldung und leite weiter
           // Verwende Dialog statt confirm
@@ -969,7 +971,7 @@ export default {
           this.nextLessonId = nextLesson.id;
         } else {
           // Letzte Lektion - zeige Abschluss-Meldung
-          console.log('[VocabLessonView] Letzte Lektion erreicht');
+          debugLog('[VocabLessonView] Letzte Lektion erreicht');
           this.showCompletionDialog = true;
           this.isNavigatingToNext = false;
           this.isCheckingLessonCompletion = false;
@@ -985,7 +987,7 @@ export default {
     },
     confirmNavigateToNextLesson() {
       if (this.nextLessonId) {
-        console.log('[VocabLessonView] Navigiere zur nächsten Lektion:', this.nextLessonId);
+        debugLog('[VocabLessonView] Navigiere zur nächsten Lektion:', this.nextLessonId);
         // Setze Flags zurück BEVOR die Navigation stattfindet
         this.isNavigatingToNext = false;
         this.isCheckingLessonCompletion = false;
@@ -996,7 +998,7 @@ export default {
       }
     },
     cancelNavigateToNextLesson() {
-      console.log('[VocabLessonView] Navigation abgebrochen');
+      debugLog('[VocabLessonView] Navigation abgebrochen');
       this.isNavigatingToNext = false;
       this.isCheckingLessonCompletion = false;
       this.showNextLessonDialog = false;
@@ -1011,13 +1013,13 @@ export default {
     },
     // Vokabeltrainer-Methoden
     startVocabTrainer() {
-      console.log('[VocabLessonView] startVocabTrainer aufgerufen');
+      debugLog('[VocabLessonView] startVocabTrainer aufgerufen');
       if (!this.importantVocab || this.importantVocab.length === 0) {
-        console.log('[VocabLessonView] Keine Vokabeln vorhanden');
+        debugLog('[VocabLessonView] Keine Vokabeln vorhanden');
         return;
       }
-      console.log('[VocabLessonView] Vokabeln gefunden:', this.importantVocab.length);
-      console.log('[VocabLessonView] Alte Vokabeln:', this.previousVocab?.length || 0);
+      debugLog('[VocabLessonView] Vokabeln gefunden:', this.importantVocab.length);
+      debugLog('[VocabLessonView] Alte Vokabeln:', this.previousVocab?.length || 0);
       this.vocabTrainerActive = true;
       this.vocabTrainerPool = [...this.importantVocab];
       this.vocabTrainerMode = 'multiple_choice';
@@ -1030,8 +1032,8 @@ export default {
       this.vocabTrainerMixedAttempts = 0;
       // Bereite Mixed-Pool aus alten Vokabeln vor (ohne Duplikate aus aktueller Lektion)
       this.vocabTrainerMixedPool = this._buildMixedPool();
-      console.log('[VocabLessonView] Mixed-Pool:', this.vocabTrainerMixedPool.length, 'Vokabeln');
-      console.log('[VocabLessonView] Rufe nextVocabQuestion auf');
+      debugLog('[VocabLessonView] Mixed-Pool:', this.vocabTrainerMixedPool.length, 'Vokabeln');
+      debugLog('[VocabLessonView] Rufe nextVocabQuestion auf');
       this.$nextTick(() => {
         this.nextVocabQuestion();
       });
@@ -1078,7 +1080,7 @@ export default {
           if (successRate >= 80) {
             // Wechsel zur Mixed-Phase (falls alte Vokabeln vorhanden)
             if (this.vocabTrainerMixedPool.length > 0) {
-              console.log('[VocabLessonView] Wechsel zu Mixed-Phase mit', this.vocabTrainerMixedPool.length, 'alten Vokabeln');
+              debugLog('[VocabLessonView] Wechsel zu Mixed-Phase mit', this.vocabTrainerMixedPool.length, 'alten Vokabeln');
               this.vocabTrainerPhase = 'mixed';
               this.vocabTrainerPool = [...this.vocabTrainerMixedPool];
               this.vocabTrainerMixedAttempts = 0;
@@ -1100,7 +1102,7 @@ export default {
       } else if (this.vocabTrainerPhase === 'mixed') {
         // Phase 2: Gemischte Wiederholung - nach MIXED_LIMIT Versuchen → Wechsel zu Typing mit allen Vokabeln
         if (this.vocabTrainerMode === 'multiple_choice' && this.vocabTrainerTotalAttempts >= MIXED_LIMIT) {
-          console.log('[VocabLessonView] Mixed-Phase abgeschlossen, wechsle zu Typing');
+          debugLog('[VocabLessonView] Mixed-Phase abgeschlossen, wechsle zu Typing');
           this.vocabTrainerMode = 'typing';
           this.vocabTrainerAutoSwitchedToTyping = true;
           // Im Typing: Pool aus aktuellen + alten Vokabeln kombinieren
@@ -1206,9 +1208,9 @@ export default {
       return arr;
     },
     nextVocabQuestion() {
-      console.log('[VocabLessonView] nextVocabQuestion aufgerufen');
+      debugLog('[VocabLessonView] nextVocabQuestion aufgerufen');
       if (!this.vocabTrainerPool || this.vocabTrainerPool.length === 0) {
-        console.log('[VocabLessonView] Keine Vokabeln im Pool');
+        debugLog('[VocabLessonView] Keine Vokabeln im Pool');
         this.currentVocabQuestion = null;
         return;
       }
@@ -1227,7 +1229,7 @@ export default {
         key: this.getVocabKey(vocab)
       };
       
-      console.log('[VocabLessonView] Neue Frage erstellt:', this.currentVocabQuestion.prompt);
+      debugLog('[VocabLessonView] Neue Frage erstellt:', this.currentVocabQuestion.prompt);
       
       // Reset UI
       this.vocabTrainerAnswer = '';
@@ -1236,16 +1238,16 @@ export default {
       
       // Erstelle Choice-Optionen für Multiple Choice
       if (this.vocabTrainerMode === 'multiple_choice') {
-        console.log('[VocabLessonView] Erstelle Choice-Optionen...');
-        console.log('[VocabLessonView] Prompt:', this.currentVocabQuestion.prompt);
-        console.log('[VocabLessonView] Answer:', this.currentVocabQuestion.answer);
+        debugLog('[VocabLessonView] Erstelle Choice-Optionen...');
+        debugLog('[VocabLessonView] Prompt:', this.currentVocabQuestion.prompt);
+        debugLog('[VocabLessonView] Answer:', this.currentVocabQuestion.answer);
         // Wichtig: Der Prompt (die Frage) darf nicht in den Optionen erscheinen
         this.vocabTrainerChoiceOptions = this.buildChoiceOptions(
           this.currentVocabQuestion.answer, 
           this.vocabTrainerPool,
           this.currentVocabQuestion.prompt // Exkludiere den Prompt
         );
-        console.log('[VocabLessonView] Choice-Optionen erstellt:', this.vocabTrainerChoiceOptions);
+        debugLog('[VocabLessonView] Choice-Optionen erstellt:', this.vocabTrainerChoiceOptions);
       }
       
       // Fokussiere Eingabefeld im Typing-Modus
@@ -1597,10 +1599,10 @@ export default {
   margin-top: 10px;
 }
 
-.unknown-exercise pre {
-  margin-top: 10px;
-  font-size: 0.85em;
-  overflow-x: auto;
+.unknown-exercise__type {
+  margin-top: 8px;
+  font-size: 0.9em;
+  color: var(--color-text-secondary);
 }
 
 /* Tabs */
diff --git a/frontend/src/views/social/VocabTrainerView.vue b/frontend/src/views/social/VocabTrainerView.vue
index 83ebc8d..3e5a528 100644
--- a/frontend/src/views/social/VocabTrainerView.vue
+++ b/frontend/src/views/social/VocabTrainerView.vue
@@ -26,7 +26,7 @@
       <article class="summary-card surface-card">
         <span class="summary-card__label">Abonniert</span>
         <strong>{{ subscribedLanguages.length }}</strong>
-        <p>Diese Bereiche sind eher fuer Lernen und Fortschritt statt Verwaltung gedacht.</p>
+        <p>Diese Bereiche sind eher für Lernen und Fortschritt statt Verwaltung gedacht.</p>
       </article>
     </section>
 
@@ -39,7 +39,7 @@
       </article>
       <article class="task-card surface-card">
         <span class="task-card__eyebrow">Weiterlernen</span>
-        <h3>Kurse und Kapitel oeffnen</h3>
+        <h3>Kurse und Kapitel öffnen</h3>
         <p>Springe direkt in bestehende Lernpfade und arbeite mit vorhandenen Kursen weiter.</p>
         <button type="button" class="button-secondary" @click="goCourses">{{ $t('socialnetwork.vocab.courses.title') }}</button>
       </article>
@@ -77,7 +77,7 @@
           <div class="language-section__header">
             <div>
               <h3>Abonnierte Sprachen</h3>
-              <p>Gut fuer schnellen Wiedereinstieg ins Lernen ohne Verwaltungsaufwand.</p>
+              <p>Gut für schnellen Wiedereinstieg ins Lernen ohne Verwaltungsaufwand.</p>
             </div>
             <span class="language-section__count">{{ subscribedLanguages.length }}</span>
           </div>
@@ -86,7 +86,7 @@
               <button type="button" class="language-card__main" @click="openLanguage(l.id)">
                 <div class="language-card__info">
                   <span class="langname">{{ l.name }}</span>
-                  <span class="language-card__hint">Lernen, ueben und Fortschritt ansehen</span>
+                  <span class="language-card__hint">Lernen, üben und Fortschritt ansehen</span>
                 </div>
                 <span class="role">{{ $t('socialnetwork.vocab.subscribed') }}</span>
               </button>