Enhance UI and functionality across multiple components

- Updated styles in style.css to improve overall design consistency and introduced CSS variables for better theming.
- Refined ChatWindow.vue with improved no-conversation styling and adjusted image borders for a cleaner look.
- Enhanced HistoryView.vue and InboxView.vue with new panel styles for better user experience and readability.
- Revamped LoginForm.vue to provide a more engaging user interface with a landing page layout and cookie-based profile persistence.
- Improved MenuBar.vue and SearchView.vue with active state indicators and refined item displays for better navigation.
- Added logout functionality in chat store and server routes to manage user sessions effectively.
- Introduced a new mockup view route for design previews.

These changes collectively enhance the user experience and visual appeal of the application.

DESIGN-KONZEPT.md

@@ -0,0 +1,353 @@
+e# Design-Konzept: Modernisierung SingleChat
+
+## Zielbild
+
+SingleChat soll moderner, ruhiger und effizienter wirken, ohne seinen funktionalen Charakter zu verlieren. Die Oberfläche bleibt kompakt und schnell erfassbar, bekommt aber:
+
+- eine konsistentere Farbwelt
+- dezentere Rundungen
+- klarere Hierarchien
+- bessere mobile Nutzbarkeit
+- mehr optische Ruhe bei gleicher Informationsdichte
+
+Das Ziel ist keine komplette Neugestaltung, sondern ein kontrolliertes Redesign mit klarer Wiedererkennbarkeit.
+
+## Beobachtungen im aktuellen UI
+
+- Das Hauptgrün ist sehr dominant und wird auf vielen Flächen vollflächig eingesetzt.
+- Navigation, Userliste und Chat konkurrieren visuell stark miteinander.
+- Abstände und Höhen sind teilweise grob, dadurch wirkt die Oberfläche weniger präzise und nicht platzsparend.
+- Farben codieren Geschlechter stark, aber ohne neutrales Basissystem um diese Akzentfarben herum.
+- Mobile Nutzung ist nur eingeschränkt vorbereitet, weil die Desktop-Struktur sehr starr ist.
+
+## Design-Prinzipien
+
+- Kompakt vor luftig: wenig vertikale Höhe verschwenden.
+- Neutraler Grundaufbau, Akzentfarbe nur gezielt einsetzen.
+- Rundungen ja, aber klein bis mittel: modern, nicht verspielt.
+- Hohe Kontraste für Lesbarkeit, aber weichere Flächenkontraste.
+- Eine saubere visuelle Hierarchie: App-Rahmen, Navigation, Liste, Chat, Eingabe.
+- Responsive first ab Tablet abwärts, ohne Desktop-Stärke zu verlieren.
+
+## Visuelle Richtung
+
+### Grundcharakter
+
+Die App soll wie ein modernes, nüchternes Messaging-Tool wirken:
+
+- heller, neutraler Grundton
+- gedämpftes Grün als Markenfarbe
+- weiche Grauabstufungen für Flächen und Grenzen
+- gezielte Statusfarben statt bunter Dauerflächen
+
+### Farbstrategie
+
+Die bisherige grüne Identität bleibt erhalten, wird aber deutlich verfeinert.
+
+#### Primärpalette
+
+- `Primary 700`: `#245c3a`
+- `Primary 600`: `#2f6f46`
+- `Primary 500`: `#3d8654`
+- `Primary 100`: `#e7f1ea`
+
+#### Neutrale Flächen
+
+- `Bg App`: `#f4f6f5`
+- `Bg Panel`: `#ffffff`
+- `Bg Subtle`: `#eef2ef`
+- `Border`: `#d7dfd9`
+- `Text Strong`: `#18201b`
+- `Text Muted`: `#5f6b63`
+
+#### Status-/Akzentfarben
+
+Diese Farben nur als Marker, Badge oder kleine Flächen einsetzen, nicht mehr als große Vollflächen:
+
+- Info/aktiv: `#3f7cac`
+- Erfolg: `#3d8654`
+- Warnung: `#c78a2c`
+- Fehler: `#c55252`
+
+#### Geschlechterkennzeichnung
+
+Die Geschlechterfarben sollten erhalten bleiben, aber stark abgeschwächt werden:
+
+- nicht als Vollton-Hintergrund der kompletten User-Zeile
+- stattdessen als linke Farbleiste, Punktindikator oder Badge
+- Text bleibt auf neutralem Hintergrund
+
+Dadurch bleibt die Kodierung sichtbar, ohne die Lesbarkeit und Ruhe zu stören.
+
+## Formensprache
+
+### Rundungen
+
+- Panels: `10px`
+- Inputs/Buttons: `8px`
+- Kleine Tags/Badges: `999px`
+- Message-Bubbles: `10px`
+
+Damit wirkt die App zeitgemäß, bleibt aber sachlich.
+
+### Schatten und Linien
+
+- Statt starker Schatten: feine Konturen
+- Schatten nur für Layer-Wechsel, z. B. mobiles Panel oder Bild-Modal
+- Standardgrenze: `1px solid #d7dfd9`
+
+## Typografie
+
+Die vorhandene `Noto Sans`-Basis ist sinnvoll, vor allem wegen der Sprachabdeckung. Sie sollte beibehalten werden.
+
+Empfohlene Hierarchie:
+
+- App-Titel: `20px / 600`
+- Bereichstitel: `16px / 600`
+- Standardtext: `14px / 400`
+- Meta-Text: `12px / 500`
+- Buttons/Navigation: `13px / 600`
+
+Wichtig:
+
+- geringere Zeilenhöhen in Steuerbereichen
+- mehr Gewichtsunterschied statt mehr Schriftgröße
+
+## Layout-Konzept
+
+### Desktop
+
+Empfohlene Struktur:
+
+- obere App-Bar mit Branding und Status
+- darunter kompakte Aktionsleiste
+- links Userliste
+- rechts Hauptbereich mit Chat/Header/Input
+
+#### Größen
+
+- Header: `48px`
+- Aktionsleiste: `40px`
+- Userliste: `260px` Standardbreite
+- Chat-Header: `52px`
+- Eingabebereich: `56px` bis `64px`
+
+Die vertikale Verdichtung ist wichtig, damit mehr Chat-Inhalt sichtbar bleibt.
+
+### Tablet
+
+- Userliste auf `220px` reduzieren
+- Menüeinträge enger setzen
+- Meta-Informationen im Chat-Header stärker verdichten
+
+### Mobile
+
+Die App sollte auf kleineren Breiten nicht dreispaltig bleiben.
+
+Stattdessen:
+
+- Userliste als einblendbares Off-Canvas-Panel
+- Hauptnavigation horizontal scrollbar oder als Icon/Text-Leiste
+- Chatbereich füllt die Breite vollständig
+- Chat-Header mit Nutzername in einer Zeile, Meta in zweiter kleiner Zeile
+- Eingabebereich sticky am unteren Rand
+
+## Komponenten-Konzept
+
+### 1. Header
+
+Aktuell sehr schlicht. Neu:
+
+- weißes oder leicht getöntes Panel
+- kleineres, präziseres Branding
+- optional rechts Session-/Statusinformationen
+- klare Unterkante mit feiner Border statt harter Farbfläche
+
+### 2. Menüleiste
+
+Ziel:
+
+- weniger laut
+- kompakter
+- besser scannbar
+
+Empfehlung:
+
+- Buttons als sekundäre Tabs oder Segment-Buttons
+- aktiver Punkt über Hintergrundtönung statt kräftiger Vollfarbe
+- Ungelesen-Zähler als Badge
+- Timeout und aktiver Chat als Meta-Info statt als dominante Blöcke
+
+### 3. Userliste
+
+Ziel:
+
+- dichter, moderner, besser filterbar wirkend
+
+Empfehlung:
+
+- Zeilenhöhe ca. `36px` bis `40px`
+- Flagge kleiner und sauber ausgerichtet
+- Username links, Alter/Geschlecht als Meta rechts oder in zweiter reduzierter Textspur
+- Geschlecht über Badge/Farbmarker statt komplette Hintergrundfarbe
+- Hover nur leicht getönt
+- aktive Auswahl klar, aber nicht grell
+
+### 4. Chat-Header
+
+Aktuell stark farbig nach Geschlecht. Neu:
+
+- neutraler Header mit kleinem Farbakzent
+- Name prominent, Meta-Infos sekundär
+- optional Statuspunkt oder Marker links
+
+Beispiel:
+
+- linke 4px-Akzentleiste nach Geschlecht
+- weißer Hintergrund
+- Name dunkel
+- Alter/Land in `Text Muted`
+
+### 5. Nachrichtenbereich
+
+Ziel:
+
+- besser lesbare Nachrichten
+- klarere Trennung zwischen eigener und fremder Nachricht
+- trotzdem kompakt
+
+Empfehlung:
+
+- Nachrichten als Bubble mit leichter Tönung
+- eigene Nachrichten leicht grünlich-neutral
+- fremde Nachrichten weiß
+- Username klein, aber klar erkennbar
+- Timestamp nur per Hover oder sehr subtil
+- weniger Rahmen, mehr Fläche und Abstandssystem
+
+### 6. Eingabebereich
+
+Ziel:
+
+- platzsparend
+- mobil belastbar
+- moderne Interaktion
+
+Empfehlung:
+
+- Eingabefeld als primäre Fläche
+- Senden-Button kompakt
+- Smiley/Bild als Icon-Buttons mit identischer Größe
+- obere Border statt massiver grauer Box
+- Smiley-Leiste als kleines Popover statt großer Block
+
+### 7. Login-Bereich
+
+Ziel:
+
+- freundlicher erster Eindruck
+- kompakteres Formular
+
+Empfehlung:
+
+- Formular in Card-Layout
+- zweispaltig auf breiteren Screens, einspaltig mobil
+- Labels kleiner, Felder konsistent hoch
+- Willkommenstext visuell vom Formular getrennt
+
+### 8. Tabellen und Systemmeldungen
+
+Empfehlung:
+
+- Systemmeldungen mit getönter Fläche und weicher Border
+- Befehlstabellen mit sticky Header beibehalten
+- Tabellen kompakter paddings, aber bessere Zeilentrennung
+
+## Spacing-System
+
+Ein festes Raster reduziert visuelle Unruhe.
+
+Empfehlung:
+
+- `4px`
+- `8px`
+- `12px`
+- `16px`
+- `24px`
+
+Regel:
+
+- Innenabstände in Controls meist `8px` oder `12px`
+- Bereichsabstände meist `12px` oder `16px`
+- keine beliebigen Einzelwerte mehr
+
+## Responsive-Regeln
+
+### Breakpoints
+
+- `>= 1200px`: voller Desktop
+- `< 1200px`: kompakter Desktop/Tablet
+- `< 900px`: Userliste schmaler, Navigation enger
+- `< 720px`: Userliste als Overlay/Drawer
+- `< 560px`: Aktionsleiste stark verdichten, nur wichtigste Texte sichtbar
+
+### Mobile Prioritäten
+
+- aktive Konversation hat Vorrang vor Nebenspalten
+- Bedienelemente müssen einhändig erreichbar bleiben
+- keine horizontalen Layoutbrüche
+- Chatinput immer sichtbar
+
+## Interaktionsdetails
+
+- Hover-Effekte sehr leicht halten
+- Fokus-Zustände klar sichtbar, farblich aus Primärpalette
+- Animationen kurz und funktional, z. B. `120ms` bis `180ms`
+- Keine permanente Pulsen-Animation für Inbox mehr; Badge oder sanfter Highlight-Zustand reicht meist aus
+
+## Technische Empfehlung für die Umsetzung
+
+### Design Tokens in `client/src/style.css`
+
+Zuerst zentrale CSS-Variablen definieren:
+
+- Farben
+- Radius
+- Shadow
+- Border
+- Spacing
+- Höhen wichtiger UI-Bausteine
+
+Beispielhafte Token-Gruppen:
+
+- `--color-bg-app`
+- `--color-bg-panel`
+- `--color-border`
+- `--color-primary`
+- `--radius-md`
+- `--space-2`
+- `--header-height`
+
+### Danach komponentenweise umbauen
+
+Sinnvolle Reihenfolge:
+
+1. globale Tokens und App-Hintergrund
+2. Header und Menüleiste
+3. Userliste
+4. Chat-Header und Nachrichten
+5. Eingabebereich
+6. Login und Nebenansichten
+7. Responsive Verhalten
+
+## Nicht-Ziele
+
+- kein komplettes Rebranding
+- keine starke Glasoptik
+- keine großen Rundungen
+- keine farblich überladene Gender-Codierung
+- keine luftige SaaS-Optik mit verschwendetem Platz
+
+## Ergebnisbild in einem Satz
+
+SingleChat soll nach der Überarbeitung wie ein kompaktes, modernes Chat-Tool wirken: ruhig, klar strukturiert, responsiv, markentreu grün und deutlich hochwertiger, ohne unnötig anders auszusehen.

client/src/components/ChatWindow.vue

@@ -107,7 +107,10 @@ function formatTime(timestamp) {
 .no-conversation {
   padding: 20px;
   text-align: center;
-  color: #666;
+  color: #637067;
+  border: 1px dashed #d7dfd9;
+  border-radius: 12px;
+  background: rgba(255, 255, 255, 0.72);
 }
 
 .messages-container {
@@ -118,7 +121,7 @@ function formatTime(timestamp) {
 .chat-image {
   max-width: 200px;
   max-height: 200px;
-  border-radius: 4px;
+  border-radius: 8px;
   margin-top: 0.5em;
   display: block;
   cursor: pointer;
@@ -151,7 +154,8 @@ function formatTime(timestamp) {
   width: 80%;
   height: 80%;
   background-color: #fff;
-  border-radius: 8px;
+  border-radius: 14px;
+  border: 1px solid #d7dfd9;
   display: flex;
   justify-content: center;
   align-items: center;
@@ -166,7 +170,7 @@ function formatTime(timestamp) {
   background-color: rgba(0, 0, 0, 0.5);
   color: #fff;
   border: none;
-  border-radius: 50%;
+  border-radius: 10px;
   width: 40px;
   height: 40px;
   font-size: 28px;
@@ -190,4 +194,3 @@ function formatTime(timestamp) {
   border-radius: 4px;
 }
 </style>
-

client/src/components/HistoryView.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="history-list">
-    <div v-html="$t('history_title')"></div>
+    <div class="panel-header" v-html="$t('history_title')"></div>
     
-    <div v-if="chatStore.historyResults.length === 0">
+    <div v-if="chatStore.historyResults.length === 0" class="panel-empty">
       <p>{{ $t('history_empty') }}</p>
     </div>
     
@@ -12,9 +12,9 @@
       class="history-item"
       @click="selectUser(item.userName)"
     >
-      {{ item.userName }}
+      <span class="panel-item-name">{{ item.userName }}</span>
-      <small v-if="item.lastMessage">
+      <small v-if="item.lastMessage" class="panel-item-meta">
-        - {{ formatTime(item.lastMessage.timestamp) }}
+        {{ formatTime(item.lastMessage.timestamp) }}
       </small>
     </div>
   </div>
@@ -35,3 +35,32 @@ function formatTime(timestamp) {
 }
 </script>
 
+<style scoped>
+.panel-header {
+  margin-bottom: 16px;
+}
+
+.panel-empty {
+  color: #637067;
+}
+
+.history-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  border-radius: 10px;
+}
+
+.panel-item-name {
+  font-weight: 600;
+  color: #18201b;
+}
+
+.panel-item-meta {
+  white-space: nowrap;
+  font-size: 12px;
+  font-weight: 500;
+  color: #637067;
+}
+</style>

client/src/components/ImprintContainer.vue

@@ -55,30 +55,53 @@ Thanks for the flag icons to <a href="https://flagpedia.net">flagpedia.net</a>
   left: 0;
   right: 0;
   bottom: 0;
-  background: rgba(0, 0, 0, 0.5);
+  background: rgba(18, 26, 21, 0.52);
   display: flex;
   align-items: center;
   justify-content: center;
-  z-index: 1000;
+  z-index: 1200;
+  padding: 20px;
 }
 
 .imprint-content {
-  background: white;
+  background: #ffffff;
-  padding: 20px;
+  border: 1px solid #d7dfd9;
+  border-radius: 14px;
+  padding: 24px 20px 20px;
   max-width: 600px;
   max-height: 80vh;
   overflow-y: auto;
   position: relative;
+  box-shadow: 0 24px 60px rgba(18, 26, 21, 0.18);
 }
 
 .close-button {
   position: absolute;
   top: 10px;
   right: 10px;
-  background: none;
+  width: 32px;
-  border: none;
+  height: 32px;
-  font-size: 24px;
+  background: #f6f9f7;
+  border: 1px solid #d7dfd9;
+  border-radius: 8px;
+  font-size: 22px;
+  line-height: 1;
   cursor: pointer;
 }
-</style>
 
+.imprint-content :deep(h1) {
+  margin-bottom: 12px;
+  font-size: 20px;
+  color: #18201b;
+}
+
+.imprint-content :deep(p) {
+  margin-bottom: 12px;
+  color: #344038;
+  line-height: 1.5;
+}
+
+.imprint-content :deep(a) {
+  color: #245c3a;
+}
+</style>

client/src/components/InboxView.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="inbox-list">
-    <h2>{{ $t('menu_inbox') }}</h2>
+    <h2 class="panel-title">{{ $t('menu_inbox') }}</h2>
     
-    <div v-if="chatStore.inboxResults.length === 0">
+    <div v-if="chatStore.inboxResults.length === 0" class="panel-empty">
       <p>Keine ungelesenen Nachrichten.</p>
     </div>
     
@@ -12,7 +12,8 @@
       class="inbox-item"
       @click="selectUser(item.userName)"
     >
-      {{ item.userName }} ({{ item.unreadCount }} ungelesen)
+      <span class="panel-item-name">{{ item.userName }}</span>
+      <span class="panel-item-meta">{{ item.unreadCount }} ungelesen</span>
     </div>
   </div>
 </template>
@@ -27,3 +28,34 @@ function selectUser(userName) {
 }
 </script>
 
+<style scoped>
+.panel-title {
+  margin-bottom: 14px;
+  font-size: 18px;
+  color: #18201b;
+}
+
+.panel-empty {
+  color: #637067;
+}
+
+.inbox-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  border-radius: 10px;
+}
+
+.panel-item-name {
+  font-weight: 600;
+  color: #18201b;
+}
+
+.panel-item-meta {
+  white-space: nowrap;
+  font-size: 12px;
+  font-weight: 600;
+  color: #536159;
+}
+</style>

client/src/components/LoginForm.vue

@@ -1,12 +1,32 @@
 <template>
-  <div class="login-content">
+  <div class="landing-login">
-    <form @submit.prevent="handleSubmit">
+    <section class="landing-login-intro">
-      <div class="form-row">
+      <p class="landing-login-eyebrow">SingleChat</p>
+      <h2>Direkt in den Chat</h2>
+      <p class="landing-login-copy">
+        Kompakt, schnell und ohne Umwege. Erstelle dein Profil und starte sofort eine Unterhaltung.
+      </p>
+      <div class="landing-login-features">
+        <span>Weltweiter Chat</span>
+        <span>Bildaustausch</span>
+        <span>Kompakte Bedienung</span>
+      </div>
+      <div class="welcome-message" v-html="$t('welcome')"></div>
+    </section>
+
+    <section class="landing-login-card">
+      <div class="landing-login-card-header">
+        <h3>Profil starten</h3>
+        <p>Wenige Angaben genügen für den Einstieg.</p>
+      </div>
+
+      <form class="landing-login-fields" @submit.prevent="handleSubmit">
+        <div class="landing-form-row">
           <label>{{ $t('label_nick') }}</label>
           <input v-model="nickname" type="text" required minlength="3" />
         </div>
         
-      <div class="form-row">
+        <div class="landing-form-row">
           <label>{{ $t('label_gender') }}</label>
           <select v-model="gender" required>
             <option value="">{{ $t('label_gender') }}</option>
@@ -18,12 +38,12 @@
           </select>
         </div>
         
-      <div class="form-row">
+        <div class="landing-form-row">
           <label>{{ $t('label_age') }}</label>
           <input v-model.number="age" type="number" required min="18" max="120" />
         </div>
         
-      <div class="form-row">
+        <div class="landing-form-row">
           <label>{{ $t('label_country') }}</label>
           <select v-model="country" required>
             <option value="">{{ $t('label_country') }}</option>
@@ -33,22 +53,24 @@
           </select>
         </div>
         
-      <div class="form-row">
+        <div class="landing-form-row landing-form-row-submit">
           <button type="submit">{{ $t('button_start_chat') }}</button>
         </div>
       </form>
-    
+    </section>
-    <div class="welcome-message" v-html="$t('welcome')"></div>
   </div>
 </template>
 
 <script setup>
-import { ref, onMounted, computed } from 'vue';
+import { ref, onMounted, computed, watch } from 'vue';
 import axios from 'axios';
 import { useChatStore } from '../stores/chat';
 import { useI18n } from 'vue-i18n';
 import countryTranslations from '../i18n/countries.json';
 
+const PROFILE_COOKIE_NAME = 'singlechat_profile';
+const PROFILE_COOKIE_MAX_AGE = 60 * 60 * 24 * 365;
+
 const { locale } = useI18n();
 const chatStore = useChatStore();
 const nickname = ref('');
@@ -83,8 +105,63 @@ onMounted(async () => {
   } catch (error) {
     console.error('Fehler beim Laden der Länderliste:', error);
   }
+
+  restoreProfileFromCookie();
 });
 
+watch([nickname, gender, age, country], () => {
+  persistProfileToCookie();
+});
+
+function restoreProfileFromCookie() {
+  const cookieValue = readCookie(PROFILE_COOKIE_NAME);
+  if (!cookieValue) return;
+
+  try {
+    const profile = JSON.parse(decodeURIComponent(cookieValue));
+
+    if (typeof profile.nickname === 'string') {
+      nickname.value = profile.nickname;
+    }
+    if (typeof profile.gender === 'string') {
+      gender.value = profile.gender;
+    }
+    if (Number.isFinite(profile.age)) {
+      age.value = profile.age;
+    }
+    if (typeof profile.country === 'string') {
+      country.value = profile.country;
+    }
+  } catch (error) {
+    console.warn('Profil-Cookie konnte nicht gelesen werden:', error);
+  }
+}
+
+function persistProfileToCookie() {
+  const profile = {
+    nickname: nickname.value.trim(),
+    gender: gender.value,
+    age: Number(age.value) || 18,
+    country: country.value
+  };
+
+  document.cookie = [
+    `${PROFILE_COOKIE_NAME}=${encodeURIComponent(JSON.stringify(profile))}`,
+    `Max-Age=${PROFILE_COOKIE_MAX_AGE}`,
+    'Path=/',
+    'SameSite=Lax'
+  ].join('; ');
+}
+
+function readCookie(name) {
+  const prefix = `${name}=`;
+  const cookie = document.cookie
+    .split('; ')
+    .find(entry => entry.startsWith(prefix));
+
+  return cookie ? cookie.slice(prefix.length) : null;
+}
+
 function handleSubmit() {
   if (!nickname.value || nickname.value.trim().length < 3) {
     alert('Bitte gib einen gültigen Nicknamen ein (mindestens 3 Zeichen)');
@@ -119,6 +196,176 @@ function handleSubmit() {
   }
   
   chatStore.login(nickname.value.trim(), gender.value, age.value, englishCountryName);
+  persistProfileToCookie();
 }
 </script>
 
+<style scoped>
+.landing-login {
+  width: 80%;
+  max-width: 1400px;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  justify-content: center;
+  gap: 24px;
+  align-items: stretch;
+  height: min(80%, 720px);
+  max-height: 80%;
+}
+
+.landing-login-intro {
+  padding: 32px;
+  border-radius: 20px;
+  border: 1px solid #cfe0d3;
+  background:
+    radial-gradient(circle at top left, rgba(61, 134, 84, 0.28), transparent 32%),
+    linear-gradient(180deg, rgba(232, 243, 235, 0.98) 0%, rgba(244, 248, 245, 0.94) 100%);
+  box-shadow: 0 24px 60px rgba(31, 50, 39, 0.10);
+  min-height: 100%;
+  overflow: auto;
+}
+
+.landing-login-eyebrow {
+  margin: 0 0 8px;
+  font-size: 11px;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: #496254;
+}
+
+.landing-login-intro h2 {
+  margin: 0 0 10px;
+  font-size: 30px;
+  line-height: 1.05;
+  color: #18201b;
+}
+
+.landing-login-copy {
+  margin: 0 0 16px;
+  color: #4f5d54;
+  line-height: 1.55;
+}
+
+.landing-login-features {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-bottom: 18px;
+}
+
+.landing-login-features span {
+  display: inline-flex;
+  align-items: center;
+  min-height: 30px;
+  padding: 0 12px;
+  border-radius: 999px;
+  border: 1px solid #bfd5c4;
+  background: #e2efe5;
+  color: #245c3a;
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.landing-login-card {
+  padding: 24px;
+  border-radius: 20px;
+  border: 1px solid #d4ddd6;
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0.99) 0%, rgba(249, 251, 249, 0.97) 100%);
+  box-shadow: 0 24px 60px rgba(31, 50, 39, 0.10);
+  min-height: 100%;
+  overflow: auto;
+}
+
+.landing-login-card-header {
+  margin-bottom: 18px;
+}
+
+.landing-login-card-header h3 {
+  margin: 0 0 4px;
+  font-size: 20px;
+  color: #18201b;
+}
+
+.landing-login-card-header p {
+  margin: 0;
+  color: #637067;
+}
+
+.landing-login-fields {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.landing-form-row {
+  display: grid;
+  gap: 6px;
+}
+
+.landing-form-row label {
+  min-width: 0;
+  color: #536159;
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.landing-form-row input,
+.landing-form-row select {
+  width: 100%;
+  height: 42px;
+  padding: 0 12px;
+  border: 1px solid #d3ddd5;
+  border-radius: 10px;
+  background: #fbfdfb;
+  color: #18201b;
+}
+
+.landing-form-row input:focus,
+.landing-form-row select:focus {
+  outline: none;
+  border-color: #8bb497;
+  box-shadow: 0 0 0 3px rgba(61, 134, 84, 0.12);
+}
+
+.landing-form-row button {
+  height: 42px;
+  padding: 0 16px;
+  border: 1px solid #295f3d;
+  border-radius: 10px;
+  background: linear-gradient(180deg, #4a8d61 0%, #2c6240 100%);
+  color: #fff;
+  font-weight: 600;
+}
+
+.landing-form-row-submit {
+  margin-top: 4px;
+}
+
+.welcome-message {
+  padding: 18px;
+  border: 1px solid #d7dfd9;
+  border-radius: 14px;
+  background: rgba(255, 255, 255, 0.72);
+}
+
+@media (max-width: 820px) {
+  .landing-login {
+    width: 100%;
+    grid-template-columns: 1fr;
+    min-height: auto;
+    height: auto;
+    max-height: none;
+  }
+
+  .landing-login-intro,
+  .landing-login-card {
+    padding: 20px;
+    min-height: auto;
+    overflow: visible;
+  }
+
+  .landing-login-intro h2 {
+    font-size: 24px;
+  }
+}
+</style>

client/src/components/MenuBar.vue

@@ -6,11 +6,18 @@
         {{ $t('menu_timeout_in', [formatTime(chatStore.remainingSecondsToTimeout)]) }}
       </span>
       <button @click="handleLeave">{{ $t('menu_leave') }}</button>
-      <button @click="handleSearch">{{ $t('menu_search') }}</button>
+      <button @click="handleSearch" :class="{ 'is-active': chatStore.currentView === 'search' }">
-      <button @click="handleInbox" :class="{ 'has-unread': chatStore.unreadChatsCount > 0 }">
+        {{ $t('menu_search') }}
+      </button>
+      <button
+        @click="handleInbox"
+        :class="{ 'has-unread': chatStore.unreadChatsCount > 0, 'is-active': chatStore.currentView === 'inbox' }"
+      >
         {{ $t('menu_inbox') }}<span v-if="chatStore.unreadChatsCount > 0"> ({{ chatStore.unreadChatsCount }})</span>
       </button>
-      <button @click="handleHistory">{{ $t('menu_history') }}</button>
+      <button @click="handleHistory" :class="{ 'is-active': chatStore.currentView === 'history' }">
+        {{ $t('menu_history') }}
+      </button>
     </template>
   </div>
 </template>
@@ -42,4 +49,3 @@ function formatTime(seconds) {
   return `${minutes}:${secs.toString().padStart(2, '0')}`;
 }
 </script>
-

client/src/components/SearchView.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="search-form">
-    <div v-html="$t('search_title')"></div>
+    <div class="panel-header" v-html="$t('search_title')"></div>
     
     <form @submit.prevent="handleSearch">
       <div class="form-row">
@@ -62,9 +62,13 @@
           v-if="user.isoCountryCode"
           :src="`/static/flags/${user.isoCountryCode}.png`"
           :alt="user.country"
-          style="width: 16px; height: 12px; margin-right: 5px;"
+          class="search-flag"
         />
-        {{ user.userName }} ({{ user.age }}, {{ user.gender }}, {{ user.country }})
+        <span class="search-result-main">
+          <strong>{{ user.userName }}</strong>
+          <span>{{ user.country }}</span>
+        </span>
+        <span class="search-result-meta">{{ user.age }} · {{ user.gender }}</span>
       </div>
     </div>
     
@@ -193,6 +197,53 @@ function selectUser(userName) {
 </script>
 
 <style scoped>
+.panel-header {
+  margin-bottom: 16px;
+}
+
+.search-result-item {
+  display: grid;
+  grid-template-columns: 28px minmax(0, 1fr) auto;
+  gap: 8px;
+  align-items: center;
+  border-radius: 10px;
+}
+
+.search-flag {
+  width: 28px;
+  height: 20px;
+  border-radius: 5px;
+  border: 1px solid #d7dfd9;
+}
+
+.search-result-main {
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  overflow: hidden;
+}
+
+.search-result-main strong {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: #18201b;
+}
+
+.search-result-main span {
+  color: #637067;
+  white-space: nowrap;
+}
+
+.search-result-meta {
+  font-size: 12px;
+  font-weight: 600;
+  color: #536159;
+  white-space: nowrap;
+}
+
 .form-row-age {
   display: flex;
   gap: 1em;
@@ -219,6 +270,9 @@ function selectUser(userName) {
 
 :deep(.multiselect) {
   min-height: auto;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-sm);
+  background: var(--color-surface);
 }
 
 :deep(.multiselect-input-wrapper) {
@@ -255,7 +309,7 @@ function selectUser(userName) {
 }
 
 :deep(.multiselect-tag) {
-  background: #429043;
+  background: #3d8654;
   color: white;
   padding: 0.25em 0.5em;
   margin: 0;
@@ -280,7 +334,7 @@ function selectUser(userName) {
 }
 
 :deep(.multiselect-placeholder) {
-  color: #999;
+  color: #8a948e;
 }
 
 :deep(.multiselect-single-label) {
@@ -314,7 +368,7 @@ function selectUser(userName) {
 }
 
 :deep(.multiselect-tags-search .multiselect-tag) {
-  background: #429043;
+  background: #3d8654;
   color: white;
   padding: 0.25em 0.5em;
   margin: 0;
@@ -333,7 +387,8 @@ function selectUser(userName) {
 }
 
 :deep(.multiselect.is-active) {
-  border-color: #429043;
+  border-color: #3d8654;
+  box-shadow: 0 0 0 3px rgba(61, 134, 84, 0.12);
 }
 
 :deep(.multiselect.is-active .multiselect-tags) {
@@ -352,5 +407,3 @@ function selectUser(userName) {
   display: block !important;
 }
 </style>
-
-glich werde

client/src/components/UserList.vue

@@ -4,11 +4,15 @@
       {{ $t('logged_in_count', [chatStore.users.length]) }}
     </h3>
     
-    <div v-if="chatStore.isLoggedIn">
+    <div v-if="chatStore.isLoggedIn" class="user-list-scroll">
-      <div
+      <button
         v-for="user in chatStore.users"
         :key="user.sessionId"
-        :class="['user-item', `gender-${user.gender}`]"
+        :class="[
+          'user-item',
+          `gender-${user.gender}`,
+          { 'is-active': chatStore.currentConversation === user.userName }
+        ]"
         @click="selectUser(user.userName)"
       >
         <img
@@ -17,8 +21,12 @@
           :alt="user.country"
           class="flag-icon"
         />
-        {{ user.userName }} ({{ user.age }}, {{ user.gender }})
+        <span class="user-main">
-      </div>
+          <span class="user-name">{{ user.userName }}</span>
+          <span class="user-country">{{ user.isoCountryCode || '' }}</span>
+        </span>
+        <span class="user-meta">{{ user.age }} · {{ user.gender }}</span>
+      </button>
     </div>
   </div>
 </template>
@@ -34,4 +42,3 @@ function selectUser(userName) {
   }
 }
 </script>
-

client/src/router/index.js

@@ -1,6 +1,7 @@
 import { createRouter, createWebHistory } from 'vue-router';
 import ChatView from '../views/ChatView.vue';
 import PartnersView from '../views/PartnersView.vue';
+import MockupView from '../views/MockupView.vue';
 
 const routes = [
   {
@@ -22,6 +23,16 @@ const routes = [
       description: 'Unsere Partner und befreundete Seiten. Entdecke weitere interessante Angebote und Communities.',
       keywords: 'Partner, Links, befreundete Seiten, Community'
     }
+  },
+  {
+    path: '/mockup-redesign',
+    name: 'mockup-redesign',
+    component: MockupView,
+    meta: {
+      title: 'Design Mockup - SingleChat',
+      description: 'Visuelle Vorschau des geplanten Design-Refreshs fuer SingleChat.',
+      keywords: 'SingleChat, Mockup, Design, Redesign, Vorschau'
+    }
   }
 ];
 
@@ -76,4 +87,3 @@ router.beforeEach((to, from, next) => {
 });
 
 export default router;
-

client/src/stores/chat.js

@@ -3,6 +3,8 @@ import { ref, computed } from 'vue';
 import { io } from 'socket.io-client';
 
 export const useChatStore = defineStore('chat', () => {
+  const LOGOUT_MARKER_KEY = 'singlechat_logged_out';
+
   // State
   const isLoggedIn = ref(false);
   const userName = ref('');
@@ -346,6 +348,12 @@ export const useChatStore = defineStore('chat', () => {
   }
 
   async function login(userNameVal, genderVal, ageVal, countryVal) {
+    try {
+      window.localStorage.removeItem(LOGOUT_MARKER_KEY);
+    } catch (error) {
+      console.warn('Logout-Marker konnte nicht entfernt werden:', error);
+    }
+
     // Stelle sicher, dass Socket.IO verbunden ist
     if (!socket.value || !socket.value.connected) {
       console.log('Socket.IO nicht verbunden, versuche Verbindung herzustellen...');
@@ -578,7 +586,22 @@ export const useChatStore = defineStore('chat', () => {
     }
   }
 
-  function logout() {
+  async function logout() {
+    try {
+      window.localStorage.setItem(LOGOUT_MARKER_KEY, '1');
+    } catch (error) {
+      console.warn('Logout-Marker konnte nicht gespeichert werden:', error);
+    }
+
+    try {
+      await fetch('/api/logout', {
+        method: 'POST',
+        credentials: 'include'
+      });
+    } catch (error) {
+      console.error('Logout-Request fehlgeschlagen:', error);
+    }
+
     stopTimeoutTimer();
     isLoggedIn.value = false;
     userName.value = '';
@@ -642,6 +665,15 @@ export const useChatStore = defineStore('chat', () => {
 
   async function restoreSession() {
     try {
+      try {
+        if (window.localStorage.getItem(LOGOUT_MARKER_KEY) === '1') {
+          console.log('restoreSession: Automatische Wiederherstellung nach Logout unterdrueckt');
+          return false;
+        }
+      } catch (error) {
+        console.warn('Logout-Marker konnte nicht gelesen werden:', error);
+      }
+
       console.log('restoreSession: Starte Session-Wiederherstellung...');
       const response = await fetch('/api/session', {
         credentials: 'include' // Wichtig für Cookies
@@ -731,4 +763,3 @@ export const useChatStore = defineStore('chat', () => {
     restoreSession
   };
 });
-

client/src/style.css

@@ -1,4 +1,38 @@
-@import url('https://fonts.googleapis.com/css2?family=Noto+Sans&family=Noto+Sans+JP&family=Noto+Sans+SC&family=Noto+Sans+Thai&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;500;600&family=Noto+Sans+JP&family=Noto+Sans+SC&family=Noto+Sans+Thai&display=swap');
+
+:root {
+  --color-bg-app: #f4f6f5;
+  --color-bg-shell: #edf2ee;
+  --color-surface: #ffffff;
+  --color-surface-subtle: #f6f9f7;
+  --color-surface-muted: #eef3ef;
+  --color-border: #d7dfd9;
+  --color-border-strong: #c7d2ca;
+  --color-text-strong: #18201b;
+  --color-text: #2c362f;
+  --color-text-muted: #637067;
+  --color-primary-700: #245c3a;
+  --color-primary-600: #2f6f46;
+  --color-primary-500: #3d8654;
+  --color-primary-100: #e7f1ea;
+  --color-blue: #467bb2;
+  --color-pink: #d85f8c;
+  --color-gold: #c78a2c;
+  --color-purple: #8b60af;
+  --color-cyan: #5fa2bf;
+  --radius-sm: 8px;
+  --radius-md: 10px;
+  --radius-lg: 12px;
+  --space-1: 4px;
+  --space-2: 8px;
+  --space-3: 12px;
+  --space-4: 16px;
+  --space-5: 20px;
+  --header-height: 58px;
+  --menu-height: 42px;
+  --footer-height: 34px;
+  --sidebar-width: 188px;
+}
 
 * {
   margin: 0;
@@ -6,11 +40,35 @@
   box-sizing: border-box;
 }
 
-html, body, #app {
+html,
+body,
+#app {
   height: 100vh;
-  overflow: hidden;
   width: 100%;
+  overflow: hidden;
   font-family: 'Noto Sans', 'Noto Sans JP', 'Noto Sans SC', 'Noto Sans Thai', sans-serif;
+  color: var(--color-text);
+  background: var(--color-bg-app);
+}
+
+body {
+  font-size: 14px;
+  line-height: 1.4;
+}
+
+button,
+input,
+select,
+textarea {
+  font: inherit;
+}
+
+button {
+  cursor: pointer;
+}
+
+a {
+  color: inherit;
 }
 
 .chat-container {
@@ -18,89 +76,148 @@ html, body, #app {
   flex-direction: column;
   height: 100%;
   overflow: hidden;
+  background:
+    radial-gradient(circle at top left, rgba(61, 134, 84, 0.12), transparent 22%),
+    linear-gradient(180deg, var(--color-bg-app) 0%, var(--color-bg-shell) 100%);
 }
 
 .header {
-  background: #ffffff;
+  min-height: var(--header-height);
-  color: #005100;
-  flex-shrink: 0;
-}
-
-.header > div,
-.header > span {
-  display: inline-block;
-  vertical-align: middle;
-}
-
-.header h1 {
-  padding: 0 0.5em;
-  margin: 0;
-  display: inline-block;
-  color: #005100;
-}
-
-.menu {
-  background-color: #2E7D32;
-  height: 2.6em;
   flex-shrink: 0;
   display: flex;
   align-items: center;
-  padding: 0 0.4em;
+  justify-content: space-between;
+  padding: 0 var(--space-4);
+  background: linear-gradient(180deg, rgba(208, 232, 216, 0.98) 0%, rgba(235, 245, 238, 0.94) 55%, rgba(247, 250, 248, 0.92) 100%);
+  border-bottom: 1px solid var(--color-border);
+}
+
+.app-brand {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.app-brand-mark {
+  width: 32px;
+  height: 32px;
+  border-radius: 9px;
+  display: grid;
+  place-items: center;
+  background: linear-gradient(180deg, #3d8654 0%, #245c3a 100%);
+  color: #fff;
+  font-weight: 700;
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24);
+}
+
+.app-brand-copy {
+  display: flex;
+  flex-direction: column;
+}
+
+.app-brand-eyebrow {
+  font-size: 10px;
+  line-height: 1;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: #5a6a61;
+}
+
+.header h1 {
+  margin: 2px 0 0;
+  color: var(--color-primary-700);
+  font-size: 17px;
+  line-height: 1;
+  font-weight: 600;
+}
+
+.header-status {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.header-status-chip {
+  min-height: 26px;
+  display: inline-flex;
+  align-items: center;
+  padding: 0 10px;
+  border-radius: 999px;
+  border: 1px solid #cadecf;
+  background: rgba(255, 255, 255, 0.7);
+  color: #445248;
+  font-size: 11px;
+  font-weight: 600;
+}
+
+.menu {
+  min-height: var(--menu-height);
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  padding: 5px var(--space-3);
+  background: rgba(247, 250, 248, 0.92);
+  border-bottom: 1px solid var(--color-border);
+  overflow-x: auto;
 }
 
 .menu > * {
-  vertical-align: top;
+  flex-shrink: 0;
 }
 
 .menu button {
-  background-color: #429043;
+  height: 30px;
-  color: #ffffff;
+  border: 1px solid transparent;
-  height: 2em;
+  border-radius: var(--radius-sm);
-  margin: 0.2em 0.4em;
+  padding: 0 12px;
-  cursor: pointer;
+  color: #425047;
-  border: none;
+  background: transparent;
-  padding: 0 0.5em;
+  font-size: 12px;
-  font-size: 14px;
+  font-weight: 600;
 }
 
 .menu button:hover {
-  background-color: #52a052;
+  background: rgba(231, 241, 234, 0.8);
+}
+
+.menu button.is-active {
+  background: linear-gradient(180deg, #dceee1 0%, #cfe6d6 100%);
+  border-color: #b8d4bf;
+  color: #1f4f32;
 }
 
 .menu button.has-unread {
-  background-color: #ff6b6b;
+  border-color: #d7c0c0;
-  animation: pulse 2s infinite;
+  background: #fff1f1;
+  color: #9d4545;
 }
 
-.menu button.has-unread:hover {
+.menu button.has-unread.is-active {
-  background-color: #ff5252;
+  background: linear-gradient(180deg, #f8e4e4 0%, #f1d2d2 100%);
+  border-color: #ddb7b7;
+  color: #8e3f3f;
 }
 
-@keyframes pulse {
+.menu-info-text {
-  0%, 100% {
+  display: inline-flex;
-    opacity: 1;
+  align-items: center;
-  }
+  min-height: 26px;
-  50% {
+  padding: 0 10px;
-    opacity: 0.8;
+  border-radius: 999px;
-  }
+  border: 1px solid var(--color-border);
-}
+  background: var(--color-surface-subtle);
-
+  color: var(--color-text-muted);
-.menu span {
+  font-size: 11px;
-  display: inline-block;
-  padding: 0.375em 0.4em;
-  color: #2E7D32;
-  border: 1px solid #fff;
-  background-color: lightgray;
-  margin: 0.1em 0.2em;
 }
 
 .menu button span {
-  color: #fff !important;
+  color: inherit;
-  background-color: transparent !important;
+  background: transparent;
-  border: none !important;
+  border: none;
-  padding: 0 !important;
+  padding: 0;
-  margin: 0 !important;
+  margin: 0;
-  display: inline !important;
+  display: inline;
 }
 
 .horizontal-box {
@@ -110,52 +227,130 @@ html, body, #app {
   overflow: hidden;
 }
 
+.horizontal-box-app {
+  gap: 14px;
+  padding: 14px;
+}
+
 .user-list {
-  width: 15em;
+  width: var(--sidebar-width);
-  background-color: lightgray;
-  overflow-y: auto;
   flex-shrink: 0;
-  padding: 0.5em;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 10px 8px;
+  background: linear-gradient(180deg, rgba(247, 250, 247, 0.95) 0%, rgba(242, 246, 243, 0.92) 100%);
+  border: 1px solid var(--color-border);
+  border-right: 1px solid var(--color-border);
+  border-radius: 16px;
+  box-shadow: 0 18px 40px rgba(31, 50, 39, 0.06);
+  overflow: hidden;
 }
 
 .user-list h3 {
-  margin-bottom: 0.5em;
+  margin: 0;
-  font-size: 16px;
+  font-size: 13px;
+  line-height: 1.2;
+  color: var(--color-text-muted);
+  font-weight: 600;
+}
+
+.user-list-scroll {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
 }
 
 .user-item {
-  cursor: pointer;
-  display: block;
   width: 100%;
-  padding: 0.3em 0.5em;
+  min-height: 30px;
-  margin-bottom: 0.2em;
+  padding: 4px 6px;
+  border: 1px solid rgba(217, 225, 218, 0.8);
+  border-radius: var(--radius-sm);
+  display: grid;
+  grid-template-columns: 28px minmax(0, 1fr) auto;
+  gap: 6px;
+  align-items: center;
+  background: rgba(255, 255, 255, 0.72);
+  text-align: left;
+  color: var(--color-text);
 }
 
 .user-item:hover {
-  background-color: #b0b0b0;
+  border-color: var(--color-border-strong);
+  background: rgba(255, 255, 255, 0.92);
+}
+
+.user-item.is-active {
+  background: linear-gradient(180deg, rgba(236, 246, 239, 0.98) 0%, rgba(226, 239, 231, 0.96) 100%);
+  box-shadow: 0 8px 18px rgba(35, 54, 42, 0.06);
 }
 
 .user-item.gender-M {
-  background-color: #0066CC;
+  background-image: linear-gradient(90deg, rgba(70, 123, 178, 0.22), rgba(255, 255, 255, 0.68) 72%);
-  color: white;
 }
 
 .user-item.gender-F {
-  background-color: #FF4081;
+  background-image: linear-gradient(90deg, rgba(216, 95, 140, 0.26), rgba(255, 255, 255, 0.68) 72%);
-  color: white;
 }
 
 .user-item.gender-P {
-  background-color: #FFC107;
+  background-image: linear-gradient(90deg, rgba(199, 138, 44, 0.24), rgba(255, 255, 255, 0.68) 72%);
 }
 
 .user-item.gender-TM {
-  background-color: #90caf9;
+  background-image: linear-gradient(90deg, rgba(95, 162, 191, 0.22), rgba(255, 255, 255, 0.68) 72%);
 }
 
 .user-item.gender-TF {
-  background-color: #8E24AA;
+  background-image: linear-gradient(90deg, rgba(139, 96, 175, 0.22), rgba(255, 255, 255, 0.68) 72%);
-  color: #ffffff;
+}
+
+.flag-icon {
+  width: 28px;
+  height: 20px;
+  margin: 0;
+  border-radius: 5px;
+  border: 1px solid var(--color-border);
+  object-fit: cover;
+}
+
+.user-main {
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  overflow: hidden;
+}
+
+.user-name {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--color-text-strong);
+}
+
+.user-country {
+  flex-shrink: 0;
+  font-size: 10px;
+  line-height: 1;
+  color: var(--color-text-muted);
+  text-transform: uppercase;
+}
+
+.user-meta {
+  flex-shrink: 0;
+  text-align: right;
+  font-size: 11px;
+  font-weight: 600;
+  color: #536159;
+  white-space: nowrap;
 }
 
 .content {
@@ -165,91 +360,126 @@ html, body, #app {
   min-height: 0;
   overflow: hidden;
   height: 100%;
+  border: 1px solid var(--color-border);
+  border-radius: 18px;
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0%, rgba(245, 248, 246, 0.94) 100%);
+  box-shadow: 0 18px 40px rgba(31, 50, 39, 0.06);
 }
 
 .chat-window {
   flex: 1;
   overflow-y: auto;
-  padding: 20px;
+  padding: 18px 20px;
-  background-color: white;
+  background: linear-gradient(180deg, #fbfdfb 0%, #f3f7f4 100%);
   min-height: 0;
 }
 
 .output-box-format {
-  border: 1px solid #999;
+  max-width: 78%;
-  padding: 1px 6px;
+  border: 1px solid rgba(217, 226, 219, 0.9);
-  margin-bottom: 0.2em;
+  padding: 10px 12px;
-  border-radius: 3px;
+  margin-bottom: 10px;
-  line-height: 2em;
+  border-radius: var(--radius-md);
+  line-height: 1.45;
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(246, 250, 247, 0.96) 100%);
+  box-shadow: 0 10px 18px rgba(35, 54, 42, 0.05);
+}
+
+.output-box-format strong {
+  display: block;
+  margin-bottom: 4px;
+  font-size: 11px;
+  color: var(--color-text-muted);
 }
 
 .ouput-box-format-self {
-  background-color: #eaeaea;
+  margin-left: auto;
+  background: linear-gradient(180deg, #dff0e4 0%, #d2e7d9 100%);
+  border-color: #c8dccf;
 }
 
 .output-box-format-other {
-  background-color: #fff;
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(246, 250, 247, 0.96) 100%);
 }
 
 .chat-input-container {
-  padding: 10px;
+  padding: 12px 16px;
-  background-color: #f0f0f0;
+  background: linear-gradient(180deg, rgba(238, 245, 240, 0.92) 0%, rgba(247, 250, 248, 0.88) 100%);
   flex-shrink: 0;
-  display: flex;
+  display: grid;
-  gap: 10px;
+  grid-template-columns: minmax(0, 1fr) auto auto auto;
+  gap: 8px;
   align-items: center;
   position: relative;
+  border-top: 1px solid var(--color-border);
 }
 
 .chat-input-container input {
-  flex: 1;
+  min-width: 0;
-  padding: 8px;
+  height: 40px;
-  border: 1px solid #ccc;
+  padding: 0 12px;
-  border-radius: 4px;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-sm);
+  background: linear-gradient(180deg, #fcfefc 0%, #f0f6f2 100%);
+  color: var(--color-text);
 }
 
 .chat-input-container button {
-  padding: 8px 15px;
+  height: 40px;
-  background-color: #429043;
+  padding: 0 14px;
+  background: linear-gradient(180deg, #4a8d61 0%, #2c6240 100%);
   color: white;
-  border: solid 1px #999;
+  border: 1px solid #295f3d;
-  border-radius: 0;
+  border-radius: var(--radius-sm);
-  cursor: pointer;
+  min-height: 40px;
-  min-height: 2.3em;
+  font-weight: 600;
 }
 
 .chat-input-container button:hover {
-  background-color: #52a052;
+  filter: brightness(1.02);
 }
 
 .chat-input-container .no-style {
-  border: none;
+  width: 40px;
-  background: none;
+  height: 40px !important;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-sm);
+  background: linear-gradient(180deg, #fdfefd 0%, #edf4ef 100%);
   padding: 0;
-  margin: 0;
+  display: inline-flex;
-  outline: none;
+  align-items: center;
-  cursor: pointer;
+  justify-content: center;
-  width: 31px !important;
+}
-  height: 29px !important;
+
+.chat-input-container .no-style:disabled {
+  opacity: 0.45;
+  cursor: default;
 }
 
 .chat-input-container .no-style > img {
-  width: 31px;
+  width: 20px;
-  height: 31px;
+  height: 20px;
 }
 
 .imprint-container {
-  background-color: #f0f0f0;
+  min-height: var(--footer-height);
-  padding: 10px 20px;
+  padding: 0 16px;
   text-align: center;
-  font-size: 12px;
+  font-size: 11px;
   flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 18px;
+  background: rgba(255, 255, 255, 0.94);
+  border-top: 1px solid var(--color-border);
 }
 
 .imprint-container a {
-  color: #005100;
+  color: #54635a;
   text-decoration: none;
-  margin: 0 10px;
+  font-weight: 500;
+  margin: 0;
 }
 
 .imprint-container a:hover {
@@ -258,8 +488,7 @@ html, body, #app {
 
 .login-form {
   padding: 20px;
-  max-width: 600px;
+  max-width: 720px;
-  margin: 0 auto;
 }
 
 .login-content {
@@ -267,6 +496,10 @@ html, body, #app {
   flex-direction: column;
   gap: 20px;
   max-width: 40em;
+  padding: 18px;
+  border: 1px solid var(--color-border);
+  border-radius: 14px;
+  background: rgba(255, 255, 255, 0.86);
 }
 
 .form-row {
@@ -278,134 +511,91 @@ html, body, #app {
 
 .form-row label {
   min-width: 100px;
+  color: var(--color-text-muted);
 }
 
 .form-row input,
 .form-row select {
   flex: 1;
-  padding: 5px;
+  height: 38px;
+  padding: 0 10px;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-sm);
+  background: var(--color-surface);
 }
 
 .form-row button {
-  padding: 8px 15px;
+  padding: 0 15px;
-  background-color: #429043;
+  background: linear-gradient(180deg, #4a8d61 0%, #2c6240 100%);
   color: white;
-  border: solid 1px #999;
+  border: 1px solid #295f3d;
-  border-radius: 0;
+  border-radius: var(--radius-sm);
   cursor: pointer;
   justify-self: start;
-  min-height: 2.3em;
+  min-height: 38px;
-}
+  font-weight: 600;
-
-.form-row button:hover {
-  background-color: #52a052;
 }
 
 .welcome-message {
-  margin-top: 20px;
+  padding: 16px;
-  padding: 20px;
+  background: var(--color-surface-subtle);
-  background-color: #f9f9f9;
+  border: 1px solid var(--color-border);
-  border-radius: 4px;
+  border-radius: 12px;
-}
-
-.search-form {
-  padding: 20px;
-}
-
-.search-form .form-row {
-  margin-bottom: 15px;
-}
-
-.search-results {
-  padding: 20px;
-}
-
-.search-result-item {
-  padding: 10px;
-  border-bottom: 1px solid #ddd;
-  cursor: pointer;
-}
-
-.search-result-item:hover {
-  background-color: #f0f0f0;
 }
 
+.search-form,
+.search-results,
 .inbox-list,
-.history-list {
+.history-list,
-  padding: 20px;
+.partners-view {
+  padding: 18px 20px;
 }
 
+.search-result-item,
 .inbox-item,
-.history-item {
+.history-item,
-  padding: 10px;
+.partners-list li {
-  border-bottom: 1px solid #ddd;
+  padding: 10px 12px;
+  border-bottom: 1px solid #e3e8e4;
   cursor: pointer;
 }
 
+.search-result-item:hover,
 .inbox-item:hover,
 .history-item:hover {
-  background-color: #f0f0f0;
+  background-color: #f4f7f4;
-}
-
-.partners-view {
-  padding: 20px;
 }
 
 .back-link {
   margin-bottom: 1em;
 }
 
-.back-link a {
+.back-link a,
-  color: #429043;
+.partners-list a {
+  color: var(--color-primary-700);
   text-decoration: underline;
-  font-weight: bold;
+  font-weight: 600;
-}
-
-.back-link a:hover {
-  color: #2E7D32;
 }
 
 .partners-list {
   list-style: none;
 }
 
-.partners-list li {
-  padding: 10px;
-  border-bottom: 1px solid #ddd;
-}
-
-.partners-list a {
-  color: #005100;
-  text-decoration: none;
-}
-
-.imprint-container a {
-  color: #005100;
-  text-decoration: none;
-  margin: 0 10px;
-}
-
-.flag-icon {
-  margin: 0.25em 0.5em 0 0;
-  width: 16px;
-  height: 12px;
-  vertical-align: middle;
-}
-
 .smiley-bar {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
-  max-width: 200px;
+  max-width: 220px;
-  bottom: 89px;
   position: absolute;
+  bottom: calc(100% + 8px);
+  right: 16px;
   font-size: 24pt;
-  right: 3px;
+  background-color: var(--color-surface);
-  background-color: #fff;
+  border: 1px solid var(--color-border);
-  border: 1px solid #ccc;
   padding: 0.3em;
-  border-radius: 4px;
+  border-radius: 12px;
   z-index: 10;
+  box-shadow: 0 16px 30px rgba(31, 50, 39, 0.12);
 }
 
 .smiley-item {
@@ -413,13 +603,53 @@ html, body, #app {
   padding: 0.2em;
   margin: 0.1em;
   display: inline-block;
+  border-radius: 8px;
 }
 
 .smiley-item:hover {
-  background-color: #f0f0f0;
+  background-color: #f0f4f1;
 }
 
-.partners-list a:hover {
+@media (max-width: 960px) {
-  text-decoration: underline;
+  .user-list {
+    width: 170px;
   }
 
+  .menu {
+    flex-wrap: wrap;
+  }
+
+  .horizontal-box-app {
+    gap: 10px;
+    padding: 10px;
+  }
+}
+
+@media (max-width: 720px) {
+  .horizontal-box {
+    flex-direction: column;
+  }
+
+  .user-list {
+    width: 100%;
+    max-height: 150px;
+    border-right: 1px solid var(--color-border);
+    border-bottom: 1px solid var(--color-border);
+  }
+
+  .content {
+    border-radius: 16px;
+  }
+
+  .chat-input-container {
+    grid-template-columns: minmax(0, 1fr) auto auto;
+  }
+
+  .chat-input-container button:not(.no-style) {
+    padding: 0 12px;
+  }
+
+  .header-status {
+    display: none;
+  }
+}

client/src/views/ChatView.vue

@@ -1,16 +1,26 @@
 <template>
   <div class="chat-container">
     <header class="header">
-      <h1>SingleChat</h1>
+      <div class="app-brand">
+        <span class="app-brand-mark">S</span>
+        <div class="app-brand-copy">
+          <span class="app-brand-eyebrow">SingleChat</span>
+          <h1>Chat</h1>
+        </div>
+      </div>
+      <div v-if="chatStore.isLoggedIn" class="header-status">
+        <span class="header-status-chip">{{ chatStore.userName }}</span>
+        <span v-if="chatStore.isoCountryCode" class="header-status-chip">{{ chatStore.isoCountryCode }}</span>
+      </div>
     </header>
     
-    <MenuBar />
+    <MenuBar v-if="chatStore.isLoggedIn" />
     
-    <div class="horizontal-box">
+    <div class="horizontal-box" :class="{ 'horizontal-box-login': !chatStore.isLoggedIn, 'horizontal-box-app': chatStore.isLoggedIn }">
-      <UserList />
+      <UserList v-if="chatStore.isLoggedIn" />
       
       <div class="content">
-        <div v-if="!chatStore.isLoggedIn" class="login-form">
+        <div v-if="!chatStore.isLoggedIn" class="login-screen">
           <LoginForm />
         </div>
         
@@ -46,11 +56,14 @@
                 </table>
               </div>
             </div>
-            <div v-else-if="chatStore.currentConversation && currentUserInfo" :class="['chat-header', 'chat-header-gender-' + currentUserInfo.gender]">
+            <div v-else-if="chatStore.currentConversation && currentUserInfo" class="chat-header">
-              <h2>{{ chatStore.currentConversation }} ({{ currentUserInfo.gender }})</h2>
+              <span :class="['chat-header-accent', 'chat-header-accent-' + currentUserInfo.gender]"></span>
+              <div class="chat-header-main">
+                <h2>{{ chatStore.currentConversation }}</h2>
                 <div class="chat-header-info">
-                <span v-if="currentUserInfo">{{ currentUserInfo.age }}</span>
                   <span v-if="currentUserInfo">{{ currentUserInfo.country }}</span>
+                  <span v-if="currentUserInfo">{{ currentUserInfo.age }} · {{ currentUserInfo.gender }}</span>
+                </div>
               </div>
             </div>
             <ChatWindow />
@@ -67,7 +80,6 @@
 <script setup>
 import { onMounted, computed } from 'vue';
 import { useChatStore } from '../stores/chat';
-import { useI18n } from 'vue-i18n';
 import MenuBar from '../components/MenuBar.vue';
 import UserList from '../components/UserList.vue';
 import LoginForm from '../components/LoginForm.vue';
@@ -79,24 +91,12 @@ import HistoryView from '../components/HistoryView.vue';
 import ImprintContainer from '../components/ImprintContainer.vue';
 
 const chatStore = useChatStore();
-const { t } = useI18n();
 
 const currentUserInfo = computed(() => {
   if (!chatStore.currentConversation) return null;
   return chatStore.users.find(u => u.userName === chatStore.currentConversation);
 });
 
-function formatGender(gender) {
-  const genderMap = {
-    'F': t('gender_female'),
-    'M': t('gender_male'),
-    'P': t('gender_pair'),
-    'TF': t('gender_trans_mf'),
-    'TM': t('gender_trans_fm')
-  };
-  return genderMap[gender] || gender;
-}
-
 onMounted(async () => {
   // Versuche Session wiederherzustellen
   const sessionRestored = await chatStore.restoreSession();
@@ -123,6 +123,24 @@ onMounted(async () => {
   height: 100%;
 }
 
+.login-screen {
+  flex: 1;
+  min-height: 0;
+  padding: 28px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: auto;
+  background:
+    radial-gradient(circle at left top, rgba(61, 134, 84, 0.2), transparent 24%),
+    radial-gradient(circle at right bottom, rgba(36, 92, 58, 0.12), transparent 26%),
+    linear-gradient(180deg, rgba(231, 241, 234, 0.95) 0%, rgba(237, 242, 238, 0.96) 48%, rgba(227, 236, 229, 0.98) 100%);
+}
+
+.horizontal-box-login {
+  display: block;
+}
+
 .chat-content {
   display: flex;
   flex-direction: column;
@@ -133,62 +151,79 @@ onMounted(async () => {
 }
 
 .chat-header {
-  padding: 0.5em 1em;
+  padding: 0.7rem 1rem;
   flex-shrink: 0;
-  border-bottom: 1px solid #999;
+  border-bottom: 1px solid var(--color-border);
+  display: flex;
+  align-items: center;
+  gap: 0.85rem;
+  background: linear-gradient(180deg, rgba(225, 239, 229, 0.92) 0%, rgba(247, 250, 248, 0.9) 100%);
 }
 
-.chat-header-gender-M {
+.chat-header-accent {
-  background-color: #0066CC;
+  width: 0.6rem;
+  height: 2.4rem;
+  border-radius: 999px;
+  flex-shrink: 0;
 }
 
-.chat-header-gender-F {
+.chat-header-accent-M {
-  background-color: #FF4081;
+  background: linear-gradient(180deg, #5a94d2 0%, #467bb2 100%);
 }
 
-.chat-header-gender-P {
+.chat-header-accent-F {
-  background-color: #FFC107;
+  background: linear-gradient(180deg, #ff7eaa 0%, #d85f8c 100%);
 }
 
-.chat-header-gender-TF {
+.chat-header-accent-P {
-  background-color: #8E24AA;
+  background: linear-gradient(180deg, #e0ab46 0%, #c78a2c 100%);
 }
 
-.chat-header-gender-TM {
+.chat-header-accent-TF {
-  background-color: #90caf9;
+  background: linear-gradient(180deg, #a37ac8 0%, #8b60af 100%);
+}
+
+.chat-header-accent-TM {
+  background: linear-gradient(180deg, #79b8d0 0%, #5fa2bf 100%);
+}
+
+.chat-header-main {
+  min-width: 0;
 }
 
 .chat-header h2 {
-  margin: 0 0 0.3em 0;
+  margin: 0;
-  font-size: 1.5em;
+  font-size: 1rem;
-  color: #fff;
+  line-height: 1.2;
+  color: var(--color-text-strong);
 }
 
 .chat-header-info {
-  font-size: 0.75em;
+  margin-top: 0.18rem;
-  color: #fff;
+  font-size: 0.75rem;
+  color: var(--color-text-muted);
   display: flex;
   flex-direction: row;
-  gap: 0.8em;
+  gap: 0.8rem;
   align-items: center;
 }
 
 .error-message {
-  padding: 1em;
+  padding: 0.9rem 1rem;
-  background-color: #ffebee;
+  background-color: #fff1f1;
-  color: #c62828;
+  color: #a83f3f;
-  border: 1px solid #ef5350;
+  border: 1px solid #efc3c3;
-  margin: 1em;
+  margin: 0.9rem;
-  border-radius: 4px;
+  border-radius: 10px;
   text-align: center;
   font-weight: bold;
 }
 
 .command-table-container {
-  margin: 0.8em;
+  margin: 0.9rem;
-  border: 1px solid #ccc;
+  border: 1px solid var(--color-border);
-  border-radius: 6px;
+  border-radius: 12px;
-  background: #fff;
+  background: var(--color-surface);
   overflow: hidden;
 }
 
@@ -196,17 +231,17 @@ onMounted(async () => {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 0.6em 0.8em;
+  padding: 0.7rem 0.85rem;
-  background: #f4f6f8;
+  background: var(--color-surface-subtle);
-  border-bottom: 1px solid #ddd;
+  border-bottom: 1px solid var(--color-border);
 }
 
 .command-table-close {
-  border: 1px solid #bbb;
+  border: 1px solid var(--color-border);
-  background: #fff;
+  background: var(--color-surface);
-  padding: 0.2em 0.6em;
+  padding: 0.35rem 0.7rem;
   cursor: pointer;
-  border-radius: 4px;
+  border-radius: 8px;
 }
 
 .command-table-scroll {
@@ -222,15 +257,14 @@ onMounted(async () => {
 
 .command-table th,
 .command-table td {
-  padding: 0.45em 0.6em;
+  padding: 0.5rem 0.65rem;
-  border-bottom: 1px solid #eee;
+  border-bottom: 1px solid #edf1ee;
   text-align: left;
 }
 
 .command-table th {
-  background: #fafafa;
+  background: #f9fbfa;
   position: sticky;
   top: 0;
 }
 </style>
-

client/src/views/MockupView.vue

@@ -0,0 +1,992 @@
+<template>
+  <div class="mockup-page">
+    <header class="mockup-page-header">
+      <div>
+        <p class="mockup-page-eyebrow">SingleChat Redesign</p>
+        <h1>Mockup-Vergleich</h1>
+      </div>
+      <p class="mockup-page-copy">
+        Zwei jetzt klarer getrennte Richtungen: A bleibt kompakt und direkt, B arbeitet sichtbarer mit Farbflaechen und moderneren Layern. Beide zeigen staerkere Identifikationsfarben und eine schmalere Userliste.
+      </p>
+    </header>
+
+    <div class="mockup-compare">
+      <section class="mockup-column mockup-column-single">
+        <div class="mockup-column-header">
+          <div>
+            <p class="mockup-variant-label">Zielrichtung</p>
+            <h2>Polished Compact</h2>
+          </div>
+          <p>
+            Grundlage ist das modernere Design der zweiten Version, aber mit direkterer Sprache wie in Variante A, staerkerem Gruen im Header und einer einzeiligen, deutlich kompakteren Userliste.
+          </p>
+        </div>
+
+        <div class="mockup-shell mockup-shell-polished">
+          <header class="mockup-topbar">
+            <div class="mockup-brand">
+              <div class="mockup-brand-mark">S</div>
+              <div>
+                <p class="mockup-eyebrow">Design Preview</p>
+                <h3>SingleChat</h3>
+              </div>
+            </div>
+
+            <div class="mockup-session">
+              <span class="mockup-chip">09:24 online</span>
+              <span class="mockup-chip mockup-chip-accent">Inbox 3</span>
+            </div>
+          </header>
+
+          <nav class="mockup-toolbar">
+            <button class="mockup-tool-button">Chat</button>
+            <button class="mockup-tool-button mockup-tool-button-active">Suche</button>
+            <button class="mockup-tool-button">Postfach</button>
+            <button class="mockup-tool-button">Verlauf</button>
+            <div class="mockup-toolbar-meta">
+              <span>Mara aktiv</span>
+              <span>04:18</span>
+            </div>
+          </nav>
+
+          <div class="mockup-layout">
+            <aside class="mockup-sidebar">
+              <div class="mockup-sidebar-header">
+                <h4>Online</h4>
+                <span>2.184</span>
+              </div>
+
+              <div class="mockup-user-list">
+                <button class="mockup-user mockup-user-active">
+                  <span class="mockup-flag">DE</span>
+                  <span class="mockup-user-copy">
+                    <strong>Mara</strong>
+                    <em>27 · F</em>
+                  </span>
+                </button>
+
+                <button class="mockup-user">
+                  <span class="mockup-flag">NL</span>
+                  <span class="mockup-user-copy">
+                    <strong>AlexWave</strong>
+                    <em>29 · TM</em>
+                  </span>
+                </button>
+
+                <button class="mockup-user">
+                  <span class="mockup-flag">CH</span>
+                  <span class="mockup-user-copy">
+                    <strong>couple.sun</strong>
+                    <em>31 · P</em>
+                  </span>
+                </button>
+
+                <button class="mockup-user">
+                  <span class="mockup-flag">FR</span>
+                  <span class="mockup-user-copy">
+                    <strong>lina.n</strong>
+                    <em>25 · TF</em>
+                  </span>
+                </button>
+              </div>
+            </aside>
+
+            <main class="mockup-main">
+              <section class="mockup-chat-header">
+                <div class="mockup-chat-identity">
+                  <span class="mockup-chat-accent mockup-chat-accent-f"></span>
+                  <div>
+                    <h4>Mara</h4>
+                    <p>27 Jahre · Deutschland</p>
+                  </div>
+                </div>
+                <div class="mockup-chat-meta">
+                  <span class="mockup-badge">Online</span>
+                </div>
+              </section>
+
+              <section class="mockup-chat-window">
+                <article class="mockup-message mockup-message-other">
+                  <p class="mockup-message-author">Mara</p>
+                  <div class="mockup-bubble">
+                    Hey, dein Profil ist mir gerade in der Liste aufgefallen.
+                  </div>
+                  <time>14:02</time>
+                </article>
+
+                <article class="mockup-message mockup-message-self">
+                  <p class="mockup-message-author">Du</p>
+                  <div class="mockup-bubble">
+                    Die Farben wirken ruhiger und die Flaechen deutlich geordneter.
+                  </div>
+                  <time>14:03</time>
+                </article>
+
+                <article class="mockup-message mockup-message-other">
+                  <p class="mockup-message-author">Mara</p>
+                  <div class="mockup-bubble">
+                    Ja, es bleibt vertraut, aber fuehlt sich praeziser an.
+                  </div>
+                  <time>14:04</time>
+                </article>
+              </section>
+
+          <section class="mockup-input-bar">
+            <button class="mockup-icon-button" aria-label="Smileys">:-)</button>
+            <input type="text" value="Nachricht senden oder /Befehl eingeben" readonly />
+            <button class="mockup-icon-button" aria-label="Bild">+</button>
+            <button class="mockup-send-button">Senden</button>
+          </section>
+
+          <footer class="mockup-footer">
+            <a href="#">Impressum</a>
+            <a href="#">Datenschutz</a>
+          </footer>
+        </main>
+      </div>
+        </div>
+
+        <div class="mockup-mobile-device mockup-mobile-device-polished">
+          <div class="mockup-mobile-top">
+            <span>SingleChat</span>
+            <span class="mockup-mobile-pill">3</span>
+          </div>
+          <div class="mockup-mobile-chat-header">
+            <strong>Mara</strong>
+            <small>27 · DE</small>
+          </div>
+          <div class="mockup-mobile-messages">
+            <div class="mockup-mobile-bubble mockup-mobile-bubble-other">Kompakter, wirkt moderner.</div>
+            <div class="mockup-mobile-bubble mockup-mobile-bubble-self">Genau das ist hier die Richtung.</div>
+          </div>
+          <div class="mockup-mobile-input">
+            <span>Nachricht...</span>
+            <button>Senden</button>
+          </div>
+        </div>
+      </section>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.mockup-page {
+  min-height: 100vh;
+  overflow: auto;
+  background:
+    radial-gradient(circle at top left, rgba(61, 134, 84, 0.14), transparent 26%),
+    linear-gradient(180deg, #f6f8f6 0%, #edf1ee 100%);
+  color: #18201b;
+  padding: 28px;
+}
+
+.mockup-page-header {
+  max-width: 1360px;
+  margin: 0 auto 20px;
+  display: flex;
+  justify-content: space-between;
+  gap: 20px;
+  align-items: flex-end;
+}
+
+.mockup-page-eyebrow,
+.mockup-variant-label,
+.mockup-eyebrow {
+  margin: 0 0 4px;
+  font-size: 11px;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: #6a766e;
+}
+
+.mockup-page-header h1,
+.mockup-column-header h2,
+.mockup-brand h3,
+.mockup-sidebar-header h4,
+.mockup-chat-identity h4 {
+  margin: 0;
+}
+
+.mockup-page-header h1 {
+  font-size: 28px;
+}
+
+.mockup-page-copy {
+  max-width: 620px;
+  margin: 0;
+  font-size: 14px;
+  line-height: 1.5;
+  color: #5d695f;
+}
+
+.mockup-compare {
+  max-width: 1360px;
+  margin: 0 auto;
+  display: block;
+}
+
+.mockup-column {
+  min-width: 0;
+}
+
+.mockup-column-single {
+  max-width: 1100px;
+}
+
+.mockup-column-header {
+  margin-bottom: 14px;
+  padding: 0 4px;
+}
+
+.mockup-column-header h2 {
+  font-size: 22px;
+  margin-bottom: 6px;
+}
+
+.mockup-column-header p:last-child {
+  margin: 0;
+  font-size: 14px;
+  line-height: 1.5;
+  color: #5d695f;
+}
+
+.mockup-shell {
+  overflow: hidden;
+}
+
+.mockup-shell-calm {
+  border: 1px solid #d7dfd9;
+  border-radius: 18px;
+  background: rgba(255, 255, 255, 0.94);
+  box-shadow: 0 24px 60px rgba(31, 50, 39, 0.08);
+}
+
+.mockup-shell-polished {
+  border: 1px solid rgba(201, 213, 203, 0.9);
+  border-radius: 20px;
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(247, 250, 248, 0.94) 100%);
+  box-shadow:
+    0 28px 70px rgba(31, 50, 39, 0.1),
+    inset 0 1px 0 rgba(255, 255, 255, 0.7);
+}
+
+.mockup-topbar {
+  height: 58px;
+  padding: 0 16px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border-bottom: 1px solid #dde5df;
+}
+
+.mockup-shell-calm .mockup-topbar {
+  background: rgba(255, 255, 255, 0.88);
+}
+
+.mockup-shell-polished .mockup-topbar {
+  background:
+    linear-gradient(180deg, rgba(208, 232, 216, 0.98) 0%, rgba(235, 245, 238, 0.94) 55%, rgba(247, 250, 248, 0.92) 100%);
+}
+
+.mockup-brand {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.mockup-brand-mark {
+  width: 32px;
+  height: 32px;
+  border-radius: 9px;
+  display: grid;
+  place-items: center;
+  background: linear-gradient(180deg, #3d8654 0%, #245c3a 100%);
+  color: #fff;
+  font-weight: 700;
+}
+
+.mockup-shell-polished .mockup-brand-mark {
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
+}
+
+.mockup-brand h3 {
+  font-size: 18px;
+  line-height: 1;
+}
+
+.mockup-session {
+  display: flex;
+  gap: 8px;
+}
+
+.mockup-chip {
+  display: inline-flex;
+  align-items: center;
+  min-height: 26px;
+  padding: 0 10px;
+  border-radius: 999px;
+  font-size: 11px;
+  color: #4e5a52;
+}
+
+.mockup-shell-calm .mockup-chip {
+  background: #eef2ef;
+  border: 1px solid #dde5df;
+}
+
+.mockup-shell-calm .mockup-chip-accent {
+  background: #e7f1ea;
+  color: #245c3a;
+  border-color: #c8dbc9;
+}
+
+.mockup-shell-polished .mockup-chip {
+  background: rgba(241, 245, 242, 0.95);
+  border: 1px solid #d8e0da;
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65);
+}
+
+.mockup-shell-polished .mockup-chip-accent {
+  background: linear-gradient(180deg, #edf7f0 0%, #e1efe5 100%);
+  color: #245c3a;
+  border-color: #cadecf;
+}
+
+.mockup-toolbar {
+  min-height: 42px;
+  padding: 5px 12px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  border-bottom: 1px solid #dde5df;
+}
+
+.mockup-shell-calm .mockup-toolbar {
+  background: #f8faf8;
+}
+
+.mockup-shell-polished .mockup-toolbar {
+  background: rgba(247, 250, 248, 0.92);
+}
+
+.mockup-tool-button {
+  height: 30px;
+  padding: 0 12px;
+  border-radius: 8px;
+  border: 1px solid transparent;
+  background: transparent;
+  color: #425047;
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.mockup-shell-calm .mockup-tool-button-active {
+  background: #e7f1ea;
+  border-color: #c8dbc9;
+  color: #245c3a;
+}
+
+.mockup-shell-polished .mockup-tool-button-active {
+  background: linear-gradient(180deg, #dceee1 0%, #cfe6d6 100%);
+  border-color: #b8d4bf;
+  color: #1f4f32;
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
+}
+
+.mockup-toolbar-meta {
+  margin-left: auto;
+  display: flex;
+  gap: 16px;
+  font-size: 11px;
+  color: #627067;
+}
+
+.mockup-layout {
+  display: grid;
+  grid-template-columns: 188px minmax(0, 1fr);
+  min-height: 620px;
+}
+
+.mockup-sidebar {
+  padding: 10px 8px;
+  border-right: 1px solid #dde5df;
+}
+
+.mockup-shell-calm .mockup-sidebar {
+  background: #f7f9f7;
+}
+
+.mockup-shell-polished .mockup-sidebar {
+  background:
+    linear-gradient(180deg, rgba(247, 250, 247, 0.95) 0%, rgba(242, 246, 243, 0.92) 100%);
+}
+
+.mockup-sidebar-header {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  margin-bottom: 12px;
+}
+
+.mockup-sidebar-header h4 {
+  font-size: 15px;
+}
+
+.mockup-sidebar-header span {
+  font-size: 12px;
+  color: #68756d;
+}
+
+.mockup-user-list {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.mockup-user {
+  width: 100%;
+  min-height: 30px;
+  border-radius: 8px;
+  display: grid;
+  grid-template-columns: 28px minmax(0, 1fr);
+  gap: 6px;
+  align-items: center;
+  padding: 4px 6px;
+  text-align: left;
+}
+
+.mockup-shell-calm .mockup-user {
+  border: 1px solid transparent;
+  background: transparent;
+}
+
+.mockup-shell-calm .mockup-user-active {
+  background: #ffffff;
+  border-color: #d9e2db;
+  box-shadow: 0 6px 14px rgba(35, 54, 42, 0.05);
+}
+
+.mockup-shell-polished .mockup-user {
+  border: 1px solid rgba(217, 225, 218, 0.8);
+  background: rgba(255, 255, 255, 0.7);
+}
+
+.mockup-shell-polished .mockup-user-active {
+  background: linear-gradient(180deg, rgba(236, 246, 239, 0.98) 0%, rgba(226, 239, 231, 0.96) 100%);
+  box-shadow:
+    0 8px 18px rgba(35, 54, 42, 0.06),
+    inset 0 1px 0 rgba(255, 255, 255, 0.75);
+}
+
+.mockup-user-accent-f {
+  background: #d85f8c;
+}
+
+.mockup-user-accent-m {
+  background: #467bb2;
+}
+
+.mockup-user-accent-p {
+  background: #c78a2c;
+}
+
+.mockup-user-accent-tf {
+  background: #8b60af;
+}
+
+.mockup-user-accent-tm {
+  background: #5fa2bf;
+}
+
+.mockup-flag {
+  width: 28px;
+  height: 20px;
+  border-radius: 5px;
+  display: grid;
+  place-items: center;
+  font-size: 11px;
+  font-weight: 700;
+  color: #506057;
+}
+
+.mockup-shell-calm .mockup-flag {
+  background: #e9eeea;
+  border: 1px solid #d7dfd9;
+}
+
+.mockup-shell-polished .mockup-flag {
+  background: linear-gradient(180deg, #f0f4f1 0%, #e7ede8 100%);
+  border: 1px solid #d5ded7;
+}
+
+.mockup-user-copy {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+}
+
+.mockup-user-copy strong {
+  font-size: 12px;
+  font-weight: 600;
+  color: #1c251f;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.mockup-user-copy em {
+  font-style: normal;
+  font-size: 11px;
+  font-weight: 600;
+  color: #536159;
+  text-align: right;
+  white-space: nowrap;
+}
+
+.mockup-main {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.mockup-shell-calm .mockup-main {
+  background: linear-gradient(180deg, #fbfcfb 0%, #f4f7f4 100%);
+}
+
+.mockup-shell-polished .mockup-main {
+  background:
+    radial-gradient(circle at top right, rgba(61, 134, 84, 0.08), transparent 26%),
+    linear-gradient(180deg, #fbfdfb 0%, #f3f7f4 100%);
+}
+
+.mockup-chat-header {
+  min-height: 68px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 14px 20px;
+  border-bottom: 1px solid #dde5df;
+}
+
+.mockup-shell-calm .mockup-chat-header {
+  background: rgba(255, 255, 255, 0.7);
+}
+
+.mockup-shell-polished .mockup-chat-header {
+  background:
+    linear-gradient(180deg, rgba(235, 244, 237, 0.9) 0%, rgba(248, 251, 248, 0.8) 100%);
+}
+
+.mockup-chat-identity {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+}
+
+.mockup-chat-accent {
+  width: 10px;
+  height: 38px;
+  border-radius: 999px;
+}
+
+.mockup-chat-accent-f {
+  background: linear-gradient(180deg, #ff6f9f 0%, #d85f8c 100%);
+}
+
+.mockup-chat-identity h4 {
+  margin-bottom: 4px;
+  font-size: 18px;
+}
+
+.mockup-chat-identity p {
+  margin: 0;
+  font-size: 13px;
+  color: #627067;
+}
+
+.mockup-badge {
+  display: inline-flex;
+  align-items: center;
+  min-height: 28px;
+  padding: 0 10px;
+  border-radius: 999px;
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.mockup-shell-calm .mockup-badge {
+  background: #edf5ef;
+  border: 1px solid #d3e3d5;
+  color: #2f6f46;
+}
+
+.mockup-shell-polished .mockup-badge {
+  background: linear-gradient(180deg, #e4f2e8 0%, #d4e7da 100%);
+  border: 1px solid #c0d7c7;
+  color: #2a6440;
+}
+
+.mockup-chat-window {
+  flex: 1;
+  min-height: 0;
+  padding: 18px 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.mockup-message {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  max-width: 72%;
+}
+
+.mockup-message-self {
+  align-self: flex-end;
+}
+
+.mockup-message-other {
+  align-self: flex-start;
+}
+
+.mockup-message-system {
+  align-self: center;
+  max-width: 100%;
+}
+
+.mockup-message-author,
+.mockup-message time {
+  font-size: 11px;
+  color: #748077;
+}
+
+.mockup-bubble {
+  padding: 10px 12px;
+  border-radius: 10px;
+  line-height: 1.45;
+  font-size: 14px;
+}
+
+.mockup-shell-calm .mockup-bubble {
+  border: 1px solid #dce3de;
+  background: #ffffff;
+}
+
+.mockup-shell-calm .mockup-message-self .mockup-bubble {
+  background: #edf5ef;
+  border-color: #d4e3d7;
+}
+
+.mockup-shell-polished .mockup-bubble {
+  border: 1px solid rgba(217, 226, 219, 0.9);
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(246, 250, 247, 0.96) 100%);
+  box-shadow: 0 10px 18px rgba(35, 54, 42, 0.05);
+}
+
+.mockup-shell-polished .mockup-message-self .mockup-bubble {
+  background: linear-gradient(180deg, #dff0e4 0%, #d2e7d9 100%);
+  border-color: #c5dbcce8;
+}
+
+.mockup-input-bar {
+  min-height: 68px;
+  padding: 12px 16px;
+  display: grid;
+  grid-template-columns: 40px minmax(0, 1fr) 40px 96px;
+  gap: 8px;
+  border-top: 1px solid #dde5df;
+}
+
+.mockup-shell-calm .mockup-input-bar {
+  background: rgba(255, 255, 255, 0.9);
+}
+
+.mockup-shell-polished .mockup-input-bar {
+  background:
+    linear-gradient(180deg, rgba(238, 245, 240, 0.92) 0%, rgba(247, 250, 248, 0.88) 100%);
+}
+
+.mockup-footer {
+  min-height: 34px;
+  padding: 0 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 18px;
+  border-top: 1px solid #dde5df;
+  background: rgba(255, 255, 255, 0.94);
+  flex-shrink: 0;
+}
+
+.mockup-footer a {
+  font-size: 11px;
+  font-weight: 500;
+  color: #54635a;
+  text-decoration: none;
+}
+
+.mockup-input-bar input {
+  width: 100%;
+  height: 40px;
+  border-radius: 8px;
+  padding: 0 12px;
+  color: #647068;
+}
+
+.mockup-shell-calm .mockup-input-bar input {
+  border: 1px solid #d7dfd9;
+  background: #f9fbf9;
+}
+
+.mockup-shell-polished .mockup-input-bar input {
+  border: 1px solid #d7dfd9;
+  background: linear-gradient(180deg, #fcfefc 0%, #f0f6f2 100%);
+}
+
+.mockup-icon-button,
+.mockup-send-button {
+  height: 40px;
+  border-radius: 8px;
+  font-weight: 600;
+}
+
+.mockup-shell-calm .mockup-icon-button {
+  border: 1px solid #d7dfd9;
+  background: #f7faf7;
+  color: #3f4c44;
+}
+
+.mockup-shell-polished .mockup-icon-button {
+  border: 1px solid #d7dfd9;
+  background: linear-gradient(180deg, #fdfefd 0%, #edf4ef 100%);
+  color: #3f4c44;
+}
+
+.mockup-send-button {
+  color: #fff;
+}
+
+.mockup-shell-calm .mockup-send-button {
+  border: 1px solid #2d6944;
+  background: linear-gradient(180deg, #3d8654 0%, #2f6f46 100%);
+}
+
+.mockup-shell-polished .mockup-send-button {
+  border: 1px solid #295f3d;
+  background: linear-gradient(180deg, #4a8d61 0%, #2c6240 100%);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24);
+}
+
+.mockup-mobile-device {
+  width: 300px;
+  margin-top: 18px;
+  border-radius: 28px;
+  padding: 14px;
+}
+
+.mockup-mobile-device-calm {
+  border: 1px solid #d7dfd9;
+  background: #fcfdfc;
+  box-shadow: 0 18px 40px rgba(31, 50, 39, 0.08);
+}
+
+.mockup-mobile-device-polished {
+  border: 1px solid #d7dfd9;
+  background: linear-gradient(180deg, #fefefe 0%, #f5f8f6 100%);
+  box-shadow: 0 22px 48px rgba(31, 50, 39, 0.1);
+}
+
+.mockup-mobile-top {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 10px;
+  font-size: 13px;
+  font-weight: 600;
+}
+
+.mockup-mobile-pill {
+  min-width: 24px;
+  height: 24px;
+  border-radius: 999px;
+  display: grid;
+  place-items: center;
+  background: #e7f1ea;
+  color: #245c3a;
+}
+
+.mockup-shell-calm .mockup-user:nth-child(1) {
+  background-image: linear-gradient(90deg, rgba(216, 95, 140, 0.16), transparent 72%);
+}
+
+.mockup-shell-calm .mockup-user:nth-child(2) {
+  background-image: linear-gradient(90deg, rgba(70, 123, 178, 0.14), transparent 72%);
+}
+
+.mockup-shell-calm .mockup-user:nth-child(3) {
+  background-image: linear-gradient(90deg, rgba(199, 138, 44, 0.16), transparent 72%);
+}
+
+.mockup-shell-calm .mockup-user:nth-child(4) {
+  background-image: linear-gradient(90deg, rgba(139, 96, 175, 0.14), transparent 72%);
+}
+
+.mockup-shell-polished .mockup-user:nth-child(1) {
+  background-image: linear-gradient(90deg, rgba(216, 95, 140, 0.26), rgba(255, 255, 255, 0.68) 72%);
+}
+
+.mockup-shell-polished .mockup-user:nth-child(2) {
+  background-image: linear-gradient(90deg, rgba(70, 123, 178, 0.22), rgba(255, 255, 255, 0.68) 72%);
+}
+
+.mockup-shell-polished .mockup-user:nth-child(3) {
+  background-image: linear-gradient(90deg, rgba(199, 138, 44, 0.24), rgba(255, 255, 255, 0.68) 72%);
+}
+
+.mockup-shell-polished .mockup-user:nth-child(4) {
+  background-image: linear-gradient(90deg, rgba(139, 96, 175, 0.22), rgba(255, 255, 255, 0.68) 72%);
+}
+
+.mockup-mobile-chat-header,
+.mockup-mobile-input {
+  display: grid;
+  align-items: center;
+  padding: 10px 12px;
+  border-radius: 12px;
+}
+
+.mockup-mobile-chat-header {
+  grid-template-columns: 1fr auto;
+  margin-bottom: 10px;
+}
+
+.mockup-mobile-device-calm .mockup-mobile-chat-header,
+.mockup-mobile-device-calm .mockup-mobile-input {
+  background: #f2f6f3;
+  border: 1px solid #dbe3dd;
+}
+
+.mockup-mobile-device-polished .mockup-mobile-chat-header,
+.mockup-mobile-device-polished .mockup-mobile-input {
+  background: linear-gradient(180deg, #f8fbf9 0%, #f0f5f2 100%);
+  border: 1px solid #dbe3dd;
+}
+
+.mockup-mobile-chat-header small {
+  color: #637068;
+}
+
+.mockup-mobile-messages {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  margin-bottom: 10px;
+}
+
+.mockup-mobile-bubble {
+  max-width: 82%;
+  padding: 10px 12px;
+  border-radius: 10px;
+  font-size: 13px;
+}
+
+.mockup-mobile-device-calm .mockup-mobile-bubble-other {
+  background: #fff;
+  border: 1px solid #dce3de;
+}
+
+.mockup-mobile-device-calm .mockup-mobile-bubble-self {
+  align-self: flex-end;
+  background: #edf5ef;
+  border: 1px solid #d4e3d7;
+}
+
+.mockup-mobile-device-polished .mockup-mobile-bubble-other {
+  background: linear-gradient(180deg, #ffffff 0%, #f8fbf9 100%);
+  border: 1px solid #dce3de;
+}
+
+.mockup-mobile-device-polished .mockup-mobile-bubble-self {
+  align-self: flex-end;
+  background: linear-gradient(180deg, #eff7f1 0%, #e5f0e8 100%);
+  border: 1px solid #d4e3d7;
+}
+
+.mockup-mobile-input {
+  grid-template-columns: 1fr auto;
+  gap: 8px;
+  color: #68756d;
+  font-size: 13px;
+}
+
+.mockup-mobile-input button {
+  height: 32px;
+  padding: 0 12px;
+  border: none;
+  border-radius: 8px;
+  background: #2f6f46;
+  color: #fff;
+  font-size: 12px;
+  font-weight: 600;
+}
+
+@media (max-width: 820px) {
+  .mockup-page {
+    padding: 16px;
+  }
+
+  .mockup-page-header {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .mockup-layout {
+    grid-template-columns: 1fr;
+  }
+
+  .mockup-sidebar {
+    border-right: none;
+    border-bottom: 1px solid #dde5df;
+  }
+
+  .mockup-toolbar {
+    flex-wrap: wrap;
+  }
+
+  .mockup-toolbar-meta {
+    width: 100%;
+    margin-left: 0;
+  }
+}
+
+@media (max-width: 640px) {
+  .mockup-topbar {
+    height: auto;
+    padding: 14px;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 10px;
+  }
+
+  .mockup-session {
+    flex-wrap: wrap;
+  }
+
+  .mockup-input-bar {
+    grid-template-columns: 40px minmax(0, 1fr) 84px;
+  }
+
+  .mockup-input-bar .mockup-icon-button:last-of-type {
+    display: none;
+  }
+
+  .mockup-message {
+    max-width: 100%;
+  }
+}
+</style>

server/routes.js

@@ -55,6 +55,39 @@ export function setupRoutes(app, __dirname) {
     res.json({ status: 'ok', timestamp: new Date().toISOString() });
   });
 
+  app.post('/api/logout', (req, res) => {
+    try {
+      const sessionId = req.sessionID;
+      const clientsMap = getClientsMap();
+      const client = clientsMap.get(sessionId);
+
+      if (client?.socket) {
+        try {
+          client.socket.disconnect(true);
+        } catch (error) {
+          console.warn('Logout: Socket konnte nicht sauber getrennt werden:', error);
+        }
+      }
+
+      if (sessionId) {
+        clientsMap.delete(sessionId);
+      }
+
+      req.session.destroy((error) => {
+        if (error) {
+          console.error('Logout: Session konnte nicht zerstört werden:', error);
+          return res.status(500).json({ success: false });
+        }
+
+        res.clearCookie('connect.sid');
+        res.json({ success: true });
+      });
+    } catch (error) {
+      console.error('Logout-Fehler:', error);
+      res.status(500).json({ success: false });
+    }
+  });
+  
   // Bild-Upload-Endpoint
   app.post('/api/upload-image', upload.single('image'), (req, res) => {
     try {
@@ -385,4 +418,3 @@ export function setupRoutes(app, __dirname) {
     }
   });
 }
-