Verbesserung der Benutzeroberfläche und Inhalte für den Single Chat

client/src/components/LoginForm.vue

@@ -2,9 +2,9 @@
   <div class="landing-login">
     <section class="landing-login-intro">
       <p class="landing-login-eyebrow">YpChat</p>
-      <h2>Direkt in den Chat</h2>
+      <h2>Singles kennenlernen, privat chatten</h2>
       <p class="landing-login-copy">
-        Kompakt, schnell und ohne Umwege. Erstelle dein Profil und starte sofort eine Unterhaltung.
+        Starte kostenlos mit einem Nicknamen. Alter, Geschlecht und Land genügen, damit du passende Kontakte finden und direkt schreiben kannst.
       </p>
       <div class="landing-login-features">
         <span>Weltweiter Chat</span>
@@ -63,6 +63,30 @@
         </div>
       </form>
     </section>
+
+    <section class="landing-login-guide" aria-label="Informationen zu YpChat">
+      <h2>So funktioniert der Single Chat</h2>
+      <div class="landing-login-guide-grid">
+        <article>
+          <h3>Kurz Profil anlegen</h3>
+          <p>Wähle einen Nicknamen und gib die nötigen Basisangaben an. Eine lange Registrierung ist nicht nötig.</p>
+        </article>
+        <article>
+          <h3>Neue Kontakte finden</h3>
+          <p>Suche nach Singles und beginne private Gespräche. Bilder kannst du direkt im Chat austauschen.</p>
+        </article>
+        <article>
+          <h3>Sicher chatten</h3>
+          <p>Nutze einen Nicknamen, teile keine sensiblen Daten und blockiere oder melde Kontakte bei Bedarf.</p>
+        </article>
+      </div>
+      <p class="landing-login-guide-links">
+        <router-link to="/single-chat-ohne-anmeldung">Chat ohne Anmeldung</router-link>
+        <router-link to="/single-treff-chat">Singles kennenlernen</router-link>
+        <router-link to="/ratgeber/erste-nachricht">Tipps für die erste Nachricht</router-link>
+        <router-link to="/sicherheit">Sicher chatten</router-link>
+      </p>
+    </section>
   </div>
 </template>
 
@@ -182,6 +206,56 @@ function handleSubmit() {
 </script>
 
 <style scoped>
+.landing-login-guide {
+  grid-column: 1 / -1;
+  border: 1px solid #d7dfd9;
+  border-radius: 12px;
+  background: #ffffff;
+  padding: 18px;
+}
+
+.landing-login-guide h2,
+.landing-login-guide h3 {
+  color: #18201b;
+}
+
+.landing-login-guide h2 {
+  margin: 0 0 12px;
+}
+
+.landing-login-guide h3 {
+  margin: 0 0 6px;
+  font-size: 17px;
+}
+
+.landing-login-guide p {
+  margin: 0;
+}
+
+.landing-login-guide-grid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 14px;
+}
+
+.landing-login-guide-grid article {
+  border: 1px solid #d7dfd9;
+  border-radius: 10px;
+  padding: 14px;
+}
+
+.landing-login-guide-links {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px 16px;
+  margin-top: 16px !important;
+}
+
+.landing-login-guide-links a {
+  color: #245c3a;
+  font-weight: 700;
+}
+
 .landing-login {
   width: 80%;
   max-width: 1400px;
@@ -366,5 +440,9 @@ function handleSubmit() {
   .landing-login-intro h2 {
     font-size: 24px;
   }
+
+  .landing-login-guide-grid {
+    grid-template-columns: 1fr;
+  }
 }
 </style>

client/src/views/ChatView.vue

@@ -159,7 +159,7 @@
           <span class="app-brand-mark">Y</span>
           <div class="app-brand-copy">
             <span class="app-brand-eyebrow">YpChat</span>
-            <h1>Chat</h1>
+            <h1>Kostenloser Single Chat</h1>
           </div>
         </div>
         <HeaderAdBanner />

client/src/views/SeoLandingView.vue

@@ -39,14 +39,12 @@
       </section>
 
       <section class="support-section">
-        <h3>Passende Themen im Single Chat</h3>
+        <h3>Weitere Themen bei YPChat</h3>
         <p>
-          Viele Nutzer suchen nach einem kostenlosen Single Chat, einem Chat ohne lange Anmeldung oder einem Single Treff
-          fuer neue Kontakte. YpChat buendelt diese Einstiege auf einer Plattform: schnell starten, privat schreiben,
-          respektvoll bleiben.
+          Entdecke weitere Bereiche rund um den Chat-Einstieg, neue Kontakte und sichere Gespräche.
         </p>
         <ul>
-          <li><router-link to="/kostenloser-single-chat">Kostenloser Single Chat</router-link></li>
+          <li><router-link to="/">Chat starten</router-link></li>
           <li><router-link to="/single-chat-ohne-anmeldung">Single Chat ohne Anmeldung</router-link></li>
           <li><router-link to="/single-treff-chat">Single Treff Chat</router-link></li>
         </ul>