From 1ecf7b6ba7e0702175710943c7ac6cc4ef7f4434 Mon Sep 17 00:00:00 2001
From: "Torsten Schulz (local)" <tsschulz@gmx.net>
Date: Mon, 27 Apr 2026 14:24:42 +0200
Subject: [PATCH] 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/components/ImprintContainer.vue |   1 +
 client/src/router/index.js                 |  94 ++++++++++++++++
 client/src/views/ChatView.vue              |   2 +
 client/src/views/GuideFirstMessageView.vue |  82 ++++++++++++++
 client/src/views/GuideHubView.vue          | 118 +++++++++++++++++++++
 client/src/views/GuideProfileView.vue      |  82 ++++++++++++++
 client/src/views/GuideRedFlagsView.vue     |  74 +++++++++++++
 client/src/views/GuideSafetyView.vue       |  77 ++++++++++++++
 8 files changed, 530 insertions(+)
 create mode 100644 client/src/views/GuideFirstMessageView.vue
 create mode 100644 client/src/views/GuideHubView.vue
 create mode 100644 client/src/views/GuideProfileView.vue
 create mode 100644 client/src/views/GuideRedFlagsView.vue
 create mode 100644 client/src/views/GuideSafetyView.vue

diff --git a/client/src/components/ImprintContainer.vue b/client/src/components/ImprintContainer.vue
index 6361b49..62211b9 100644
--- a/client/src/components/ImprintContainer.vue
+++ b/client/src/components/ImprintContainer.vue
@@ -1,6 +1,7 @@
 <template>
   <div class="imprint-container">
     <a href="/partners">Partner</a>
+    <a href="/ratgeber">Ratgeber</a>
     <a href="/faq">FAQ</a>
     <a href="/regeln">Regeln</a>
     <a href="/sicherheit">Sicherheit</a>
diff --git a/client/src/router/index.js b/client/src/router/index.js
index 2dc7d07..e9086a8 100644
--- a/client/src/router/index.js
+++ b/client/src/router/index.js
@@ -6,6 +6,11 @@ import FeedbackView from '../views/FeedbackView.vue';
 import FaqView from '../views/FaqView.vue';
 import RulesView from '../views/RulesView.vue';
 import SafetyView from '../views/SafetyView.vue';
+import GuideHubView from '../views/GuideHubView.vue';
+import GuideFirstMessageView from '../views/GuideFirstMessageView.vue';
+import GuideProfileView from '../views/GuideProfileView.vue';
+import GuideSafetyView from '../views/GuideSafetyView.vue';
+import GuideRedFlagsView from '../views/GuideRedFlagsView.vue';
 
 const SITE_URL = 'https://www.ypchat.net';
 const DEFAULT_IMAGE = `${SITE_URL}/static/favicon.png`;
@@ -137,6 +142,15 @@ const safetySchema = {
   inLanguage: 'de-DE'
 };
 
+const guideHubSchema = {
+  '@context': 'https://schema.org',
+  '@type': 'CollectionPage',
+  name: 'Ratgeber - SingleChat',
+  url: `${SITE_URL}/ratgeber`,
+  description: 'Ratgeber mit Tipps zu erster Nachricht, Profilgestaltung, Datenschutz und sicheren Gespraechen im Single Chat.',
+  inLanguage: 'de-DE'
+};
+
 const routes = [
   {
     path: '/',
@@ -234,6 +248,86 @@ const routes = [
       schema: safetySchema
     }
   },
+  {
+    path: '/ratgeber',
+    name: 'ratgeber',
+    component: GuideHubView,
+    meta: {
+      title: 'Ratgeber fuer privaten Single Chat - SingleChat',
+      description: 'Praxisnahe Ratgeberartikel zu Chat-Einstieg, Profiloptimierung, Sicherheit und Red Flags im Online-Chat.',
+      keywords: 'chat ratgeber, single chat tipps, profil tipps, sicher chatten, online chat red flags',
+      ogTitle: 'Ratgeber fuer privaten Single Chat - SingleChat',
+      ogDescription: 'Hilfreiche Leitfaeden fuer bessere Gespraeche und mehr Sicherheit im Chat.',
+      ogType: 'website',
+      image: DEFAULT_IMAGE,
+      robots: 'index, follow, max-image-preview:large, max-snippet:-1, max-video-preview:-1',
+      schema: guideHubSchema
+    }
+  },
+  {
+    path: '/ratgeber/erste-nachricht',
+    name: 'ratgeber-erste-nachricht',
+    component: GuideFirstMessageView,
+    meta: {
+      title: 'Die erste Nachricht im Chat - Tipps & Beispiele',
+      description: 'So gelingt die erste Nachricht im Single Chat: konkrete Beispiele, typische Fehler und einfache Vorlagen.',
+      keywords: 'erste nachricht chat, anschreiben tipps, chat beispiele, single chat einstieg',
+      ogTitle: 'Die erste Nachricht im Chat - Tipps & Beispiele',
+      ogDescription: 'Konkrete Beispiele fuer einen natuerlichen und respektvollen Chat-Einstieg.',
+      ogType: 'article',
+      image: DEFAULT_IMAGE,
+      robots: 'index, follow, max-image-preview:large, max-snippet:-1, max-video-preview:-1',
+      schema: null
+    }
+  },
+  {
+    path: '/ratgeber/profil-tipps',
+    name: 'ratgeber-profil-tipps',
+    component: GuideProfileView,
+    meta: {
+      title: 'Profil verbessern fuer bessere Chats - SingleChat',
+      description: 'Verbessere dein Chat-Profil mit klaren, ehrlichen Angaben und starte leichter passende Gespraeche.',
+      keywords: 'profil tipps chat, online profil verbessern, single chat profil',
+      ogTitle: 'Profil verbessern fuer bessere Chats - SingleChat',
+      ogDescription: 'Einfache Schritte fuer ein besseres Profil und passendere Unterhaltungen.',
+      ogType: 'article',
+      image: DEFAULT_IMAGE,
+      robots: 'index, follow, max-image-preview:large, max-snippet:-1, max-video-preview:-1',
+      schema: null
+    }
+  },
+  {
+    path: '/ratgeber/sicher-chatten',
+    name: 'ratgeber-sicher-chatten',
+    component: GuideSafetyView,
+    meta: {
+      title: 'Sicher chatten und Daten schuetzen - SingleChat',
+      description: 'Datenschutz-Tipps fuer anonymes Chatten: Welche Informationen du teilen kannst und welche nicht.',
+      keywords: 'sicher chatten, datenschutz chat, anonym chat tipps',
+      ogTitle: 'Sicher chatten und Daten schuetzen - SingleChat',
+      ogDescription: 'Praktische Regeln fuer mehr Sicherheit und Privatsphaere im Online-Chat.',
+      ogType: 'article',
+      image: DEFAULT_IMAGE,
+      robots: 'index, follow, max-image-preview:large, max-snippet:-1, max-video-preview:-1',
+      schema: null
+    }
+  },
+  {
+    path: '/ratgeber/red-flags',
+    name: 'ratgeber-red-flags',
+    component: GuideRedFlagsView,
+    meta: {
+      title: 'Red Flags im Online-Chat erkennen - SingleChat',
+      description: 'Warnzeichen bei Spam und Manipulation im Chat erkennen und richtig reagieren.',
+      keywords: 'red flags chat, online chat sicherheit, betrug chat erkennen',
+      ogTitle: 'Red Flags im Online-Chat erkennen - SingleChat',
+      ogDescription: 'Fruehe Warnsignale im Chat erkennen und sich wirksam schuetzen.',
+      ogType: 'article',
+      image: DEFAULT_IMAGE,
+      robots: 'index, follow, max-image-preview:large, max-snippet:-1, max-video-preview:-1',
+      schema: null
+    }
+  },
   {
     path: '/mockup-redesign',
     name: 'mockup-redesign',
diff --git a/client/src/views/ChatView.vue b/client/src/views/ChatView.vue
index 1ee1429..6a6cf6e 100644
--- a/client/src/views/ChatView.vue
+++ b/client/src/views/ChatView.vue
@@ -129,6 +129,7 @@
             <h1>Chat</h1>
           </div>
         </div>
+        <HeaderAdBanner />
       </header>
       <div class="horizontal-box horizontal-box-login">
         <div class="content login-content-shell">
@@ -154,6 +155,7 @@ import SearchView from '../components/SearchView.vue';
 import InboxView from '../components/InboxView.vue';
 import HistoryView from '../components/HistoryView.vue';
 import ImprintContainer from '../components/ImprintContainer.vue';
+import HeaderAdBanner from '../components/HeaderAdBanner.vue';
 
 const chatStore = useChatStore();
 
diff --git a/client/src/views/GuideFirstMessageView.vue b/client/src/views/GuideFirstMessageView.vue
new file mode 100644
index 0000000..cc48ef2
--- /dev/null
+++ b/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>
diff --git a/client/src/views/GuideHubView.vue b/client/src/views/GuideHubView.vue
new file mode 100644
index 0000000..15512c7
--- /dev/null
+++ b/client/src/views/GuideHubView.vue
@@ -0,0 +1,118 @@
+<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>Ratgeber: Sicher und entspannt chatten</h2>
+      <p>
+        In unserem Ratgeber findest du praxisnahe Tipps rund um privaten Chat, Profilgestaltung und digitale Sicherheit.
+        Alle Inhalte sind speziell fuer SingleChat-Nutzer geschrieben und werden laufend erweitert.
+      </p>
+      <p>
+        Wenn du neu im Chat bist, starte am besten mit dem Leitfaden zur ersten Unterhaltung und arbeite dich dann zu
+        den Themen Datenschutz, Profilqualitaet und respektvolle Kommunikation vor.
+      </p>
+
+      <section class="guide-grid">
+        <article class="guide-card">
+          <h3><router-link to="/ratgeber/erste-nachricht">Die erste Nachricht im Chat</router-link></h3>
+          <p>
+            Konkrete Formulierungen, typische Fehler und ein einfacher Aufbau, mit dem du natuerlich ins Gespraech
+            kommst.
+          </p>
+        </article>
+        <article class="guide-card">
+          <h3><router-link to="/ratgeber/profil-tipps">Profil verbessern in 10 Minuten</router-link></h3>
+          <p>
+            So waehlen Nutzer Nickname, Alter und Selbstbeschreibung so, dass sie passende Kontakte statt Zufallstreffer
+            erhalten.
+          </p>
+        </article>
+        <article class="guide-card">
+          <h3><router-link to="/ratgeber/sicher-chatten">Sicher chatten und Daten schuetzen</router-link></h3>
+          <p>
+            Datenschutz im Alltag: welche Informationen du teilen kannst und was du besser nie im Chat schreiben solltest.
+          </p>
+        </article>
+        <article class="guide-card">
+          <h3><router-link to="/ratgeber/red-flags">Red Flags im Online-Chat erkennen</router-link></h3>
+          <p>
+            Fruehe Warnzeichen bei Spam, Manipulation und Betrugsversuchen inklusive klarer Reaktionsempfehlungen.
+          </p>
+        </article>
+      </section>
+    </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: 1020px;
+  margin: 0 auto;
+  padding: 20px 14px 36px;
+  line-height: 1.6;
+  color: #344038;
+}
+
+.content-page h2 {
+  margin: 0 0 10px;
+  color: #18201b;
+}
+
+.guide-grid {
+  margin-top: 16px;
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 14px;
+}
+
+.guide-card {
+  border: 1px solid #d7dfd9;
+  border-radius: 12px;
+  background: #ffffff;
+  padding: 14px;
+}
+
+.guide-card h3 {
+  margin: 0 0 6px;
+}
+
+.guide-card p {
+  margin: 0;
+}
+
+.guide-card a {
+  color: #1f6e43;
+  text-decoration: none;
+}
+
+.guide-card a:hover {
+  text-decoration: underline;
+}
+
+.app-brand-link {
+  text-decoration: none;
+}
+
+@media (max-width: 760px) {
+  .guide-grid {
+    grid-template-columns: 1fr;
+  }
+}
+</style>
diff --git a/client/src/views/GuideProfileView.vue b/client/src/views/GuideProfileView.vue
new file mode 100644
index 0000000..e0b19c4
--- /dev/null
+++ b/client/src/views/GuideProfileView.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>Profil verbessern in 10 Minuten</h2>
+      <p>
+        Ein gutes Profil muss nicht lang sein. Entscheidend ist, dass andere Nutzer schnell erkennen, wer du bist und
+        wie man mit dir ins Gespraech kommt. Schon kleine Anpassungen helfen, passendere Unterhaltungen zu starten.
+      </p>
+
+      <h3>1) Klarer, neutraler Nickname</h3>
+      <p>
+        Vermeide beleidigende Begriffe, reine Zahlencodes oder provozierende Namen. Ein klarer Nickname wirkt
+        vertrauenswuerdig und erleichtert den Einstieg.
+      </p>
+
+      <h3>2) Realistische Angaben zu Alter und Interessen</h3>
+      <p>
+        Ehrliche Angaben verbessern die Treffer in der Suche. Wer Alter, Interessen und Gespraechsthemen sauber angibt,
+        bekommt haeufiger Antworten mit echtem Bezug.
+      </p>
+
+      <h3>3) Einladende erste Formulierung</h3>
+      <p>
+        Eine kurze Profilzeile wie „Mag Musik, Spaziergaenge und gute Gespräche ueber Alltag und Reisen“ gibt direkt
+        einen Anknuepfungspunkt.
+      </p>
+
+      <h3>4) Sicherheit immer mitdenken</h3>
+      <p>
+        Keine privaten Kontaktdaten im Profil und keine Hinweise auf Adresse, Arbeitgeber oder eindeutige Tagesroutinen.
+        Details zur Privatsphaere findest du unter
+        <router-link to="/ratgeber/sicher-chatten">Sicher chatten</router-link>.
+      </p>
+
+      <p>
+        Fuer konkrete Einstiegsbeispiele lohnt sich unser Leitfaden
+        <router-link to="/ratgeber/erste-nachricht">Die erste Nachricht im Chat</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>
diff --git a/client/src/views/GuideRedFlagsView.vue b/client/src/views/GuideRedFlagsView.vue
new file mode 100644
index 0000000..de8a69d
--- /dev/null
+++ b/client/src/views/GuideRedFlagsView.vue
@@ -0,0 +1,74 @@
+<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>Red Flags im Online-Chat erkennen</h2>
+      <p>
+        Nicht jede ungewoehnliche Nachricht ist automatisch ein Problem. Es gibt aber klare Warnsignale, die du ernst
+        nehmen solltest. Je frueher du sie erkennst, desto besser schuetzt du dich.
+      </p>
+
+      <h3>Hauefige Red Flags</h3>
+      <ul>
+        <li>Sehr schnelle emotionale Naehe ohne echten Austausch.</li>
+        <li>Widerspruechliche Angaben zu Alter, Wohnort oder Alltag.</li>
+        <li>Drang, den Chat sofort auf externe Messenger zu verlagern.</li>
+        <li>Anfragen zu Geld, Gutscheinen oder Zahlungsdiensten.</li>
+        <li>Druck durch Schuldgefuehle („Wenn du mich magst, dann ...“).</li>
+      </ul>
+
+      <h3>Was du konkret tun kannst</h3>
+      <p>
+        Stelle Rueckfragen zu unklaren Aussagen. Bleiben Antworten ausweichend oder aggressiv, beende das Gespraech.
+        Blockieren ist kein unfreundlicher Akt, sondern ein legitimer Selbstschutz.
+      </p>
+
+      <h3>Bei Unsicherheit</h3>
+      <p>
+        Wenn du unsicher bist, teile keine persoenlichen Daten und warte mit weiterem Vertrauen. Nutze unsere Hinweise zu
+        <router-link to="/ratgeber/sicher-chatten">Sicher chatten</router-link> und melde auffaellige Profile ueber
+        <router-link to="/feedback">Feedback</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>
diff --git a/client/src/views/GuideSafetyView.vue b/client/src/views/GuideSafetyView.vue
new file mode 100644
index 0000000..9306f84
--- /dev/null
+++ b/client/src/views/GuideSafetyView.vue
@@ -0,0 +1,77 @@
+<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>Sicher chatten: Datenschutz im Alltag</h2>
+      <p>
+        Privater Chat funktioniert am besten, wenn du bewusst entscheidest, welche Informationen du teilst. Viele
+        Risiken lassen sich mit wenigen Regeln vermeiden, ohne dass der Chat unpersoenlich wird.
+      </p>
+
+      <h3>Was du nicht teilen solltest</h3>
+      <ul>
+        <li>Telefonnummer, private E-Mail und Social-Media-Handles beim ersten Kontakt.</li>
+        <li>Adresse, Arbeitgeber, Schule oder feste Tagesroutinen.</li>
+        <li>Dokumente, Ticket-Screenshots oder Fotos mit sichtbaren sensiblen Daten.</li>
+      </ul>
+
+      <h3>Warnzeichen bei Gespraechen</h3>
+      <p>
+        Sei vorsichtig, wenn dein Gegenueber schnell Druck aufbaut, Geldthemen anspricht oder versucht, dich auf externe
+        Plattformen zu ziehen. Das sind haeufige Muster bei Spam und Betrug.
+      </p>
+
+      <h3>So reagierst du richtig</h3>
+      <ol>
+        <li>Gespraech beenden, wenn es sich unwohl anfuehlt.</li>
+        <li>Nutzer blockieren und problematische Inhalte nicht weiterverbreiten.</li>
+        <li>Vorfall kurz dokumentieren und ueber Feedback melden.</li>
+      </ol>
+
+      <p>
+        Ergaenzend empfehlen wir die Seite <router-link to="/sicherheit">Sicherheit</router-link> und den Artikel
+        <router-link to="/ratgeber/red-flags">Red Flags im Online-Chat</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>