Add Ratgeber section with new routes and links

- Introduced a new "Ratgeber" link in ImprintContainer.vue for better user navigation.
- Added multiple routes for the Ratgeber section, including GuideHubView, GuideFirstMessageView, GuideProfileView, GuideSafetyView, and GuideRedFlagsView, enhancing content accessibility.
- Implemented SEO metadata for the new routes to improve search engine visibility and user engagement.

These changes collectively enhance the site's informational resources and improve navigation for users seeking guidance on chat-related topics.

client/src/views/GuideFirstMessageView.vue

@@ -0,0 +1,82 @@
+<template>
+  <div class="chat-container">
+    <header class="header">
+      <router-link to="/" class="app-brand app-brand-link">
+        <span class="app-brand-mark">S</span>
+        <div class="app-brand-copy">
+          <span class="app-brand-eyebrow">SingleChat</span>
+          <h1>Ratgeber</h1>
+        </div>
+      </router-link>
+      <HeaderAdBanner />
+    </header>
+
+    <main class="content-page">
+      <h2>Die erste Nachricht im Chat: einfach und wirksam</h2>
+      <p>
+        Der Einstieg entscheidet oft, ob aus einem Match wirklich ein Gespraech wird. Gute erste Nachrichten sind kurz,
+        freundlich und konkret. Vermeide austauschbare Einzeiler und beziehe dich auf ein Detail aus dem Profil.
+      </p>
+
+      <h3>Ein guter Aufbau in drei Schritten</h3>
+      <ol>
+        <li>Begruessung mit Namen oder Nickname.</li>
+        <li>Eine konkrete Beobachtung oder Frage, die nicht kopiert wirkt.</li>
+        <li>Ein lockerer Abschluss, der eine Antwort leicht macht.</li>
+      </ol>
+
+      <h3>Beispiele fuer bessere erste Nachrichten</h3>
+      <p>
+        Statt „Hi, wie gehts?“ besser: „Hi Lara, du schreibst, dass du gerne reist - was war dein schoenster Ort in den
+        letzten zwei Jahren?“
+      </p>
+      <p>
+        Statt „Na?“ besser: „Hey Ben, dein Musikgeschmack klingt spannend. Eher ruhige Playlists oder energiegeladene
+        Tracks beim Arbeiten?“
+      </p>
+
+      <h3>Typische Fehler vermeiden</h3>
+      <ul>
+        <li>Zu lange Texte direkt am Anfang.</li>
+        <li>Zu persoenliche Fragen in der ersten Nachricht.</li>
+        <li>Mehrfaches Nachfassen ohne Antwort.</li>
+      </ul>
+
+      <p>
+        Mehr Tipps findest du auch in unserem
+        <router-link to="/ratgeber/profil-tipps">Profil-Ratgeber</router-link> und auf der Seite
+        <router-link to="/ratgeber/sicher-chatten">Sicher chatten</router-link>.
+      </p>
+    </main>
+
+    <ImprintContainer />
+  </div>
+</template>
+
+<script setup>
+import HeaderAdBanner from '../components/HeaderAdBanner.vue';
+import ImprintContainer from '../components/ImprintContainer.vue';
+</script>
+
+<style scoped>
+.content-page {
+  max-width: 980px;
+  margin: 0 auto;
+  padding: 20px 14px 36px;
+  line-height: 1.6;
+  color: #344038;
+}
+
+.content-page h2,
+.content-page h3 {
+  color: #18201b;
+}
+
+.content-page a {
+  color: #245c3a;
+}
+
+.app-brand-link {
+  text-decoration: none;
+}
+</style>